|
|
|
@ -1,16 +1,24 @@ |
|
|
|
<template> |
|
|
|
<div class="login"> |
|
|
|
<!-- 登录 --> |
|
|
|
<div class="login-left"></div> |
|
|
|
<div class="login-right"> |
|
|
|
<img src="../../assets/images/login_yellow.png" class="login-right-yellow"/> |
|
|
|
<!-- 登录 --> |
|
|
|
<div v-if="getPassword" class="loginBox"> |
|
|
|
<el-row><img src="../../assets/images/login_logo.png" class=" loginBox-logo"/></el-row> |
|
|
|
<el-row class="loginBox-point-box" style="z-index: -99;"><img src="../../assets/images/login_point.png" class=" loginBox-point"/></el-row> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="getPassword" class="topText">平台登录</div> |
|
|
|
<div class="rightBox"> |
|
|
|
<div class="tabTouch"> |
|
|
|
<div |
|
|
|
<div class="tabTouch" |
|
|
|
v-for="(item, index) in activeList" |
|
|
|
:key="index" |
|
|
|
:class="[tabIndex != index ? 'touchOne' : 'touchTwo']" |
|
|
|
@click="touchTab(index)" |
|
|
|
>{{ item.name }}</div> |
|
|
|
><div :class="[tabIndex != index ? 'touchOne' : 'touchTwo']" |
|
|
|
@click="touchTab(index)"><span class="span-label">{{ item.name }}</span> </div> |
|
|
|
<div class="touch-space"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 账户密码登录 --> |
|
|
|
<div v-if="!tabIndex"> |
|
|
|
@ -29,8 +37,8 @@ |
|
|
|
maxlength="11" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入账户" |
|
|
|
class="iptHeight" |
|
|
|
/> |
|
|
|
class="iptHeight username" |
|
|
|
><i slot="prefix" class="el-input__icon icon-usericon"></i></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="password"> |
|
|
|
<el-input |
|
|
|
@ -41,10 +49,10 @@ |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入密码" |
|
|
|
@keyup.enter.native="handleLogin" |
|
|
|
/> |
|
|
|
><i slot="prefix" class="el-input__icon icon-password"></i></el-input> |
|
|
|
</el-form-item> |
|
|
|
<div class="boxBottom"> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">自动登录</el-checkbox> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0; font-size: 14px;">自动登录</el-checkbox> |
|
|
|
<div class="forgetPsd" @click="runForgetPassord">忘记密码</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -53,7 +61,7 @@ |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="primary" |
|
|
|
style="width: 100%; border-radius: 20px" |
|
|
|
class="btn-login" |
|
|
|
@click.native.prevent="handleLogin" |
|
|
|
> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
@ -80,7 +88,8 @@ |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入手机号码" |
|
|
|
class="iptHeight" |
|
|
|
/> |
|
|
|
> |
|
|
|
<i slot="prefix" class="el-input__icon icon-phone"></i></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="code"> |
|
|
|
<el-input |
|
|
|
@ -89,10 +98,10 @@ |
|
|
|
type="text" |
|
|
|
class="iptHeight" |
|
|
|
auto-complete="off" |
|
|
|
style="width: 63%" |
|
|
|
style="width: 70%" |
|
|
|
placeholder="请输入验证码" |
|
|
|
@keyup.enter.native="anhandleLogin" |
|
|
|
/> |
|
|
|
><i slot="prefix" class="el-input__icon icon-code"></i></el-input> |
|
|
|
<div class="login-code"> |
|
|
|
<el-button |
|
|
|
class="codeBtn" |
|
|
|
@ -106,7 +115,7 @@ |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<div class="boxBottom"> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">自动登录</el-checkbox> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0; font-size: 14px;">自动登录</el-checkbox> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-form-item style="width: 100%"> |
|
|
|
@ -114,10 +123,10 @@ |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="primary" |
|
|
|
style="width: 100%; border-radius: 20px" |
|
|
|
class="btn-login" |
|
|
|
@click.native.prevent="anhandleLogin" |
|
|
|
> |
|
|
|
<span v-if="!loading">登录</span> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
@ -129,11 +138,12 @@ |
|
|
|
<!-- 找回密码 --> |
|
|
|
<div v-else class="loginBoxs"> |
|
|
|
<div class="topback">找回密码</div> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span style="margin-left: 25px">找回密码</span> |
|
|
|
<span class="forgetbtnText">找回密码</span> |
|
|
|
<el-button |
|
|
|
style="float: right; padding: 3px 0" |
|
|
|
style="float: right; padding: 0px 0; color: #183ECD;" |
|
|
|
class="forgetbtnText" |
|
|
|
type="text" |
|
|
|
@click=" |
|
|
|
{ |
|
|
|
@ -158,7 +168,7 @@ |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入手机号码" |
|
|
|
class="iptHeight" |
|
|
|
/> |
|
|
|
><i slot="prefix" class="el-input__icon icon-phone"></i></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="code"> |
|
|
|
<el-input |
|
|
|
@ -167,9 +177,9 @@ |
|
|
|
type="text" |
|
|
|
class="iptHeight" |
|
|
|
auto-complete="off" |
|
|
|
style="width: 63%" |
|
|
|
style="width: 70%" |
|
|
|
placeholder="请输入验证码" |
|
|
|
/> |
|
|
|
><i slot="prefix" class="el-input__icon icon-code"></i></el-input> |
|
|
|
<div class="login-code"> |
|
|
|
<el-button |
|
|
|
class="codeBtn" |
|
|
|
@ -190,7 +200,7 @@ |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入密码" |
|
|
|
class="iptHeight" |
|
|
|
/> |
|
|
|
><i slot="prefix" class="el-input__icon icon-password"></i></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="newPassword"> |
|
|
|
<el-input |
|
|
|
@ -200,14 +210,14 @@ |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请再次输入密码" |
|
|
|
class="iptHeight" |
|
|
|
/> |
|
|
|
><i slot="prefix" class="el-input__icon icon-password"></i></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item style="width: 100%"> |
|
|
|
<el-button |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="primary" |
|
|
|
style="width: 100%; border-radius: 20px" |
|
|
|
class="btn-login" |
|
|
|
@click.native.prevent="resetPassword" |
|
|
|
> |
|
|
|
<span v-if="!loading">重 置 密 码</span> |
|
|
|
@ -217,10 +227,12 @@ |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 底部 --> |
|
|
|
<div class="login-footer">© 2019 cereshop</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -259,11 +271,11 @@ export default { |
|
|
|
tabIndex: 0, |
|
|
|
activeList: [ |
|
|
|
{ |
|
|
|
name: '账户密码登录', |
|
|
|
name: '账户登录', |
|
|
|
id: 0 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '手机号码登录', |
|
|
|
name: '手机登录', |
|
|
|
id: 1 |
|
|
|
} |
|
|
|
], |
|
|
|
@ -452,32 +464,125 @@ export default { |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss"> |
|
|
|
.topText { |
|
|
|
font-size: 40px; |
|
|
|
font-weight: bold; |
|
|
|
color: #ffffff; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
top: -70px; |
|
|
|
left: 105px; |
|
|
|
font-size: 23px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #183ECD; |
|
|
|
line-height: 59px; |
|
|
|
margin-top: 9px; |
|
|
|
} |
|
|
|
.icon-usericon{ |
|
|
|
background-image:url(../../assets/images/login_account.png) ; |
|
|
|
background-size:cover; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
background-size: cover; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
.icon-password{ |
|
|
|
background-image:url(../../assets/images/login_password.png); |
|
|
|
background-size:cover; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
background-size: cover; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
.icon-phone{ |
|
|
|
background-image:url(../../assets/images/login_phone.png) ; |
|
|
|
background-size:cover; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
background-size: cover; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
.icon-code{ |
|
|
|
background-image:url(../../assets/images/login_code.png) ; |
|
|
|
background-size:cover; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
background-size: cover; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
.el-checkbox__inner{ |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
} |
|
|
|
.el-checkbox__label{ |
|
|
|
font-size: 14px; |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
.el-form-item__content{ |
|
|
|
line-height: 36px; |
|
|
|
} |
|
|
|
.login { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-size: cover; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background-image: url('../../assets/images/background.jpg'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.login-left { |
|
|
|
flex:1; |
|
|
|
height: 100%; |
|
|
|
background-size: cover; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background-image: url('../../assets/images/login_bg.png'); |
|
|
|
background-position: center center; |
|
|
|
} |
|
|
|
|
|
|
|
.login-right { |
|
|
|
flex:1; |
|
|
|
height: 100%; |
|
|
|
background-size: cover; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.login-right-yellow { |
|
|
|
width: 119px; |
|
|
|
height: 128px; |
|
|
|
position: absolute; |
|
|
|
top: 0%; |
|
|
|
left: 0%; |
|
|
|
} |
|
|
|
.loginBox { |
|
|
|
width: 360px !important; |
|
|
|
height: 400px; |
|
|
|
width: 460px !important; |
|
|
|
height: 570px; |
|
|
|
background: #ffffff; |
|
|
|
position: absolute; |
|
|
|
flex-direction: column; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
.loginBox-logo{ |
|
|
|
width: 63px; |
|
|
|
height: 63px; |
|
|
|
} |
|
|
|
.loginBox-point-box{ |
|
|
|
margin-top: -6px; |
|
|
|
} |
|
|
|
.loginBox-point{ |
|
|
|
width: 112px; |
|
|
|
height: 28px; |
|
|
|
} |
|
|
|
.btn-login{ |
|
|
|
width: 100%; |
|
|
|
background-image: url('../../assets/images/pt-button.png'); |
|
|
|
background-position: center center; |
|
|
|
border-radius: 6px; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
.topback { |
|
|
|
width: 1000px; |
|
|
|
height: 100px; |
|
|
|
@ -488,10 +593,18 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.loginBoxs { |
|
|
|
width: 1000px; |
|
|
|
height: 660px; |
|
|
|
width: 460px; |
|
|
|
height: 570px; |
|
|
|
} |
|
|
|
.forgetbtnText { |
|
|
|
font-size: 16px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
line-height: 43px; |
|
|
|
} |
|
|
|
.rightBox { |
|
|
|
margin: auto; |
|
|
|
@ -504,20 +617,54 @@ export default { |
|
|
|
} |
|
|
|
.tabTouch { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-content: center; |
|
|
|
width: 360px; |
|
|
|
margin-left: 8px; |
|
|
|
flex-direction: row; |
|
|
|
// justify-content: space-around; |
|
|
|
// align-content: center; |
|
|
|
// width: 360px; |
|
|
|
// margin-left: 8px; |
|
|
|
} |
|
|
|
.touchOne { |
|
|
|
color: #666666; |
|
|
|
padding: 20px; |
|
|
|
width: 60px; |
|
|
|
height: 43px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.span-label{ |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
vertical-align: middle; |
|
|
|
font-size: 14px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
} |
|
|
|
.touchTwo { |
|
|
|
border-bottom: 1px solid #1890ff; |
|
|
|
padding: 20px; |
|
|
|
color: #1890ff; |
|
|
|
width: 60px; |
|
|
|
height: 43px; |
|
|
|
border-bottom: 1px solid #183ECD; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.span-label{ |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
vertical-align: middle; |
|
|
|
font-size: 14px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #183ECD; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.touch-space{ |
|
|
|
width:24px; |
|
|
|
height:1px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.boxBottom { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -525,6 +672,10 @@ export default { |
|
|
|
font-size: 14px; |
|
|
|
color: #1890ff; |
|
|
|
cursor: pointer; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #183ECD; |
|
|
|
line-height: 17px; |
|
|
|
} |
|
|
|
} |
|
|
|
.title { |
|
|
|
@ -536,7 +687,8 @@ export default { |
|
|
|
.login-form { |
|
|
|
border-radius: 6px; |
|
|
|
background: #ffffff; |
|
|
|
padding: 25px 25px 5px 25px; |
|
|
|
padding-top: 25px; |
|
|
|
padding-bottom: 25px; |
|
|
|
.el-input { |
|
|
|
height: 38px; |
|
|
|
input { |
|
|
|
@ -550,17 +702,21 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.iptHeight { |
|
|
|
height: 54px !important; |
|
|
|
border-radius: 3px; |
|
|
|
height: 48px !important; |
|
|
|
background: #F9F9F9; |
|
|
|
input { |
|
|
|
height: 54px !important; |
|
|
|
height: 48px !important; |
|
|
|
background: #F9F9F9; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
span { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.input-icon { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
.login-tip { |
|
|
|
@ -571,11 +727,11 @@ export default { |
|
|
|
.login-code { |
|
|
|
float: right; |
|
|
|
.codeBtn { |
|
|
|
height: 54px; |
|
|
|
height: 48px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 100px; |
|
|
|
width: 120px; |
|
|
|
background: #eeeeee; |
|
|
|
color: #666666; |
|
|
|
border: none; |
|
|
|
@ -588,7 +744,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
.clearfix { |
|
|
|
width: 50%; |
|
|
|
width: 100%; |
|
|
|
margin: 10% auto; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -597,5 +753,6 @@ export default { |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
</style> |
xh-pan1
2 years ago
