From c6b7013c9ca9309896a225ecd1d20910365c0cac Mon Sep 17 00:00:00 2001
From: "wangmingyong@163.com" <wangmingyong@163.com>
Date: Fri, 28 Aug 2026 17:07:35 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zdxt-admin-plus-ui/src/views/login.vue    | 431 +++++++++++++-----
 1 file changed, 307 insertions(+), 124 deletions(-)

diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/login.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/login.vue
index 8385fa7d..adc0d665 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/login.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/login.vue
@@ -1,81 +1,89 @@
 <template>
-  <div class="login">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <div class="title-box">
-        <h3 class="title">{{ title }}</h3>
+  <div class="login-page">
+    <!-- 左上角 Logo -->
+    <div class="login-logo"></div>
+
+    <!-- 登录卡片 -->
+    <div class="loginwrap">
+      <!-- 左侧插画 -->
+      <div class="login-illustration"></div>
+
+      <!-- 右侧表单区 -->
+      <div class="loginbox">
+        <h1>登录</h1>
+
+        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+          <!-- 租户选择 -->
+          <el-form-item v-if="tenantEnabled" prop="tenantId" class="form-item">
+            <div class="inptit">租户</div>
+            <el-select v-model="loginForm.tenantId" filterable placeholder="请选择租户" class="form-input">
+              <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId" />
+            </el-select>
+          </el-form-item>
+
+          <!-- 账号 -->
+          <el-form-item prop="username" class="form-item">
+            <div class="inptit">账号</div>
+            <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="请输入用户名" class="form-input" />
+          </el-form-item>
+
+          <!-- 密码 -->
+          <el-form-item prop="password" class="form-item">
+            <div class="inptit">密码</div>
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              size="large"
+              auto-complete="off"
+              placeholder="请输入密码"
+              class="form-input"
+              @keyup.enter="handleLogin"
+            />
+          </el-form-item>
+
+          <!-- 验证码 -->
+          <el-form-item v-if="captchaEnabled" prop="code" class="form-item">
+            <div class="inptit">验证码</div>
+            <div class="captcha-row">
+              <el-input
+                v-model="loginForm.code"
+                size="large"
+                auto-complete="off"
+                placeholder="请输入验证码"
+                class="captcha-input"
+                @keyup.enter="handleLogin"
+              />
+              <div class="vcode">
+                <img :src="codeUrl" class="imgcode" @click="getCode" alt="验证码" />
+              </div>
+            </div>
+          </el-form-item>
+
+          <!-- 登录按钮 + 记住密码 -->
+          <div class="logindiv">
+            <div class="loginbtn" :class="{ loading: loading }" @click="handleLogin">
+              <span v-if="!loading">登录</span>
+              <span v-else>登录中...</span>
+            </div>
+            <div class="remember-wrap">
+              <input class="checksty" type="checkbox" v-model="loginForm.rememberMe" />
+              <span class="remtxt">记住密码</span>
+            </div>
+          </div>
+
+          <!-- 注册链接 -->
+          <div v-if="register" class="register-link">
+            <router-link class="link-type" :to="'/register'">没有账号？去注册</router-link>
+          </div>
+        </el-form>
+
+        <!-- 测试用户快捷登录（仅localhost环境显示） -->
+        <!-- <div v-if="isLocalhost" class="test-user-area">
+          <div class="loginbtn test-btn" @click="showTestUserDialog = true">选择测试用户</div>
+        </div> -->
       </div>
-      <el-form-item v-if="tenantEnabled" prop="tenantId">
-        <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
-          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
-          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          size="large"
-          auto-complete="off"
-          :placeholder="proxy.$t('login.password')"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item v-if="captchaEnabled" prop="code">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          :placeholder="proxy.$t('login.code')"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" class="login-code-img" @click="getCode" />
-        </div>
-      </el-form-item>
-<!--      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>-->
-<!--      <el-form-item style="float: right">-->
-<!--        <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">-->
-<!--          <svg-icon icon-class="wechat" />-->
-<!--        </el-button>-->
-<!--        <el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">-->
-<!--          <svg-icon icon-class="maxkey" />-->
-<!--        </el-button>-->
-<!--        <el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">-->
-<!--          <svg-icon icon-class="topiam" />-->
-<!--        </el-button>-->
-<!--        <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">-->
-<!--          <svg-icon icon-class="gitee" />-->
-<!--        </el-button>-->
-<!--        <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">-->
-<!--          <svg-icon icon-class="github" />-->
-<!--        </el-button>-->
-<!--      </el-form-item>-->
-      <el-form-item style="width: 100%">
-        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
-          <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
-          <span v-else>{{ proxy.$t('login.logging') }}</span>
-        </el-button>
-        <div v-if="register" style="float: right">
-          <router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
-        </div>
-      </el-form-item>
-      <!-- 测试用户快捷登录按钮（仅localhost环境显示） -->
-      <el-form-item v-if="isLocalhost" style="width: 100%; margin-bottom: 0">
-        <el-button size="large" type="danger" style="width: 100%" @click="showTestUserDialog = true">
-          选择测试用户
-        </el-button>
-      </el-form-item>
-    </el-form>
+    </div>
+
     <!-- 测试用户选择弹窗 -->
     <el-dialog v-model="showTestUserDialog" title="选择测试用户" width="620px" append-to-body>
       <el-table :data="testUsers" highlight-current-row style="width: 100%" @row-click="selectTestUser">
@@ -88,10 +96,6 @@
         </el-table-column>
       </el-table>
     </el-dialog>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2026 疯狂的狮子Li All Rights Reserved.</span>
-    </div>
   </div>
 </template>
 
