From c1d1b0ed70dda707eeb7ed2740d6166405f76c73 Mon Sep 17 00:00:00 2001
From: shenaowei <450702724@qq.com>
Date: Tue, 24 Feb 2026 15:40:40 +0800
Subject: [PATCH] =?UTF-8?q?=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     | 1402 ++++++++++++-----
 1 file changed, 973 insertions(+), 429 deletions(-)

diff --git a/frontend/app/web-gold/src/views/auth/Login.vue b/frontend/app/web-gold/src/views/auth/Login.vue
index d7cd43b05f..479c5e6042 100644
--- a/frontend/app/web-gold/src/views/auth/Login.vue
+++ b/frontend/app/web-gold/src/views/auth/Login.vue
@@ -1,116 +1,188 @@
 <template>
   <div class="login-container">
-    <!-- 简约背景 -->
-    <div class="bg-gradient"></div>
-    <div class="bg-pattern"></div>
+    <!-- 动态背景层 -->
+    <div class="bg-layer">
+      <div class="gradient-orb orb-1"></div>
+      <div class="gradient-orb orb-2"></div>
+      <div class="gradient-orb orb-3"></div>
+      <div class="noise-overlay"></div>
+      <div class="grid-pattern"></div>
+    </div>
 
+    <!-- 粒子背景 -->
+    <canvas ref="particleCanvas" class="particle-canvas"></canvas>
+
+    <!-- 浮动几何元素 -->
+    <div class="floating-shapes">
+      <div class="shape shape-1"></div>
+      <div class="shape shape-2"></div>
+      <div class="shape shape-3"></div>
+      <div class="shape shape-4"></div>
+      <div class="shape shape-5"></div>
+    </div>
+
+    <!-- 主内容区 -->
     <div class="login-content">
       <!-- 左侧品牌区 -->
-      <div class="brand-panel">
-        <div class="brand-inner">
-          <div class="brand-icon">
-            <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"/>
+      <div class="brand-section">
+        <div class="brand-content">
+          <!-- 品牌标识 -->
+          <div class="brand-logo">
+            <div class="logo-ring"></div>
+            <div class="logo-core">
+              <svg viewBox="0 0 40 40" class="logo-icon">
+                <polygon points="20,4 36,12 36,28 20,36 4,28 4,12" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <polygon points="20,10 28,14 28,26 20,30 12,26 12,14" fill="currentColor" opacity="0.3"/>
+                <circle cx="20" cy="20" r="4" fill="currentColor"/>
               </svg>
             </div>
           </div>
-          <h1 class="brand-title">金牌内容大师</h1>
-          <p class="brand-subtitle">AI赋能创作，智启未来</p>
-          <div class="brand-features">
-            <div class="feature-item">
-              <div class="feature-dot"></div>
-              <span>智能创作</span>
+
+          <!-- 品牌文字 -->
+          <h1 class="brand-title">
+            <span class="title-gold">金牌</span>内容大师
+          </h1>
+          <p class="brand-tagline">AI 驱动 · 智慧创作 · 无限可能</p>
+
+          <!-- 特性展示 -->
+          <div class="features-grid">
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                </svg>
+              </div>
+              <div class="feature-text">
+                <span class="feature-label">智能创作</span>
+                <span class="feature-desc">AI赋能内容生成</span>
+              </div>
             </div>
-            <div class="feature-item">
-              <div class="feature-dot"></div>
-              <span>数字人技术</span>
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <circle cx="12" cy="8" r="4"/>
+                  <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>
+                  <circle cx="12" cy="8" r="8" stroke-dasharray="2 2"/>
+                </svg>
+              </div>
+              <div class="feature-text">
+                <span class="feature-label">数字人技术</span>
+                <span class="feature-desc">虚拟形象定制</span>
+              </div>
             </div>
-            <div class="feature-item">
-              <div class="feature-dot"></div>
-              <span>内容分析</span>
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <rect x="3" y="3" width="18" height="18" rx="2"/>
+                  <path d="M3 9h18M9 21V9"/>
+                </svg>
+              </div>
+              <div class="feature-text">
+                <span class="feature-label">数据分析</span>
+                <span class="feature-desc">精准内容洞察</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 右侧登录区 -->
-      <div class="login-panel">
+      <div class="login-section">
         <div class="login-card">
