243 lines
9.5 KiB
Vue
243 lines
9.5 KiB
Vue
<template>
|
|
<div class="login">
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
|
|
<div style="margin-bottom: 40px;">
|
|
<img style="height: 40px;" src="@/assets/logo/loginlogo.png" alt="">
|
|
</div>
|
|
<div class="login-form">
|
|
<h3 class="title">西南交大信息学院官网后台管理系统</h3>
|
|
<el-form-item prop="username">
|
|
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
|
<svg slot="prefix" t="1642860611068" class="icon el-input__icon input-icon" viewBox="0 0 1024 1024"
|
|
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="988" width="200" height="200">
|
|
<path
|
|
d="M657.408 567.808c89.088-49.152 149.504-144.384 149.504-253.952 0-160.256-130.048-289.792-289.792-289.792S227.328 154.112 227.328 314.368c0 109.056 60.416 204.288 149.504 253.952-187.904 59.392-323.584 235.008-323.584 442.368h57.856c0-224.256 181.76-406.016 406.016-406.016s406.016 181.76 406.016 406.016h57.856c0-207.872-135.68-383.488-323.584-442.88zM285.184 314.368C285.184 185.856 389.12 81.92 517.12 81.92s231.936 103.936 231.936 231.936-103.936 232.448-231.936 232.448-231.936-103.936-231.936-231.936z"
|
|
p-id="989"></path>
|
|
</svg>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
type="password"
|
|
auto-complete="off"
|
|
placeholder="密码"
|
|
@keyup.enter.native="handleLogin"
|
|
>
|
|
<svg slot="prefix" t="1642860660377" class="icon el-input__icon input-icon" viewBox="0 0 1024 1024"
|
|
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1123" width="200" height="200">
|
|
<path
|
|
d="M527.36 561.152c-46.592 0-84.48 37.888-84.48 84.48 0 33.792 19.968 62.464 48.128 75.776v93.184c0 19.968 16.384 36.352 36.352 36.352 19.968 0 36.352-16.384 36.352-36.352V721.92c28.672-13.824 48.128-42.496 48.128-75.776 0-47.104-37.376-84.992-84.48-84.992z m350.72-169.472H153.088c-39.936 0-72.704 32.256-72.704 72.704v483.328c0 39.936 32.256 72.704 72.704 72.704h724.992c39.936 0 72.704-32.256 72.704-72.704V464.384c-0.512-40.448-32.768-72.704-72.704-72.704z m0 507.392c0 39.936-8.192 48.128-48.128 48.128H201.216c-39.936 0-48.128-8.192-48.128-48.128v-386.56c0-39.936 8.192-48.128 48.128-48.128H829.44c39.936 0 48.128 8.192 48.128 48.128v386.56zM173.056 355.328c19.968 0 36.352-15.872 36.864-35.84 32.768-138.24 157.184-241.664 305.664-241.664 116.224 0 217.088 62.976 271.36 156.672 5.632 12.8 18.432 21.504 33.28 21.504 19.968 0 36.352-16.384 36.352-36.352 0-7.68-2.56-15.36-6.656-20.992C782.848 83.456 658.432 5.12 515.584 5.12c-186.88 0-342.528 128.512-378.88 304.64 0 1.024-0.512 1.536-0.512 2.048 0 1.024-0.512 1.536-0.512 2.56v3.584c0 20.992 16.896 37.376 37.376 37.376z"
|
|
p-id="1124"></path>
|
|
</svg>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="code">
|
|
<el-input
|
|
v-model="loginForm.code"
|
|
auto-complete="off"
|
|
placeholder="验证码"
|
|
style="width: 63%"
|
|
@keyup.enter.native="handleLogin"
|
|
>
|
|
<svg slot="prefix" t="1642860586781" class="icon el-input__icon input-icon" viewBox="0 0 1024 1024"
|
|
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="853" width="200" height="200">
|
|
<path
|
|
d="M517.094527 1024c-153.345274 0-438.129353-228.234826-438.129353-444.242786V167.60995c0-10.189055 8.151244-17.830846 18.849751-18.340298l24.963184-0.509453c1.018905 0 98.324378-2.037811 198.686568-41.775124C423.864677 66.228856 490.093532 19.359204 491.112438 18.849751l14.774129-10.189054c3.056716-2.037811 7.132338-3.566169 11.20796-3.56617 4.075622 0 8.151244 1.018905 11.207961 3.56617l14.774129 10.698507c0.509453 0.509453 67.247761 47.379104 170.157214 88.135323 100.362189 39.737313 197.667662 41.775124 198.686567 41.775125l24.453731 0.509452c10.189055 0 18.849751 8.151244 18.849752 18.340299v412.147264c0 215.498507-284.78408 443.733333-438.129354 443.733333z m370.881592-808.501493c-37.699502-3.056716-117.174129-12.736318-199.196019-45.341293-84.569154-33.114428-146.212935-70.304478-171.685573-87.116418-25.472637 16.302488-87.116418 54.00199-171.685572 87.116418-82.021891 32.604975-160.987065 42.284577-199.19602 45.341293v364.258707c0 169.138308 248.103483 376.485572 370.881592 376.485572 47.379104 0 140.099502-38.718408 230.78209-123.287562 87.625871-81.512438 140.099502-176.270647 140.099502-253.19801V215.498507z m-406.03383 433.544279c-6.113433 6.622886-14.774129 10.189055-23.944279 10.189055-9.170149 0-17.321393-3.566169-23.944279-10.189055l-101.381094-101.890547a33.827662 33.827662 0 0 1 0-47.888557c13.245771-13.245771 34.133333-13.245771 47.379104-0.509453l0.509453 0.509453 77.436816 77.946268 195.120398-196.648756c12.736318-13.245771 34.133333-13.245771 47.379104-0.509453l0.509453 0.509453c13.245771 13.245771 13.245771 34.642786 0 47.888557l-219.064676 220.593035z"
|
|
p-id="854"></path>
|
|
</svg>
|
|
</el-input>
|
|
<div class="login-code">
|
|
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
|
</div>
|
|
</el-form-item>
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
|
<el-form-item style="width:100%;">
|
|
<el-button
|
|
:loading="loading"
|
|
size="medium"
|
|
type="primary"
|
|
plain
|
|
style="width:100%;"
|
|
@click.native.prevent="handleLogin"
|
|
>
|
|
<span v-if="!loading">登 录</span>
|
|
<span v-else>登 录 中...</span>
|
|
</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<!-- 底部 -->
|
|
<div class="el-login-footer">
|
|
<span>Copyright © 2020-2021 </span>
|
|
</div>
|
|
</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: "",
|
|
cookiePassword: "",
|
|
loginForm: {
|
|
username: "",
|
|
password: "",
|
|
rememberMe: false,
|
|
code: "",
|
|
uuid: ""
|
|
},
|
|
loginRules: {
|
|
username: [
|
|
{required: true, trigger: "blur", message: "用户名不能为空"}
|
|
],
|
|
password: [
|
|
{required: true, trigger: "blur", message: "密码不能为空"}
|
|
],
|
|
code: [{required: true, trigger: "change", message: "验证码不能为空"}]
|
|
},
|
|
loading: false,
|
|
redirect: undefined
|
|
};
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler: function (route) {
|
|
this.redirect = route.query && route.query.redirect;
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
this.getCode();
|
|
this.getCookie();
|
|
},
|
|
methods: {
|
|
getCode() {
|
|
getCodeImg().then(res => {
|
|
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 || "/monitor/server"});
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
this.getCode();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
.el-input__inner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.login {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
background-image: url("../assets/image/login-background.jpg");
|
|
background-size: cover;
|
|
}
|
|
|
|
.title {
|
|
margin: 0px auto 30px auto;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.login-form {
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
width: 400px;
|
|
padding: 25px 25px 5px 25px;
|
|
|
|
.el-input {
|
|
height: 38px;
|
|
background-color: white;
|
|
border-radius: 6px;
|
|
|
|
input {
|
|
height: 38px;
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
height: 39px;
|
|
width: 14px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.login-tip {
|
|
font-size: 13px;
|
|
text-align: center;
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.login-code {
|
|
width: 33%;
|
|
height: 38px;
|
|
float: right;
|
|
|
|
img {
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.el-login-footer {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-family: Arial;
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.login-code-img {
|
|
height: 38px;
|
|
}
|
|
</style>
|