<template>
|
<div class="login-container">
|
<div class="title">石家庄人社局业务运行数据分析平台</div>
|
<div class="loginBox">
|
<div class="title-text">
|
<span>用户登录</span>
|
</div>
|
<!-- <div class="img">-->
|
<!-- <img src="../assets/images/login/组%20377@2x.png" alt="">-->
|
<!-- <img src="../assets/images/login/组%20377@2x_1.png" alt="">-->
|
<!-- </div>-->
|
<div class="FormBox">
|
<el-form
|
ref="loginFormRef"
|
:model="loginForm"
|
class="LoginForm"
|
label-width="0rem"
|
:rules="loginFormRules"
|
>
|
<el-form-item prop="username">
|
<el-input
|
v-model="loginForm.username"
|
placeholder="请输入用户名"
|
class="userInput"
|
prefix-icon="iconfont icon-user"
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
v-model="loginForm.password"
|
prefix-icon="iconfont icon-3702mima"
|
placeholder="请输入密码"
|
class="passwordInput"
|
show-password
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<el-button type="primary" class="loginButton" @click="login()"
|
>登录
|
</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {login} from "@/api/index";
|
|
export default {
|
data() {
|
return {
|
loginForm: {
|
username: "",
|
password: ""
|
},
|
loginFormRules: {
|
// 验证用户名是否合法
|
username: [
|
{required: true, message: "请输入登录名称", trigger: "blur"},
|
{min: 3, max: 15, message: "长度在6到15个字符", trigger: "blur"}
|
],
|
// 验证密码是否合法
|
password: [
|
{required: true, message: "请输入登录密码", trigger: "blur"},
|
{min: 6, max: 10, message: "长度在6到10个字符", trigger: "blur"}
|
]
|
}
|
};
|
},
|
beforeCreate() {
|
},
|
methods: {
|
login() {
|
this.$refs.loginFormRef.validate(async valid => {
|
console.log(valid);
|
if (!valid) return;
|
this.$router.push("/");
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.FormBox {
|
width: 100%;
|
//text-align: center;
|
margin-left: 8rem;
|
|
.el-input__inner {
|
height: 8.8rem;
|
font-size: 2.8rem;
|
background: rgba(81, 210, 255, 0.24);
|
margin-top: 4.8rem;
|
color: #ffffff;
|
padding-left: 8.8rem;
|
//.el-input__prefix {
|
// width: 3rem;
|
// height: 3rem;
|
//}
|
}
|
|
:nth-of-type(2) {
|
margin-top: 4.8rem;
|
}
|
|
|
.el-form-item__content {
|
width: 64rem;
|
height: 8.8rem;
|
line-height: 8.8rem;
|
}
|
|
.el-form-item__error {
|
font-size: 2.8rem !important;
|
margin-top: 5rem;
|
}
|
|
//input:disabled::-webkit-input-placeholder {
|
// -webkit-text-fill-color: red;
|
//}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
@import '../assets/css/base';
|
|
.login-container {
|
width: 256rem;
|
height: 168rem;
|
background: url(../assets/images/login/背景@2x.png);
|
position: relative;
|
}
|
|
.title {
|
width: 334.368rem;
|
height: 12.8rem;
|
background: url(../assets/images/login/top@2x.png);
|
position: absolute;
|
left: -39.184rem;
|
top: 0;
|
font-size: 3.6rem;
|
color: #ffffff;
|
font-weight: 400;
|
text-align: center;
|
line-height: 10rem;
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
}
|
|
.loginBox {
|
width: 80rem;
|
height: 81.866rem;
|
background: url(../assets/images/login/框@2x.png);
|
position: absolute;
|
margin-top: 39rem;
|
margin-bottom: 39rem;
|
margin-left: 88rem;
|
|
span {
|
font-size: $fontSize-32;
|
color: #51d2ff;
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
font-weight: 400;
|
color: #51d2ff;
|
line-height: 12px;
|
}
|
|
.title-text {
|
width: 80rem;
|
margin-top: 8.6rem;
|
text-align: center;
|
}
|
|
.LoginForm {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.loginButton {
|
width: 64rem;
|
height: 8.8rem;
|
background: #51d2ff;
|
font-size: 3.2rem;
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #000e2d;
|
line-height: 2.4rem;
|
position: absolute;
|
bottom: 14.46rem;
|
left: 8rem;
|
}
|
}
|
|
//.el-input__icon .el-icon-lock{
|
// width:1rem;
|
//
|
//}
|
///deep/ .el-input {
|
// width: 64rem;
|
//}
|
|
</style>
|
