You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
372 lines
9.4 KiB
372 lines
9.4 KiB
<template> |
|
<div class="login"> |
|
<img |
|
src="../assets/images/index_img_top.png" |
|
class="login_img_top" |
|
alt="" |
|
/> |
|
<img |
|
src="../assets/images/index_img_down.png" |
|
class="login_img_down" |
|
alt="" |
|
/> |
|
<div class="sys-title">铭汉能耗监测控制系统</div> |
|
<el-form |
|
ref="loginForm" |
|
:model="loginForm" |
|
:rules="loginRules" |
|
class="login-form" |
|
> |
|
<h3 class="title">用户登录</h3> |
|
<el-form-item prop="username"> |
|
<el-input |
|
v-model="loginForm.username" |
|
type="text" |
|
clearable |
|
auto-complete="off" |
|
placeholder="账号" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="login_icon_user" |
|
class="el-input__icon input-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item prop="password"> |
|
<el-input |
|
ref="password" |
|
v-model="loginForm.password" |
|
:key="passwordType" |
|
:type="passwordType" |
|
auto-complete="off" |
|
placeholder="请输入密码" |
|
@keyup.enter.native="handleLogin" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="login_icon_key" |
|
class="el-input__icon input-icon" |
|
/> |
|
<span class="show-pwd" slot="suffix"> |
|
<svg-icon |
|
@click="showPwd" |
|
:icon-class=" |
|
passwordType === 'password' |
|
? 'login_icon_hide' |
|
: 'login_icon_eye' |
|
" |
|
/> |
|
</span> |
|
</el-input> |
|
</el-form-item> |
|
<!-- <el-checkbox |
|
v-model="loginForm.rememberMe" |
|
style="margin: 0px 0px 25px 0px" |
|
>记住密码</el-checkbox |
|
> --> |
|
<el-form-item> |
|
<div class="primary-btn" style="width: 100%"> |
|
<el-button |
|
:loading="loading" |
|
size="medium" |
|
type="primary" |
|
style="width: 100%; height: 53px" |
|
@click.native.prevent="handleLogin" |
|
> |
|
<span v-if="!loading">登 录</span> |
|
<span v-else>登 录 中...</span> |
|
</el-button> |
|
</div> |
|
<div style="float: right" v-if="register"> |
|
<router-link class="link-type" :to="'/register'" |
|
>立即注册</router-link |
|
> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { getCodeImg } from "@/api/login"; |
|
import Cookies from "js-cookie"; |
|
import { encrypt, decrypt } from "@/utils/jsencrypt"; |
|
|
|
export default { |
|
name: "Login", |
|
data() { |
|
return { |
|
codeUrl: "", |
|
loginForm: { |
|
username: "", |
|
password: "", |
|
rememberMe: false, |
|
code: "", |
|
uuid: "", |
|
}, |
|
passwordType: "password", |
|
loginRules: { |
|
username: [ |
|
{ required: true, trigger: "blur", message: "请输入您的账号" }, |
|
], |
|
password: [ |
|
{ required: true, trigger: "blur", message: "请输入您的密码" }, |
|
], |
|
code: [{ required: true, trigger: "change", message: "请输入验证码" }], |
|
}, |
|
loading: false, |
|
// 验证码开关 |
|
captchaEnabled: true, |
|
// 注册开关 |
|
register: false, |
|
redirect: undefined, |
|
}; |
|
}, |
|
watch: { |
|
$route: { |
|
handler: function (route) { |
|
this.redirect = route.query && route.query.redirect; |
|
}, |
|
immediate: true, |
|
}, |
|
}, |
|
created() { |
|
this.getCode(); |
|
this.getCookie(); |
|
}, |
|
methods: { |
|
showPwd() { |
|
if (this.passwordType === "password") { |
|
this.passwordType = ""; |
|
} else { |
|
this.passwordType = "password"; |
|
} |
|
this.$nextTick(() => { |
|
this.$refs.password.focus(); |
|
}); |
|
}, |
|
getCode() { |
|
getCodeImg().then((res) => { |
|
this.captchaEnabled = |
|
res.captchaEnabled === undefined ? true : res.captchaEnabled; |
|
if (this.captchaEnabled) { |
|
this.codeUrl = "data:image/gif;base64," + res.img; |
|
this.loginForm.uuid = res.uuid; |
|
} |
|
}); |
|
}, |
|
getCookie() { |
|
const username = Cookies.get("username"); |
|
const password = Cookies.get("password"); |
|
const rememberMe = Cookies.get("rememberMe"); |
|
this.loginForm = { |
|
username: username === undefined ? this.loginForm.username : username, |
|
password: |
|
password === undefined ? this.loginForm.password : decrypt(password), |
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
|
}; |
|
}, |
|
handleLogin() { |
|
this.$refs.loginForm.validate((valid) => { |
|
if (valid) { |
|
this.loading = true; |
|
if (this.loginForm.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(() => {}); |
|
}) |
|
.catch(() => { |
|
this.loading = false; |
|
if (this.captchaEnabled) { |
|
this.getCode(); |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style rel="stylesheet/scss" lang="scss"> |
|
.login { |
|
background-color: #062140; |
|
background-image: url("../assets/images/login-background.png"); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
width: 100%; |
|
height: 100vh; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
position: relative; |
|
.sys-title { |
|
position: absolute; |
|
top: 0.02rem; |
|
font-family: SourceHanSansCN-Regular; |
|
font-size: 0.4rem; |
|
line-height: 0.55rem; |
|
letter-spacing: 0.03rem; |
|
color: #fff9f9; |
|
text-shadow: 0rem 0.02rem 0.01rem rgba(0, 0, 0, 0.32); |
|
} |
|
.login_img_top { |
|
position: absolute; |
|
top: 0; |
|
width: 18.27rem; |
|
height: 1.13rem; |
|
} |
|
.login_img_down { |
|
position: absolute; |
|
bottom: 0; |
|
width: 18.66rem; |
|
} |
|
} |
|
|
|
.login-form { |
|
position: absolute; |
|
right: 2.84rem; |
|
background: transparent; |
|
width: 508px; |
|
height: 542px; |
|
background-image: url("../assets/images/login_form.png"); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
padding: 133px 84px 86px 84px; |
|
.title { |
|
margin: 0px auto 48px auto; |
|
text-align: center; |
|
font-family: YouSheBiaoTiHei; |
|
font-size: 34px; |
|
line-height: 25px; |
|
letter-spacing: 0px; |
|
text-shadow: 0px 2px 1px rgba(120, 200, 247, 0.3); |
|
background-image: linear-gradient(to bottom, #ffffff, #b0dbff); |
|
background-clip: text; |
|
-webkit-background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.el-input { |
|
height: 56px; |
|
color: #fff; |
|
input { |
|
height: 56px; |
|
} |
|
} |
|
.el-input__inner { |
|
border: solid 2px #0662a4; |
|
background-color: transparent; |
|
color: #fff; |
|
font-size: 16px; |
|
} |
|
.el-form-item { |
|
margin-bottom: 38px; |
|
} |
|
.el-input__prefix, |
|
.el-input__suffix { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.el-input--prefix .el-input__inner { |
|
padding-left: 57px; |
|
padding-top: 19px; |
|
padding-bottom: 19px; |
|
} |
|
.input-icon { |
|
height: 24px; |
|
width: 24px; |
|
margin-left: 13px; |
|
} |
|
.show-pwd { |
|
margin-right: 5px; |
|
font-size: 16px; |
|
cursor: pointer; |
|
user-select: none; |
|
} |
|
} |
|
|
|
@media (min-width: 800px) and (max-width: 1150px) { |
|
.login-form { |
|
transform: scale(0.85); /* 缩小到80%的大小 */ |
|
transform-origin: center; /* 确保缩放是以div中心为基准 */ |
|
transition: all 0.5s; |
|
right: 0.8rem; |
|
} |
|
} |
|
@media (max-width: 750px) { |
|
.login-form { |
|
transform: scale(0.8); /* 缩小到80%的大小 */ |
|
transform-origin: center; /* 确保缩放是以div中心为基准 */ |
|
right: auto !important; |
|
} |
|
} |
|
@media (max-width: 450px) { |
|
.login-form { |
|
transform: scale(0.7); /* 缩小到80%的大小 */ |
|
transform-origin: center; /* 确保缩放是以div中心为基准 */ |
|
right: auto !important; |
|
} |
|
} |
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
@media (min-width: 2000px) { |
|
.login-form { |
|
width: 5.08rem !important; |
|
height: 5.42rem !important; |
|
padding: 1.33rem 0.84rem 0.84rem 0.84rem !important; |
|
.title { |
|
margin: 0px auto 0.48rem auto !important; |
|
font-size: 0.34rem !important; |
|
line-height: 0.25rem !important; |
|
} |
|
|
|
.el-input { |
|
height: 0.56rem !important; |
|
input { |
|
height: 0.56rem !important; |
|
} |
|
} |
|
.el-input__inner { |
|
border: solid 0.02rem #0662a4 !important; |
|
font-size: 0.16rem !important; |
|
} |
|
.el-form-item { |
|
margin-bottom: 0.28rem !important; |
|
} |
|
.el-input--prefix .el-input__inner { |
|
padding-left: 0.57rem !important; |
|
padding-top: 0.19rem !important; |
|
padding-bottom: 0.19rem !important; |
|
} |
|
.input-icon { |
|
height: 0.24rem !important; |
|
width: 0.24rem !important; |
|
margin-left: 0.13rem !important; |
|
} |
|
.show-pwd { |
|
margin-right: 0.05rem !important; |
|
font-size: 0.16rem !important; |
|
} |
|
.el-button--medium{ |
|
height: 0.53rem !important; |
|
} |
|
} |
|
} |
|
</style>
|
|
|