You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
8.4 KiB
261 lines
8.4 KiB
<template> |
|
<div class="wrap"> |
|
|
|
<div class="header"> |
|
<div class="inner"> |
|
<img class="logo" src="../../../assets/img/logo.png" alt=""> |
|
<!-- <div class="reg" @click="toReg">注册</div> --> |
|
</div> |
|
</div> |
|
<div class="main"> |
|
<div class="left"> |
|
<div class="text"> |
|
<p>欢迎进入</p> |
|
<p>电子竞技<br>数字化考试系统<br><span>学生用户端</span></p> |
|
</div> |
|
</div> |
|
<div class="right"> |
|
<div v-if="!isReg"> |
|
<h2>密码登录</h2> |
|
<el-form :model="loginForm" :rules="loginRules" ref="login" label-width="0px"> |
|
<el-form-item prop="username"> |
|
<p class="label">用户名</p> |
|
<el-input v-model="loginForm.username" placeholder="请输入账号/手机号" @keyup.enter.native="submitForm()"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="password"> |
|
<p class="label">密码</p> |
|
<el-input |
|
type="password" |
|
placeholder="请输入密码" |
|
v-model="loginForm.password" |
|
@keyup.enter.native="submitForm()" |
|
> |
|
</el-input> |
|
</el-form-item> |
|
<el-button class="submit" type="primary" @click="submitForm">登录</el-button> |
|
<!-- <div class="links flex j-between"> |
|
<el-button type="text" class="ques" @click="toReg">前往注册</el-button> |
|
<el-button type="text" class="forget">忘记密码？</el-button> |
|
</div> --> |
|
<!-- <p class="login-tips">其他登陆方式</p> |
|
<div class="thirdParty"> |
|
<div class="item"> |
|
<img src="../../../assets/img/icon_wechat.png" alt=""> |
|
微信扫码登录 |
|
</div> |
|
<div class="item"> |
|
<img src="../../../assets/img/icon_qq.png" alt=""> |
|
QQ一键登录 |
|
</div> |
|
</div> --> |
|
</el-form> |
|
</div> |
|
<register v-else :isReg.sync="isReg" @updateInfo="updateInfo"></register> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import register from '../register'; |
|
import { mapActions } from 'vuex'; |
|
export default { |
|
data: function() { |
|
return { |
|
isReg: false, |
|
loginForm: { |
|
username: '13563422432', |
|
password: 'huoran123', |
|
}, |
|
loginRules: { |
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
|
}, |
|
roleDialog: false, |
|
userId: '', |
|
schoolId: '', |
|
schoolName: '', |
|
roleId: '', |
|
roleList: [] |
|
}; |
|
}, |
|
components: { |
|
register |
|
}, |
|
methods: { |
|
...mapActions('user', [ |
|
'login' |
|
]), |
|
updateInfo(data){ |
|
this.loginForm.username = data.username |
|
this.loginForm.password = data.password |
|
}, |
|
submitForm() { |
|
this.$refs.login.validate(valid => { |
|
if (valid) { |
|
let data = { |
|
username: this.loginForm.username, |
|
password: this.loginForm.password |
|
} |
|
this.login(data).then(() => { |
|
this.$router.replace('/index') |
|
}) |
|
.catch(() => {}) |
|
} |
|
}) |
|
}, |
|
toReg() { |
|
this.isReg = true |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.header{ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background-color: rgba(51,51,51,.7); |
|
.inner{ |
|
display: inline-flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 65%; |
|
padding: 5px 0; |
|
font-size: 16px; |
|
color: #fff; |
|
.logo{ |
|
width: 200px; |
|
} |
|
.reg{ |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
.wrap { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
background: url(../../../assets/img/login_bg.png) 0 0/100% 100% no-repeat; |
|
overflow: hidden; |
|
.mask{ |
|
z-index: -1; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
right: 0; |
|
background-color: rgba(0,0,0,1); |
|
} |
|
|
|
.main{ |
|
height: calc(100% - 60px); |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background-color: rgba(0,0,0,.4); |
|
} |
|
.left{ |
|
margin-top: -200px; |
|
margin-right: 10%; |
|
|
|
img{ |
|
width: 447px;; |
|
margin-bottom: 30px; |
|
} |
|
.text{ |
|
font-size: 52px; |
|
color: #fff; |
|
p:first-child{ |
|
margin-bottom: 30px; |
|
} |
|
span{ |
|
font-size: 36px; |
|
} |
|
} |
|
} |
|
.right{ |
|
width: 580px; |
|
padding: 40px 70px 50px; |
|
background-color: #fff; |
|
box-sizing: border-box; |
|
box-shadow: 0 1px 20px rgba(0,0,0,0.16); |
|
|
|
h2{ |
|
padding-bottom: 10px; |
|
font-size: 24px; |
|
font-weight: 400; |
|
color: #303d4c; |
|
text-align: center; |
|
border-bottom: 1px solid #E5E5E5; |
|
} |
|
.el-form{ |
|
margin-top: 30px; |
|
.label{ |
|
margin-bottom: 10px; |
|
color: #105CB2; |
|
} |
|
/deep/.el-input__inner{ |
|
height: 46px; |
|
padding: 0 23px; |
|
line-height: 46px; |
|
border: 1px solid #AFB5BB; |
|
border-radius: 23px !important; |
|
} |
|
/deep/.el-form-item__error{ |
|
top: 105%; |
|
left: auto; |
|
right: 0; |
|
color: #FFA94E; |
|
} |
|
.submit{ |
|
width: 100%; |
|
height: 48px; |
|
margin-top: 60px; |
|
line-height: 48px; |
|
padding: 0; |
|
font-size: 20px; |
|
background-color: #cb221c; |
|
border-radius: 23px; |
|
border: 0; |
|
} |
|
.links{ |
|
margin: 20px 0 20px; |
|
} |
|
.ques{ |
|
color: #cb221c; |
|
font-size: 14px; |
|
} |
|
.forget{ |
|
color: #ffa94e; |
|
font-size: 14px; |
|
} |
|
.login-tips{ |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
color: #105CB2; |
|
text-align: center; |
|
} |
|
.thirdParty{ |
|
.item{ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
padding: 10px 0; |
|
color: #AFB5BB; |
|
font-size: 16px; |
|
background-color: #eff0f1; |
|
border-radius: 36px; |
|
cursor: pointer; |
|
img{ |
|
width: 40px; |
|
margin-right: 10px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |