linsheng0116
1 year ago
9 changed files with 397 additions and 89 deletions
@ -0,0 +1,219 @@ |
|||
<template> |
|||
<div style="width: 100%;height: 100%;background-color: #00173a;"> |
|||
<img style="width: 100%;height: 100%;position: absolute;z-index:99;" src="../assets/img/loginBg.png"> |
|||
<headInfo style="position: absolute;z-index: 100"></headInfo> |
|||
<div class="loginBox"> |
|||
<div style="position: absolute;top:10%;color: white;font-size: 1.2vw;left: 38%">用户登陆</div> |
|||
<div class="password-input-container"> |
|||
<img src="../assets/img/userInfo.png" style="position: absolute;z-index: 99;width: 100%;height: 100%;"> |
|||
<input |
|||
type="text" |
|||
:placeholder="placeholder1" |
|||
v-model="userName" |
|||
/> |
|||
</div> |
|||
<div class="password-input-container1"> |
|||
<img src="../assets/img/password.png" style="position: absolute;z-index: 99;width: 100%;height: 100%;"> |
|||
<input |
|||
type="text" |
|||
:placeholder="placeholder2" |
|||
v-model="password" |
|||
/> |
|||
</div> |
|||
<div class="checkBox"> |
|||
<el-checkbox style="color: white;position: absolute;right: 0;" v-model="checked">记住密码</el-checkbox> |
|||
</div> |
|||
<div class="loginButton" @click="login"> |
|||
<div style="height: 100%;width: 100%;position: absolute;line-height: 2.4vw;text-align: center;font-size: 1vw;color: white;letter-spacing: 3px;">登录</div> |
|||
<img src="../assets/img/loginButton.png" style="width: 100%;height: 100%;"> |
|||
</div> |
|||
<div class="regist"> |
|||
<div style="float: left;margin-left: 25%;">没有账号，请进行</div><div style="color: rgba(90,208,255,0.9);float: left;" @click="openRest">注册</div> |
|||
</div> |
|||
|
|||
<img src="../assets/img/loginBox.png" style="width: 100%;height: 100%;"> |
|||
</div> |
|||
<el-dialog title="注册信息" :visible.sync="regist"> |
|||
<el-form :model="form"> |
|||
<el-form-item label="用户账号" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.name" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="密码" :label-width="formLabelWidth"> |
|||
<el-input type="password" v-model="form.password" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="用户类型" :label-width="formLabelWidth"> |
|||
<el-select v-model="form.userType" placeholder="请选择用户类型"> |
|||
<el-option label="管理员" value="1"></el-option> |
|||
<el-option label="学生" value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="班级信息" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.classInfo" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="regist = false">取 消</el-button> |
|||
<el-button type="primary" @click="goRegist">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
|
|||
</template> |
|||
<script> |
|||
|
|||
import headInfo from "@/components/Head.vue"; |
|||
import {doLogin, registered} from "@/api/login"; |
|||
|
|||
export default { |
|||
// eslint-disable-next-line vue/multi-word-component-names |
|||
name: 'Login', |
|||
components: {headInfo}, |
|||
data() { |
|||
return{ |
|||
placeholder1:"请输入账号", |
|||
userName:"", |
|||
placeholder2:"请输入密码", |
|||
password:"", |
|||
|
|||
checked:false, |
|||
|
|||
//这是注册的信息 |
|||
regist:false, |
|||
form: { |
|||
name: '', |
|||
password:'', |
|||
userType: 0, |
|||
classInfo: '', |
|||
|
|||
}, |
|||
formLabelWidth: '120px' |
|||
} |
|||
}, |
|||
methods:{ |
|||
login(){ |
|||
var data = { |
|||
userName:this.userName, |
|||
password:this.password, |
|||
} |
|||
doLogin(data).then((res)=>{ |
|||
if(res.code==200){ |
|||
this.$router.push('/Mulu') |
|||
}else { |
|||
console.log("失败") |
|||
} |
|||
}) |
|||
}, |
|||
Check() { |
|||
this.checked = true; |
|||
}, |
|||
openRest(){ |
|||
this.regist = true; |
|||
}, |
|||
goRegist(){ |
|||
var data = { |
|||
userName:this.form.name, |
|||
password:this.form.password, |
|||
userType:this.form.userType, |
|||
classInfo:this.form.classInfo |
|||
|
|||
} |
|||
registered(data).then((res)=>{ |
|||
|
|||
console.log(res); |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.login(); |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.loginBox{ |
|||
width: 20%; |
|||
height: 40%; |
|||
//background-color: #42b983; |
|||
position: absolute; |
|||
z-index: 100; |
|||
top: 30%; |
|||
left: 10%; |
|||
} |
|||
.password-input-container { |
|||
width: 80%; |
|||
height: 14%; |
|||
//background: #b94289; |
|||
position: absolute; |
|||
top: 25%; |
|||
left: 10%; |
|||
} |
|||
.password-input-container1{ |
|||
width: 80%; |
|||
height: 14%; |
|||
//background: #b94289; |
|||
position: absolute; |
|||
top: 45%; |
|||
left: 10%; |
|||
} |
|||
|
|||
input { |
|||
width: 100%; |
|||
height: 100%; |
|||
border: none; |
|||
outline: none; |
|||
color: white; /* 文字颜色 */ |
|||
background-color: transparent; |
|||
padding-left:3%; |
|||
position: absolute; |
|||
z-index: 2000; |
|||
|
|||
} |
|||
input::placeholder { |
|||
color: white; |
|||
opacity: 1; /* Firefox 默认将 placeholder 的透明度设置为 0.54 */ |
|||
|
|||
} |
|||
.checkBox{ |
|||
width: 80%; |
|||
height: 5%; |
|||
position: absolute; |
|||
top: 61%; |
|||
left: 10%; |
|||
} |
|||
/* 自定义样式 */ |
|||
.el-checkbox__inner { |
|||
background-color: transparent !important; |
|||
border-color: transparent !important; |
|||
} |
|||
|
|||
.el-checkbox__input.is-checked .el-checkbox__inner { |
|||
background-color: transparent !important; |
|||
border-color: transparent !important; |
|||
} |
|||
|
|||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|||
background-color: transparent !important; |
|||
border-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*登录按钮*/ |
|||
.loginButton{ |
|||
width: 80%; |
|||
height: 12%; |
|||
position: absolute; |
|||
bottom: 15%; |
|||
left: 10%; |
|||
|
|||
} |
|||
.regist{ |
|||
width: 80%; |
|||
height: 12%; |
|||
position: absolute; |
|||
bottom: 2%; |
|||
left: 10%; |
|||
color: #Ffffff; |
|||
text-align: center; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue