zhangzhang
1 year ago
10 changed files with 744 additions and 241 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 425 B |
@ -0,0 +1,461 @@ |
|||||
|
<template> |
||||
|
<div class="login"> |
||||
|
<!-- <Bg2 style=" width: 600px; height:800px; position: fixed; left: 100px; top:100px">发多少刚发的刚发的</Bg2> --> |
||||
|
<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> |
||||
|
<div class="title">{{ "" }}</div> |
||||
|
<el-form-item prop="username" style="margin-top: 40px"> |
||||
|
<el-input |
||||
|
v-model="loginForm.username" |
||||
|
type="text" |
||||
|
auto-complete="off" |
||||
|
placeholder="请输入用户名" |
||||
|
class="username" |
||||
|
> |
||||
|
<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" |
||||
|
class="password" |
||||
|
> |
||||
|
<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> |
||||
|
<el-checkbox |
||||
|
v-model="loginForm.rememberMe" |
||||
|
style="margin: 40px 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" |
||||
|
> |
||||
|
<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 |
||||
|
> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 底部 --> |
||||
|
<div class="el-login-footer"> |
||||
|
<!-- <span>Copyright ©hamdell All Rights Reserved.</span> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Cookies from "js-cookie"; |
||||
|
import { encrypt, decrypt } from "@/utils/jsencrypt"; |
||||
|
import Verify from "@/components/Verifition/Verify"; |
||||
|
import { getCaptchaOnOff } from "@/api/login.js"; |
||||
|
import { listOrder } from "@/api/payment/order"; |
||||
|
import { getUserDeptId } from "@/api/system/user"; |
||||
|
import { listTunnels } from "@/api/equipment/tunnel/api.js"; |
||||
|
import { getConfigKey } from "@/api/system/config.js"; |
||||
|
|
||||
|
import Bg2 from "@screen/components/Decorations/bg-2.vue"; |
||||
|
|
||||
|
export default { |
||||
|
components: { Verify, Bg2 }, |
||||
|
name: "Login", |
||||
|
data() { |
||||
|
return { |
||||
|
title: "", // 系统标题 |
||||
|
cookiePassword: "", |
||||
|
loginForm: { |
||||
|
// username: "admin", |
||||
|
// password: "dxc123!@#", |
||||
|
//dxc123!@# |
||||
|
username: "", |
||||
|
password: "", |
||||
|
rememberMe: false, |
||||
|
code: "", |
||||
|
uuid: "", |
||||
|
}, |
||||
|
loginRules: { |
||||
|
username: [ |
||||
|
{ required: true, trigger: "blur", message: "请输入您的账号" }, |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, trigger: "blur", message: "请输入您的密码" }, |
||||
|
], |
||||
|
}, |
||||
|
loading: false, |
||||
|
// 验证码开关 |
||||
|
captchaOnOff: false, |
||||
|
// 注册开关 |
||||
|
register: false, |
||||
|
redirect: undefined, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
$route: { |
||||
|
handler: function (route) { |
||||
|
this.redirect = route.query && route.query.redirect; |
||||
|
}, |
||||
|
immediate: true, |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
this.getCookie(); |
||||
|
//this.getCaptchaOnOffFun(); |
||||
|
this.title = systemConfig.title(systemConfig.systemType); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取验证码是否开启 |
||||
|
getCaptchaOnOffFun() { |
||||
|
getCaptchaOnOff().then((response) => { |
||||
|
this.captchaOnOff = response.captchaOnOff; |
||||
|
}); |
||||
|
}, |
||||
|
// 验证码 |
||||
|
capctchaCheckSuccess(params) { |
||||
|
this.loginForm.code = params.captchaVerification; |
||||
|
this.loading = true; |
||||
|
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), { |
||||
|
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; |
||||
|
}); |
||||
|
}, |
||||
|
getCookie() { |
||||
|
const username = Cookies.get("username"); |
||||
|
const password = Cookies.get("password"); |
||||
|
const rememberMe = Cookies.get("rememberMe"); |
||||
|
console.log("rem", 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() { |
||||
|
if (this.captchaOnOff) { |
||||
|
this.$refs.loginForm.validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.$refs.verify.show(); |
||||
|
} |
||||
|
}); |
||||
|
} 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"); |
||||
|
} |
||||
|
|
||||
|
this.$store |
||||
|
.dispatch("Login", this.loginForm) |
||||
|
.then(() => { |
||||
|
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
||||
|
// this.getManageStation(); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
getManageStation() { |
||||
|
getConfigKey("sd.moduleSwitch").then((res) => { |
||||
|
console.log(res, "管理站01"); |
||||
|
this.$cache.local.set("manageStation", res.msg); |
||||
|
}); |
||||
|
getConfigKey("sd.navigationBar").then((res) => { |
||||
|
console.log(res, "res"); |
||||
|
let sideTheme = "theme-blue"; |
||||
|
if (res.msg == "0") { |
||||
|
sideTheme = "theme-dark"; |
||||
|
} else { |
||||
|
sideTheme = "theme-blue"; |
||||
|
} |
||||
|
// console.log(res, "是否胡山隧道，胡山单独导航栏样式"); |
||||
|
this.$cache.local.set("navigationBar", res.msg); |
||||
|
this.$store.dispatch("settings/changeSetting", { |
||||
|
key: "sideTheme", |
||||
|
value: sideTheme, |
||||
|
}); |
||||
|
// this.sideTheme = val; |
||||
|
this.$cache.local.set( |
||||
|
"layout-setting", |
||||
|
`{ |
||||
|
"topNav":${this.$store.state.settings.topNav}, |
||||
|
"tagsView":${this.$store.state.settings.tagsView}, |
||||
|
"weatherView":${this.$store.state.settings.weatherView}, |
||||
|
"fixedHeader":${this.$store.state.settings.fixedHeader}, |
||||
|
"sidebarLogo":${this.$store.state.settings.sidebarLogo}, |
||||
|
"dynamicTitle":${this.$store.state.settings.dynamicTitle}, |
||||
|
"sideTheme":"${sideTheme}", |
||||
|
"theme":"${this.$store.state.settings.theme}" |
||||
|
}` |
||||
|
); |
||||
|
// console.log(this.$store.state.settings.sideTheme) |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</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; |
||||
|
} |
||||
|
|
||||
|
::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-input__inner::placeholder { |
||||
|
color: #07caf6; |
||||
|
} |
||||
|
|
||||
|
.login { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
background-image: url("../assets/images/login-background.png"); |
||||
|
// background-size: 100% auto; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.login::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 120px; |
||||
|
background-image: url("../assets/images/login-head.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: auto 100%; |
||||
|
background-position: center center; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
margin: 0px auto 10px auto; |
||||
|
font-size: 24px; |
||||
|
text-align: center; |
||||
|
color: #353f55; |
||||
|
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::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; |
||||
|
left: 50%; |
||||
|
top: 20%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 400px; |
||||
|
height: 500px; |
||||
|
background: #00000080; |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
opacity: 1; |
||||
|
border: 4px solid #0c5963; |
||||
|
padding: 50px; |
||||
|
// margin-left: 50%; |
||||
|
|
||||
|
.loginTitle { |
||||
|
display: inline-flex; |
||||
|
width: 100%; |
||||
|
height: 45px; |
||||
|
font-size: 30px; |
||||
|
font-family: Source Han Sans CN, Source Han Sans CN; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.el-input { |
||||
|
width: 300px; |
||||
|
height: 60px; |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid #01cffe; |
||||
|
background-color: transparent; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
::v-deep .el-input__inner { |
||||
|
font-size: 20px !important; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
border: 0; |
||||
|
height: 35px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-icon { |
||||
|
height: 20px; |
||||
|
width: 20px; |
||||
|
margin-left: 2px; |
||||
|
position: relative; |
||||
|
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; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-family: Arial; |
||||
|
font-size: 12px; |
||||
|
letter-spacing: 1px; |
||||
|
} |
||||
|
|
||||
|
.login-code-img { |
||||
|
height: 35px; |
||||
|
} |
||||
|
|
||||
|
/* 重置按钮 */ |
||||
|
.el-button--goon { |
||||
|
font-size: 24px; |
||||
|
font-weight: 400; |
||||
|
color: #fff; |
||||
|
width: 380px; |
||||
|
height: 55px; |
||||
|
background: #07caf6; |
||||
|
border-radius: 4px; |
||||
|
opacity: 1; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.el-button--goon:hover { |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-form-item__error { |
||||
|
top: 62px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue