|
@@ -3,10 +3,10 @@
|
|
<div class="bg"><img :src="bg" alt=""></div>
|
|
<div class="bg"><img :src="bg" alt=""></div>
|
|
<div class="logo">
|
|
<div class="logo">
|
|
<img :src="logo" alt="">
|
|
<img :src="logo" alt="">
|
|
- <span class="logo_txt">东信充值管理系统</span>
|
|
|
|
|
|
+ <span class="logo_txt">充值管理平台</span>
|
|
</div>
|
|
</div>
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
- <h3 class="title">东信充值管理系统</h3>
|
|
|
|
|
|
+ <h3 class="title">用户登录 <span>LOGIN</span></h3>
|
|
<el-form-item prop="username">
|
|
<el-form-item prop="username">
|
|
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
|
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
@@ -15,13 +15,16 @@
|
|
<el-form-item prop="password">
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
v-model="loginForm.password"
|
|
- type="password"
|
|
|
|
|
|
+ :type="passwordtxt"
|
|
auto-complete="off"
|
|
auto-complete="off"
|
|
placeholder="密码"
|
|
placeholder="密码"
|
|
@keyup.enter.native="handleLogin"
|
|
@keyup.enter.native="handleLogin"
|
|
>
|
|
>
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
|
|
+ <svg-icon slot="prefix" icon-class="eye" class="el-input__icon input-icon" style="position:absolute;right:-320px" @click="eyeTab" v-show="passwordtxt =='password'" />
|
|
|
|
+ <svg-icon slot="prefix" icon-class="eye-open" class="el-input__icon input-icon" style="position:absolute;right:-320px" @click="eyeTab" v-show="passwordtxt =='text'" />
|
|
</el-input>
|
|
</el-input>
|
|
|
|
+
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item prop="code" v-if="captchaOnOff">
|
|
<el-form-item prop="code" v-if="captchaOnOff">
|
|
<el-input
|
|
<el-input
|
|
@@ -72,6 +75,7 @@ export default {
|
|
name: "Login",
|
|
name: "Login",
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ passwordtxt:"password",
|
|
bg:bgImg,
|
|
bg:bgImg,
|
|
logo:logoImg,
|
|
logo:logoImg,
|
|
codeUrl: "",
|
|
codeUrl: "",
|
|
@@ -115,6 +119,14 @@ export default {
|
|
this.getCookie();
|
|
this.getCookie();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ eyeTab(){
|
|
|
|
+ if(this.passwordtxt == "password"){
|
|
|
|
+ this.passwordtxt = "text"
|
|
|
|
+ }else{
|
|
|
|
+ this.passwordtxt = "password"
|
|
|
|
+ }
|
|
|
|
+ console.log(this.passwordtxt)
|
|
|
|
+ },
|
|
getCode() {
|
|
getCode() {
|
|
getCodeImg().then(res => {
|
|
getCodeImg().then(res => {
|
|
console.log(res)
|
|
console.log(res)
|
|
@@ -187,14 +199,15 @@ export default {
|
|
position: fixed;
|
|
position: fixed;
|
|
top:0;
|
|
top:0;
|
|
img{
|
|
img{
|
|
- width:6%;
|
|
|
|
|
|
+ width:152px;
|
|
margin:10px 2rem 0 20px;
|
|
margin:10px 2rem 0 20px;
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.logo_txt{
|
|
.logo_txt{
|
|
- font-size: 1.6rem;
|
|
|
|
|
|
+ font-size: 1.5rem;
|
|
color:#fff;
|
|
color:#fff;
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
|
+ letter-spacing: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.login {
|
|
.login {
|
|
@@ -207,19 +220,24 @@ export default {
|
|
}
|
|
}
|
|
.title {
|
|
.title {
|
|
margin: 0px auto 30px auto;
|
|
margin: 0px auto 30px auto;
|
|
- text-align: center;
|
|
|
|
- color: #707070;
|
|
|
|
|
|
+ text-align: left;
|
|
|
|
+ color: #000000;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ span{
|
|
|
|
+ margin-left:10px;
|
|
|
|
+ opacity: 0.25;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.login-form {
|
|
.login-form {
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
- width: 400px;
|
|
|
|
- padding: 25px 25px 5px 25px;
|
|
|
|
|
|
+ width: 456px;
|
|
|
|
+ padding: 63px 35px;
|
|
.el-input {
|
|
.el-input {
|
|
- height: 38px;
|
|
|
|
|
|
+ height: 40px;
|
|
input {
|
|
input {
|
|
- height: 38px;
|
|
|
|
|
|
+ height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.input-icon {
|
|
.input-icon {
|