176 lines
5.9 KiB
176 lines
5.9 KiB
<template> |
|
<div class="wrap"> |
|
<vHead></vHead> |
|
<div class="login"> |
|
<div class="names"> |
|
<img class="logo" src="../../../assets/img/three.png" alt=""> |
|
<p class="text">或然数据网</p> |
|
</div> |
|
<div class="form"> |
|
<div class="title"><span>登录</span></div> |
|
<el-form :model="loginForm" :rules="loginRules" ref="login" label-width="0px"> |
|
<el-form-item prop="username"> |
|
<label class="account"></label> |
|
<el-input v-model="loginForm.username" placeholder="请输入账号/手机号" @keyup.enter.native="submitForm()"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="password"> |
|
<label class="password"></label> |
|
<el-input type="password" placeholder="请输入密码" v-model="loginForm.password" @keyup.enter.native="submitForm()"></el-input> |
|
</el-form-item> |
|
<div class="check"> |
|
<el-checkbox v-model="remember">15天免费登录</el-checkbox> |
|
</div> |
|
<el-button class="submit" type="primary" @click="submitForm">登录</el-button> |
|
</el-form> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapActions } from 'vuex' |
|
import vHead from '@/layouts/header' |
|
export default { |
|
data: function() { |
|
return { |
|
loginForm: { |
|
username: '20204400194', |
|
password: '111aaa', |
|
}, |
|
loginRules: { |
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
|
}, |
|
remember: false |
|
}; |
|
}, |
|
components: {vHead}, |
|
methods: { |
|
...mapActions('user', [ |
|
'login' |
|
]), |
|
submitForm() { |
|
this.$refs.login.validate(valid => { |
|
if (valid) { |
|
let data = { |
|
username: this.loginForm.username, |
|
password: this.loginForm.password |
|
} |
|
this.login(data).then(() => { |
|
let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index' |
|
this.$router.replace(redirect) |
|
}).catch(() => {}) |
|
} |
|
}) |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.wrap { |
|
min-height: 100%; |
|
background: url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat; |
|
overflow: hidden; |
|
|
|
.login{ |
|
width: 500px; |
|
margin: 0 auto; |
|
text-align: center; |
|
.names{ |
|
margin: 70px 0; |
|
.text{ |
|
margin-top: 10px; |
|
font-size: 20px; |
|
color: #fff; |
|
} |
|
} |
|
|
|
.form{ |
|
padding: 30px; |
|
margin-top: 30px; |
|
border-radius: 10px; |
|
background-color: #fff; |
|
.title{ |
|
position: relative; |
|
margin-bottom: 30px; |
|
text-align: center; |
|
span{ |
|
display: inline-block; |
|
padding: 9px 20px; |
|
color: #555; |
|
border-bottom: 2px solid $main-color; |
|
} |
|
&:after{ |
|
content: ''; |
|
position: absolute; |
|
left: 0; |
|
bottom: -1px; |
|
width: 100%; |
|
height: 1px; |
|
background-color: #e0e0e0; |
|
} |
|
} |
|
.el-form{ |
|
padding: 0 70px; |
|
} |
|
.label{ |
|
margin-bottom: 10px; |
|
color: #105CB2; |
|
} |
|
/deep/.el-input__inner{ |
|
position: relative; |
|
height: 46px; |
|
padding: 0 20px 0 40px; |
|
line-height: 46px; |
|
border: 0; |
|
border-bottom: 1px solid #e4e4e4; |
|
border-radius: 0 !important; |
|
} |
|
.account,.password{ |
|
z-index: 10; |
|
position: absolute; |
|
top: 11px; |
|
left: 8px; |
|
width: 24px; |
|
height: 28px; |
|
background: url(../../../assets/img/account.png) 0 0/100% 100% no-repeat; |
|
} |
|
.password{ |
|
width: 22px; |
|
height: 24px; |
|
background-image: url(../../../assets/img/password.png); |
|
} |
|
.check{ |
|
text-align: left; |
|
} |
|
/deep/.el-form-item__error{ |
|
top: 105%; |
|
left: auto; |
|
right: 0; |
|
color: #FFA94E; |
|
} |
|
.submit{ |
|
width: 100%; |
|
height: 48px; |
|
margin-top: 30px; |
|
line-height: 48px; |
|
padding: 0; |
|
font-size: 20px; |
|
background-color: $main-color; |
|
border-radius: 8px; |
|
border: 0; |
|
} |
|
.links{ |
|
margin: 20px 0 20px; |
|
} |
|
.login-tips{ |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
color: #105CB2; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
} |
|
</style> |