From 5ef12f7d5111aeb0a8ffac633428f2399ccd56d4 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Sun, 18 Jan 2026 15:34:18 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/web-gold/src/views/auth/Login.vue     | 724 ++++--------------
 1 file changed, 167 insertions(+), 557 deletions(-)

diff --git a/frontend/app/web-gold/src/views/auth/Login.vue b/frontend/app/web-gold/src/views/auth/Login.vue
index c23424e798..59e31cb77a 100644
--- a/frontend/app/web-gold/src/views/auth/Login.vue
+++ b/frontend/app/web-gold/src/views/auth/Login.vue
@@ -1,46 +1,35 @@
 <template>
   <div class="login-container">
-    <!-- 多层背景系统 -->
-    <div class="bg-layer-1"></div>
-    <div class="bg-grid"></div>
-    <div class="bg-blobs">
-      <div class="blob blob-1"></div>
-      <div class="blob blob-2"></div>
-      <div class="blob blob-3"></div>
-    </div>
-    <div class="bg-particles"></div>
+    <!-- 简约背景 -->
+    <div class="bg-gradient"></div>
+    <div class="bg-pattern"></div>
 
     <div class="login-content">
       <!-- 左侧品牌区 -->
       <div class="brand-panel">
-        <!-- 扫描线 -->
-        <div class="scan-line"></div>
         <div class="brand-inner">
           <div class="brand-icon">
-            <svg width="80" height="80" viewBox="0 0 80 80">
-              <defs>
-                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
-                  <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
-                  <stop offset="100%" style="stop-color:#60A5FA;stop-opacity:1" />
-                </linearGradient>
-              </defs>
-              <circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.6"/>
-              <path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.8"/>
-            </svg>
+            <div class="icon-wrapper">
+              <svg width="48" height="48" viewBox="0 0 48 48">
+                <path d="M 24 8 L 24 24 L 36 24" stroke="#3B82F6" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="24" cy="24" r="16" fill="none" stroke="#3B82F6" stroke-width="2"/>
+                <circle cx="24" cy="24" r="3" fill="#3B82F6"/>
+              </svg>
+            </div>
           </div>
           <h1 class="brand-title">金牌内容大师</h1>
-          <p class="brand-subtitle">AI赋能 · 智创未来</p>
+          <p class="brand-subtitle">AI赋能创作，智启未来</p>
           <div class="brand-features">
             <div class="feature-item">
-              <span class="feature-icon">✦</span>
+              <div class="feature-dot"></div>
               <span>智能创作</span>
             </div>
             <div class="feature-item">
-              <span class="feature-icon">✦</span>
+              <div class="feature-dot"></div>
               <span>数字人技术</span>
             </div>
             <div class="feature-item">
-              <span class="feature-icon">✦</span>
+              <div class="feature-dot"></div>
               <span>内容分析</span>
             </div>
           </div>
@@ -50,11 +39,9 @@
       <!-- 右侧登录区 -->
       <div class="login-panel">
         <div class="login-card">
-          <!-- 光线扫过效果 -->
-          <div class="card-shine"></div>
           <div class="card-header">
-            <h2 class="login-title">欢迎登录</h2>
-            <p class="login-subtitle">进入您的创作空间</p>
+            <h2 class="login-title">欢迎回来</h2>
+            <p class="login-subtitle">登录您的账户</p>
           </div>
 
           <a-form
@@ -280,10 +267,27 @@ onBeforeUnmount(() => {
 /* ========== 容器与布局 ========== */
 .login-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #0f0f1e 50%, #0a0a0a 100%);
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
   position: relative;
   overflow: hidden;
-  animation: fadeIn 0.8s ease-out;
+}
+
+/* 简约渐变背景 */
+.bg-gradient {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
+              radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+/* 微妙图案背景 */
+.bg-pattern {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.03) 1px, transparent 0);
+  background-size: 24px 24px;
+  pointer-events: none;
 }
 
 /* 主内容区 */
@@ -294,291 +298,94 @@ onBeforeUnmount(() => {
   z-index: 1;
 }
 
-/* ========== 背景层系统 ========== */
-/* 第1层：基础渐变 - 已在container中实现 */
-
-/* 第2层：动态网格 */
-.bg-grid {
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
-  background-size: 50px 50px;
-  animation: gridMove 20s linear infinite;
-  pointer-events: none;
-}
-
-@keyframes gridMove {
-  0% { background-position: 0 0; }
-  100% { background-position: 50px 50px; }
-}
-
-/* 第3层：装饰光斑 (Blob) */
-.bg-blobs {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.blob {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.15;
-  animation: blobPulse 8s ease-in-out infinite;
-}
-
-.blob-1 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
-  top: -10%;
-  left: -10%;
-  animation-delay: 0s;
-}
-
-.blob-2 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
-  bottom: -15%;
-  right: -10%;
-  animation-delay: 2s;
-}
-
-.blob-3 {
-  width: 350px;
-  height: 350px;
-  background: radial-gradient(circle, #06B6D4 0%, transparent 70%);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation-delay: 4s;
-}
-
-@keyframes blobPulse {
-  0%, 100% {
-    transform: scale(1) translateY(0);
-    opacity: 0.15;
-  }
-  50% {
-    transform: scale(1.1) translateY(-20px);
-    opacity: 0.25;
-  }
-}
-
-/* 第4层：粒子效果 */
-.bg-particles {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.bg-particles::before,
-.bg-particles::after {
-  content: '';
-  position: absolute;
-  width: 2px;
-  height: 2px;
-  background: rgba(59, 130, 246, 0.6);
-  border-radius: 50%;
-  box-shadow:
-    100px 200px 0 rgba(59, 130, 246, 0.4),
-    300px 400px 0 rgba(139, 92, 246, 0.4),
-    500px 100px 0 rgba(6, 182, 212, 0.3),
-    700px 500px 0 rgba(59, 130, 246, 0.5),
-    200px 600px 0 rgba(139, 92, 246, 0.3),
-    900px 300px 0 rgba(6, 182, 212, 0.4),
-    400px 50px 0 rgba(59, 130, 246, 0.3),
-    600px 700px 0 rgba(139, 92, 246, 0.5),
-    800px 150px 0 rgba(6, 182, 212, 0.3),
-    150px 450px 0 rgba(59, 130, 246, 0.4),
-    950px 600px 0 rgba(139, 92, 246, 0.3),
-    350px 250px 0 rgba(6, 182, 212, 0.5),
-    550px 550px 0 rgba(59, 130, 246, 0.3),
-    750px 50px 0 rgba(139, 92, 246, 0.4),
-    250px 350px 0 rgba(6, 182, 212, 0.3);
-  animation: particleFloat 15s linear infinite;
-}
-
-.bg-particles::after {
-  animation-delay: 7.5s;
-}
-
-@keyframes particleFloat {
-  0% {
-    transform: translateY(0);
-    opacity: 0;
-  }
-  10% { opacity: 0.6; }
-  90% { opacity: 0.6; }
-  100% {
-    transform: translateY(-100vh);
-    opacity: 0;
-  }
-}
-
 /* ========== 左侧品牌区 ========== */
 .brand-panel {
   flex: 1;
-  background:
-    radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-    radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
-    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f1e 100%);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(99, 102, 241, 0.02) 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px;
-  position: relative;
-  overflow: hidden;
-  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
-}
-
-/* 扫描线 */
-.scan-line {
-  position: absolute;
-  top: -100%;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg,
-    transparent,
-    rgba(6, 182, 212, 0.8),
-    transparent
-  );
-  animation: scanLine 4s ease-in-out infinite;
-}
-
-@keyframes scanLine {
-  0% { top: -100%; }
-  100% { top: 200%; }
 }
 
 .brand-inner {
   text-align: center;
-  max-width: 400px;
-  position: relative;
-  z-index: 1;
+  max-width: 420px;
 }
 
 /* 品牌图标 */
 .brand-icon {
-  margin-bottom: 30px;
-  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
+  margin-bottom: 32px;
 }
 