-          <div class="card-header">
-            <h2 class="login-title">欢迎回来</h2>
-            <p class="login-subtitle">登录您的账户</p>
-          </div>
+          <!-- 装饰边框 -->
+          <div class="card-border"></div>
 
-          <a-form
-            :model="smsForm"
-            :rules="smsRules"
-            ref="smsFormRef"
-            layout="vertical"
-          >
-            <a-form-item name="mobile" label="手机号">
-              <a-input
-                v-model:value="smsForm.mobile"
-                size="large"
-                placeholder="请输入手机号"
-                :maxlength="11"
-                class="tech-input"
-                autocomplete="off"
-                autocorrect="off"
-                autocapitalize="off"
-                spellcheck="false"
-              >
-                <template #prefix>
-                  <PhoneOutlined class="input-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
+          <!-- 卡片内容 -->
+          <div class="card-inner">
+            <!-- 标题区 -->
+            <div class="card-header">
+              <h2 class="login-title">欢迎回来</h2>
+              <p class="login-subtitle">登录您的账户，开启创作之旅</p>
+            </div>
 
-            <a-form-item name="code" label="验证码">
-              <div class="code-input">
-                <a-input
-                  v-model:value="smsForm.code"
-                  size="large"
-                  placeholder="请输入验证码"
-                  :maxlength="4"
-                  class="tech-input"
-                  autocomplete="off"
-                  autocorrect="off"
-                  autocapitalize="off"
-                  spellcheck="false"
-                >
-                  <template #prefix>
-                    <SafetyOutlined class="input-icon" />
-                  </template>
-                </a-input>
+            <!-- 登录表单 -->
+            <a-form
+              :model="smsForm"
+              :rules="smsRules"
+              ref="smsFormRef"
+              layout="vertical"
+              class="login-form"
+            >
+              <a-form-item name="mobile" label="手机号码">
+                <div class="input-wrapper">
+                  <a-input
+                    v-model:value="smsForm.mobile"
+                    size="large"
+                    placeholder="请输入手机号"
+                    :maxlength="11"
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                  >
+                    <template #prefix>
+                      <PhoneOutlined class="input-icon" />
+                    </template>
+                  </a-input>
+                  <div class="input-glow"></div>
+                </div>
+              </a-form-item>
+
+              <a-form-item name="code" label="验证码">
+                <div class="code-row">
+                  <div class="input-wrapper code-input">
+                    <a-input
+                      v-model:value="smsForm.code"
+                      size="large"
+                      placeholder="请输入验证码"
+                      :maxlength="4"
+                      autocomplete="off"
+                      autocorrect="off"
+                      autocapitalize="off"
+                      spellcheck="false"
+                    >
+                      <template #prefix>
+                        <SafetyOutlined class="input-icon" />
+                      </template>
+                    </a-input>
+                    <div class="input-glow"></div>
+                  </div>
+                  <a-button
+                    type="primary"
+                    :disabled="codeCountdown > 0"
+                    :loading="sendingCode"
+                    @click="sendSmsCode"
+                    class="code-btn"
+                  >
+                    <span v-if="codeCountdown > 0">{{ codeCountdown }}s</span>
+                    <span v-else>获取验证码</span>
+                  </a-button>
+                </div>
+              </a-form-item>
+
+              <a-form-item class="submit-item">
                 <a-button
                   type="primary"
-                  :disabled="codeCountdown > 0"
-                  :loading="sendingCode"
-                  @click="sendSmsCode"
-                  class="send-code-btn"
+                  html-type="submit"
+                  size="large"
+                  block
+                  :loading="loggingIn"
+                  @click="handleSmsLogin"
+                  class="submit-btn"
                 >
