|
|
|
@ -1,70 +1,113 @@ |
|
|
|
<template> |
|
|
|
<div class="login"> |
|
|
|
<div class="header"> |
|
|
|
<img src="@/assets/logo/log-tianhui.png" style=" margin-bottom: 10px"/> |
|
|
|
<img src="@/assets/logo/log-tianhui.png" style="margin-bottom: 10px" /> |
|
|
|
<div class="text-wr" style="display: flex; align-items: center"> |
|
|
|
<div style="height: 1px;width: 42px; background: #F4F4F4"></div> |
|
|
|
<!-- <div style="font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF; margin: 0 15px">基于人工智能的双创服务平台</div>--> |
|
|
|
<div style="font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF; margin: 0 15px">安全知识图谱管理平台后台</div> |
|
|
|
<div style="height: 1px;width: 42px; background: #F4F4F4"></div> |
|
|
|
<div style="height: 1px; width: 42px; background: #f4f4f4"></div> |
|
|
|
<!-- <div style="font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF; margin: 0 15px">广东省水工程建设管理系统</div>--> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
margin: 0 15px; |
|
|
|
" |
|
|
|
> |
|
|
|
安全知识图谱管理平台后台 |
|
|
|
</div> |
|
|
|
<div style="height: 1px; width: 42px; background: #f4f4f4"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="wrapper" > |
|
|
|
<div class="wrapper"> |
|
|
|
<div class="lt"> |
|
|
|
<img src="@/assets/image/login/bg.png" style="width: 279px"/> |
|
|
|
<img src="@/assets/image/login/bg.png" style="width: 279px" /> |
|
|
|
</div> |
|
|
|
<div class="rt"> |
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
|
|
|
<h3 class="title" style="color: rgba(10, 13, 33, 0.91);font-size: 22px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC;">欢迎登录系统</h3> |
|
|
|
<el-form-item prop="username"> |
|
|
|
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入您的账号"> |
|
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
|
|
|
</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" |
|
|
|
<el-form |
|
|
|
ref="loginForm" |
|
|
|
:model="loginForm" |
|
|
|
:rules="loginRules" |
|
|
|
class="login-form" |
|
|
|
> |
|
|
|
<h3 |
|
|
|
class="title" |
|
|
|
style=" |
|
|
|
color: rgba(10, 13, 33, 0.91); |
|
|
|
font-size: 22px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
</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-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />--> |
|
|
|
<!-- </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" |
|
|
|
style="width:100%; background: #3448d8; border: 0; " |
|
|
|
@click.native.prevent="handleLogin" |
|
|
|
欢迎登录系统 |
|
|
|
</h3> |
|
|
|
<el-form-item prop="username"> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.username" |
|
|
|
type="text" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入您的账号" |
|
|
|
> |
|
|
|
<svg-icon |
|
|
|
slot="prefix" |
|
|
|
icon-class="user" |
|
|
|
class="el-input__icon input-icon" |
|
|
|
/> |
|
|
|
</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-icon |
|
|
|
slot="prefix" |
|
|
|
icon-class="password" |
|
|
|
class="el-input__icon input-icon" |
|
|
|
/> |
|
|
|
</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-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />--> |
|
|
|
<!-- </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" |
|
|
|
style="width: 100%; background: #3448d8; border: 0" |
|
|
|
@click.native.prevent="handleLogin" |
|
|
|
> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
font-size: 12px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #3346da; |
|
|
|
text-align: center; |
|
|
|
" |
|
|
|
> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
<div style="font-size: 12px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #3346DA; text-align: center">提示：若忘记账号或密码，请联系管理人员</div> |
|
|
|
</el-form> |
|
|
|
提示：若忘记账号或密码，请联系管理人员 |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -75,8 +118,7 @@ color: #3346DA; text-align: center">提示：若忘记账号或密码，请联 |
|
|
|
<script> |
|
|
|
import { getCodeImg } from "@/api/login"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
import { encrypt, decrypt,encryptParam } from '@/utils/jsencrypt' |
|
|
|
|
|
|
|
import { encrypt, decrypt, encryptParam } from "@/utils/jsencrypt"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "Login", |
|
|
|
@ -84,34 +126,34 @@ export default { |
|
|
|
return { |
|
|
|
codeUrl: "", |
|
|
|
cookiePassword: "", |
|
|
|
publicKey:"", |
|
|
|
publicKey: "", |
|
|
|
loginForm: { |
|
|
|
username: "", |
|
|
|
password: "", |
|
|
|
rememberMe: false, |
|
|
|
code: "", |
|
|
|
uuid: "" |
|
|
|
uuid: "", |
|
|
|
}, |
|
|
|
loginRules: { |
|
|
|
username: [ |
|
|
|
{ required: true, trigger: "blur", message: "用户名不能为空" } |
|
|
|
{ required: true, trigger: "blur", message: "用户名不能为空" }, |
|
|
|
], |
|
|
|
password: [ |
|
|
|
{ required: true, trigger: "blur", message: "密码不能为空" } |
|
|
|
{ required: true, trigger: "blur", message: "密码不能为空" }, |
|
|
|
], |
|
|
|
// code: [{ required: true, trigger: "change", message: "验证码不能为空" }] |
|
|
|
}, |
|
|
|
loading: false, |
|
|
|
redirect: undefined |
|
|
|
redirect: undefined, |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
$route: { |
|
|
|
handler: function(route) { |
|
|
|
handler: function (route) { |
|
|
|
this.redirect = route.query && route.query.redirect; |
|
|
|
}, |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// this.getCode(); |
|
|
|
@ -128,25 +170,30 @@ export default { |
|
|
|
getCookie() { |
|
|
|
const username = Cookies.get("username"); |
|
|
|
const password = Cookies.get("password"); |
|
|
|
const rememberMe = Cookies.get('rememberMe') |
|
|
|
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) |
|
|
|
password: |
|
|
|
password === undefined ? this.loginForm.password : decrypt(password), |
|
|
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
|
|
|
}; |
|
|
|
}, |
|
|
|
handleLogin() { |
|
|
|
this.$refs.loginForm.validate(valid => { |
|
|
|
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 }); |
|
|
|
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.remove("rememberMe"); |
|
|
|
} |
|
|
|
// this.loginForm.password = encryptParam(this.loginForm.password,this.publicKey); |
|
|
|
// this.loginForm.password = encrypt(this.loginForm.password); |
|
|
|
@ -154,7 +201,6 @@ export default { |
|
|
|
.dispatch("Login", this.loginForm) |
|
|
|
.then(() => { |
|
|
|
this.$router.push({ path: this.redirect || "/" }); |
|
|
|
|
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.loading = false; |
|
|
|
@ -162,8 +208,8 @@ export default { |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -174,8 +220,9 @@ export default { |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 100%; |
|
|
|
background-color: #122c7d; |
|
|
|
// background-color: #122c7d; |
|
|
|
/*background-image: url("../assets/image/login-background.jpg");*/ |
|
|
|
background: linear-gradient(270deg, #3d9ccc 1%, #83b36b 100%); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.title { |
|
|
|
@ -206,7 +253,7 @@ export default { |
|
|
|
justify-content: space-between; |
|
|
|
width: 650px; |
|
|
|
height: 391px; |
|
|
|
background: #FFFFFF; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 6px 16px 2px rgba(10, 20, 94, 0.48); |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
|
xzt
2 years ago
