<template>
|
<div class="page-login">
|
<div class="page-login--layer">
|
<div class="page-login--content" flex="dir:top cross:stretch box:justify">
|
<div class="page-login--content-header">
|
<p class="page-login--content-header-motto">
|
<!-- 时间是一切财富中最宝贵的财富 -->
|
</p>
|
</div>
|
<div class="page-login--content-main" flex="dir:top main:center cross:center">
|
<!-- logo -->
|
<!-- <img class="page-login--logo" src="./image/logo@2x.png" /> -->
|
<!-- form -->
|
<div class="page-login--form">
|
<span style="font-family: PingFangSC-Medium, sans-serif">登录</span>
|
<el-card shadow="never">
|
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
|
<el-form-item prop="username">
|
<el-input type="text" v-model="formLogin.username" placeholder="用户名"> </el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input type="password" v-model="formLogin.password" placeholder="密码" show-password id="password">
|
</el-input>
|
<i id="iconfont" class="iconfont icon-biyanjing" @click="clickeye()"></i>
|
</el-form-item>
|
<el-form-item prop="code">
|
<el-input type="text" v-model="formLogin.code" placeholder="验证码">
|
<template slot="append">
|
<img class="login-code" :src="captcha" @click="getCaptchaData" />
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-button size="default" @click="submit" type="primary" class="button-login"> 登录 </el-button>
|
</el-form>
|
</el-card>
|
<div class="error" style="font-size: 14px; float: left">
|
{{ this.error }}
|
</div>
|
<p class="page-login--options">
|
<span> 注册</span>
|
<span>|</span>
|
<span>忘记密码</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { mapActions } from "vuex"
|
// import "@/assets/font/iconfont"
|
import { getCaptcha, login } from "@/api/login/login.js"
|
|
export default {
|
name: "LoginView",
|
data() {
|
return {
|
captcha: "",
|
// timeInterval: null,
|
// time: dayjs().format("HH:mm:ss"),
|
// 快速选择用户
|
dialogVisible: false,
|
// 表单
|
formLogin: {
|
username: "admin",
|
password: "123456",
|
code: ""
|
},
|
// 表单校验
|
rules: {
|
username: [
|
{
|
required: true,
|
message: "请输入用户名",
|
trigger: "blur"
|
}
|
],
|
password: [
|
{
|
required: true,
|
message: "请输入密码",
|
trigger: "blur"
|
}
|
],
|
code: [
|
{
|
required: true,
|
message: "请输入验证码",
|
trigger: "blur"
|
}
|
]
|
},
|
error: ""
|
}
|
},
|
mounted() {
|
this.timeInterval = setInterval(() => {
|
// this.refreshTime()
|
}, 1000)
|
this.getCaptchaData()
|
},
|
beforeDestroy() {
|
clearInterval(this.timeInterval)
|
},
|
methods: {
|
getCaptchaData() {
|
getCaptcha().then((res) => {
|
console.log(res)
|
if (res.code == 200) {
|
this.captchaId = res.data.captchaId
|
this.captcha = res.data.picPath
|
}
|
})
|
},
|
|
/**
|
* @description 提交表单
|
*/
|
// 提交登录信息
|
submit() {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
// 登录
|
login({
|
username: this.formLogin.username,
|
password: this.formLogin.password,
|
captcha: this.formLogin.code,
|
captchaId: this.captchaId
|
})
|
.then((res) => {
|
console.log("成功" + res)
|
this.$router.replace(this.$route.query.redirect || "/").catch((err) => {
|
console.log(err)
|
})
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
} else {
|
// 登录表单校验失败
|
// this.$message.error("表单校验失败，请检查");
|
this.error = "填入信息错误，请检查！"
|
var _this = this
|
setTimeout(function () {
|
_this.error = ""
|
}, 3000)
|
}
|
})
|
},
|
//点击眼睛
|
clickeye() {
|
// let eye = document.getElementById("iconfont")
|
let pwd = document.getElementById("password")
|
if (pwd.type == "password") {
|
// ;(pwd.type = "text"), (eye.className = "iconfont icon-yanjing")
|
} else {
|
// ;(pwd.type = "password"), (eye.className = "iconfont icon-biyanjing")
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.el-icon-view:before {
|
content: "";
|
}
|
.iconfont:before {
|
line-height: 48px;
|
position: absolute;
|
right: 19px;
|
font-size: 18px;
|
color: rgba(0, 0, 0, 0.4);
|
}
|
.page-login {
|
background-size: 100%;
|
height: 100%;
|
position: relative;
|
.page-login--layer-area {
|
overflow: hidden;
|
}
|
// 时间
|
.page-login--layer-time {
|
font-size: 24em;
|
font-weight: bold;
|
color: rgba(0, 0, 0, 0.03);
|
overflow: hidden;
|
}
|
// 登陆页面控件的容器
|
.page-login--content {
|
height: 100%;
|
min-height: 500px;
|
position: relative;
|
top: 0;
|
left: 0;
|
}
|
// header
|
.page-login--content-header {
|
padding: 1em 0;
|
.page-login--content-header-motto {
|
margin: 0px;
|
padding: 0px;
|
color: beige;
|
text-align: center;
|
font-size: 12px;
|
}
|
}
|
// main
|
.page-login--logo {
|
width: 240px;
|
margin-bottom: 2em;
|
margin-top: -2em;
|
position: absolute;
|
top: 7%;
|
left: 3%;
|
}
|
// 登录表单
|
.page-login--form {
|
width: 431px;
|
height: 400px;
|
left: 50%;
|
top: 30%;
|
transform: translate(-50%, 0%);
|
position: absolute;
|
background: #fafbff;
|
opacity: 0.9;
|
border-radius: 24px;
|
padding: 35px 36px;
|
text-align: center;
|
font-size: 36px;
|
line-height: 48px;
|
color: #181f30;
|
.el-form {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
.el-form-item {
|
margin-bottom: 24px;
|
width: 359px;
|
height: 48px;
|
background: #fff;
|
border: 8px;
|
.el-input__inner {
|
font-size: 14px;
|
height: 48px;
|
line-height: 20px;
|
padding-left: 16px;
|
color: #181f30;
|
}
|
}
|
}
|
// 卡片
|
.el-card {
|
margin-bottom: 15px;
|
background: transparent;
|
border: 0;
|
}
|
// 登录按钮
|
.button-login {
|
width: 359px;
|
height: 48px;
|
font-size: 16px;
|
line-height: 20px;
|
font-family: PingFangSC-Medium, sans-serif;
|
}
|
// 输入框左边的图表区域缩窄
|
.el-input-group__prepend {
|
padding: 0px 14px;
|
}
|
.login-code {
|
height: 40px - 2px;
|
display: block;
|
margin: 0px -20px;
|
border-top-right-radius: 2px;
|
border-bottom-right-radius: 2px;
|
}
|
// 登陆选项
|
.page-login--options {
|
font-family: PingFangSC-Medium, sans-serif;
|
color: #181f30 !important;
|
margin: 0px;
|
padding: 0px;
|
font-size: 14px;
|
line-height: 20px;
|
color: #2a78fb;
|
margin-right: 34px;
|
margin-bottom: 15px;
|
font-weight: bold;
|
float: right;
|
:nth-child(2) {
|
margin: 0px 5px;
|
}
|
}
|
.page-login--quick {
|
width: 100%;
|
}
|
}
|
.error {
|
float: left;
|
font-size: 14px;
|
line-height: 20px;
|
margin-left: 35px;
|
color: #f62f2f;
|
font-family: PingFangSC-Medium, sans-serif;
|
}
|
}
|
</style>
|
