<script>
|
import { validUsername } from "@/utils/validate";
|
import { login } from "./api";
|
import { mapMutations } from "vuex";
|
export default {
|
name: "loginPage",
|
data() {
|
const validateUsername = (rule, value, callback) => {
|
if (!validUsername(value)) {
|
callback(new Error("用户名不能为空"));
|
} else {
|
callback();
|
}
|
};
|
const validatePassword = (rule, value, callback) => {
|
if (value.trim() == "") {
|
callback(new Error("密码不能为空"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
loginForm: {
|
// username: "hw",
|
// password: "123456",
|
username: "",
|
password: "",
|
},
|
loginRules: {
|
username: [
|
{ required: true, trigger: "blur", validator: validateUsername },
|
],
|
password: [
|
{ required: true, trigger: "blur", validator: validatePassword },
|
],
|
},
|
passwordType: "password",
|
capsTooltip: false,
|
loading: false,
|
showDialog: false,
|
redirect: undefined,
|
otherQuery: {},
|
};
|
},
|
methods: {
|
...mapMutations("user", ["SETUSER", "SETDOWNLOAD", "SETUID"]),
|
...mapMutations("tagsView", ["DEL_ALL_VISITED_VIEWS", "DEL_ALL_CACHED_VIEWS"]),
|
checkCapslock(e) {
|
const { key } = e;
|
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
|
},
|
handleLogin() {
|
let loading = this.$layer.loading();
|
login(this.loginForm.username, this.loginForm.password)
|
.then((res) => {
|
let { code, data, data2, msg } = res.data;
|
if (code && data) {
|
// console.log(data);
|
this.$message.success("登录成功");
|
this.SETUSER(data2.uname);
|
this.SETDOWNLOAD(data2.udownloadRole);
|
this.SETUID(data2.uid);
|
// 关闭所有已打开的标签
|
this.DEL_ALL_VISITED_VIEWS();
|
this.DEL_ALL_CACHED_VIEWS();
|
this.$router.push("/");
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
// console.log(err);
|
this.$message.error(err);
|
this.$layer.close(loading);
|
});
|
},
|
showPwd() {
|
if (this.passwordType === "password") {
|
this.passwordType = "";
|
} else {
|
this.passwordType = "password";
|
}
|
this.$nextTick(() => {
|
this.$refs.password.focus();
|
});
|
},
|
},
|
};
|
</script>
|
|
<template>
|
<div class="login-container">
|
<div class="page-title">通信电源监控主站测控系统</div>
|
<div class="login-wrap">
|
<el-form
|
ref="loginForm"
|
:model="loginForm"
|
:rules="loginRules"
|
class="login-form"
|
autocomplete="on"
|
label-position="left"
|
>
|
<div class="title-container">
|
<h3 class="title">用户登录</h3>
|
</div>
|
<el-form-item prop="username">
|
<span class="svg-container">
|
<svg-icon icon-class="user" />
|
</span>
|
<el-input
|
ref="username"
|
v-model="loginForm.username"
|
placeholder="请输入用户名"
|
name="username"
|
type="text"
|
tabindex="1"
|
autocomplete="on"
|
/>
|
</el-form-item>
|
<el-tooltip
|
v-model="capsTooltip"
|
content="输入了大写字母"
|
placement="right"
|
manual
|
>
|
<el-form-item prop="password">
|
<span class="svg-container">
|
<svg-icon icon-class="password" />
|
</span>
|
<el-input
|
:key="passwordType"
|
ref="password"
|
v-model="loginForm.password"
|
:type="passwordType"
|
placeholder="请输入密码"
|
name="password"
|
tabindex="2"
|
autocomplete="on"
|
@keyup.native="checkCapslock"
|
@blur="capsTooltip = false"
|
@keyup.enter.native="handleLogin"
|
/>
|
<span class="show-pwd" @click="showPwd">
|
<svg-icon
|
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
/>
|
</span>
|
</el-form-item>
|
</el-tooltip>
|
<div class="btn-grp">
|
<el-button
|
class="btn-login"
|
:loading="loading"
|
@click.native.prevent="handleLogin"
|
>登录</el-button
|
>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.login-container {
|
.el-input {
|
display: inline-block;
|
height: 47px;
|
width: 85%;
|
|
:deep(input) {
|
background: transparent;
|
border: 0;
|
-webkit-appearance: none;
|
border-radius: 0;
|
padding: 12px 5px 12px 15px;
|
color: #192e41;
|
height: 47px;
|
caret-color: #283443;
|
|
// &:-webkit-autofill {
|
// box-shadow: 0 0 0 1000px #283443 inset !important;
|
// -webkit-text-fill-color: #fff !important;
|
// }
|
}
|
}
|
|
.el-form-item {
|
border: 2px solid #e4e4e4;
|
background: transparent;
|
border-radius: 5px;
|
color: #454545;
|
}
|
}
|
</style>
|
|
<style lang="less" scoped>
|
.login-container {
|
min-height: 100%;
|
width: 100%;
|
// background: url('images/bg.jpg') center center / 100% 100% no-repeat;
|
background: url("./images/bg.jpg") center center / cover no-repeat;
|
// background-color: #2d3a4b;
|
overflow: hidden;
|
|
.page-title {
|
font-weight: bolder;
|
font-size: 50px;
|
color: #fff;
|
padding-top: 80px;
|
padding-left: 80px;
|
}
|
.login-wrap {
|
position: absolute;
|
top: 50%;
|
right: 0;
|
width: 460px;
|
transform: translate(-44%, -50%);
|
.login-form {
|
background: #fff;
|
// max-width: 100%;
|
padding: 50px 35px 30px;
|
border-radius: 12px;
|
letter-spacing: 2px;
|
// margin: 0 auto;
|
// overflow: hidden;
|
z-index: 0;
|
}
|
|
&::before,
|
&::after {
|
position: absolute;
|
content: "";
|
left: -20px;
|
right: -20px;
|
top: 36px;
|
bottom: 36px;
|
background: rgba(255, 255, 255, 0.2);
|
border-radius: 10px;
|
z-index: -1;
|
}
|
&::after {
|
top: 72px;
|
bottom: 72px;
|
left: -40px;
|
right: -40px;
|
}
|
}
|
|
.tips {
|
font-size: 14px;
|
color: #fff;
|
margin-bottom: 10px;
|
|
span {
|
&:first-of-type {
|
margin-right: 16px;
|
}
|
}
|
}
|
|
.svg-container {
|
padding: 6px 5px 6px 15px;
|
color: #505050;
|
vertical-align: middle;
|
width: 38px;
|
display: inline-block;
|
position: relative;
|
}
|
.svg-container::after {
|
content: "";
|
position: absolute;
|
top: 50%;
|
right: 0;
|
width: 1px;
|
height: 42%;
|
transform: translate(5px, -50%);
|
background: #e4e4e4;
|
}
|
.btn-grp {
|
width: 100%;
|
padding: 120px 20px 60px;
|
}
|
.btn-login {
|
// display: block;
|
width: 100%;
|
letter-spacing: 6px;
|
line-height: 28px;
|
color: #f0f0f0;
|
border: 0 none;
|
border-radius: 6px;
|
font-size: 16px;
|
background: linear-gradient(to right, #059fab 0, #09335b 100%);
|
box-shadow: 10px 10px 20px -10px #000;
|
}
|
|
.title-container {
|
position: relative;
|
|
.title {
|
font-size: 26px;
|
color: #1d3748;
|
margin: 0 auto 40px auto;
|
text-align: center;
|
font-weight: bold;
|
}
|
}
|
|
.show-pwd {
|
position: absolute;
|
right: 10px;
|
top: 7px;
|
font-size: 16px;
|
color: #889aa4;
|
cursor: pointer;
|
user-select: none;
|
}
|
|
.thirdparty-button {
|
position: absolute;
|
right: 0;
|
bottom: 6px;
|
}
|
|
@media only screen and (max-width: 470px) {
|
.thirdparty-button {
|
display: none;
|
}
|
}
|
}
|
</style>
|
