<template>
|
<div class="container">
|
<div class="row">
|
<el-row class="row-centered">
|
<div>
|
<h1 style="color:#2d2d2d;margin-bottom:10px;font-weight:500">DNC系统</h1>
|
<!-- <img src="/static/images/LMlogin.png" alt="DNC系统"/>-->
|
<div class="g-center login-page loginBox" @keyup.enter="login">
|
<el-tabs v-model="activeName" class="login_wrap" >
|
<el-tab-pane label="用户登陆" style="color:#1e42a2" name="login">
|
<el-form :model="loginForm" label-width="80px" :rules="loginRules" ref="loginForm" class="login-form">
|
<el-form-item label="账号" prop="username">
|
<el-input placeholder="请输入账号" v-model="loginForm.username" auto-complete="off" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input type="password" placeholder="请输入密码" v-model="loginForm.password" auto-complete="off" show-password></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button type="primary" @click.native="login" :loading="editLoading">登陆</el-button>
|
<el-button type="primary" @click="resetForm('loginForm')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<!--<el-tab-pane label="用户注册" name="register">
|
建设中..
|
</el-tab-pane>-->
|
</el-tabs>
|
</div>
|
<p style="color:red;margin-top:10px;font-size:16px">密级：内部 警告：本系统禁止存储、处理、传输涉密信息</p>
|
</div>
|
|
</el-row>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import * as loginApi from '../api/login';
|
export default {
|
data() {
|
return {
|
LoginFormVisible:false,
|
activeName: 'login',
|
editLoading: false,
|
loginForm: {
|
username:'',
|
password: ''
|
},
|
loginRules: {
|
username: [
|
{required: true, message: '请输入账号', trigger: 'blur'}
|
],
|
password: [
|
{required: true, message: '请输入密码', trigger: 'blur'}
|
]
|
},
|
user:{
|
userid:'',
|
username: '',
|
userimg: ''
|
},
|
logined:false,
|
returnUrl:''
|
}
|
},
|
created () {
|
},
|
computed: {
|
btnText() {
|
if (this.isBtnLoading) return '登录中...';
|
return '登录';
|
}
|
},
|
methods: {
|
login() {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
|
this.editLoading = true;
|
|
let para = Object.assign({}, this.loginForm);
|
|
loginApi.user_login(para).then((res) => {
|
this.editLoading = false;
|
if(res.success){
|
this.$router.replace('/home');
|
}else{
|
if(res.message){
|
this.$message.error(res.message);
|
}else{
|
this.$message.error('登陆失败');
|
}
|
}
|
},
|
(res) => {
|
this.editLoading = false;
|
});
|
}
|
});
|
},
|
resetForm:function(formName){
|
this.$refs[formName].resetFields();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container{
|
position: absolute;
|
display: table;
|
height: 100%;
|
width: 100%;
|
text-align: center;
|
margin: auto;
|
background: url("/static/images/background.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.row{
|
display: table-cell;
|
vertical-align: middle;
|
}
|
/* centered columns styles */
|
.row-centered {
|
margin: auto;
|
width: 470px;
|
}
|
.loginBox{
|
padding: 20px;
|
border-radius: 20px;
|
-moz-border-radius: 20px;
|
-webkit-border-radius: 20px;
|
background-color: rgba(250,250,250,0.2);
|
}
|
.login-form{width: 400px;margin:5% auto 0;}
|
</style>
|
<style>
|
.login_wrap .el-tabs__item.is-active {
|
color: #1e42a2;
|
}
|
.login_wrap .el-tabs__active-bar{
|
background-color: #1e42a2;
|
}
|
</style>
|