@@ -130,9 +134,9 @@ const loginRules: ElFormRules = {
 const codeUrl = ref('');
 const loading = ref(false);
 // 验证码开关
-const captchaEnabled = ref(true);
+const captchaEnabled = ref(false);
 // 租户开关
-const tenantEnabled = ref(true);
+const tenantEnabled = ref(false);
 
 // 注册开关
 const register = ref(false);
@@ -268,74 +272,234 @@ const doSocialLogin = (type: string) => {
 };
 
 onMounted(() => {
-  getCode();
-  initTenantList();
+//  getCode();
+// initTenantList();
   getLoginData();
 });
 </script>
 
 <style lang="scss" scoped>
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* ===== 全局重置 ===== */
+.login-page {
+  position: relative;
+  width: 100%;
   height: 100%;
-  background-image: url('../assets/images/login-background.jpg');
+  background: url('/img/bg_login.jpg') no-repeat #dde1e2 center -130px;
   background-size: cover;
+  overflow: hidden;
+  font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif;
+}
+
+/* ===== 左上角 Logo ===== */
+.login-logo {
+  position: absolute;
+  top: 5%;
+  left: 5%;
+  width: 35%;
+  height: 60px;
+  background: url('/img/logo-zfjd-st.png') no-repeat;
+  background-size: 70%;
+}
+
+/* ===== 登录卡片容器 ===== */
+.loginwrap {
+  position: absolute;
+  z-index: 9;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  height: 55%;
+  min-height: 420px;
+  padding: 3%;
+  background: #fff url('/img/login_pic.png') no-repeat left -10% top -10px;
+  background-size: auto 105%;
+  border-radius: 20px;
+  box-shadow: 0 0 15px rgba(0, 10, 51, 0.35);
+  display: flex;
 }
 
-.title-box {
+/* 左侧插画区域（背景图已设在父容器） */
+.login-illustration {
+  flex: 0 0 55%;
+}
+
+/* ===== 右侧表单区 ===== */
+.loginbox {
+  position: relative;
+  flex: 0 0 42%;
   display: flex;
+  flex-direction: column;
+  //justify-content: center;
+  letter-spacing: 2px;
+  margin-left: 6%;
+  top:-50px;
+}
+
+.loginbox h1 {
+  font-size: 24px;
+  font-weight: 550;
+  line-height: 3;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+/* ===== 表单项 ===== */
+.form-item {
+  margin-bottom: 16px;
+}
+
+.inptit {
+  margin: 0 0 0px 5%;
+  font-size: 16px;
+  color: #000;
+  font-weight: 500;
+}
 
-  .title {
-    margin: 0px auto 30px auto;
-    text-align: center;
-    color: #707070;
+.form-input {
+  margin: 0 3%;
+  width: 90%;
+
+  :deep(.el-input__wrapper) {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
   }
 
-  :deep(.lang-select--style) {
-    line-height: 0;
-    color: #7483a3;
+  :deep(.el-input__inner) {
+    border: none;
+    height: 40px;
+    line-height: 40px;
+    color: #999;
   }
+
+  :deep(.el-select__wrapper) {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+}
+
+/* 验证码行 */
+.captcha-row {
+  display: flex;
+  align-items: center;
+  margin: 0 5%;
+  width: 90%;
+  gap: 8px;
 }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  z-index: 1;
-  .el-input {
+.captcha-input {
+  flex: 1;
+
+  :deep(.el-input__wrapper) {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :deep(.el-input__inner) {
+    border: none;
     height: 40px;
-    input {
-      height: 40px;
-    }
+    line-height: 40px;
+    color: #999;
   }
+}
+
+.vcode {
+  flex-shrink: 0;
+  width: 120px;
+  height: 40px;
+  border: 1px solid #eee;
+  overflow: hidden;
+  border-radius: 4px;
+  cursor: pointer;
 
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
+  .imgcode {
+    width: auto;
+    height: 100%;
+    cursor: pointer;
   }
 }
 
-.login-tip {
-  font-size: 13px;
+/* ===== 登录按钮 + 记住密码 ===== */
+.logindiv {
+  margin: 20px 5% 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.remember-wrap {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.checksty {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.remtxt {
+  margin-left: 8px;
+  color: #666;
+  font-size: 14px;
+}
+
+.loginbtn {
+  background-color: #1367fe;
+  border-radius: 50px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 40px;
   text-align: center;
-  color: #bfbfbf;
+  box-shadow: 0 0 10px rgba(19, 103, 254, 0.8);
+  width: 60%;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  user-select: none;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &.loading {
+    opacity: 0.6;
+    pointer-events: none;
+  }
 }
 
-.login-code {
-  width: 33%;
-  height: 40px;
-  float: right;
+.test-user-area {
+  margin-top: 12px;
 
-  img {
-    cursor: pointer;
-    vertical-align: middle;
+  .test-btn {
+    width: 100%;
+    background-color: #e6a23c;
+    box-shadow: 0 0 10px rgba(230, 162, 60, 0.8);
+  }
+}
+
+.register-link {
+  margin-top: 12px;
+  text-align: center;
+
+  .link-type {
+    color: #2380fe;
+    text-decoration: none;
+    font-size: 14px;
   }
 }
 
+/* ===== 底部版权 ===== */
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -349,8 +513,27 @@ onMounted(() => {
   letter-spacing: 1px;
 }
 
-.login-code-img {
-  height: 40px;
-  padding-left: 12px;
+/* ===== 响应式 ===== */
+@media screen and (max-width: 1600px) {
+  .loginwrap {
+    width: 60%;
+    background-position: left -12% top -10px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .loginwrap {
+    width: 65%;
+    background-position: left -15% top -10px;
+  }
+
+  .login-illustration {
+    display: none;
+  }
+
+  .loginbox {
+    flex: 0 0 90%;
+    margin-left: 0;
+  }
 }
 </style>