|
|
|
|
@ -1,48 +1,53 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="login-container">
|
|
|
|
|
<img class="build-img" src="~@/assets/login/build.png" alt="">
|
|
|
|
|
<!-- <vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"-->
|
|
|
|
|
<!-- linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"-->
|
|
|
|
|
<!-- :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>-->
|
|
|
|
|
|
|
|
|
|
<vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
|
|
|
|
|
linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
|
|
|
|
|
:hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>
|
|
|
|
|
|
|
|
|
|
<img class="title-img" src="~@/assets/login/title.png" alt="">
|
|
|
|
|
<el-form size="small" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
|
|
|
|
|
label-position="left">
|
|
|
|
|
|
|
|
|
|
<div class="title-container">
|
|
|
|
|
<h3 class="title">{{title}}</h3>
|
|
|
|
|
<h3 class="title">欢迎登录</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="username">
|
|
|
|
|
<span class="svg-container">
|
|
|
|
|
<div class="form-item">
|
|
|
|
|
<span class="svg-container">
|
|
|
|
|
<svg-icon icon-class="user" />
|
|
|
|
|
</span>
|
|
|
|
|
<el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
|
|
|
|
|
tabindex="1" auto-complete="on" />
|
|
|
|
|
<el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
|
|
|
|
|
tabindex="1" auto-complete="on" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="password">
|
|
|
|
|
<span class="svg-container">
|
|
|
|
|
<div class="form-item">
|
|
|
|
|
<span class="svg-container">
|
|
|
|
|
<svg-icon icon-class="password" />
|
|
|
|
|
</span>
|
|
|
|
|
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
|
|
|
|
|
placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
|
|
</span>
|
|
|
|
|
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
|
|
|
|
|
placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="code">
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<div class="form-item">
|
|
|
|
|
<span class="svg-container">
|
|
|
|
|
<svg-icon icon-class="message" />
|
|
|
|
|
</span>
|
|
|
|
|
<svg-icon icon-class="message" />
|
|
|
|
|
</span>
|
|
|
|
|
<el-input ref="username" v-model="loginForm.code" placeholder="请输入验证码" name="username" type="text"
|
|
|
|
|
tabindex="1" auto-complete="on" />
|
|
|
|
|
<el-button :loading="msgLoading" type="primary" size="small" :disabled="isVer" @click="sendSms">发送验证{{ isVer ? ('（'+verTime+'）') : '' }}</el-button>
|
|
|
|
|
<el-button class="msg-btn" :loading="msgLoading" type="primary" size="small" :disabled="isVer" @click="sendSms">发送验证{{ isVer ? ('（'+verTime+'）') : '' }}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
|
|
|
|
|
<el-button :loading="loading" type="primary" class="login-btn"
|
|
|
|
|
@click.native.prevent="handleLogin">登录</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -222,20 +227,19 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* reset element-ui css */
|
|
|
|
|
|
|
|
|
|
.login-container {
|
|
|
|
|
.el-input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 47px;
|
|
|
|
|
width: 85%;
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: 0px;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
padding: 12px 5px 12px 15px;
|
|
|
|
|
padding: 4px 5px 4px 15px;
|
|
|
|
|
color: $light_gray;
|
|
|
|
|
height: 47px;
|
|
|
|
|
caret-color: $cursor;
|
|
|
|
|
|
|
|
|
|
&:-webkit-autofill {
|
|
|
|
|
@ -244,13 +248,6 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
color: #454545;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
@ -259,21 +256,45 @@
|
|
|
|
|
$dark_gray:#122583;
|
|
|
|
|
$light_gray:#122583;
|
|
|
|
|
|
|
|
|
|
.build-img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 36.5vw;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
top: 27.3%;
|
|
|
|
|
left: 10.2%;
|
|
|
|
|
}
|
|
|
|
|
.title-img {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 44.64vw;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
margin: 16.11vh auto 0;
|
|
|
|
|
}
|
|
|
|
|
.form-item {
|
|
|
|
|
height: 3vw;
|
|
|
|
|
width: 86.4%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
|
filter: drop-shadow(0 0 1px #cdcdcd);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.login-container {
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
//background-color: $bg;
|
|
|
|
|
background: url("../../assets/bg.jpg") no-repeat;
|
|
|
|
|
background: url("~@/assets/login/bkg.png") no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.login-form {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 520px;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
padding: 20px 35px 0;
|
|
|
|
|
margin: 160px auto;
|
|
|
|
|
width: 28.7vw;
|
|
|
|
|
margin: 9.81vh 10.2vw 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: inset 0 0 4px rgb(255,255,255,0.8);
|
|
|
|
|
filter: drop-shadow(0 0 7px rgba(0,0,0,0.2));
|
|
|
|
|
background-color: rgba(255,255,255,0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tips {
|
|
|
|
|
@ -298,24 +319,86 @@
|
|
|
|
|
|
|
|
|
|
.title-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 2vw;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
color: $light_gray;
|
|
|
|
|
margin: 0px auto 40px auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 1.7vw;
|
|
|
|
|
letter-spacing: 4px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
padding: 1.41vw 0 1.2vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: "";
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background: linear-gradient(to right, #fff0 20%, #fff, #fff0 80%);
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.show-pwd {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
top: 7px;
|
|
|
|
|
right: 10%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(0, -50%);
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: $dark_gray;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
.msg-btn {
|
|
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-image: linear-gradient(90deg, #1d57da 0%, #1d57da 0%, #4185c5 100%);
|
|
|
|
|
}
|
|
|
|
|
.login-btn {
|
|
|
|
|
width: 86.4%;
|
|
|
|
|
height: 3vw;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-image: linear-gradient(90deg, #1d57da 0%, #1d57da 0%, #05a658 100%);
|
|
|
|
|
display: block;
|
|
|
|
|
margin: auto auto 3.2vw;
|
|
|
|
|
font-size: 1.21vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-form-item--small.el-form-item {
|
|
|
|
|
margin-bottom: 1.3vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 960px) {
|
|
|
|
|
.title-img {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.login-container .login-form {
|
|
|
|
|
width: 90%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
.login-container .title-container .title {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.form-item {
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.login-container .login-btn {
|
|
|
|
|
height: 40px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-form-item__error {
|
|
|
|
|
transform: translate(-20px,-76%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