-.brand-icon svg {
-  animation: iconRotate 20s linear infinite;
+.icon-wrapper {
+  width: 72px;
+  height: 72px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+  border-radius: 20px;
+  border: 1px solid rgba(59, 130, 246, 0.15);
+  transition: all 0.3s ease;
 }
 
-@keyframes iconRotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.brand-icon svg path,
-.brand-icon svg circle {
-  animation: pathPulse 2s ease-in-out infinite;
-}
-
-@keyframes pathPulse {
-  0%, 100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 1;
-  }
+.icon-wrapper:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
 }
 
 /* 品牌标题 */
 .brand-title {
-  font-size: 48px;
+  font-size: 42px;
   font-weight: 700;
-  background: linear-gradient(
-    135deg,
-    #3B82F6 0%,
-    #8B5CF6 25%,
-    #06B6D4 50%,
-    #3B82F6 75%,
-    #8B5CF6 100%
-  );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 15px;
-  animation: gradientFlow 4s linear infinite;
-}
-
-@keyframes gradientFlow {
-  0% { background-position: 0% 50%; }
-  100% { background-position: 200% 50%; }
+  color: #1e293b;
+  margin-bottom: 12px;
+  letter-spacing: -0.5px;
 }
 
 .brand-subtitle {
-  font-size: 18px;
-  color: #06B6D4;
-  margin-bottom: 50px;
-  opacity: 0.9;
+  font-size: 16px;
+  color: #64748b;
+  margin-bottom: 48px;
+  font-weight: 400;
 }
 
 /* 特性列表 */
 .brand-features {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
 }
 
 .feature-item {
   display: flex;
   align-items: center;
   gap: 12px;
-  color: #a0a0a0;
-  font-size: 16px;
-  position: relative;
-  padding-left: 35px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.feature-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #3B82F6, #06B6D4);
-  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.feature-item:hover::before {
-  width: 25px;
+  color: #475569;
+  font-size: 15px;
+  padding: 8px 0;
+  transition: all 0.2s ease;
 }
 
 .feature-item:hover {
-  transform: translateX(10px);
-  color: #60A5FA;
-}
-
-.feature-icon {
   color: #3B82F6;
-  font-size: 20px;
-  display: inline-block;
-  animation: iconBounce 2s ease-in-out infinite;
-  transition: all 0.3s ease;
+  transform: translateX(4px);
 }
 
-@keyframes iconBounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-5px); }
+.feature-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
+  opacity: 0.6;
+  transition: all 0.2s ease;
 }
 
-.feature-item:hover .feature-icon {
-  transform: scale(1.2) rotate(10deg) translateY(-5px);
-  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
-  animation: none;
+.feature-item:hover .feature-dot {
+  opacity: 1;
+  transform: scale(1.2);
 }
 
 /* ========== 右侧登录区 ========== */
@@ -588,159 +395,83 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   padding: 60px 80px;
-  background: transparent;
 }
 
 /* 登录卡片 */
 .login-card {
   width: 100%;
-  max-width: 420px;
-  background: rgba(18, 18, 38, 0.92);
-  -webkit-backdrop-filter: blur(25px);
-  backdrop-filter: blur(25px);
-  border-radius: 20px;
-  padding: 40px 32px;
-  position: relative;
-  overflow: hidden;
+  max-width: 440px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 48px 40px;
   box-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.5),
-    0 0 0 1px rgba(59, 130, 246, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
-}
-
-/* 渐变边框 */
-.login-card::before {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  border-radius: 20px;
-  padding: 1px;
-  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #06B6D4 100%);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-/* 光线扫过 */
-.card-shine {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg,
-    transparent,
-    rgba(59, 130, 246, 0.1),
-    transparent
-  );
-  animation: cardShine 3s ease-in-out infinite;
-  pointer-events: none;
-}
-
-@keyframes cardShine {
-  0% { left: -100%; }
-  100% { left: 100%; }
-}
-
-@keyframes cardFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+    0 8px 32px rgba(15, 23, 42, 0.08),
+    0 2px 8px rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(59, 130, 246, 0.08);
 }
 
 /* 卡片标题区 */
 .card-header {
   text-align: center;
   margin-bottom: 32px;
-  animation: fadeInUp 0.6s ease-out 0.6s backwards;
 }
 
 .login-title {
-  font-size: 32px;
+  font-size: 28px;
   font-weight: 700;
-  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 10px;
+  color: #1e293b;
+  margin-bottom: 8px;
+  letter-spacing: -0.3px;
 }
 
 .login-subtitle {
   font-size: 14px;
-  color: #60A5FA;
+  color: #64748b;
   margin: 0;
-  opacity: 0.9;
 }
 
 /* ========== 输入框样式 ========== */
