|
|
|
@ -11,8 +11,9 @@ |
|
|
|
<div class="loginTitle"> |
|
|
|
<div class="title" v-text="isRegistered !== '1' ? '登录' : '用户注册'"></div> |
|
|
|
<div class="content"> |
|
|
|
<span v-text="isRegistered === '1' ? '已有账户？' : '第一次使用cereshop商城？'"></span> |
|
|
|
<u @click="registered" v-text="isRegistered === '1' ? '立即登录' : '用户注册'"></u></div> |
|
|
|
<span v-text="isRegistered === '1' ? '已有账户？' : '第一次使用Thee商城？'"></span> |
|
|
|
<u @click="registered" v-text="isRegistered === '1' ? '立即登录' : '用户注册'"></u> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="loginFormBox"> |
|
|
|
<div class="inputBox"> |
|
|
|
@ -20,28 +21,28 @@ |
|
|
|
<template slot="prepend"><span class="icon iconfont"></span></template> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="inputBox"> |
|
|
|
<el-input |
|
|
|
v-model="verificationCode" |
|
|
|
placeholder="请输入验证码" |
|
|
|
@keyup.enter.native="login" |
|
|
|
> |
|
|
|
<el-input v-model="verificationCode" placeholder="请输入验证码" @keyup.enter.native="login"> |
|
|
|
<template slot="prepend"> |
|
|
|
<span class="icon iconfont"></span> |
|
|
|
</template> |
|
|
|
</el-input> |
|
|
|
<div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span v-show="codeShow" class="codeBtn" @click="getCode">获取验证码</span> |
|
|
|
<span v-show="!codeShow" class="codeBtn codeCount">重新获取({{ codeCountNum }}s)</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="noLogin" :class="{ registered: isRegistered === '1' }"> |
|
|
|
<el-checkbox v-show="isRegistered === '2'" v-model="isNoLogin">七天免登录</el-checkbox> |
|
|
|
<span></span> |
|
|
|
</div> |
|
|
|
<el-button class="loginBtn" |
|
|
|
@click="login" |
|
|
|
v-text="isRegistered === '1' ? '注册' : '立即登录'" |
|
|
|
:loading="loadingLogin" |
|
|
|
>立即登录</el-button> |
|
|
|
<el-button class="loginBtn" @click="login" v-text="isRegistered === '1' ? '注册' : '立即登录'" |
|
|
|
:loading="loadingLogin">立即登录</el-button> |
|
|
|
</div> |
|
|
|
<div class="loginProtocol" v-if="isRegistered === '1'"> |
|
|
|
<el-checkbox v-model="haveRead"></el-checkbox> |
|
|
|
@ -50,10 +51,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog |
|
|
|
title="服务协议" |
|
|
|
:visible.sync="dialogAgreement" |
|
|
|
width="50%"> |
|
|
|
<el-dialog title="服务协议" :visible.sync="dialogAgreement" width="50%"> |
|
|
|
这是服务协议 |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
@ -229,6 +227,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
.loginCent { |
|
|
|
// background: url('../../assets/images/beijing.png') no-repeat; |
|
|
|
// flex-grow: 1; |
|
|
|
@ -242,69 +241,85 @@ export default { |
|
|
|
animation: showRight .5s; |
|
|
|
animation-fill-mode: forwards; |
|
|
|
-webkit-animation-fill-mode: forwards; |
|
|
|
|
|
|
|
nav { |
|
|
|
margin-bottom: 85px; |
|
|
|
|
|
|
|
.hiddenLoginBtn { |
|
|
|
a { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loginForm { |
|
|
|
width: 500px; |
|
|
|
height: 100%; |
|
|
|
background: #ffffff; |
|
|
|
|
|
|
|
.loginTitle { |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 36px; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
margin: 10px 0; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
u { |
|
|
|
color: #C5AA7B; |
|
|
|
color: $mainColor; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loginFormBox { |
|
|
|
.inputBox { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.el-input { |
|
|
|
.iconfont { |
|
|
|
font-size: 32px; |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-input__inner { |
|
|
|
height: 70px; |
|
|
|
background: #F3F4F5; |
|
|
|
|
|
|
|
border-radius: 0px; |
|
|
|
font-size: 20px; |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
margin: 60px 0 20px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.codeBtn { |
|
|
|
width: 120px; |
|
|
|
height: 50px; |
|
|
|
background: $mainGlod; |
|
|
|
background: #EEEEEE; |
|
|
|
border: #999999; |
|
|
|
border-radius: 0; |
|
|
|
display: block; |
|
|
|
line-height: 54px; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
right: 5px; |
|
|
|
color: #333333; |
|
|
|
bottom: 10px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.codeCount { |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noLogin { |
|
|
|
color: #333333; |
|
|
|
font-size: 18px; |
|
|
|
@ -313,11 +328,13 @@ export default { |
|
|
|
align-items: center; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
>>>.el-checkbox__label { |
|
|
|
font-size: 16px; |
|
|
|
color: #333333; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
cursor: pointer; |
|
|
|
font-size: 16px; |
|
|
|
@ -325,24 +342,28 @@ export default { |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.registered { |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.loginBtn { |
|
|
|
width: 100%; |
|
|
|
height: 70px; |
|
|
|
background: #333333; |
|
|
|
background: $mainColor; |
|
|
|
border-radius: 0; |
|
|
|
border: 1px solid #333333; |
|
|
|
border: 1px solid $mainColor; |
|
|
|
text-align: center; |
|
|
|
font-size: 20px; |
|
|
|
color: $mainGlod; |
|
|
|
color: $mainBtnFontColor; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
border: 1px solid $mainGlod; |
|
|
|
border: 1px solid $mainColor; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loginProtocol { |
|
|
|
padding: 0 60px; |
|
|
|
display: flex; |
|
|
|
@ -350,17 +371,21 @@ export default { |
|
|
|
height: 80px; |
|
|
|
line-height: 80px; |
|
|
|
border-top: 1px solid #EEEEEE; |
|
|
|
|
|
|
|
span { |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
span:nth-child(3) { |
|
|
|
color: #426BEA; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-checkbox__inner { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
|
|
|
|
&:after { |
|
|
|
height: 10px; |
|
|
|
left: 7px; |
|
|
|
@ -369,24 +394,27 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-dialog__body { |
|
|
|
max-height: 500px; |
|
|
|
min-height: 300px; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.hiddenLogin { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes showRight { |
|
|
|
from { |
|
|
|
width: 560px; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
to { |
|
|
|
width: 600px; |
|
|
|
opacity: 1; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
}</style> |
xh-pan1
1 year ago
