|
|
|
@ -1,77 +1,39 @@ |
|
|
|
<template> |
|
|
|
<div class="login"> |
|
|
|
<el-form |
|
|
|
ref="loginForm" |
|
|
|
:model="loginForm" |
|
|
|
:rules="loginRules" |
|
|
|
class="login-form" |
|
|
|
> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
|
|
|
<div style=" |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
padding-right: 20px; |
|
|
|
padding-bottom: 10px; |
|
|
|
" |
|
|
|
> |
|
|
|
"> |
|
|
|
<!-- <img src="../assets/image/login-logo.png" width="120px;" /> --> |
|
|
|
<div class="loginTitle" >欢迎登录</div> |
|
|
|
<div class="loginTitle">欢迎登录</div> |
|
|
|
</div> |
|
|
|
<div class="title">{{ '' }}</div> |
|
|
|
<el-form-item prop="username"> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.username" |
|
|
|
type="text" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入用户名" |
|
|
|
> |
|
|
|
<img |
|
|
|
slot="prefix" |
|
|
|
src="../assets/images/Vector.png" |
|
|
|
class="el-input__icon input-icon" |
|
|
|
/> |
|
|
|
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名"> |
|
|
|
<img slot="prefix" src="../assets/images/Vector.png" class="el-input__icon input-icon" /> |
|
|
|
</el-input> |
|
|
|
<!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> --> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="password"> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.password" |
|
|
|
type="password" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入密码" |
|
|
|
@keyup.enter.native="handleLogin" |
|
|
|
> |
|
|
|
<img |
|
|
|
slot="prefix" |
|
|
|
src="../assets/images/locked.png" |
|
|
|
class="el-input__icon input-icon" |
|
|
|
/> |
|
|
|
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" |
|
|
|
@keyup.enter.native="handleLogin"> |
|
|
|
<img slot="prefix" src="../assets/images/locked.png" class="el-input__icon input-icon" /> |
|
|
|
</el-input> |
|
|
|
<!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> --> |
|
|
|
</el-form-item> |
|
|
|
<Verify |
|
|
|
@success="capctchaCheckSuccess" |
|
|
|
:mode="'pop'" |
|
|
|
:captchaType="'blockPuzzle'" |
|
|
|
:imgSize="{ width: '330px', height: '155px' }" |
|
|
|
ref="verify" |
|
|
|
></Verify> |
|
|
|
<Verify @success="capctchaCheckSuccess" :mode="'pop'" :captchaType="'blockPuzzle'" |
|
|
|
:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 20px 0px;">记住密码</el-checkbox> |
|
|
|
<el-form-item style="width: 100%; text-align: center"> |
|
|
|
<el-button |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="goon" |
|
|
|
style="width: 100%" |
|
|
|
@click.native.prevent="handleLogin" |
|
|
|
> |
|
|
|
<el-button :loading="loading" size="medium" type="goon" style="width: 100%" @click.native.prevent="handleLogin"> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
</el-button> |
|
|
|
<div style="float: right" v-if="register"> |
|
|
|
<router-link class="link-type" :to="'/register'" |
|
|
|
>立即注册</router-link |
|
|
|
> |
|
|
|
<router-link class="link-type" :to="'/register'">立即注册</router-link> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -101,8 +63,10 @@ export default { |
|
|
|
title: "", // 系统标题 |
|
|
|
cookiePassword: "", |
|
|
|
loginForm: { |
|
|
|
username: "admin", |
|
|
|
password: "dxc123!@#", |
|
|
|
// username: "admin", |
|
|
|
// password: "dxc123!@#", |
|
|
|
username: "", |
|
|
|
password: "", |
|
|
|
rememberMe: false, |
|
|
|
code: "", |
|
|
|
uuid: "", |
|
|
|
@ -147,7 +111,7 @@ export default { |
|
|
|
capctchaCheckSuccess(params) { |
|
|
|
this.loginForm.code = params.captchaVerification; |
|
|
|
this.loading = true; |
|
|
|
console.log(this.loginForm.rememberMe,"======================="); |
|
|
|
console.log(this.loginForm.rememberMe, "======================="); |
|
|
|
if (this.loginForm.rememberMe == true) { |
|
|
|
Cookies.set("username", this.loginForm.username, { expires: 30 }); |
|
|
|
Cookies.set("password", encrypt(this.loginForm.password), { |
|
|
|
@ -162,7 +126,7 @@ export default { |
|
|
|
this.$store |
|
|
|
.dispatch("Login", this.loginForm) |
|
|
|
.then(() => { |
|
|
|
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
|
|
|
this.$router.push({ path: this.redirect || "/" }).catch(() => { }); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.loading = false; |
|
|
|
@ -172,11 +136,11 @@ export default { |
|
|
|
const username = Cookies.get("username"); |
|
|
|
const password = Cookies.get("password"); |
|
|
|
const rememberMe = Cookies.get("rememberMe"); |
|
|
|
console.log("rem",rememberMe); |
|
|
|
console.log("rem", rememberMe); |
|
|
|
this.loginForm = { |
|
|
|
username: username === undefined ? this.loginForm.username : username, |
|
|
|
password: |
|
|
|
password === undefined ? this.loginForm.password : decrypt(password), |
|
|
|
password === undefined ? this.loginForm.password : decrypt(password), |
|
|
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -188,23 +152,23 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
if (this.loginForm.rememberMe == true) { |
|
|
|
Cookies.set("username", this.loginForm.username, { expires: 30 }); |
|
|
|
Cookies.set("password", encrypt(this.loginForm.password), { |
|
|
|
expires: 30, |
|
|
|
}); |
|
|
|
Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 }); |
|
|
|
} else { |
|
|
|
Cookies.remove("username"); |
|
|
|
Cookies.remove("password"); |
|
|
|
Cookies.remove("rememberMe"); |
|
|
|
} |
|
|
|
Cookies.set("username", this.loginForm.username, { expires: 30 }); |
|
|
|
Cookies.set("password", encrypt(this.loginForm.password), { |
|
|
|
expires: 30, |
|
|
|
}); |
|
|
|
Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 }); |
|
|
|
} else { |
|
|
|
Cookies.remove("username"); |
|
|
|
Cookies.remove("password"); |
|
|
|
Cookies.remove("rememberMe"); |
|
|
|
} |
|
|
|
|
|
|
|
this.$store |
|
|
|
.dispatch("Login", this.loginForm) |
|
|
|
.then(() => { |
|
|
|
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
|
|
|
this.$router.push({ path: this.redirect || "/" }).catch(() => { }); |
|
|
|
this.getManageStation(); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
@ -218,7 +182,7 @@ export default { |
|
|
|
this.$cache.local.set("manageStation", res.msg); |
|
|
|
}); |
|
|
|
getConfigKey("sd.navigationBar").then((res) => { |
|
|
|
console.log(res,"res") |
|
|
|
console.log(res, "res") |
|
|
|
let sideTheme = "theme-blue"; |
|
|
|
if (res.msg == "0") { |
|
|
|
sideTheme = "theme-dark"; |
|
|
|
@ -253,33 +217,32 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped> |
|
|
|
|
|
|
|
::v-deep .el-input__inner { |
|
|
|
background-color: transparent !important; |
|
|
|
height:100%; |
|
|
|
font-size: 22px; |
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #07CAF6; |
|
|
|
margin-left:68px; |
|
|
|
} |
|
|
|
background-color: transparent !important; |
|
|
|
height: 100%; |
|
|
|
font-size: 22px; |
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #07CAF6; |
|
|
|
margin-left: 68px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-checkbox__label { |
|
|
|
color:#fff; |
|
|
|
font-size: 18px !important; |
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF !important; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
::v-deep .el-checkbox__label { |
|
|
|
color: #fff; |
|
|
|
font-size: 18px !important; |
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF !important; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
::v-deep .el-form-item__error { |
|
|
|
position: absolute; |
|
|
|
top:75px; |
|
|
|
} |
|
|
|
::v-deep .el-form-item__error { |
|
|
|
position: absolute; |
|
|
|
top: 75px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__inner::placeholder { |
|
|
|
::v-deep .el-input__inner::placeholder { |
|
|
|
color: #07CAF6; |
|
|
|
} |
|
|
|
|
|
|
|
@ -293,12 +256,13 @@ export default { |
|
|
|
.login::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
width:100%; |
|
|
|
width: 100%; |
|
|
|
height: 120px; |
|
|
|
background-image: url('../assets/images/login-head.png'); |
|
|
|
background-size: auto 100%; |
|
|
|
background-position: center center; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
margin: 0px auto 10px auto; |
|
|
|
font-size: 24px; |
|
|
|
@ -307,25 +271,27 @@ export default { |
|
|
|
letter-spacing: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.login-form::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left:-4px; |
|
|
|
top:0px; |
|
|
|
width:4px; |
|
|
|
height:100%; |
|
|
|
background:linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%); ; |
|
|
|
} |
|
|
|
.login-form::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: -4px; |
|
|
|
top: 0px; |
|
|
|
width: 4px; |
|
|
|
height: 100%; |
|
|
|
background: linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%); |
|
|
|
; |
|
|
|
} |
|
|
|
|
|
|
|
.login-form::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
right:-4px; |
|
|
|
top:0px; |
|
|
|
width:4px; |
|
|
|
height:100%; |
|
|
|
background:linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%); ; |
|
|
|
} |
|
|
|
.login-form::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
right: -4px; |
|
|
|
top: 0px; |
|
|
|
width: 4px; |
|
|
|
height: 100%; |
|
|
|
background: linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%); |
|
|
|
; |
|
|
|
} |
|
|
|
|
|
|
|
.login-form { |
|
|
|
position: absolute; |
|
|
|
@ -338,7 +304,7 @@ export default { |
|
|
|
border-radius: 0px 0px 0px 0px; |
|
|
|
opacity: 1; |
|
|
|
border: 4px solid #0C5963; |
|
|
|
padding:50px; |
|
|
|
padding: 50px; |
|
|
|
// margin-left: 50%; |
|
|
|
|
|
|
|
.loginTitle { |
|
|
|
@ -360,37 +326,43 @@ export default { |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid #01CFFE; |
|
|
|
background-color: transparent; |
|
|
|
margin-bottom: 12px;; |
|
|
|
margin-bottom: 12px; |
|
|
|
; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
input { |
|
|
|
border: 0; |
|
|
|
height: 35px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.input-icon { |
|
|
|
height: 28px; |
|
|
|
width: 28px; |
|
|
|
margin-left: 2px; |
|
|
|
position: relative; |
|
|
|
left:14px; |
|
|
|
top:18px; |
|
|
|
left: 14px; |
|
|
|
top: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.login-tip { |
|
|
|
font-size: 13px; |
|
|
|
text-align: center; |
|
|
|
color: #bfbfbf; |
|
|
|
} |
|
|
|
|
|
|
|
.login-code { |
|
|
|
width: 37%; |
|
|
|
height: 35px; |
|
|
|
float: right; |
|
|
|
|
|
|
|
img { |
|
|
|
cursor: pointer; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-login-footer { |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
@ -403,6 +375,7 @@ export default { |
|
|
|
font-size: 12px; |
|
|
|
letter-spacing: 1px; |
|
|
|
} |
|
|
|
|
|
|
|
.login-code-img { |
|
|
|
height: 35px; |
|
|
|
} |
|
|
|
@ -420,7 +393,5 @@ export default { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.el-button--goon:hover { |
|
|
|
|
|
|
|
} |
|
|
|
.el-button--goon:hover {} |
|
|
|
</style> |
|
|
|
|
Joe
1 year ago