<template>
|
<div class="page-login">
|
<div class="page-login--layer page-login--layer-area">
|
<ul class="circles">
|
<li v-for="n in 10" :key="n"></li>
|
</ul>
|
</div>
|
<div class="page-login--layer page-login--layer-time" flex="main:center cross:center">
|
{{ time }}
|
</div>
|
<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 -->
|
<div class="page-logo-box">
|
<div class="logo-common">
|
<img class="page-login--logo-left" src="./image/liantong-logo@2x.png" />
|
<div class="page-logo-divider"></div>
|
</div>
|
<div class="logo-common">
|
<img class="page-login--logo-right" src="./image/logo@2x.png" />
|
</div>
|
</div>
|
<!-- <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="用户名">
|
<!-- <i slot="prepend" class="fa fa-user-circle-o"></i> -->
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input type="password" v-model="formLogin.password" placeholder="密码" show-password id="password">
|
<!-- <i slot="prepend" class="fa fa-keyboard-o"></i> -->
|
</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" flex="main:justify cross:center">
|
<span> 注册</span>
|
<span>|</span>
|
<span>忘记密码</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import dayjs from "dayjs"
|
// import localeMixin from "@/locales/mixin.js"
|
import { getCaptcha, login } from "@/api/admin/login"
|
import "@/assets/font/iconfont"
|
|
export default {
|
name: "loginView",
|
mixins: [],
|
data() {
|
return {
|
captchaId: "",
|
captcha: "",
|
timeInterval: null,
|
time: dayjs().format("HH:mm:ss"),
|
// 快速选择用户
|
dialogVisible: false,
|
// 表单
|
formLogin: {
|
username: "",
|
password: "",
|
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((rsp) => {
|
if (rsp.code == 200) {
|
this.captchaId = rsp.data.captchaId
|
this.captcha = rsp.data.picPath
|
}
|
})
|
},
|
refreshTime() {
|
this.time = dayjs().format("HH:mm:ss")
|
},
|
|
/**
|
* @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((rsp) => {
|
// 重定向对象不存在则返回顶层路径
|
if (rsp != "") {
|
// this.$message.warning(rsp);
|
this.error = "填入信息错误，请检查！"
|
let _this = this
|
setTimeout(function () {
|
_this.error = ""
|
}, 3000)
|
if (rsp.indexOf("验证码错误") > -1) {
|
this.getCaptchaData()
|
}
|
return
|
}
|
this.$router.push({ path: "/commonWeb" })
|
})
|
} 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 {
|
// width: 18px;
|
// height: 12px;
|
line-height: 48px;
|
position: absolute;
|
right: 19px;
|
font-size: 18px;
|
color: rgba(0, 0, 0, 0.4);
|
}
|
.page-login {
|
// @extend %unable-select;
|
// $backgroundColor: #3e3f41;
|
// ---
|
// background-color: $backgroundColor;
|
user-select: none;
|
cursor: pointer;
|
background-image: url("../../../../public/images/login/login.png");
|
background-size: 100%;
|
height: 100%;
|
position: relative;
|
// 层
|
.page-login--layer {
|
// @extend %full;
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
bottom: 0px;
|
left: 0px;
|
overflow: auto;
|
}
|
.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;
|
// justify-content: space-evenly;
|
// align-items: flex-end;
|
// margin-right: 10%;
|
position: relative;
|
top: 0;
|
left: 0;
|
}
|
// header
|
.page-login--content-header {
|
padding: 1em 0;
|
.page-login--content-header-motto {
|
margin: 0px;
|
padding: 0px;
|
color: $color-text-normal;
|
text-align: center;
|
font-size: 12px;
|
}
|
}
|
// main
|
.page-logo-box {
|
position: absolute;
|
top: 7%;
|
left: 3%;
|
width: 523px;
|
height: 70px;
|
border-radius: 25px;
|
opacity: 1;
|
background: rgba(255, 255, 255, 0.65);
|
display: flex;
|
.logo-common {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
.page-login--logo-left {
|
width: 205px;
|
height: 61px;
|
}
|
.page-login--logo-right {
|
width: 214px;
|
height: 59px;
|
}
|
.page-logo-divider {
|
position: absolute;
|
right: -1px;
|
width: 1px;
|
height: 47px;
|
background: #080404;
|
}
|
}
|
}
|
// 登录表单
|
.page-login--form {
|
width: 431px;
|
height: 482px;
|
right: calc(10%);
|
top: calc(50% - 241px);
|
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;
|
// background-color: #fff;
|
// border: 1px solid rgba($color: #000000, $alpha: 0.1);
|
}
|
// .el-input__inner:hover{
|
// border-color: #347efb;
|
// }
|
}
|
}
|
// 卡片
|
.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: $color-primary;
|
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;
|
}
|
// 快速选择用户面板
|
.page-login--quick-user {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
padding: 10px 0px;
|
border-radius: 4px;
|
&:hover {
|
background-color: $color-bg;
|
i {
|
color: $color-text-normal;
|
}
|
span {
|
color: $color-text-normal;
|
}
|
}
|
i {
|
font-size: 36px;
|
color: $color-text-sub;
|
}
|
span {
|
font-size: 12px;
|
margin-top: 10px;
|
color: $color-text-sub;
|
}
|
}
|
// footer
|
.page-login--content-footer {
|
padding: 1em 0;
|
.page-login--content-footer-locales {
|
padding: 0px;
|
margin: 0px;
|
margin-bottom: 15px;
|
font-size: 12px;
|
line-height: 12px;
|
text-align: center;
|
color: $color-text-normal;
|
a {
|
color: $color-text-normal;
|
margin: 0 0.5em;
|
&:hover {
|
color: $color-text-main;
|
}
|
}
|
}
|
.page-login--content-footer-copyright {
|
padding: 0px;
|
margin: 0px;
|
margin-bottom: 10px;
|
font-size: 12px;
|
line-height: 12px;
|
text-align: center;
|
color: $color-text-normal;
|
a {
|
color: $color-text-normal;
|
}
|
}
|
.page-login--content-footer-options {
|
padding: 0px;
|
margin: 0px;
|
font-size: 12px;
|
line-height: 12px;
|
text-align: center;
|
a {
|
color: $color-text-normal;
|
margin: 0 1em;
|
}
|
}
|
}
|
// 背景
|
.circles {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0px;
|
padding: 0px;
|
li {
|
position: absolute;
|
display: block;
|
list-style: none;
|
width: 20px;
|
height: 20px;
|
background: #fff;
|
animation: animate 25s linear infinite;
|
bottom: -200px;
|
@keyframes animate {
|
0% {
|
transform: translateY(0) rotate(0deg);
|
opacity: 1;
|
border-radius: 0;
|
}
|
100% {
|
transform: translateY(-1000px) rotate(720deg);
|
opacity: 0;
|
border-radius: 50%;
|
}
|
}
|
&:nth-child(1) {
|
left: 15%;
|
width: 80px;
|
height: 80px;
|
animation-delay: 0s;
|
}
|
&:nth-child(2) {
|
left: 5%;
|
width: 20px;
|
height: 20px;
|
animation-delay: 2s;
|
animation-duration: 12s;
|
}
|
&:nth-child(3) {
|
left: 70%;
|
width: 20px;
|
height: 20px;
|
animation-delay: 4s;
|
}
|
&:nth-child(4) {
|
left: 40%;
|
width: 60px;
|
height: 60px;
|
animation-delay: 0s;
|
animation-duration: 18s;
|
}
|
&:nth-child(5) {
|
left: 65%;
|
width: 20px;
|
height: 20px;
|
animation-delay: 0s;
|
}
|
&:nth-child(6) {
|
left: 75%;
|
width: 150px;
|
height: 150px;
|
animation-delay: 3s;
|
}
|
&:nth-child(7) {
|
left: 35%;
|
width: 200px;
|
height: 200px;
|
animation-delay: 7s;
|
}
|
&:nth-child(8) {
|
left: 50%;
|
width: 25px;
|
height: 25px;
|
animation-delay: 15s;
|
animation-duration: 45s;
|
}
|
&:nth-child(9) {
|
left: 20%;
|
width: 15px;
|
height: 15px;
|
animation-delay: 2s;
|
animation-duration: 35s;
|
}
|
&:nth-child(10) {
|
left: 85%;
|
width: 150px;
|
height: 150px;
|
animation-delay: 0s;
|
animation-duration: 11s;
|
}
|
}
|
}
|
}
|
</style>
|