-:deep(.ant-form-item:nth-child(1)) {
-  animation: fadeInUp 0.6s ease-out 0.7s backwards;
-}
-
-:deep(.ant-form-item:nth-child(2)) {
-  animation: fadeInUp 0.6s ease-out 0.8s backwards;
-}
-
-:deep(.ant-form-item:nth-child(3)) {
-  animation: fadeInUp 0.6s ease-out 0.9s backwards;
-}
-
 :deep(.ant-input-affix-wrapper) {
   border-radius: 12px !important;
-  background: rgba(15, 15, 30, 0.5) !important;
-  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
+  background: #f8fafc !important;
+  border: 1.5px solid #e2e8f0 !important;
   box-shadow: none !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  position: relative;
+  transition: all 0.2s ease !important;
+  height: 48px !important;
 }
 
 :deep(.ant-input-affix-wrapper:hover) {
-  border-color: rgba(59, 130, 246, 0.4) !important;
+  border-color: #3B82F6 !important;
+  background: #ffffff !important;
 }
 
 :deep(.ant-input-affix-wrapper-focused) {
-  border-color: rgba(59, 130, 246, 0.6) !important;
-  background: rgba(15, 15, 30, 0.95) !important;
-  transform: translateY(-2px);
-  box-shadow:
-    0 8px 24px rgba(59, 130, 246, 0.2),
-    0 0 0 1px rgba(59, 130, 246, 0.4) !important;
-}
-
-/* 聚焦光晕 */
-:deep(.ant-input-affix-wrapper-focused)::after {
-  content: '';
-  position: absolute;
-  inset: -2px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #3B82F6, #8B5CF6, #06B6D4);
-  opacity: 0.4;
-  z-index: -1;
-  filter: blur(8px);
+  border-color: #3B82F6 !important;
+  background: #ffffff !important;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
 }
 
 :deep(.ant-input) {
-  color: #fff;
-  font-size: 15px;
-  border: none !important;
+  color: #1e293b !important;
+  font-size: 15px !important;
   background: transparent !important;
 }
 
 :deep(.ant-input::placeholder) {
-  color: rgba(160, 160, 160, 0.65);
-  font-size: 14px;
+  color: #94a3b8 !important;
+  font-size: 14px !important;
 }
 
 :deep(.ant-input-prefix) {
-  color: rgba(59, 130, 246, 0.7);
+  color: #94a3b8 !important;
+  margin-right: 12px !important;
 }
 
 :deep(.ant-form-item-label > label) {
   font-weight: 500;
-  color: #e0e0e0;
-  letter-spacing: 0.2px;
+  color: #334155;
+  font-size: 14px;
 }
 
 :deep(.ant-input-affix-wrapper:focus-within) {
@@ -749,14 +480,14 @@ onBeforeUnmount(() => {
 
 /* 表单验证错误状态 */
 :deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
-  border-color: rgba(255, 77, 79, 0.5) !important;
-  animation: shake 0.5s;
+  border-color: #ef4444 !important;
+  background: #ffffff !important;
 }
 
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
-  20%, 40%, 60%, 80% { transform: translateX(5px); }
+:deep(.ant-form-item-explain-error) {
+  color: #ef4444;
+  font-size: 13px;
+  margin-top: 4px;
 }
 
 /* ========== 验证码输入 ========== */
@@ -769,31 +500,31 @@ onBeforeUnmount(() => {
   border-radius: 12px;
   white-space: nowrap;
   flex-shrink: 0;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%);
-  border: 1px solid rgba(59, 130, 246, 0.25);
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
   color: #3B82F6;
   font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
+  height: 48px;
+  padding: 0 20px;
+  transition: all 0.2s ease;
 }
 
 .send-code-btn:hover:not(:disabled) {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
-  border-color: rgba(59, 130, 246, 0.6);
-  color: #60A5FA;
-  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
+  background: #3B82F6;
+  border-color: #3B82F6;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
   transform: translateY(-1px);
 }
 
 .send-code-btn:active:not(:disabled) {
   transform: translateY(0);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
 }
 
 .send-code-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  background: #f1f5f9;
 }
 
 /* ========== 登录按钮 ========== */
@@ -802,38 +533,21 @@ onBeforeUnmount(() => {
   font-size: 16px;
   font-weight: 600;
   border-radius: 12px;
-  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
+  background: #3B82F6;
   border: none;
-  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 光线扫过 */
-.login-btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transition: left 0.6s;
-}
-
-.login-btn:hover::before {
-  left: 100%;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
+  transition: all 0.2s ease;
 }
 
 .login-btn:hover {
-  background: linear-gradient(135deg, #FF6A30 0%, #3B82F6 100%);
-  box-shadow: 0 6px 30px rgba(255, 106, 48, 0.35);
-  transform: translateY(-2px);
+  background: #2563eb;
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
+  transform: translateY(-1px);
 }
 
 .login-btn:active {
   transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
 }
 
 /* 波纹效果 */
@@ -858,89 +572,31 @@ onBeforeUnmount(() => {
   font-size: 18px;
 }
 
-/* ========== 入场动画 ========== */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 /* ========== 响应式适配 ========== */
 /* 大屏保持左右分栏 */
 @media (max-width: 1200px) {
   .brand-title {
-    font-size: 40px;
-  }
-
-  .brand-subtitle {
-    font-size: 16px;
-    margin-bottom: 40px;
+    font-size: 36px;
   }
 }
 
 /* 平板横屏优化 */
 @media (max-width: 992px) and (min-width: 769px) {
   .brand-panel {
-    min-height: 140px;
-    padding: 25px 15px;
-  }
-
-  .brand-icon svg {
-    width: 50px;
-    height: 50px;
+    padding: 40px 20px;
   }
 
   .brand-title {
-    font-size: 28px;
-    margin-bottom: 8px;
+    font-size: 32px;
   }
 
   .brand-subtitle {
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .feature-item {
-    font-size: 13px;
-    gap: 8px;
+    font-size: 15px;
   }
 
   .login-card {
-    padding: 28px 24px;
-    max-width: 360px;
-    margin: 0 auto;
+    padding: 36px 32px;
+    max-width: 400px;
   }
 }
 
@@ -951,120 +607,85 @@ onBeforeUnmount(() => {
     height: 100vh;
   }
 
-  /* 移动端减少动画复杂度 */
-  .bg-grid {
-    animation: none;
-  }
-
-  .bg-particles,
-  .blob {
+  /* 移动端隐藏背景图案 */
+  .bg-pattern {
     display: none;
   }
 
   .brand-panel {
-    padding: 20px 15px;
-    min-height: 100px;
+    padding: 32px 20px;
     flex: none;
-  }
-
-  .brand-inner {
-    max-width: 100%;
-  }
-
-  .brand-icon svg {
-    width: 45px;
-    height: 45px;
-    animation: none;
+    min-height: 160px;
   }
 
   .brand-title {
-    font-size: 24px;
-    margin-bottom: 5px;
+    font-size: 28px;
   }
 
   .brand-subtitle {
-    font-size: 12px;
-    margin-bottom: 15px;
-  }
-
-  .feature-item {
-    font-size: 12px;
-    gap: 6px;
-  }
-
-  .feature-item:nth-child(n+2) {
-    display: none;
+    font-size: 14px;
+    margin-bottom: 32px;
   }
 
   .login-panel {
     flex: 1;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 20px 15px 40px;
+    padding: 24px 20px 40px;
     overflow-y: auto;
   }
 
   .login-card {
     width: 100%;
-    max-width: 380px;
-    padding: 32px 28px;
+    max-width: 420px;
+    padding: 36px 32px;
     margin: 0 auto;
-    background: rgba(18, 18, 38, 0.92);
-    backdrop-filter: blur(32px);
-    border-radius: 18px;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-    box-shadow:
-      0 10px 36px rgba(0, 0, 0, 0.55),
-      inset 0 1px 0 rgba(255, 255, 255, 0.06);
-    animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
   }
 
   .login-title {
     font-size: 24px;
   }
-
-  .login-subtitle {
-    font-size: 13px;
-  }
 }
 
 /* 小屏手机优化 */
 @media (max-width: 480px) {
   .brand-panel {
-    min-height: 80px;
-    padding: 15px 10px;
+    padding: 24px 16px;
+    min-height: 120px;
   }
 
-  .brand-icon svg {
-    width: 40px;
-    height: 40px;
+  .brand-icon {
+    margin-bottom: 24px;
+  }
+
+  .icon-wrapper {
+    width: 56px;
+    height: 56px;
   }
 
   .brand-title {
-    font-size: 20px;
+    font-size: 24px;
   }
 
   .brand-subtitle {
-    display: none;
+    font-size: 13px;
+    margin-bottom: 24px;
   }
 
-  .feature-item:nth-child(1) {
-    display: none;
+  .brand-features {
+    gap: 12px;
+  }
+
+  .feature-item {
+    font-size: 14px;
   }
 
   .login-panel {
-    padding: 15px 10px 30px;
+    padding: 20px 16px 32px;
   }
 
   .login-card {
-    padding: 28px 20px;
-    border-radius: 16px;
-    max-width: 92%;
-  }
-
-  .card-header {
-    margin-bottom: 20px;
+    padding: 32px 24px;
+    max-width: 100%;
+    border-radius: 20px;
   }
 
   .login-title {
@@ -1085,15 +706,4 @@ onBeforeUnmount(() => {
     font-size: 15px;
   }
 }
-
-/* 减弱动画（用户偏好设置） */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
 </style>