|
|
|
@ -2,16 +2,17 @@ |
|
|
|
<div class="login" :style="'background-image:url(' + Background + ');'"> |
|
|
|
<!-- 登录 --> |
|
|
|
<div v-if="getPassword" class="loginBox"> |
|
|
|
<div class="leftBox" /> |
|
|
|
<div class="rightBox"> |
|
|
|
<h2>商家登录</h2> |
|
|
|
<el-row><img src="../../assets/images/login_logo.png" class=" loginBox-logo"/></el-row> |
|
|
|
<div class="topText">商家登录</div> |
|
|
|
<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"> |
|
|
|
@ -30,9 +31,9 @@ |
|
|
|
maxlength="11" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入账户" |
|
|
|
class="iptHeight" |
|
|
|
class="iptHeight username" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
|
|
|
<i slot="prefix" class="el-input__icon icon-usericon"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="password"> |
|
|
|
@ -45,11 +46,11 @@ |
|
|
|
placeholder="请输入密码" |
|
|
|
@keyup.enter.native="handleAccountLogin" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
<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> |
|
|
|
|
|
|
|
@ -58,7 +59,7 @@ |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="primary" |
|
|
|
style="width: 100%; border-radius: 20px" |
|
|
|
class="btn-login" |
|
|
|
@click.native.prevent="handleAccountLogin" |
|
|
|
> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
@ -86,7 +87,7 @@ |
|
|
|
placeholder="请输入手机号码" |
|
|
|
class="iptHeight" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
|
|
|
<i slot="prefix" class="el-input__icon icon-phone"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="code"> |
|
|
|
@ -100,7 +101,7 @@ |
|
|
|
placeholder="请输入验证码" |
|
|
|
@keyup.enter.native="handlePhoneLogin" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
<i slot="prefix" class="el-input__icon icon-code"></i> |
|
|
|
</el-input> |
|
|
|
<div class="login-code"> |
|
|
|
<el-button |
|
|
|
@ -123,7 +124,7 @@ |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="primary" |
|
|
|
style="width: 100%; border-radius: 20px" |
|
|
|
class="btn-login" |
|
|
|
@click.native.prevent="handlePhoneLogin" |
|
|
|
> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
@ -136,11 +137,11 @@ |
|
|
|
</div> |
|
|
|
<!-- 找回密码 --> |
|
|
|
<div v-else class="loginBox"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span style="margin-left: 25px">找回密码</span> |
|
|
|
<span>找回密码</span> |
|
|
|
<el-button |
|
|
|
style="float: right; padding: 3px 0" |
|
|
|
style="float: right; padding: 0px 0" |
|
|
|
type="text" |
|
|
|
@click="getPassword=true" |
|
|
|
>返回登录</el-button> |
|
|
|
@ -162,7 +163,7 @@ |
|
|
|
placeholder="请输入手机号码" |
|
|
|
class="iptHeight" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
|
|
|
<i slot="prefix" class="el-input__icon icon-phone"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="code"> |
|
|
|
@ -176,7 +177,7 @@ |
|
|
|
placeholder="请输入验证码" |
|
|
|
@keyup.enter.native="forgetPwdFn" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
<i slot="prefix" class="el-input__icon icon-code"></i> |
|
|
|
</el-input> |
|
|
|
<div class="login-code"> |
|
|
|
<el-button |
|
|
|
@ -199,7 +200,7 @@ |
|
|
|
placeholder="新密码" |
|
|
|
class="iptHeight" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
<i slot="prefix" class="el-input__icon icon-password"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="password"> |
|
|
|
@ -211,15 +212,15 @@ |
|
|
|
placeholder="确认密码" |
|
|
|
class="iptHeight" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
</el-input> |
|
|
|
<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="forgetPwdFn" |
|
|
|
> |
|
|
|
<span v-if="!loading">确 认 修 改</span> |
|
|
|
@ -229,7 +230,7 @@ |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 底部 --> |
|
|
|
<div class="login-footer">© 2019 cereshop</div> |
|
|
|
@ -243,7 +244,7 @@ import { |
|
|
|
getUserId |
|
|
|
} from '@/utils/auth' // get token from cookie |
|
|
|
const TIME_COUNT = 60 // 更改倒计时时间 |
|
|
|
import Background from '@/assets/images/background.jpg' |
|
|
|
import Background from '@/assets/images/login_bg.png' |
|
|
|
import { getCode } from '@/api/account' |
|
|
|
const JM = require('@/utils/rsaEncrypt.js') |
|
|
|
export default { |
|
|
|
@ -285,11 +286,11 @@ export default { |
|
|
|
tabIndex: 0, |
|
|
|
activeList: [ |
|
|
|
{ |
|
|
|
name: '账户密码登录', |
|
|
|
name: '账户密码', |
|
|
|
id: 0 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '手机号码登录', |
|
|
|
name: '手机号码', |
|
|
|
id: 1 |
|
|
|
} |
|
|
|
], |
|
|
|
@ -499,6 +500,46 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss"> |
|
|
|
.topText { |
|
|
|
font-size: 23px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #183ECD; |
|
|
|
line-height: 43px; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
.login { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
@ -507,40 +548,78 @@ export default { |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.loginBox { |
|
|
|
width: 900px !important; |
|
|
|
height: 600px; |
|
|
|
width: 840px !important; |
|
|
|
height: 538px; |
|
|
|
display: flex; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 20px; |
|
|
|
background-image:url(../../assets/images/login_center_bg.png) ; |
|
|
|
background-size:cover; |
|
|
|
} |
|
|
|
.loginBox-logo{ |
|
|
|
width: 34px; |
|
|
|
height: 34px; |
|
|
|
} |
|
|
|
.leftBox { |
|
|
|
width: 325px; |
|
|
|
width: 50px; |
|
|
|
height: 250px; |
|
|
|
margin: 180px 0 0 30px; |
|
|
|
background: url("../../assets/images/home-content.png") 50% no-repeat; |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.rightBox { |
|
|
|
margin: auto; |
|
|
|
margin-left: 85px; |
|
|
|
margin-top: 68px; |
|
|
|
width: 300px; |
|
|
|
|
|
|
|
h2 { |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.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: 12px; |
|
|
|
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: 12px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #183ECD; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.touch-space{ |
|
|
|
width:24px; |
|
|
|
height:1px; |
|
|
|
} |
|
|
|
.boxBottom { |
|
|
|
display: flex; |
|
|
|
@ -549,6 +628,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 { |
|
|
|
@ -558,10 +641,8 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.login-form { |
|
|
|
border-radius: 6px; |
|
|
|
background: #ffffff; |
|
|
|
width: 385px; |
|
|
|
padding: 25px 25px 5px 25px; |
|
|
|
padding-top: 25px; |
|
|
|
padding-bottom: 25px; |
|
|
|
.el-input { |
|
|
|
height: 38px; |
|
|
|
input { |
|
|
|
@ -575,17 +656,21 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.iptHeight { |
|
|
|
height: 54px !important; |
|
|
|
border-radius: 3px; |
|
|
|
height: 40px !important; |
|
|
|
background: #F9F9F9; |
|
|
|
input { |
|
|
|
height: 54px !important; |
|
|
|
height: 40px !important; |
|
|
|
background: #F9F9F9; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
span { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.input-icon { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
.login-tip { |
|
|
|
@ -596,7 +681,7 @@ export default { |
|
|
|
.login-code { |
|
|
|
float: right; |
|
|
|
.codeBtn { |
|
|
|
height: 54px; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@ -613,8 +698,9 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
.clearfix { |
|
|
|
width: 50%; |
|
|
|
margin: 10% auto; |
|
|
|
margin-left: 85px; |
|
|
|
margin-top: 68px; |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
} |
|
|
|
.login-footer { |
|
|
|
@ -622,5 +708,11 @@ export default { |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.btn-login{ |
|
|
|
width: 100%; |
|
|
|
border-radius: 3px; |
|
|
|
background-image: linear-gradient(to right, #183ecd,#4184ed); |
|
|
|
} |
|
|
|
</style> |
xh-pan1
2 years ago
