<template>
|
<div class="login-container">
|
<div class="title">石家庄人社局业务运行数据分析平台</div>
|
<!-- 用户登录盒子-->
|
<div class="loginBox">
|
<div class="title-text">
|
<span>用户登录</span>
|
</div>
|
<!-- 表单登录盒子-->
|
<div class="FormBox">
|
<!--两个图标-->
|
<div class="headerIcon"></div>
|
<div class="lockIcon"></div>
|
<!--表单-->
|
<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 {
|
name: "login",
|
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.$store.dispatch('login',this.loginForm).then(res => {
|
this.$router.push('/index')
|
})
|
// login(this.loginForm).then(res => {
|
// this.$router.push('/index')
|
// })
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.loginButton {
|
font-size: 0.125rem !important;
|
}
|
.FormBox {
|
width: 100%;
|
margin-left: 0.3125rem;
|
position: absolute;
|
top: 0.6875rem;
|
|
.el-input__inner {
|
height: 0.3438rem;
|
font-size: 0.1094rem;
|
background: rgba(81, 210, 255, 0.24);
|
color: #ffffff;
|
padding-left: 0.4063rem;
|
}
|
|
:nth-of-type(2) {
|
margin-top: 0.1875rem;
|
}
|
|
.el-form-item__content {
|
width: 2.5rem;
|
height: 0.3438rem;
|
line-height: 0.3438rem;
|
}
|
|
.el-form-item__error {
|
font-size: 0.1094rem !important;
|
margin-top: 0.0352rem;
|
}
|
|
.el-input .el-input__clear {
|
position: relative;
|
//background-color: blue;
|
width: 0.0664rem;
|
height: 0.043rem;
|
top: -0.1328rem;
|
right: 0.0898rem;
|
border-radius: 60%;
|
}
|
|
.el-icon-view:before {
|
position: absolute;
|
top: -0.0547rem;
|
right: 0.0039rem;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
@import "../assets/css/base";
|
.login-container {
|
width: 10rem;
|
height: 6.5625rem;
|
background: url(../assets/images/login/loginBackground@2x.png) no-repeat;
|
background-size: 100%;
|
position: relative;
|
}
|
|
.title {
|
width: 13.0612rem;
|
height: 0.5rem;
|
background: url(../assets/images/login/top@2x.png) no-repeat;
|
background-size: 100%;
|
position: absolute;
|
left: -1.5306rem;
|
top: 0;
|
font-size: 0.1406rem;
|
color: #ffffff;
|
font-weight: 400;
|
text-align: center;
|
line-height: 0.3906rem;
|
//font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
}
|
|
.headerIcon {
|
position: absolute;
|
width: 0.3438rem;
|
height: 0.3359rem;
|
background: url(../assets/images/login/header@2x.png) no-repeat;
|
background-size: 100%;
|
border-right: 0.0039rem dashed #51d2ff;
|
}
|
|
.lockIcon {
|
position: absolute;
|
top: 0.3438rem;
|
width: 0.3438rem;
|
height: 0.3359rem;
|
border-right: 0.0039rem dashed #51d2ff;
|
background: url(../assets/images/login/lock@2x_1.png) no-repeat;
|
background-size: 100%;
|
}
|
|
.loginBox {
|
width: 3.125rem;
|
height: 3.1979rem;
|
background: url(../assets/images/login/loginBorder@2x.png);
|
background-size: 100%;
|
position: relative;
|
margin: 0 auto;
|
top: 1.5234rem;
|
|
.title-text {
|
position: absolute;
|
width: 3.125rem;
|
margin-top: 0.375rem;
|
text-align: center;
|
|
span {
|
font-size: $fontSize-32;
|
color: #51d2ff;
|
//font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
font-weight: 400;
|
line-height: 0.0469rem;
|
}
|
}
|
|
.LoginForm {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.loginButton {
|
width: 2.5rem;
|
height: 0.3438rem;
|
background: #51d2ff;
|
font-size: 0.125rem !important;
|
//font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #000e2d;
|
line-height: 0.0938rem;
|
position: absolute;
|
bottom: 0.5648rem;
|
left: 0.3125rem;
|
}
|
}
|
</style>
|