-                  {{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
+                  <span class="btn-text">立即登录</span>
+                  <span class="btn-arrow">→</span>
                 </a-button>
-              </div>
-            </a-form-item>
+              </a-form-item>
+            </a-form>
 
-            <a-form-item>
-              <a-button
-                type="primary"
-                html-type="submit"
-                size="large"
-                block
-                :loading="loggingIn"
-                @click="handleSmsLogin"
-                class="login-btn"
-              >
-                立即登录
-              </a-button>
-            </a-form-item>
-          </a-form>
+            <!-- 底部装饰 -->
+            <div class="card-footer">
+              <div class="footer-line"></div>
+              <span class="footer-text">安全登录 · 数据加密</span>
+              <div class="footer-line"></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -126,11 +198,10 @@ import {
   SafetyOutlined
 } from '@ant-design/icons-vue'
 import authApi, { SMS_SCENE } from '@/api/auth'
-import tokenManager from '@gold/utils/token-manager'
 import { useUserStore } from '@/stores/user'
+
 const router = useRouter()
 const userStore = useUserStore()
-window.a = router
 
 // 短信登录表单
 const smsForm = reactive({
@@ -147,6 +218,135 @@ const codeCountdown = ref(0)
 // 验证码倒计时
 let countdownTimer = null
 
+// ========== 粒子系统 ==========
+const particleCanvas = ref(null)
+let particles = []
+let animationId = null
+let ctx = null
+
+class Particle {
+  constructor(canvas) {
+    this.canvas = canvas
+    this.reset()
+  }
+
+  reset() {
+    this.x = Math.random() * this.canvas.width
+    this.y = Math.random() * this.canvas.height
+    this.size = Math.random() * 2 + 0.5
+    this.speedX = (Math.random() - 0.5) * 0.3
+    this.speedY = (Math.random() - 0.5) * 0.3
+    this.opacity = Math.random() * 0.5 + 0.2
+    this.fadeSpeed = Math.random() * 0.005 + 0.002
+    this.fadeDirection = 1
+  }
+
+  update() {
+    this.x += this.speedX
+    this.y += this.speedY
+
+    // 边界检测
+    if (this.x < 0 || this.x > this.canvas.width ||
+        this.y < 0 || this.y > this.canvas.height) {
+      this.reset()
+    }
+
+    // 透明度呼吸效果
+    this.opacity += this.fadeSpeed * this.fadeDirection
+    if (this.opacity >= 0.7) this.fadeDirection = -1
+    if (this.opacity <= 0.1) this.fadeDirection = 1
+  }
+
+  draw(ctx) {
+    ctx.beginPath()
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
+    ctx.fillStyle = `rgba(212, 168, 83, ${this.opacity})`
+    ctx.fill()
+  }
+}
+
+function initParticles() {
+  const canvas = particleCanvas.value
+  if (!canvas) return
+
+  ctx = canvas.getContext('2d')
+  resizeCanvas()
+
+  // 根据屏幕大小创建粒子数量
+  const particleCount = Math.min(80, Math.floor((canvas.width * canvas.height) / 15000))
+  particles = []
+  for (let i = 0; i < particleCount; i++) {
+    particles.push(new Particle(canvas))
+  }
+
+  animateParticles()
+}
+
+function resizeCanvas() {
+  const canvas = particleCanvas.value
+  if (!canvas) return
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+}
+
+function animateParticles() {
+  if (!ctx) return
+
+  ctx.clearRect(0, 0, particleCanvas.value.width, particleCanvas.value.height)
+
+  // 更新和绘制粒子
+  particles.forEach(particle => {
+    particle.update()
+    particle.draw(ctx)
+  })
+
+  // 绘制粒子连线
+  drawConnections()
+
+  animationId = requestAnimationFrame(animateParticles)
+}
+
+function drawConnections() {
+  const maxDistance = 120
+  for (let i = 0; i < particles.length; i++) {
+    for (let j = i + 1; j < particles.length; j++) {
+      const dx = particles[i].x - particles[j].x
+      const dy = particles[i].y - particles[j].y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+
+      if (distance < maxDistance) {
+        const opacity = (1 - distance / maxDistance) * 0.15
+        ctx.beginPath()
+        ctx.moveTo(particles[i].x, particles[i].y)
+        ctx.lineTo(particles[j].x, particles[j].y)
+        ctx.strokeStyle = `rgba(212, 168, 83, ${opacity})`
+        ctx.lineWidth = 0.5
+        ctx.stroke()
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  initParticles()
+  window.addEventListener('resize', () => {
+    resizeCanvas()
+    particles.forEach(p => {
+      p.canvas = particleCanvas.value
+    })
+  })
+})
+
+onBeforeUnmount(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+  }
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+  }
+  window.removeEventListener('resize', resizeCanvas)
+})
+
 // 表单验证规则
 const smsRules = {
   mobile: [
@@ -159,27 +359,6 @@ const smsRules = {
   ]
 }
 
-// 波纹点击效果
-function createRipple(event) {
-  const button = event.currentTarget
-  const ripple = document.createElement('span')
-  const rect = button.getBoundingClientRect()
-  const size = Math.max(rect.width, rect.height)
-  const x = event.clientX - rect.left - size / 2
-  const y = event.clientY - rect.top - size / 2
-
-  ripple.style.width = ripple.style.height = `${size}px`
-  ripple.style.left = `${x}px`
-  ripple.style.top = `${y}px`
-  ripple.classList.add('ripple')
-
-  button.appendChild(ripple)
-
-  ripple.addEventListener('animationend', () => {
-    ripple.remove()
-  })
-}
-
 // 发送验证码
 async function sendSmsCode() {
   try {
@@ -212,10 +391,7 @@ async function sendSmsCode() {
 }
 
 // 短信登录
-async function handleSmsLogin(event) {
-  // 添加波纹效果
-  createRipple(event)
-
+async function handleSmsLogin() {
   try {
     await smsFormRef.value.validateFields()
     loggingIn.value = true
@@ -250,42 +426,176 @@ async function handleSmsLogin(event) {
   }
 }
 
-// 清理定时器
-onBeforeUnmount(() => {
-  if (countdownTimer) {
-    clearInterval(countdownTimer)
-  }
-})
 </script>
 
-<style scoped>
-/* ========== 容器与布局 ========== */
+<style scoped lang="less">
+/* ========== 导入字体 ========== */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap');
+
+/* ========== CSS变量 ========== */
+@primary-gold: #D4A853;
+@primary-gold-light: #E8C97A;
+@primary-gold-dark: #B8943F;
+@deep-black: #0A0B0D;
+@deep-blue: #0D1117;
+@card-bg: rgba(15, 18, 25, 0.85);
+@border-subtle: rgba(212, 168, 83, 0.15);
+@border-active: rgba(212, 168, 83, 0.4);
+@text-primary: #F0F2F5;
+@text-secondary: #8B919A;
+@text-muted: #5A5F6B;
+
+/* ========== 容器 ========== */
 .login-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+  background: @deep-black;
   position: relative;
   overflow: hidden;
+  font-family: 'DM Sans', sans-serif;
+}
+
+/* ========== 背景层 ========== */
+.bg-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
 }
 
-/* 简约渐变背景 */
-.bg-gradient {
+.gradient-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.5;
+  animation: float 20s ease-in-out infinite;
+
+  &.orb-1 {
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(212, 168, 83, 0.15) 0%, transparent 70%);
+    top: -200px;
+    left: -100px;
+    animation-delay: 0s;
+  }
+
+  &.orb-2 {
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(30, 64, 120, 0.2) 0%, transparent 70%);
+    bottom: -150px;
+    right: -100px;
+    animation-delay: -7s;
+  }
+
+  &.orb-3 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(212, 168, 83, 0.1) 0%, transparent 70%);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-delay: -14s;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(30px, -30px) scale(1.05); }
+  50% { transform: translate(-20px, 20px) scale(0.95); }
+  75% { transform: translate(-30px, -20px) scale(1.02); }
+}
+
+.noise-overlay {
   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%);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.03;
   pointer-events: none;
 }
 
-/* 微妙图案背景 */
-.bg-pattern {
+.grid-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;
+  background-image:
+    linear-gradient(rgba(212, 168, 83, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(212, 168, 83, 0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
   pointer-events: none;
 }
 
-/* 主内容区 */
+/* 粒子画布 */
+.particle-canvas {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* ========== 浮动几何元素 ========== */
+.floating-shapes {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.shape {
+  position: absolute;
+  border: 1px solid @border-subtle;
+  opacity: 0.6;
+  animation: shapeFloat 25s ease-in-out infinite;
+
+  &.shape-1 {
+    width: 120px;
+    height: 120px;
+    top: 15%;
+    left: 8%;
+    transform: rotate(45deg);
+    animation-delay: 0s;
+  }
+
+  &.shape-2 {
+    width: 80px;
+    height: 80px;
+    top: 60%;
+    left: 15%;
+    border-radius: 50%;
+    animation-delay: -5s;
+  }
+
+  &.shape-3 {
+    width: 60px;
+    height: 60px;
+    top: 25%;
+    right: 10%;
+    animation-delay: -10s;
+  }
+
+  &.shape-4 {
+    width: 100px;
+    height: 100px;
+    bottom: 20%;
+    right: 15%;
+    border-radius: 50%;
+    animation-delay: -15s;
+  }
+
+  &.shape-5 {
+    width: 40px;
+    height: 40px;
+    top: 40%;
+    right: 25%;
+    transform: rotate(30deg);
+    animation-delay: -20s;
+  }
+}
+
+@keyframes shapeFloat {
+  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
+  50% { transform: translateY(-20px) rotate(10deg); opacity: 0.3; }
+}
+
+/* ========== 主内容区 ========== */
 .login-content {
   display: flex;
   min-height: 100vh;
@@ -294,420 +604,654 @@ onBeforeUnmount(() => {
 }
 
 /* ========== 左侧品牌区 ========== */
-.brand-panel {
+.brand-section {
   flex: 1;
-  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;
+  animation: slideInLeft 0.8s ease-out;
 }
 
-.brand-inner {
-  text-align: center;
-  max-width: 420px;
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-/* 品牌图标 */
-.brand-icon {
-  margin-bottom: 32px;
+.brand-content {
+  max-width: 480px;
 }
 
-.icon-wrapper {
-  width: 72px;
-  height: 72px;
-  margin: 0 auto;
+/* 品牌Logo */
+.brand-logo {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  margin-bottom: 40px;
+}
+
+.logo-ring {
+  position: absolute;
+  inset: 0;
+  border: 1px solid @primary-gold;
+  border-radius: 50%;
+  animation: ringPulse 3s ease-in-out infinite;
+}
+
+@keyframes ringPulse {
+  0%, 100% { transform: scale(1); opacity: 0.5; }
+  50% { transform: scale(1.1); opacity: 0.2; }
+}
+
+.logo-core {
+  position: absolute;
+  inset: 15px;
   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;
+  background: linear-gradient(135deg, rgba(212, 168, 83, 0.15) 0%, rgba(212, 168, 83, 0.05) 100%);
+  border-radius: 50%;
+  border: 1px solid @border-subtle;
 }
 
-.icon-wrapper:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
+.logo-icon {
+  width: 36px;
+  height: 36px;
+  color: @primary-gold;
 }
 
 /* 品牌标题 */
 .brand-title {
-  font-size: 42px;
+  font-family: 'Playfair Display', serif;
+  font-size: 52px;
   font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 12px;
-  letter-spacing: -0.5px;
+  color: @text-primary;
+  margin-bottom: 16px;
+  letter-spacing: -1px;
+  line-height: 1.1;
+
+  .title-gold {
+    color: @primary-gold;
+    font-style: italic;
+  }
 }
 
-.brand-subtitle {
-  font-size: 16px;
-  color: #64748b;
+.brand-tagline {
+  font-size: 15px;
+  color: @text-secondary;
   margin-bottom: 48px;
-  font-weight: 400;
+  letter-spacing: 2px;
+  text-transform: uppercase;
 }
 
-/* 特性列表 */
-.brand-features {
+/* 特性网格 */
+.features-grid {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.feature-item {
+.feature-card {
   display: flex;
   align-items: center;
-  gap: 12px;
-  color: #475569;
+  gap: 16px;
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid @border-subtle;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(212, 168, 83, 0.05);
+    border-color: @border-active;
+    transform: translateX(8px);
+
+    .feature-icon {
+      color: @primary-gold;
+      transform: scale(1.1);
+    }
+  }
+}
+
+.feature-icon {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: @text-muted;
+  transition: all 0.3s ease;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.feature-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.feature-label {
   font-size: 15px;
-  padding: 8px 0;
-  transition: all 0.2s ease;
+  font-weight: 600;
+  color: @text-primary;
 }
 
-.feature-item:hover {
-  color: #3B82F6;
-  transform: translateX(4px);
-}
-
-.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-dot {
-  opacity: 1;
-  transform: scale(1.2);
+.feature-desc {
+  font-size: 13px;
+  color: @text-muted;
 }
 
 /* ========== 右侧登录区 ========== */
-.login-panel {
+.login-section {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px 80px;
+  animation: slideInRight 0.8s ease-out 0.2s both;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 /* 登录卡片 */
 .login-card {
+  position: relative;
   width: 100%;
-  max-width: 440px;
-  background: rgba(255, 255, 255, 0.95);
+  max-width: 420px;
+}
+
+.card-border {
+  position: absolute;
+  inset: -1px;
+  border-radius: 24px;
+  background: linear-gradient(135deg, @primary-gold 0%, transparent 50%, @primary-gold 100%);
+  opacity: 0.3;
+  padding: 1px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    background: @card-bg;
+    border-radius: 23px;
+  }
+}
+
+.card-inner {
+  position: relative;
+  background: @card-bg;
   backdrop-filter: blur(20px);
   border-radius: 24px;
   padding: 48px 40px;
-  box-shadow:
-    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);
+  border: 1px solid @border-subtle;
 }
 
-/* 卡片标题区 */
+/* 卡片标题 */
 .card-header {
   text-align: center;
-  margin-bottom: 32px;
+  margin-bottom: 36px;
 }
 
 .login-title {
-  font-size: 28px;
-  font-weight: 700;
-  color: #1e293b;
+  font-family: 'Playfair Display', serif;
+  font-size: 32px;
+  font-weight: 600;
+  color: @text-primary;
   margin-bottom: 8px;
-  letter-spacing: -0.3px;
 }
 
 .login-subtitle {
   font-size: 14px;
-  color: #64748b;
+  color: @text-muted;
   margin: 0;
 }
 
-/* ========== 输入框样式 ========== */
-:deep(.ant-input-affix-wrapper) {
-  border-radius: 12px !important;
-  background: #f8fafc !important;
-  border: 1.5px solid transparent !important;
-  box-shadow: none !important;
-  transition: all 0.2s ease !important;
-  height: 48px !important;
-  box-sizing: border-box !important;
-}
+/* ========== 表单样式 ========== */
+.login-form {
+  :deep(.ant-form-item) {
+    margin-bottom: 24px;
+  }
 
-:deep(.ant-input-affix-wrapper:hover) {
-  border-color: #3B82F6 !important;
-  background: #ffffff !important;
-}
+  :deep(.ant-form-item-label > label) {
+    font-size: 13px;
+    font-weight: 500;
+    color: @text-secondary;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
 
-:deep(.ant-input-affix-wrapper-focused) {
-  border-color: #3B82F6 !important;
-  background: #ffffff !important;
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
-  margin: 0 !important;
-}
-
-:deep(.ant-input) {
-  color: #1e293b !important;
-  font-size: 15px !important;
-  background: transparent !important;
-}
-
-:deep(.ant-input::placeholder) {
-  color: #94a3b8 !important;
-  font-size: 14px !important;
-}
-
-:deep(.ant-input-prefix) {
-  color: #94a3b8 !important;
-  margin-right: 12px !important;
-}
-
-:deep(.ant-form-item-label > label) {
-  font-weight: 500;
-  color: #334155;
-  font-size: 14px;
-  margin-bottom: 8px;
-  display: block;
-}
-
-:deep(.ant-input-affix-wrapper:focus-within) {
-  outline: none;
-}
-
-:deep(.ant-form-item) {
-  margin-bottom: 28px;
-}
-
-:deep(.ant-form-item-control) {
-  min-height: 48px;
-  position: relative;
-}
-
-/* 表单验证错误状态 */
-:deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
-  border-color: #ef4444 !important;
-  background: #ffffff !important;
-}
-
-/* ========== 验证码输入 ========== */
-.code-input {
-  display: flex;
-  gap: 12px;
-}
-
-.send-code-btn {
-  border-radius: 12px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
-  color: #3B82F6;
-  font-weight: 500;
-  height: 48px;
-  padding: 0 20px;
-  transition: all 0.2s ease;
-}
-
-.send-code-btn:hover:not(:disabled) {
-  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);
-}
-
-.send-code-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: #f1f5f9;
-}
-
-/* ========== 登录按钮 ========== */
-.login-btn {
-  height: 52px;
-  font-size: 16px;
-  font-weight: 600;
-  border-radius: 12px;
-  background: #3B82F6;
-  border: none;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
-  transition: all 0.2s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.login-btn:hover {
-  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);
-}
-
-/* 波纹效果 */
-.ripple {
-  position: absolute;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.5);
-  transform: scale(0);
-  animation: rippleEffect 0.6s ease-out;
-  pointer-events: none;
-}
-
-@keyframes rippleEffect {
-  to {
-    transform: scale(4);
-    opacity: 0;
+    &::after {
+      display: none;
+    }
   }
 }
 
-/* ========== 图标 ========== */
+.input-wrapper {
+  position: relative;
+}
+
+/* 输入框样式 */
+:deep(.ant-input-affix-wrapper) {
+  background: rgba(255, 255, 255, 0.03) !important;
+  border: 1px solid @border-subtle !important;
+  border-radius: 12px !important;
+  height: 52px !important;
+  box-shadow: none !important;
+  transition: all 0.3s ease !important;
+
+  &:hover {
+    border-color: @border-active !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+  }
+
+  &.ant-input-affix-wrapper-focused {
+    border-color: @primary-gold !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1) !important;
+  }
+}
+
+:deep(.ant-input) {
+  color: @text-primary !important;
+  font-size: 15px !important;
+  background: transparent !important;
+
+  &::placeholder {
+    color: @text-muted !important;
+  }
+}
+
+:deep(.ant-input-prefix) {
+  color: @text-muted !important;
+  margin-right: 12px !important;
+  font-size: 16px;
+}
+
+:deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
+  border-color: #E5484D !important;
+  background: rgba(229, 72, 77, 0.05) !important;
+}
+
+:deep(.ant-form-item-explain-error) {
+  color: #E5484D;
+  font-size: 12px;
+  margin-top: 6px;
+}
+
 .input-icon {
   font-size: 18px;
 }
 
-/* ========== 响应式适配 ========== */
-/* 大屏保持左右分栏 */
-@media (max-width: 1200px) {
-  .brand-title {
-    font-size: 36px;
+.input-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  box-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
+}
+
+.input-wrapper:focus-within .input-glow {
+  opacity: 1;
+}
+
+/* 验证码行 */
+.code-row {
+  display: flex;
+  gap: 12px;
+
+  .code-input {
+    flex: 1;
   }
 }
 
-/* 平板横屏优化 */
-@media (max-width: 992px) and (min-width: 769px) {
-  .brand-panel {
-    padding: 40px 20px;
+.code-btn {
+  height: 52px;
+  padding: 0 20px;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid @border-subtle;
+  color: @primary-gold;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+
+  &:hover:not(:disabled) {
+    background: rgba(212, 168, 83, 0.1);
+    border-color: @primary-gold;
+  }
+
+  &:disabled {
+    color: @text-muted;
+    border-color: @border-subtle;
+    opacity: 0.6;
+  }
+}
+
+/* 提交按钮 */
+.submit-item {
+  margin-top: 32px;
+  margin-bottom: 0;
+}
+
+.submit-btn {
+  height: 56px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, @primary-gold 0%, @primary-gold-dark 100%);
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: @deep-black;
+  letter-spacing: 1px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, @primary-gold-light 0%, @primary-gold 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(212, 168, 83, 0.3);
+
+    &::before {
+      opacity: 1;
+    }
+
+    .btn-arrow {
+      transform: translateX(4px);
+    }
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  .btn-text,
+  .btn-arrow {
+    position: relative;
+    z-index: 1;
+  }
+
+  .btn-arrow {
+    margin-left: 8px;
+    transition: transform 0.3s ease;
+  }
+}
+
+/* 卡片底部 */
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid @border-subtle;
+}
+
+.footer-line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, @border-subtle, transparent);
+}
+
+.footer-text {
+  font-size: 12px;
+  color: @text-muted;
+  letter-spacing: 1px;
+}
+
+/* ========== 响应式设计 ========== */
+@media (max-width: 1200px) {
+  .brand-title {
+    font-size: 44px;
+  }
+
+  .login-section {
+    padding: 60px;
+  }
+}
+
+@media (max-width: 992px) {
+  .login-content {
+    flex-direction: column;
+  }
+
+  .brand-section {
+    padding: 40px 30px;
+    animation: slideInUp 0.8s ease-out;
+  }
+
+  @keyframes slideInUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .brand-logo {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 24px;
+  }
+
+  .logo-core {
+    inset: 12px;
+  }
+
+  .logo-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .brand-title {
+    font-size: 36px;
+    text-align: center;
+  }
+
+  .brand-tagline {
+    text-align: center;
+    margin-bottom: 32px;
+  }
+
+  .features-grid {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .feature-card {
+    flex: 1;
+    min-width: 200px;
+    max-width: 280px;
+    padding: 12px 16px;
+  }
+
+  .login-section {
+    padding: 30px;
+    animation: slideInUp 0.8s ease-out 0.2s both;
+  }
+
+  .card-inner {
+    padding: 36px 32px;
+  }
+}
+
+@media (max-width: 768px) {
+  .floating-shapes {
+    display: none;
+  }
+
+  .brand-section {
+    padding: 32px 20px;
+  }
+
+  .brand-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
   }
 
   .brand-title {
     font-size: 32px;
   }
 
-  .brand-subtitle {
-    font-size: 15px;
+  .brand-tagline {
+    font-size: 13px;
+    letter-spacing: 1.5px;
+  }
+
+  .features-grid {
+    flex-direction: column;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .feature-card {
+    max-width: 100%;
+  }
+
+  .login-section {
+    padding: 20px 20px 40px;
   }
 
   .login-card {
-    padding: 36px 32px;
-    max-width: 400px;
+    max-width: 100%;
+  }
+
+  .card-inner {
+    padding: 32px 24px;
+    border-radius: 20px;
+  }
+
+  .login-title {
+    font-size: 28px;
+  }
+
+  .code-row {
+    flex-direction: column;
+    gap: 12px;
+
+    .code-btn {
+      width: 100%;
+    }
   }
 }
 
-/* 平板竖屏和手机横屏 */
-@media (max-width: 768px) {
-  .login-content {
-    flex-direction: column;
-    height: 100vh;
+@media (max-width: 480px) {
+  .brand-section {
+    padding: 24px 16px;
   }
 
-  /* 移动端隐藏背景图案 */
-  .bg-pattern {
-    display: none;
+  .brand-logo {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 20px;
   }
 
-  .brand-panel {
-    padding: 32px 20px;
-    flex: none;
-    min-height: 160px;
+  .logo-core {
+    inset: 10px;
+  }
+
+  .logo-icon {
+    width: 22px;
+    height: 22px;
   }
 
   .brand-title {
     font-size: 28px;
   }
 
-  .brand-subtitle {
+  .brand-tagline {
+    font-size: 12px;
+    margin-bottom: 24px;
+  }
+
+  .feature-card {
+    padding: 10px 14px;
+  }
+
+  .feature-icon {
+    width: 36px;
+    height: 36px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .feature-label {
     font-size: 14px;
-    margin-bottom: 32px;
   }
 
-  .login-panel {
-    flex: 1;
-    padding: 24px 20px 40px;
-    overflow-y: auto;
+  .feature-desc {
+    font-size: 12px;
   }
 
-  .login-card {
-    width: 100%;
-    max-width: 420px;
-    padding: 36px 32px;
-    margin: 0 auto;
+  .login-section {
+    padding: 16px 16px 32px;
+  }
+
+  .card-inner {
+    padding: 28px 20px;
+    border-radius: 16px;
   }
 
   .login-title {
     font-size: 24px;
   }
-}
 
-/* 小屏手机优化 */
-@media (max-width: 480px) {
-  .brand-panel {
-    padding: 24px 16px;
-    min-height: 120px;
-  }
-
-  .brand-icon {
-    margin-bottom: 24px;
-  }
-
-  .icon-wrapper {
-    width: 56px;
-    height: 56px;
-  }
-
-  .brand-title {
-    font-size: 24px;
-  }
-
-  .brand-subtitle {
+  .login-subtitle {
     font-size: 13px;
-    margin-bottom: 24px;
   }
 
-  .brand-features {
-    gap: 12px;
+  :deep(.ant-input-affix-wrapper) {
+    height: 48px !important;
   }
 
-  .feature-item {
-    font-size: 14px;
-  }
-
-  .login-panel {
-    padding: 20px 16px 32px;
-  }
-
-  .login-card {
-    padding: 32px 24px;
-    max-width: 100%;
-    border-radius: 20px;
-  }
-
-  .login-title {
-    font-size: 22px;
-  }
-
-  .code-input {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .send-code-btn {
-    width: 100%;
-  }
-
-  .login-btn {
+  .code-btn,
+  .submit-btn {
     height: 48px;
     font-size: 15px;
   }
+
+  .card-footer {
+    margin-top: 24px;
+    padding-top: 20px;
+  }
 }
 </style>