<style scoped>
|
.enter {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
background-image: url("../../static/img/登录.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;
|
}
|
</style>
|
|
<template>
|
<div class="enter">
|
<div class="left">
|
<img src="../../static/img/登录背景.png">
|
</div>
|
<div class="right">
|
<div style="width: calc(100% - 100px * 2);">
|
<div class="title_big">欢迎您登录！</div>
|
<div class="title_small">瑞翔新材</div>
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="elform" :hide-required-asterisk="true">
|
<el-form-item label="用户名" prop="account">
|
<el-input v-model="ruleForm.account" placeholder="请输入账号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="pwd">
|
<el-input v-model="ruleForm.pwd" 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>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
ruleForm: {
|
account: null,
|
pwd: null,
|
remumberme: false,
|
autoenter: false
|
},
|
rules: {
|
account: [{
|
required: true,
|
message: '请输入账号',
|
trigger: ['blur', 'change']
|
}],
|
pwd: [{
|
required: true,
|
message: '请输入密码',
|
trigger: ['blur', 'change']
|
}]
|
},
|
btnload: false
|
}
|
},
|
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.account = user.account
|
this.ruleForm.pwd = user.password
|
}
|
if (this.ruleForm.autoenter==true) {
|
this.submitForm('ruleForm')
|
}
|
}
|
},
|
methods: {
|
submitForm(formName) {
|
this.btnload = true
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.$router.push('/')
|
return
|
this.axios.post(this.$api.login.enter, {
|
account: this.ruleForm.account,
|
password: this.ruleForm.pwd
|
}).then(res => {
|
this.btnload = false
|
if (res.data == null) {
|
this.$message.error("账号或密码错误")
|
return
|
}
|
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({
|
account: this.ruleForm.account,
|
password: this.ruleForm.pwd,
|
name: res.data.name
|
}))
|
sessionStorage.setItem('token', res.data.token)
|
sessionStorage.setItem('reToken', res.data.reToken)
|
this.$message.success("登录成功")
|
this.$router.push('/')
|
}).catch(e => {
|
this.btnload = false
|
this.$message.error('登录失败, 请联系管理员')
|
})
|
} else {
|
this.btnload = false
|
this.$message.error('账号或密码未输入！')
|
return false;
|
}
|
})
|
},
|
}
|
}
|
</script>
|
