<template>
|
<div class='login_container'>
|
<div class="login_span">
|
<!-- 头像区域 -->
|
<span style="text-align: center;display:block;font-size: 100px;color: #FFFFFF;">青羊经侦管理系统</span>
|
</div>
|
<div class="login_box">
|
<!-- 头像区域 -->
|
<div class="avater_box">
|
<img src="../assets/jh.png"
|
alt="">
|
</div>
|
<!-- 登录表单区域 -->
|
<el-form label-width="0px"
|
class="login_form"
|
:model="loginForm"
|
:rules="loginFormRules"
|
ref="loginFormRef">
|
<!-- 用户名 -->
|
<el-form-item prop="username">
|
<el-input v-model="loginForm.username"
|
prefix-icon="iconfont icon-user"></el-input>
|
</el-form-item>
|
<!-- 密码 -->
|
<el-form-item prop="password">
|
<el-input v-model="loginForm.password" show-password
|
prefix-icon="iconfont icon-3702mima"
|
type="password" @keyup.enter.native="login"></el-input>
|
</el-form-item>
|
<!-- 提交按钮 -->
|
<el-form-item class="btns">
|
<el-button type="primary"
|
@click="login">登录
|
</el-button>
|
<el-button type="info"
|
@click="resetLoginForm">重置
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
data() {
|
return {
|
loginForm: {
|
username: '',
|
password: ''
|
},
|
// 表单验证规则对象
|
loginFormRules: {
|
username: [
|
{required: true, message: '用户名不能为空', trigger: 'blur'},
|
{
|
min: 3,
|
max: 10,
|
message: '长度在 3 到 10 个字符',
|
trigger: 'blur'
|
}
|
],
|
password: [
|
{required: true, message: '密码不能为空', trigger: 'blur'},
|
]
|
}
|
}
|
},
|
methods: {
|
resetLoginForm() {
|
this.$refs.loginFormRef.resetFields()
|
},
|
login() {
|
this.$refs.loginFormRef.validate(async (vaild) => {
|
if (!vaild) return this.$message.error('输入有误')
|
const {data: res} = await this.$http("/api/login", {
|
method: 'POST',
|
params: this.loginForm
|
})
|
console.log(res)
|
if (res.code == 200) {
|
this.$message.success('登录成功')
|
window.sessionStorage.setItem('token', res.data)
|
await this.$router.push('/home')
|
} else {
|
this.$message.error(res.msg)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.login_container {
|
background-color: #2b4b6b;
|
height: 100%;
|
}
|
|
.login_box {
|
width: 450px;
|
height: 300px;
|
background-color: #fff;
|
// 圆角边框
|
border-radius: 3px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
.avater_box {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
padding: 10px;
|
// 阴影
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: #eee;
|
}
|
}
|
}
|
|
|
// .login_span {
|
// position: absolute;
|
// bottom: 0;
|
// width: 100%;
|
// padding: 0 20px;
|
// box-sizing: border-box;
|
// }
|
|
.login_form {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
}
|
|
.btns {
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
