From ce4540bd3c0eeac9b80614eca0377d3bb2576b91 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Tue, 19 May 2026 17:03:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login.vue | 271 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 235 insertions(+), 36 deletions(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index 3d431e8..c6d35b3 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="login">
+    <div class="logo"></div>
     <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
       <div class="title-box">
-        <h3 class="title">{{ title }}</h3>
-<!--        <lang-select />-->
+        <!--        <h3 class="title">{{ title }}</h3>-->
+        <!--        <lang-select />-->
+      </div>
+      <div class="login-tabs">
+        <span class="is-active">账号登录</span>
       </div>
       <el-form-item v-if="tenantEnabled" prop="tenantId">
         <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
@@ -44,25 +48,28 @@
         </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">
+      <!--      <button class="forgot-button" type="button">忘记密码?</button>-->
+      <!--      <div class="login-options">-->
+      <!--      </div>-->
+      <!--      <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 class="login-submit">
+        <el-button :loading="loading" size="large" type="primary" class="login-button" @click.prevent="handleLogin">
           <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
           <span v-else>{{ proxy.$t('login.logging') }}</span>
         </el-button>
@@ -231,13 +238,27 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.logo {
+  position: absolute;
+  top: 1vw;
+  left: 1vw;
+  width: 100px;
+  height: 76px;
+  //background-image: url('../assets/images/profile.jpg');
+  background-image: url('../assets/images/logo.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
 .login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  //display: flex;
+  //justify-content: center;
+  //align-items: center;
   height: 100%;
+  min-height: 640px;
   background-image: url('../assets/images/login-background.jpg');
-  background-size: cover;
+  //background-size: cover;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
 
 .title-box {
@@ -256,25 +277,174 @@ onMounted(() => {
 }
 
 .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+  width: 480px;
+  padding: 76px 80px 58px;
+  position: absolute;
+  top: 50%;
+  right: 14.9%;
+  transform: translateY(-50%);
   z-index: 1;
+  border: 1px solid rgba(231, 239, 250, 0.92);
+  border-radius: 0;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 14px 38px rgba(62, 112, 172, 0.1);
+
+  :deep(.el-form-item) {
+    margin-bottom: 28px;
+  }
+
+  :deep(.el-form-item__error) {
+    padding-top: 6px;
+    color: #f56c6c;
+  }
+
   .el-input {
-    height: 40px;
+    height: 52px;
+
     input {
-      height: 40px;
+      height: 52px;
+      color: #4f5f73;
+      font-size: 15px;
+      letter-spacing: 0;
     }
   }
 
   .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
+    width: 15px;
+    height: 51px;
+    margin-left: 2px;
+    color: #aab4c4;
   }
 }
 
+.login-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 34px;
+  height: 34px;
+  margin-bottom: 42px;
+  color: #8f96a3;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: 2px;
+  line-height: 1;
+  white-space: nowrap;
+
+  span {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 34px;
+  }
+
+  .is-active {
+    color: #253347;
+    font-weight: 500;
+  }
+
+  .is-active::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -11px;
+    width: 36px;
+    height: 3px;
+    border-radius: 99px;
+    background: #118df0;
+    transform: translateX(-50%);
+  }
+}
+
+:deep(.el-select__wrapper),
+:deep(.el-input__wrapper) {
+  min-height: 52px;
+  padding: 0 16px;
+  border-radius: 3px;
+  background: #f4f6fb;
+  box-shadow: none;
+}
+
+:deep(.el-select__wrapper.is-focused),
+:deep(.el-input__wrapper.is-focus) {
+  background: #fff;
+  box-shadow:
+    0 0 0 1px #1590f1 inset,
+    0 6px 16px rgba(17, 141, 240, 0.1);
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: #adb4c0;
+}
+
+.login-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: -8px 0 54px;
+  color: #a3abb7;
+
+  :deep(.el-checkbox) {
+    height: 18px;
+    color: #a3abb7;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  :deep(.el-checkbox__label) {
+    padding-left: 8px;
+    color: #a3abb7;
+  }
+
+  :deep(.el-checkbox__inner) {
+    width: 16px;
+    height: 16px;
+    border-color: #c8ced8;
+    border-radius: 0;
+    background: transparent;
+  }
+}
+
+.forgot-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #a3abb7;
+  font: inherit;
+  cursor: pointer;
+}
+
+.forgot-button:hover {
+  color: #118df0;
+}
+
+.login-submit {
+  width: 100%;
+  margin-bottom: 0 !important;
+}
+
+.login-button {
+  width: 100%;
+  height: 54px;
+  border: 0;
+  border-radius: 4px;
+  background: #118df0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 14px;
+  box-shadow: none;
+
+  span {
+    margin-right: -14px;
+  }
+}
+
+.login-button:hover,
+.login-button:focus {
+  background: #0b83e4;
+}
+
 .login-tip {
   font-size: 13px;
   text-align: center;
@@ -283,7 +453,7 @@ onMounted(() => {
 
 .login-code {
   width: 33%;
-  height: 40px;
+  height: 52px;
   float: right;
 
   img {
@@ -306,7 +476,36 @@ onMounted(() => {
 }
 
 .login-code-img {
-  height: 40px;
+  height: 52px;
   padding-left: 12px;
 }
+
+@media (max-width: 1280px) {
+  .login-form {
+    right: 8%;
+  }
+}
+
+@media (max-width: 960px) {
+  .login {
+    min-height: 100%;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .login-form {
+    width: min(88vw, 480px);
+    min-height: auto;
+    padding: 56px 42px 44px;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+
+  .login-tabs {
+    gap: 22px;
+    justify-content: center;
+    font-size: 17px;
+    letter-spacing: 1px;
+  }
+}
 </style>