<style scoped>
|
.enter {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
background-image: url("../../assets/404_images/login-form-bg.png");
|
background-size: 100% 100%;
|
}
|
|
.left {
|
width: calc(100% - 500px);
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.left img {
|
width: 100%;
|
min-height: 100%;
|
}
|
|
.right {
|
width: 600px;
|
overflow-y: auto;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.title_big {
|
color: #004EA2;
|
font-size: 40px;
|
margin-bottom: 8px;
|
}
|
|
.title_small {
|
color: #004EA2;
|
font-size: 24px;
|
}
|
|
.elform {
|
margin-top: 50px;
|
}
|
|
.sao {
|
font-size: 14px;
|
color: #004EA2;
|
width: 100%;
|
text-align: right;
|
}
|
</style>
|
|
<style>
|
.enter .el-form-item__label {
|
font-size: 20px;
|
color: #333;
|
line-height: 48px;
|
}
|
|
.enter .el-form-item {
|
margin-bottom: 30px;
|
}
|
|
.enter .el-input__inner {
|
height: 48px;
|
}
|
|
.enter .el-button {
|
background-color: #1763EB;
|
color: #fff;
|
border: 0;
|
border-radius: 16px;
|
width: 100%;
|
height: 48px;
|
}
|
|
.enter input::-webkit-input-placeholder,
|
.enter textarea::-webkit-input-placeholder {
|
font-size: 14px;
|
}
|
|
.enter input::-moz-placeholder,
|
.enter textarea::-moz-placeholder {
|
font-size: 10px;
|
}
|
|
.enter input:-ms-input-placeholder,
|
.enter textarea:-ms-input-placeholder {
|
font-size: 10px;
|
}
|
|
.enter input:-moz-placeholder,
|
.enter textarea:-moz-placeholder {
|
font-size: 10px;
|
}
|
.copyright{
|
width: 100%;
|
position: relative;
|
top: 140px;
|
}
|
.copyright p{
|
padding: 2px 0px;
|
font-size: 5px;
|
text-align: center;
|
color: lightgray;
|
}
|
.copyright >p:nth-child(3){
|
text-decoration: underline;
|
}
|
</style>
|
|
<template>
|
<div class="enter">
|
<div class="left">
|
<img src="@/assets/404_images/login-bg.png">
|
</div>
|
<div class="right">
|
<div style="width: calc(100% - 100px);">
|
<div class="title_big">欢迎您登录！</div>
|
<div class="title_small">装备电缆LIMS实验室管理系统</div>
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="elform" :hide-required-asterisk="true">
|
<el-form-item label="账号" prop="username">
|
<el-input v-model="ruleForm.username" placeholder="请输入账号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="ruleForm.password" placeholder="请输入密码" clearable show-password></el-input>
|
</el-form-item>
|
<el-form-item style="margin-bottom: 8px;">
|
<el-col :span="12"><el-checkbox v-model="ruleForm.remumberme">记住密码</el-checkbox></el-col>
|
<el-col :span="12" style="text-align: right;"><el-checkbox
|
v-model="ruleForm.autoenter">自动登录</el-checkbox></el-col>
|
</el-form-item>
|
<el-form-item style="margin-bottom: 15px;">
|
<el-button type="primary" @click="submitForm('ruleForm')" :loading="btnload">立即登录</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="sao">微信扫码登录</div>
|
<div class="copyright">
|
<!-- <p>有限公司</p>
|
<p>版权所有Copyright ©️ </p>
|
<p>[苏ICP备10047815号-1]</p> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { get } from "@/api/util/requestUtil.js"
|
export default {
|
data() {
|
return {
|
ruleForm: {
|
username: "admin",
|
password: "admin",
|
remumberme: false,
|
autoenter: false
|
},
|
rules: {
|
username: [{
|
required: true,
|
message: '请输入账号',
|
trigger: ['blur', 'change']
|
}],
|
password: [{
|
required: true,
|
message: '请输入密码',
|
trigger: ['blur', 'change']
|
}]
|
},
|
btnload: false,
|
redirect: undefined
|
}
|
},
|
mounted() {
|
this.ruleForm.remumberme = JSON.parse(localStorage.getItem('rememberme'))==null?false:JSON.parse(localStorage.getItem('rememberme'))
|
this.ruleForm.autoenter = JSON.parse(localStorage.getItem('autoenter'))==null?false:JSON.parse(localStorage.getItem('autoenter'))
|
var user = JSON.parse(localStorage.getItem('user'))
|
if (user != null && user != undefined) {
|
if (this.ruleForm.remumberme==true) {
|
this.ruleForm.username = user.username;
|
this.ruleForm.password = user.password;
|
}
|
if (this.ruleForm.autoenter==true) {
|
this.submitForm('ruleForm');
|
}
|
}
|
},
|
watch: {
|
$route: {
|
handler: function (route) {
|
this.redirect = route.query && route.query.redirect
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
submitForm(formName) {
|
this.btnload = true
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.$store.dispatch('user/login', this.ruleForm).then(async (res) => {
|
let name = "";
|
await get(this.$url.info).then(res => {
|
this.user = res.data;
|
name = res.data.name;
|
sessionStorage.setItem("user", JSON.stringify(res.data));
|
sessionStorage.setItem("flushPage",0);
|
})
|
localStorage.setItem('rememberme', this.ruleForm.remumberme);
|
localStorage.setItem('autoenter', this.ruleForm.autoenter);
|
if (this.ruleForm.remumberme==true||this.ruleForm.autoenter==true) {
|
localStorage.setItem("user", JSON.stringify({
|
username: this.ruleForm.username,
|
password: this.ruleForm.password,
|
name: name,
|
}));
|
}
|
this.$message.success("登录成功")
|
this.btnload = false
|
this.$router.push({ path: this.redirect || '/' })
|
// this.$router.push('/')
|
}).catch((error) => {
|
this.$message.error(error.message)
|
this.btnload = false
|
})
|
} else {
|
this.btnload = false
|
this.$message.error('账号或密码未输入！')
|
return false;
|
}
|
})
|
},
|
}
|
}
|
</script>
|
