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