From 3503a399fbf236bef5f1113a20407e4dadf44085 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 1 Sep 2026 23:59:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E6=B8=90=E5=8F=98=E8=83=8C=E6=99=AF=E4=B8=8E?=
 =?UTF-8?q?=E7=AA=84=E5=B1=8F=E9=80=82=E9=85=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dev-output.txt            | Bin 0 -> 4124 bytes
 src/views/login/index.vue |  60 ++++++++++++++++++++++++++++----------
 2 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 dev-output.txt

diff --git a/dev-output.txt b/dev-output.txt
new file mode 100644
index 0000000000000000000000000000000000000000..7cefd2acaf064a0f7242930580e89675eff17c5c
GIT binary patch
literal 4124
zcmeH}-)<5?6vofBiBI6oUSTy_*ag}`QuRVFOiWXw(U{@|!WK{}%`Q~A@<n_-Uqk(U
zGfWw6o7A*KW5{H7=ifQ=%{SjUyFb3)v>W!o5<9V(<yN=*Jjc`{>PMT>?^>VUh~6V>
z+NRZ9O&HCwO6;+<tz-LE*u>s5*2Ah}b9ys8b+L?nbS|~i64eNAxv8(ZkJo~c1f(@r
z68x9+g)d>plGXQUO<6a0qXT+fW+#jdnJwr~=;xe6CHPJlzhwt_&N#1HDeqVI)Lz;X
z*U#LHxZ1%kbJbh4SQ+ePUEp23%^CH`w5}HU75=6*D4Ow}ear8ywF$M1=Fdm^_4Zi|
zLjH_X_CPU?JhUCkaLz4O4Pj+!$J}9+GCs8#(khv0J8Sv#jHi*es%zIxrx&)sfM@U`
zTzhacwNLmj>_g;D*!)S(;!4>=e5bbMxKCkEJ&j%#VL+$*`L=iW&GRoy=2wk=+o7+6
zc#|8KdeT3_E$p5hp+7;7LCeyy;$g#H+Y9dePQ<8A6*QH)9fhFnbhkWv%(_N(*9Yw3
zBkyhGPqY5Ey-n*>(L%L>+QwM<yb<I0-OlS{h>c=#hWh&GRB;}#NKqc)5vnX%*W)cr
zIm#&)N*%b^s=BAL(Pwz|dF<ihUBT-d|GDitHP1nqTP3pC<qQ?(dgxK>`mD_CogMN#
zWHdu#6|9s&2Kd*?lH$?n+~=_@Rn~rq?Qk+_TefSKuflQ*ew73C+==euZ?SxgJ_e{K
zahYFPRM|hEiPapm+(m68r|mgvlJ=!^|NSax>8lYmJ-twG8S&VrHrzA&2blODqdKrG
z)z!!d%h(S$ypHOt=T6UZ1Ag^|s;^mI#Q*hvp#saw8<}mdSzaN_P552^2dwUI%WK)Q
QtpBuiUiN<s*OM`R0<wm6Hvj+t

literal 0
HcmV?d00001

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 22ffbc83..8e42388a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -248,7 +248,6 @@ onMounted(() => getCaptcha());
 
 <style lang="scss" scoped>
 $primary: #165dff;
-$bg: #f8fafc;
 $text-primary: #273248;
 $text-secondary: #667085;
 $text-muted: #98a2b3;
@@ -259,7 +258,8 @@ $input-h: 44px;
   display: flex;
   min-height: 100vh;
   overflow: auto;
-  background: $bg;
+  /* 浅色渐变底色；桌面端被品牌区背景图与白色卡片完全覆盖，窄屏两区透明后透出 */
+  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
 }
 
 .login-toolbar {
@@ -612,7 +612,7 @@ $input-h: 44px;
       flex: 1;
       height: 1px;
       content: "";
-      background: var(--el-border-color-lighter);
+      background: rgb(30 58 138 / 12%);
     }
   }
 
@@ -621,6 +621,7 @@ $input-h: 44px;
     gap: 12px;
   }
 
+  /* 半透明白底按钮，在渐变背景上保持可见；hover 时提实并加深投影 */
   &__btn {
     display: flex;
     flex: 1;
@@ -632,18 +633,22 @@ $input-h: 44px;
     font-size: 14px;
     color: $text-secondary;
     cursor: pointer;
-    background: transparent;
-    border: 1px solid var(--el-border-color-lighter);
+    background: rgb(255 255 255 / 80%);
+    border: 1px solid rgb(30 58 138 / 10%);
     border-radius: 8px;
+    box-shadow: 0 1px 2px rgb(30 58 138 / 6%);
+    backdrop-filter: blur(4px);
     transition:
       color 0.2s,
       background 0.2s,
-      border-color 0.2s;
+      border-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover {
       color: $primary;
-      background: rgba($primary, 0.04);
-      border-color: rgba($primary, 0.28);
+      background: #fff;
+      border-color: rgba($primary, 0.35);
+      box-shadow: 0 4px 12px rgba($primary, 0.14);
     }
   }
 
@@ -737,6 +742,25 @@ $input-h: 44px;
 
 .dark .login-alt__divider {
   color: rgb(255 255 255 / 20%);
+
+  &::before,
+  &::after {
+    background: rgb(255 255 255 / 12%);
+  }
+}
+
+/* 深色下按钮用半透明白叠加，hover 提亮 */
+.dark .login-alt__btn {
+  color: rgb(255 255 255 / 65%);
+  background: rgb(255 255 255 / 6%);
+  border-color: rgb(255 255 255 / 12%);
+  box-shadow: none;
+
+  &:hover {
+    color: #fff;
+    background: rgb(255 255 255 / 12%);
+    border-color: rgb(255 255 255 / 24%);
+  }
 }
 
 .fade-slide-enter-active,
@@ -776,22 +800,28 @@ $input-h: 44px;
     flex: none;
     height: auto;
     min-height: auto;
-    padding: 28px 40px 0;
-    background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
+    padding: 28px 40px 32px;
+    background: transparent;
 
     &__hero {
       display: none;
     }
   }
 
+  /* 深色品牌区的背景图不适合窄屏，透出页面底色 */
   .dark .login-brand {
-    background: #0b1020;
+    background: none;
   }
 
+  /* 卡片占满剩余高度并透出页面渐变，inner 沿用全局的垂直居中，页脚沉底 */
   .login-card {
     flex: 1;
-    justify-content: flex-start;
-    padding: 96px 48px 0;
+    padding: 40px 48px 32px;
+    background: transparent;
+  }
+
+  .dark .login-card {
+    background: transparent;
   }
 }
 
@@ -802,11 +832,11 @@ $input-h: 44px;
   }
 
   .login-brand {
-    padding: 24px 0 0 24px;
+    padding: 24px 24px 28px;
   }
 
   .login-card {
-    padding: 72px 24px 0;
+    padding: 32px 24px 24px;
 
     &__inner {
       width: 100%;