From e6acb39a2475e211f2c1decc45a95c868239c25f Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期五, 18 十月 2024 14:28:32 +0800
Subject: [PATCH] ll
---
admin/src/views/login.vue | 91 ++++++++++++++++++++++++++++++++-------------
1 files changed, 64 insertions(+), 27 deletions(-)
diff --git a/admin/src/views/login.vue b/admin/src/views/login.vue
index 652081b..d0312a4 100644
--- a/admin/src/views/login.vue
+++ b/admin/src/views/login.vue
@@ -6,39 +6,55 @@
<div class="h3">鏅烘収鐗╂祦鍥尯瀹夋秷涓�浣撳寲绯荤粺</div>
</div>
<div class="form_wrap">
- <!-- <div class="tabs">
- <div class="tab active">
+ <div class="tabs">
+ <div class="tab" @click="tabClick('0')" :class="{ active: activeTab == '0' }">
<div class="name">甯愬彿鐧诲綍</div>
<div class="icon"></div>
</div>
- <div class="tab">
+ <div class="tab" @click="tabClick('1')" :class="{ active: activeTab == '1' }">
<div class="name">鎵嬫満鐧诲綍</div>
<div class="icon"></div>
</div>
- </div> -->
- <div class="df_ac">
- <div class="label">甯愬彿</div>
- <div class="line">
- <el-input v-model="username" placeholder="璇疯緭鍏ュ笎鍙�" maxlength="50" v-trim />
- </div>
</div>
- <div class="df_ac">
- <div class="label">瀵嗙爜</div>
- <div class="line">
- <el-input v-model="password" placeholder="璇疯緭鍏ュ瘑鐮�" type="password" maxlength="30" show-password />
+ <template v-if="activeTab == '0'">
+ <div class="df_ac">
+ <div class="label">甯愬彿</div>
+ <div class="line">
+ <el-input v-model="username" placeholder="璇疯緭鍏ュ笎鍙�" maxlength="50" v-trim />
+ </div>
</div>
- </div>
+ <div class="df_ac">
+ <div class="label">瀵嗙爜</div>
+ <div class="line">
+ <el-input v-model="password" placeholder="璇疯緭鍏ュ瘑鐮�" type="password" maxlength="30" show-password />
+ </div>
+ </div>
+ <div class="df_ac">
+ <div class="label">楠岃瘉鐮�</div>
+ <div class="line">
+ <el-input v-model="captcha.value" placeholder="璇疯緭鍏ラ獙璇佺爜" maxlength="4" @keypress.enter.native="login" />
+ <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
+ <span v-else><i class="el-icon-loading"></i></span>
+ </div>
+ </div>
+ </template>
+ <template v-if="activeTab == '1'">
+ <div class="df_ac">
+ <div class="label">鎵嬫満鍙�</div>
+ <div class="line">
+ <el-input v-model="password" placeholder="璇疯緭鍏ユ墜鏈哄彿" type="password" maxlength="30" show-password />
+ </div>
+ </div>
+ <div class="df_ac">
+ <div class="label">楠岃瘉鐮�</div>
+ <div class="line">
+ <el-input v-model="captcha.value" placeholder="璇疯緭鍏ラ獙璇佺爜" maxlength="4" @keypress.enter.native="login" />
+ <span class="code_get" @click="getCode">鑾峰彇楠岃瘉鐮�</span>
+ </div>
+ </div>
+ </template>
- <div class="df_ac">
- <div class="label">楠岃瘉鐮�</div>
- <div class="line">
- <el-input v-model="captcha.value" placeholder="璇疯緭鍏ラ獙璇佺爜" maxlength="4" @keypress.enter.native="login" />
- <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
- <span v-else><i class="el-icon-loading"></i></span>
- </div>
- </div>
- <el-button :loading="loading" type="primary" class="login_btn"
- @click.native.prevent="login">绔嬪嵆鐧诲綍</el-button>
+ <el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="login">绔嬪嵆鐧诲綍</el-button>
<div class="btn_wrap">
<el-checkbox v-model="isRemPsd">
<span style="font-size: 13px; font-weight: 400" class="placeholder9">璁颁綇瀵嗙爜</span>
@@ -66,6 +82,7 @@
isRemPsd: false,
username: '',
password: '',
+ activeTab: '1',
// 楠岃瘉鐮�
captcha: {
loading: false,
@@ -120,6 +137,13 @@
.finally(() => {
this.loading = false
})
+ },
+ getCode() {
+ console.log('getCode');
+
+ },
+ tabClick(val) {
+ this.activeTab = val
},
// 鍒锋柊楠岃瘉鐮�
refreshCaptcha() {
@@ -221,7 +245,7 @@
background-color: #fff;
box-sizing: border-box;
/* padding: 50px 80px 20px; */
- padding: 80px 80px 20px;
+ padding: 50px 80px 20px;
position: relative;
.tabs {
@@ -236,6 +260,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
+ cursor: pointer;
.icon {
width: 36px;
@@ -287,10 +312,11 @@
margin-bottom: 17px;
display: flex;
width: 100%;
-
+ align-items: center;
+ position: relative;
.el-input {
height: 40px;
-
+ flex: 1;
// font-size: 14px;
::v-deep .el-input__inner {
height: 40px !important;
@@ -301,6 +327,17 @@
width: 100px;
margin-left: 10px;
}
+ .code_get{
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 14px;
+ width: 72px;
+ z-index: 11;
+ margin-left: 10px;
+ cursor: pointer;
+ color: $primary-color;
+ }
}
.forget {
--
Gitblit v1.9.3