Commit c0c958d8 by 夏新然

提交

1 parent d60b57e4
#login .el-input__inner {
background: rgba(255,255,255,.5);
border-radius: 0!important;
border: none!important;
border-bottom: 1px solid #000000!important;
background: #FFFFFF!important;
box-shadow: none;
margin-top: 20px;
height: 40px;
/* line-height: 40px; */
border-radius: 5px;
font-size: 16px;
}
#login .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
margin-bottom: 28px!important;
}
.el-main{
padding: 0;
}
......
<template>
<div id="login" :style="{height:innerHeight+'px'}">
<div class="box">
<h1>视频分析综合管理平台</h1>
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="text" class="form-control" v-model="username" id="username" placeholder="请输入用户名">
<div style="width: 60%;margin: 0 auto;">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item label=" " prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label=" " prop="password">
<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="password" class="form-control" v-model="password" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button class="btn" @click.stop="login">登录</button>
</div>
</div>
<!--<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<p>北京文安智能技术股份有限公司</p>
<p>v2.0.0.1</p>
</div>
</div>-->
</div>
</div>
</template>
......@@ -33,20 +25,55 @@ import types from '../store/types.js'
export default {
name: 'Login',
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
var validateUser = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
} else {
callback();
}
};
return {
username: '',
password: '',
innerHeight:0
innerHeight:0,
ruleForm:{
username:'',
password:'',
},
rules: {
password: [
{ validator: validatePass, trigger: 'change' }
],
username: [
{ validator: validateUser, trigger: 'change' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.login();
} else {
return false;
}
});
},
initHeight(){
this.innerHeight=window.innerHeight;
},
login(){
this.$api.login.login({
"username":this.username,
"password":this.password,
"username":this.ruleForm.username,
"password":this.ruleForm.password,
"user_type": "user"
}).then(res => {
if(!res.ecode){
......@@ -224,62 +251,38 @@ import types from '../store/types.js'
left:50px;
top: 16px;
}
.form-horizontal {
width: 450px;
height: 350px;
background: url(../assets/img/login/233.png) no-repeat;
background-size: 500px 430px;
position: absolute;
left: 58%;
top: 200px;
padding-top:50px;
border-radius: 10px;
}
h1 {
color: #F5F5F5;
color: #000000;
height: 40px;
line-height: 40px;
padding: 60px 0px;
position: absolute;
left:10%;
top:220px;
font-size:50px;
letter-spacing: 8px;
text-shadow: 5px 5px 5px #000
font-size:44px;
}
#login {
text-align: center;
position: relative;
background: url(../assets/img/login/2333.png) no-repeat 0 0;
background: url(../assets/img/login/background.png) no-repeat 0 0;
background-size:cover
}
#login input {
color: #fff;
background: rgba(255,255,255,.5);
border-radius: 0;
border: none;
border: 1px solid #86B1DB;
box-shadow: none;
margin-top: 20px;
height: 40px;
/* line-height: 40px; */
border-radius: 5px;
font-size: 16px;
}
#login input:focus {
outline: none;
box-shadow: none;
}
.box{
width: 25%;
position: relative;
left: 52%;
top: 20%;
}
button {
width: 60%;
width: 100%;
margin-top: 40px;
background: #09cef7;
color: #fff!important;
height: 40px;
border-radius: 30px;
background: #0069FF;
height: 50px;
font-size: 20px;
}
......@@ -288,11 +291,24 @@ import types from '../store/types.js'
}
p {
color: #fff;
margin: 0;
}
p:nth-child(1) {
padding-top: 15px
}
@media screen and (max-width: 1366px) {
h1 {
height: 40px;
line-height: 40px;
padding: 60px 0px;
font-size:34px;
}
.box{
width: 25%;
position: relative;
left: 57%;
top: 20%;
}
}
</style>
......@@ -99,7 +99,7 @@
<el-input v-model="addForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="checkPass">
<el-input v-model="addForm.checkPass" type="checkPass"></el-input>
<el-input v-model="addForm.checkPass" type="password"></el-input>
</el-form-item>
</el-form>
</div>
......@@ -160,9 +160,10 @@
}
};
var validatePass2 = (rule, value, callback) => {
console.log('aa',this.addForm.password)
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.editForm.password) {
} else if (value !== this.addForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!