From 273d2da7854fdb63aeda4007170c8ce94abebe83 Mon Sep 17 00:00:00 2001
From: WUSIJIAN <13825895+wsj0228@user.noreply.gitee.com>
Date: Wed, 31 Dec 2025 17:12:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=AE=98=E7=BD=91=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F,=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84=E5=92=8C=E5=8F=AF=E7=BB=B4=E6=8A=A4?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/web/auth-old.html  | 254 ++++++++++++++
 public/web/auth.html      | 177 ++++------
 public/web/index-old.html | 186 ++++++++++
 public/web/index.html     | 191 +++++-----
 public/web/main.css       | 717 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 1303 insertions(+), 222 deletions(-)
 create mode 100644 public/web/auth-old.html
 create mode 100644 public/web/index-old.html
 create mode 100644 public/web/main.css
diff --git a/public/web/auth-old.html b/public/web/auth-old.html
new file mode 100644
index 0000000..bec5e98
--- /dev/null
+++ b/public/web/auth-old.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>商家中心 - 智推科技</title>
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/3.0.23/tailwind.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                    colors: {
+                        brand: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-slate-50 font-sans min-h-screen flex flex-col">
+
+    <!-- 简化版导航 -->
+    <nav class="bg-white shadow-sm w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <a href="index.html" class="flex items-center gap-2 text-slate-600 hover:text-brand-600 transition">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                        返回首页
+                    </a>
+                </div>
+                <div class="flex items-center">
+                    <span class="text-xl font-bold text-brand-600">商家中心</span>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="flex-grow flex items-center justify-center p-4">
+        <div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden flex flex-col fade-in-up">
+            
+            <!-- Tab 切换 -->
+            <div class="flex border-b border-slate-100">
+                <button id="tab-login" onclick="switchMode('login')" class="flex-1 py-4 text-center font-semibold text-brand-600 border-b-2 border-brand-600 hover:text-brand-700 transition">
+                    商家登录
+                </button>
+                <button id="tab-register" onclick="switchMode('register')" class="flex-1 py-4 text-center font-semibold text-slate-500 hover:text-brand-600 transition border-b-2 border-transparent">
+                    商家入驻
+                </button>
+            </div>
+
+            <div class="p-8">
+                <!-- 登录表单 -->
+                <form id="login-form" class="space-y-6" onsubmit="handleLogin(event)">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">账号/手机号</label>
+                        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入您的账号" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">密码</label>
+                        <input type="password" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入密码" required>
+                    </div>
+                    <div class="flex items-center justify-between text-sm">
+                        <label class="flex items-center text-slate-600">
+                            <input type="checkbox" class="mr-2 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
+                            记住我
+                        </label>
+                        <a href="#" class="text-brand-600 hover:underline">忘记密码？</a>
+                    </div>
+                    <button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all shadow-md hover:shadow-lg">
+                        立即登录
+                    </button>
+                </form>
+
+                <!-- 注册表单 -->
+                <form id="register-form" class="space-y-4 hidden" onsubmit="handleRegister(event)">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">公司全称 <span class="text-red-500">*</span></label>
+                        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请填写营业执照上的公司名称" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">联系人姓名</label>
+                        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入联系人姓名" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">手机号码</label>
+                        <input type="tel" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入手机号码" required>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">营业执照 <span class="text-red-500">*</span></label>
+                        <div id="drop-zone" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 border-dashed rounded-lg hover:border-brand-500 hover:bg-brand-50 transition-colors duration-200 cursor-pointer bg-slate-50 relative group">
+                            <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" accept="image/*" required onchange="handleFileSelect(this)">
+                            <div class="space-y-1 text-center" id="upload-placeholder">
+                                <svg class="mx-auto h-12 w-12 text-slate-400 group-hover:text-brand-500 transition-colors" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                                <div class="flex text-sm text-slate-600 justify-center">
+                                    <span class="font-medium text-brand-600 group-hover:text-brand-700">点击上传</span>
+                                    <p class="pl-1 group-hover:text-slate-700">或拖拽文件</p>
+                                </div>
+                                <p class="text-xs text-slate-500">支持 JPG, PNG, PDF</p>
+                            </div>
+                            <div id="file-name" class="hidden flex items-center justify-center text-sm text-brand-600 font-medium h-full min-h-[80px]">
+                                <!-- File name will appear here -->
+                            </div>
+                        </div>
+                    </div>
+              
+                    <div class="pt-2">
+                        <button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all shadow-md hover:shadow-lg">
+                            提交入驻申请
+                        </button>
+                        <p class="text-xs text-slate-500 text-center mt-4">
+                            提交即代表同意 <a href="#" class="text-brand-600 hover:underline">《商家入驻协议》</a>
+                        </p>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        function switchMode(mode) {
+            const loginForm = document.getElementById('login-form');
+            const registerForm = document.getElementById('register-form');
+            const tabLogin = document.getElementById('tab-login');
+            const tabRegister = document.getElementById('tab-register');
+
+            // Reset animations
+            loginForm.classList.remove('fade-in-up');
+            registerForm.classList.remove('fade-in-up');
+            void loginForm.offsetWidth; // Trigger reflow
+
+            if (mode === 'login') {
+                loginForm.classList.remove('hidden');
+                loginForm.classList.add('fade-in-up');
+                registerForm.classList.add('hidden');
+                
+                tabLogin.classList.add('text-brand-600', 'border-brand-600');
+                tabLogin.classList.remove('text-slate-500', 'border-transparent');
+                
+                tabRegister.classList.remove('text-brand-600', 'border-brand-600');
+                tabRegister.classList.add('text-slate-500', 'border-transparent');
+            } else {
+                loginForm.classList.add('hidden');
+                registerForm.classList.remove('hidden');
+                registerForm.classList.add('fade-in-up');
+                
+                tabRegister.classList.add('text-brand-600', 'border-brand-600');
+                tabRegister.classList.remove('text-slate-500', 'border-transparent');
+                
+                tabLogin.classList.remove('text-brand-600', 'border-brand-600');
+                tabLogin.classList.add('text-slate-500', 'border-transparent');
+            }
+
+            // Update URL without reloading
+            const url = new URL(window.location);
+            url.searchParams.set('mode', mode);
+            window.history.pushState({}, '', url);
+        }
+
+        // 拖拽效果处理
+        const dropZone = document.getElementById('drop-zone');
+        if(dropZone) {
+            const input = dropZone.querySelector('input');
+            
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, preventDefaults, false);
+            });
+
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropZone.addEventListener(eventName, highlight, false);
+            });
+
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, unhighlight, false);
+            });
+
+            function highlight(e) {
+                dropZone.classList.add('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
+                dropZone.classList.remove('border-slate-300', 'bg-slate-50');
+            }
+
+            function unhighlight(e) {
+                dropZone.classList.remove('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
+                dropZone.classList.add('border-slate-300', 'bg-slate-50');
+            }
+            
+            dropZone.addEventListener('drop', handleDrop, false);
+
+            function handleDrop(e) {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                
+                if (files && files.length > 0) {
+                    input.files = files;
+                    handleFileSelect(input);
+                }
+            }
+        }
+
+        function handleLogin(e) {
+            e.preventDefault();
+            // 跳转到后台管理系统登录页
+            window.location.href = '/#/login';
+        }
+
+        function handleFileSelect(input) {
+            const placeholder = document.getElementById('upload-placeholder');
+            const fileNameDisplay = document.getElementById('file-name');
+            
+            if (input.files && input.files[0]) {
+                placeholder.classList.add('hidden');
+                fileNameDisplay.classList.remove('hidden');
+                fileNameDisplay.textContent = '已选择: ' + input.files[0].name;
+            } else {
+                placeholder.classList.remove('hidden');
+                fileNameDisplay.classList.add('hidden');
+            }
+        }
+
+        function handleRegister(e) {
+            e.preventDefault();
+            const company = e.target.querySelector('input[placeholder*="公司"]').value;
+            alert(`入驻申请提交成功！\n\n欢迎 ${company} 加入我们。\n我们将尽快审核您的资料。`);
+            window.location.href = 'index.html';
+        }
+
+        // Initialize based on URL parameter
+        window.addEventListener('DOMContentLoaded', () => {
+            const params = new URLSearchParams(window.location.search);
+            const mode = params.get('mode') || 'login';
+            switchMode(mode);
+        });
+    </script>
+</body>
+</html>
diff --git a/public/web/auth.html b/public/web/auth.html
index bec5e98..31ff986 100644
--- a/public/web/auth.html
+++ b/public/web/auth.html
@@ -4,128 +4,96 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>商家中心 - 智推科技</title>
-    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/3.0.23/tailwind.min.js"></script>
-    <link rel="stylesheet" href="style.css">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#f0f9ff',
-                            100: '#e0f2fe',
-                            500: '#0ea5e9',
-                            600: '#0284c7',
-                            900: '#0c4a6e',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
+    <link rel="stylesheet" href="main.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
 </head>
-<body class="bg-slate-50 font-sans min-h-screen flex flex-col">
+<body class="auth-body">
 
     <!-- 简化版导航 -->
-    <nav class="bg-white shadow-sm w-full z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex items-center">
-                    <a href="index.html" class="flex items-center gap-2 text-slate-600 hover:text-brand-600 transition">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
-                        返回首页
-                    </a>
-                </div>
-                <div class="flex items-center">
-                    <span class="text-xl font-bold text-brand-600">商家中心</span>
-                </div>
-            </div>
+    <nav class="auth-navbar">
+        <div class="auth-navbar-container">
+            <a href="index.html" class="auth-back-link">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回首页
+            </a>
+            <span class="auth-title">商家中心</span>
         </div>
     </nav>
 
-    <main class="flex-grow flex items-center justify-center p-4">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden flex flex-col fade-in-up">
+    <main class="auth-main">
+        <div class="auth-card fade-in-up">
             
             <!-- Tab 切换 -->
-            <div class="flex border-b border-slate-100">
-                <button id="tab-login" onclick="switchMode('login')" class="flex-1 py-4 text-center font-semibold text-brand-600 border-b-2 border-brand-600 hover:text-brand-700 transition">
+            <div class="auth-tabs">
+                <button id="tab-login" onclick="switchMode('login')" class="auth-tab active">
                     商家登录
                 </button>
-                <button id="tab-register" onclick="switchMode('register')" class="flex-1 py-4 text-center font-semibold text-slate-500 hover:text-brand-600 transition border-b-2 border-transparent">
+                <button id="tab-register" onclick="switchMode('register')" class="auth-tab">
                     商家入驻
                 </button>
             </div>
 
-            <div class="p-8">
+            <div class="auth-form-container">
                 <!-- 登录表单 -->
-                <form id="login-form" class="space-y-6" onsubmit="handleLogin(event)">
-                    <div>
-                        <label class="block text-sm font-medium text-slate-700 mb-1">账号/手机号</label>
-                        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入您的账号" required>
+                <form id="login-form" class="auth-form" onsubmit="handleLogin(event)">
+                    <div class="form-group">
+                        <label class="form-label">账号/手机号</label>
+                        <input type="text" class="form-input" placeholder="请输入您的账号" required>
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-slate-700 mb-1">密码</label>
-                        <input type="password" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入密码" required>
+                    <div class="form-group">
+                        <label class="form-label">密码</label>
+                        <input type="password" class="form-input" placeholder="请输入密码" required>
                     </div>
-                    <div class="flex items-center justify-between text-sm">
-                        <label class="flex items-center text-slate-600">
-                            <input type="checkbox" class="mr-2 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
+                    <div class="form-row">
+                        <label class="form-checkbox">
+                            <input type="checkbox">
                             记住我
                         </label>
-                        <a href="#" class="text-brand-600 hover:underline">忘记密码？</a>
+                        <a href="#" class="form-link">忘记密码？</a>
                     </div>
-                    <button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all shadow-md hover:shadow-lg">
+                    <button type="submit" class="btn-submit">
                         立即登录
                     </button>
                 </form>
 
                 <!-- 注册表单 -->
-                <form id="register-form" class="space-y-4 hidden" onsubmit="handleRegister(event)">
-                    <div>
-                        <label class="block text-sm font-medium text-slate-700 mb-1">公司全称 <span class="text-red-500">*</span></label>
-                        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请填写营业执照上的公司名称" required>
+                <form id="register-form" class="auth-form hidden" onsubmit="handleRegister(event)">
+                    <div class="form-group">
+                        <label class="form-label">公司全称 <span class="required">*</span></label>
+                        <input type="text" class="form-input" placeholder="请填写营业执照上的公司名称" required>
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-slate-700 mb-1">联系人姓名</label>
-                        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入联系人姓名" required>
+                    <div class="form-group">
+                        <label class="form-label">联系人姓名</label>
+                        <input type="text" class="form-input" placeholder="请输入联系人姓名" required>
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-slate-700 mb-1">手机号码</label>
-                        <input type="tel" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入手机号码" required>
+                    <div class="form-group">
+                        <label class="form-label">手机号码</label>
+                        <input type="tel" class="form-input" placeholder="请输入手机号码" required>
                     </div>
 
-                    <div>
-                        <label class="block text-sm font-medium text-slate-700 mb-1">营业执照 <span class="text-red-500">*</span></label>
-                        <div id="drop-zone" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 border-dashed rounded-lg hover:border-brand-500 hover:bg-brand-50 transition-colors duration-200 cursor-pointer bg-slate-50 relative group">
-                            <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" accept="image/*" required onchange="handleFileSelect(this)">
-                            <div class="space-y-1 text-center" id="upload-placeholder">
-                                <svg class="mx-auto h-12 w-12 text-slate-400 group-hover:text-brand-500 transition-colors" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                    <div class="form-group">
+                        <label class="form-label">营业执照 <span class="required">*</span></label>
+                        <div id="drop-zone" class="upload-zone">
+                            <input type="file" accept="image/*" required onchange="handleFileSelect(this)">
+                            <div class="upload-placeholder" id="upload-placeholder">
+                                <svg stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                     <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                 </svg>
-                                <div class="flex text-sm text-slate-600 justify-center">
-                                    <span class="font-medium text-brand-600 group-hover:text-brand-700">点击上传</span>
-                                    <p class="pl-1 group-hover:text-slate-700">或拖拽文件</p>
+                                <div class="upload-text">
+                                    <span class="highlight">点击上传</span> 或拖拽文件
                                 </div>
-                                <p class="text-xs text-slate-500">支持 JPG, PNG, PDF</p>
-                            </div>
-                            <div id="file-name" class="hidden flex items-center justify-center text-sm text-brand-600 font-medium h-full min-h-[80px]">
-                                <!-- File name will appear here -->
+                                <p class="upload-hint">支持 JPG, PNG, PDF</p>
                             </div>
+                            <div id="file-name" class="upload-filename"></div>
                         </div>
                     </div>
               
-                    <div class="pt-2">
-                        <button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all shadow-md hover:shadow-lg">
-                            提交入驻申请
-                        </button>
-                        <p class="text-xs text-slate-500 text-center mt-4">
-                            提交即代表同意 <a href="#" class="text-brand-600 hover:underline">《商家入驻协议》</a>
-                        </p>
-                    </div>
+                    <button type="submit" class="btn-submit">
+                        提交入驻申请
+                    </button>
+                    <p class="form-hint">
+                        提交即代表同意 <a href="#" class="form-link">《商家入驻协议》</a>
+                    </p>
                 </form>
             </div>
         </div>
@@ -138,31 +106,16 @@
             const tabLogin = document.getElementById('tab-login');
             const tabRegister = document.getElementById('tab-register');
 
-            // Reset animations
-            loginForm.classList.remove('fade-in-up');
-            registerForm.classList.remove('fade-in-up');
-            void loginForm.offsetWidth; // Trigger reflow
-
             if (mode === 'login') {
                 loginForm.classList.remove('hidden');
-                loginForm.classList.add('fade-in-up');
                 registerForm.classList.add('hidden');
-                
-                tabLogin.classList.add('text-brand-600', 'border-brand-600');
-                tabLogin.classList.remove('text-slate-500', 'border-transparent');
-                
-                tabRegister.classList.remove('text-brand-600', 'border-brand-600');
-                tabRegister.classList.add('text-slate-500', 'border-transparent');
+                tabLogin.classList.add('active');
+                tabRegister.classList.remove('active');
             } else {
                 loginForm.classList.add('hidden');
                 registerForm.classList.remove('hidden');
-                registerForm.classList.add('fade-in-up');
-                
-                tabRegister.classList.add('text-brand-600', 'border-brand-600');
-                tabRegister.classList.remove('text-slate-500', 'border-transparent');
-                
-                tabLogin.classList.remove('text-brand-600', 'border-brand-600');
-                tabLogin.classList.add('text-slate-500', 'border-transparent');
+                tabRegister.classList.add('active');
+                tabLogin.classList.remove('active');
             }
 
             // Update URL without reloading
@@ -194,13 +147,13 @@
             });
 
             function highlight(e) {
-                dropZone.classList.add('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
-                dropZone.classList.remove('border-slate-300', 'bg-slate-50');
+                dropZone.style.borderColor = 'var(--brand-500)';
+                dropZone.style.background = 'var(--brand-50)';
             }
 
             function unhighlight(e) {
-                dropZone.classList.remove('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
-                dropZone.classList.add('border-slate-300', 'bg-slate-50');
+                dropZone.style.borderColor = '#cbd5e1';
+                dropZone.style.background = 'var(--slate-50)';
             }
             
             dropZone.addEventListener('drop', handleDrop, false);
@@ -219,7 +172,7 @@
         function handleLogin(e) {
             e.preventDefault();
             // 跳转到后台管理系统登录页
-            window.location.href = '/#/login';
+            window.location.href = '/index.html#/login';
         }
 
         function handleFileSelect(input) {
@@ -228,11 +181,11 @@
             
             if (input.files && input.files[0]) {
                 placeholder.classList.add('hidden');
-                fileNameDisplay.classList.remove('hidden');
+                fileNameDisplay.classList.add('show');
                 fileNameDisplay.textContent = '已选择: ' + input.files[0].name;
             } else {
                 placeholder.classList.remove('hidden');
-                fileNameDisplay.classList.add('hidden');
+                fileNameDisplay.classList.remove('show');
             }
         }
 
diff --git a/public/web/index-old.html b/public/web/index-old.html
new file mode 100644
index 0000000..55936a2
--- /dev/null
+++ b/public/web/index-old.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能营销服务平台 - CID广告 & AI客服</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                    colors: {
+                        brand: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-slate-50 text-slate-800 font-sans">
+
+    <!-- 导航栏 -->
+    <nav class="bg-white shadow-sm fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <span class="text-2xl font-bold text-brand-600">红动未来科技</span>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#services" class="text-slate-600 hover:text-brand-600 transition">核心业务</a>
+                    <a href="#advantage" class="text-slate-600 hover:text-brand-600 transition">优势</a>
+                    <a href="auth.html?mode=register" class="bg-brand-600 text-white px-5 py-2 rounded-full hover:bg-brand-700 transition shadow-md">商家入驻</a>
+                    <a href="/index.html#/login" class="text-slate-600 hover:text-brand-600 transition font-medium">后台登录</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero 区域 -->
+    <section class="relative pt-32 pb-20 bg-gradient-to-br from-brand-50 via-white to-brand-50 overflow-hidden">
+        <!-- 背景装饰 -->
+        <div class="absolute top-0 left-0 -ml-20 -mt-20 w-96 h-96 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
+        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
+
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 fade-in-up">
+            <div class="text-center max-w-3xl mx-auto">
+                <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
+                    赋能商业增长的 <br>
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-brand-400">智能营销解决方案</span>
+                </h1>
+                <p class="text-lg text-slate-600 mb-10 leading-relaxed max-w-2xl mx-auto">
+                    通过精准的 CID 广告归因技术与 24/7 智能 AI 客服，帮助企业降低获客成本，提升转化效率，实现全链路营销闭环。
+                </p>
+                <div class="flex justify-center gap-4">
+                    <a href="auth.html?mode=register" class="px-8 py-4 bg-brand-600 text-white rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all duration-200 shadow-lg hover:shadow-brand-500/30">立即入驻</a>
+                    <a href="#services" class="px-8 py-4 bg-white text-brand-600 border border-brand-200 rounded-lg font-semibold hover:bg-slate-50 hover:border-brand-300 active:scale-95 transition-all duration-200">了解服务</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 核心业务介绍 -->
+    <section id="services" class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16 fade-in-up" style="animation-delay: 0.2s;">
+                <h2 class="text-3xl font-bold text-slate-900 mb-4">核心业务板块</h2>
+                <p class="text-slate-600 max-w-2xl mx-auto">专注于电商与服务行业的两大核心痛点：流量获取与用户留存。</p>
+            </div>
+
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- CID 广告业务 -->
+                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.3s;">
+                    <div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-blue-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-100 transition-colors duration-300">
+                            <svg class="w-8 h-8 text-blue-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">CID 广告业务</h3>
+                        <p class="text-slate-600 mb-6 leading-relaxed">
+                            打破平台数据壁垒，实现跨平台广告投放效果精准归因。
+                        </p>
+                        <ul class="space-y-3">
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                全链路转化数据回传
+                            </li>
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                提升 ROI 投产比
+                            </li>
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                支持多媒体平台
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- 聚合电商业务 -->
+                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.4s;">
+                    <div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-orange-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-14 h-14 bg-orange-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-100 transition-colors duration-300">
+                            <svg class="w-8 h-8 text-orange-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-orange-600 transition-colors">聚合电商业务</h3>
+                        <p class="text-slate-600 mb-6 leading-relaxed">
+                            一站式聚合主流电商平台资源，实现流量共享与销售增长。
+                        </p>
+                        <ul class="space-y-3">
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                多平台商品一键管理
+                            </li>
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                聚合流量分发体系
+                            </li>
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                供应链深度整合
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- AI 客服业务 -->
+                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.5s;">
+                    <div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-purple-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors duration-300">
+                            <svg class="w-8 h-8 text-purple-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-purple-600 transition-colors">AI 智能客服业务</h3>
+                        <p class="text-slate-600 mb-6 leading-relaxed">
+                            基于大模型的智能对话系统，7x24小时在线，秒级响应客户咨询。
+                        </p>
+                        <ul class="space-y-3">
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                自动接待与意图识别
+                            </li>
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                智能话术推荐
+                            </li>
+                            <li class="flex items-center text-slate-700">
+                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                降低人工成本
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 底部 CTA -->
+    <section class="py-20 bg-brand-900 text-white">
+        <div class="max-w-4xl mx-auto text-center px-4">
+            <h2 class="text-3xl font-bold mb-6">准备好提升您的业务了吗？</h2>
+            <p class="text-brand-100 mb-8 text-lg">加入数千家已经在使用我们服务的商家行列，开启智能营销新时代。</p>
+            <a href="auth.html?mode=register" class="inline-block px-10 py-4 bg-white text-brand-900 rounded-lg font-bold text-lg hover:bg-brand-50 transition transform hover:scale-105">
+                免费商家入驻
+            </a>
+        </div>
+    </section>
+
+    <footer class="bg-slate-900 text-slate-400 py-8">
+        <div class="max-w-7xl mx-auto px-4 text-center">
+            <p>&copy; 2025 红动未来科技. All rights reserved.</p>
+        </div>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/web/index.html b/public/web/index.html
index 6d54b69..2b9230f 100644
--- a/public/web/index.html
+++ b/public/web/index.html
@@ -4,103 +4,74 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>智能营销服务平台 - CID广告 & AI客服</title>
-    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/3.0.23/tailwind.min.js"></script>
-    <link rel="stylesheet" href="style.css">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#f0f9ff',
-                            100: '#e0f2fe',
-                            500: '#0ea5e9',
-                            600: '#0284c7',
-                            900: '#0c4a6e',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
+    <link rel="stylesheet" href="main.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
 </head>
-<body class="bg-slate-50 text-slate-800 font-sans">
+<body>
 
     <!-- 导航栏 -->
-    <nav class="bg-white shadow-sm fixed w-full z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex items-center">
-                    <span class="text-2xl font-bold text-brand-600">红动未来科技</span>
-                </div>
-                <div class="hidden md:flex items-center space-x-8">
-                    <a href="#services" class="text-slate-600 hover:text-brand-600 transition">核心业务</a>
-                    <a href="#advantage" class="text-slate-600 hover:text-brand-600 transition">优势</a>
-                    <a href="auth.html?mode=register" class="bg-brand-600 text-white px-5 py-2 rounded-full hover:bg-brand-700 transition shadow-md">商家入驻</a>
-                    <a href="/index.html#/login" class="text-slate-600 hover:text-brand-600 transition font-medium">后台登录</a>
-                </div>
+    <nav class="navbar">
+        <div class="navbar-container">
+            <span class="navbar-brand">红动未来科技</span>
+            <div class="navbar-menu">
+                <a href="#services" class="navbar-link">核心业务</a>
+                <a href="#cta" class="navbar-link">优势</a>
+                <a href="auth.html?mode=register" class="btn btn-primary">商家入驻</a>
+                <a href="/index.html#/login" class="navbar-link">后台登录</a>
             </div>
         </div>
     </nav>
 
     <!-- Hero 区域 -->
-    <section class="relative pt-32 pb-20 bg-gradient-to-br from-brand-50 via-white to-brand-50 overflow-hidden">
-        <!-- 背景装饰 -->
-        <div class="absolute top-0 left-0 -ml-20 -mt-20 w-96 h-96 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
-        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
-
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 fade-in-up">
-            <div class="text-center max-w-3xl mx-auto">
-                <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
-                    赋能商业增长的 <br>
-                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-brand-400">智能营销解决方案</span>
-                </h1>
-                <p class="text-lg text-slate-600 mb-10 leading-relaxed max-w-2xl mx-auto">
-                    通过精准的 CID 广告归因技术与 24/7 智能 AI 客服，帮助企业降低获客成本，提升转化效率，实现全链路营销闭环。
-                </p>
-                <div class="flex justify-center gap-4">
-                    <a href="auth.html?mode=register" class="px-8 py-4 bg-brand-600 text-white rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all duration-200 shadow-lg hover:shadow-brand-500/30">立即入驻</a>
-                    <a href="#services" class="px-8 py-4 bg-white text-brand-600 border border-brand-200 rounded-lg font-semibold hover:bg-slate-50 hover:border-brand-300 active:scale-95 transition-all duration-200">了解服务</a>
-                </div>
+    <section class="hero">
+        <div class="hero-blob hero-blob-1"></div>
+        <div class="hero-blob hero-blob-2"></div>
+        <div class="hero-content fade-in-up">
+            <h1 class="hero-title">
+                赋能商业增长的 <br>
+                <span class="hero-title-gradient">智能营销解决方案</span>
+            </h1>
+            <p class="hero-description">
+                通过精准的 CID 广告归因技术与 24/7 智能 AI 客服，帮助企业降低获客成本，提升转化效率，实现全链路营销闭环。
+            </p>
+            <div class="hero-buttons">
+                <a href="auth.html?mode=register" class="btn btn-primary btn-lg">立即入驻</a>
+                <a href="#services" class="btn btn-outline btn-lg">了解服务</a>
             </div>
         </div>
     </section>
 
     <!-- 核心业务介绍 -->
-    <section id="services" class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16 fade-in-up" style="animation-delay: 0.2s;">
-                <h2 class="text-3xl font-bold text-slate-900 mb-4">核心业务板块</h2>
-                <p class="text-slate-600 max-w-2xl mx-auto">专注于电商与服务行业的两大核心痛点：流量获取与用户留存。</p>
+    <section id="services" class="services">
+        <div class="container">
+            <div class="section-header fade-in-up">
+                <h2 class="section-title">核心业务板块</h2>
+                <p class="section-description">专注于电商与服务行业的两大核心痛点：流量获取与用户留存。</p>
             </div>
 
-            <div class="grid md:grid-cols-3 gap-8">
+            <div class="services-grid">
                 <!-- CID 广告业务 -->
-                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.3s;">
-                    <div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-blue-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
-                    <div class="relative z-10">
-                        <div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-100 transition-colors duration-300">
-                            <svg class="w-8 h-8 text-blue-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
+                <div class="service-card fade-in-up">
+                    <div class="service-card-glow blue"></div>
+                    <div class="service-card-content">
+                        <div class="service-icon blue">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                         </div>
-                        <h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">CID 广告业务</h3>
-                        <p class="text-slate-600 mb-6 leading-relaxed">
+                        <h3 class="service-title blue">CID 广告业务</h3>
+                        <p class="service-description">
                             打破平台数据壁垒，实现跨平台广告投放效果精准归因。
                         </p>
-                        <ul class="space-y-3">
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                        <ul class="service-features">
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 全链路转化数据回传
                             </li>
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 提升 ROI 投产比
                             </li>
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 支持多媒体平台
                             </li>
                         </ul>
@@ -108,27 +79,27 @@
                 </div>
 
                 <!-- 聚合电商业务 -->
-                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.4s;">
-                    <div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-orange-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
-                    <div class="relative z-10">
-                        <div class="w-14 h-14 bg-orange-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-100 transition-colors duration-300">
-                            <svg class="w-8 h-8 text-orange-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
+                <div class="service-card fade-in-up">
+                    <div class="service-card-glow orange"></div>
+                    <div class="service-card-content">
+                        <div class="service-icon orange">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                         </div>
-                        <h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-orange-600 transition-colors">聚合电商业务</h3>
-                        <p class="text-slate-600 mb-6 leading-relaxed">
+                        <h3 class="service-title orange">聚合电商业务</h3>
+                        <p class="service-description">
                             一站式聚合主流电商平台资源，实现流量共享与销售增长。
                         </p>
-                        <ul class="space-y-3">
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                        <ul class="service-features">
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 多平台商品一键管理
                             </li>
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 聚合流量分发体系
                             </li>
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 供应链深度整合
                             </li>
                         </ul>
@@ -136,27 +107,27 @@
                 </div>
 
                 <!-- AI 客服业务 -->
-                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.5s;">
-                    <div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-purple-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
-                    <div class="relative z-10">
-                        <div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors duration-300">
-                            <svg class="w-8 h-8 text-purple-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
+                <div class="service-card fade-in-up">
+                    <div class="service-card-glow purple"></div>
+                    <div class="service-card-content">
+                        <div class="service-icon purple">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                         </div>
-                        <h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-purple-600 transition-colors">AI 智能客服业务</h3>
-                        <p class="text-slate-600 mb-6 leading-relaxed">
+                        <h3 class="service-title purple">AI 智能客服业务</h3>
+                        <p class="service-description">
                             基于大模型的智能对话系统，7x24小时在线，秒级响应客户咨询。
                         </p>
-                        <ul class="space-y-3">
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                        <ul class="service-features">
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 自动接待与意图识别
                             </li>
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 智能话术推荐
                             </li>
-                            <li class="flex items-center text-slate-700">
-                                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            <li class="service-feature">
+                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                 降低人工成本
                             </li>
                         </ul>
@@ -167,21 +138,21 @@
     </section>
 
     <!-- 底部 CTA -->
-    <section class="py-20 bg-brand-900 text-white">
-        <div class="max-w-4xl mx-auto text-center px-4">
-            <h2 class="text-3xl font-bold mb-6">准备好提升您的业务了吗？</h2>
-            <p class="text-brand-100 mb-8 text-lg">加入数千家已经在使用我们服务的商家行列，开启智能营销新时代。</p>
-            <a href="auth.html?mode=register" class="inline-block px-10 py-4 bg-white text-brand-900 rounded-lg font-bold text-lg hover:bg-brand-50 transition transform hover:scale-105">
+    <section id="cta" class="cta">
+        <div class="container">
+            <h2 class="cta-title">准备好提升您的业务了吗？</h2>
+            <p class="cta-description">加入数千家已经在使用我们服务的商家行列，开启智能营销新时代。</p>
+            <a href="auth.html?mode=register" class="btn btn-white btn-lg">
                 免费商家入驻
             </a>
         </div>
     </section>
 
-    <footer class="bg-slate-900 text-slate-400 py-8">
-        <div class="max-w-7xl mx-auto px-4 text-center">
+    <footer class="footer">
+        <div class="container">
             <p>&copy; 2025 红动未来科技. All rights reserved.</p>
         </div>
     </footer>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/web/main.css b/public/web/main.css
new file mode 100644
index 0000000..1128be2
--- /dev/null
+++ b/public/web/main.css
@@ -0,0 +1,717 @@
+/* 基础重置和变量 */
+:root {
+    --brand-50: #f0f9ff;
+    --brand-100: #e0f2fe;
+    --brand-200: #bae6fd;
+    --brand-400: #38bdf8;
+    --brand-500: #0ea5e9;
+    --brand-600: #0284c7;
+    --brand-700: #0369a1;
+    --brand-900: #0c4a6e;
+    --slate-50: #f8fafc;
+    --slate-100: #f1f5f9;
+    --slate-400: #94a3b8;
+    --slate-600: #475569;
+    --slate-700: #334155;
+    --slate-800: #1e293b;
+    --slate-900: #0f172a;
+    --blue-50: #eff6ff;
+    --blue-100: #dbeafe;
+    --blue-600: #2563eb;
+    --orange-50: #fff7ed;
+    --orange-100: #ffedd5;
+    --orange-600: #ea580c;
+    --purple-50: #faf5ff;
+    --purple-100: #f3e8ff;
+    --purple-600: #9333ea;
+    --green-500: #22c55e;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--slate-50);
+    color: var(--slate-800);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.2s ease;
+}
+
+ul {
+    list-style: none;
+}
+
+/* 导航栏 */
+.navbar {
+    background: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    width: 100%;
+    z-index: 50;
+}
+
+.navbar-container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+}
+
+.navbar-brand {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--brand-600);
+}
+
+.navbar-menu {
+    display: none;
+    align-items: center;
+    gap: 2rem;
+}
+
+@media (min-width: 768px) {
+    .navbar-menu {
+        display: flex;
+    }
+}
+
+.navbar-link {
+    color: var(--slate-600);
+    font-weight: 500;
+}
+
+.navbar-link:hover {
+    color: var(--brand-600);
+}
+
+.btn {
+    display: inline-block;
+    padding: 0.5rem 1.25rem;
+    border-radius: 9999px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: none;
+}
+
+.btn-primary {
+    background: var(--brand-600);
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:hover {
+    background: var(--brand-700);
+}
+
+.btn-lg {
+    padding: 1rem 2rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+}
+
+.btn-outline {
+    background: white;
+    color: var(--brand-600);
+    border: 1px solid var(--brand-200);
+}
+
+.btn-outline:hover {
+    background: var(--slate-50);
+    border-color: var(--brand-400);
+}
+
+.btn-white {
+    background: white;
+    color: var(--brand-900);
+}
+
+.btn-white:hover {
+    background: var(--brand-50);
+    transform: scale(1.05);
+}
+
+/* Hero 区域 */
+.hero {
+    position: relative;
+    padding: 8rem 1rem 5rem;
+    background: linear-gradient(135deg, var(--brand-50) 0%, white 50%, var(--brand-50) 100%);
+    overflow: hidden;
+}
+
+.hero-blob {
+    position: absolute;
+    width: 24rem;
+    height: 24rem;
+    border-radius: 50%;
+    mix-blend-mode: multiply;
+    filter: blur(64px);
+    opacity: 0.3;
+    animation: blob 7s infinite;
+}
+
+.hero-blob-1 {
+    top: -5rem;
+    left: -5rem;
+    background: var(--blue-100);
+}
+
+.hero-blob-2 {
+    top: -5rem;
+    right: -5rem;
+    background: var(--purple-100);
+    animation-delay: 2s;
+}
+
+.hero-content {
+    max-width: 1280px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 10;
+    text-align: center;
+}
+
+.hero-title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: var(--slate-900);
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
+    letter-spacing: -0.02em;
+}
+
+@media (min-width: 768px) {
+    .hero-title {
+        font-size: 3.75rem;
+    }
+}
+
+.hero-title-gradient {
+    background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-description {
+    font-size: 1.125rem;
+    color: var(--slate-600);
+    max-width: 42rem;
+    margin: 0 auto 2.5rem;
+    line-height: 1.75;
+}
+
+.hero-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* 业务板块 */
+.services {
+    padding: 5rem 1rem;
+    background: white;
+}
+
+.container {
+    max-width: 1280px;
+    margin: 0 auto;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.section-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: var(--slate-900);
+    margin-bottom: 1rem;
+}
+
+.section-description {
+    color: var(--slate-600);
+    max-width: 42rem;
+    margin: 0 auto;
+}
+
+.services-grid {
+    display: grid;
+    gap: 2rem;
+}
+
+@media (min-width: 768px) {
+    .services-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.service-card {
+    position: relative;
+    background: white;
+    border-radius: 1rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--slate-100);
+    padding: 2rem;
+    transition: all 0.3s ease;
+}
+
+.service-card:hover {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    border-color: var(--brand-200);
+    transform: translateY(-0.5rem);
+}
+
+.service-card-glow {
+    position: absolute;
+    top: -1.5rem;
+    right: -1.5rem;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    opacity: 0;
+    filter: blur(32px);
+    transition: opacity 0.5s ease;
+}
+
+.service-card:hover .service-card-glow {
+    opacity: 0.5;
+}
+
+.service-card-glow.blue { background: var(--blue-100); }
+.service-card-glow.orange { background: var(--orange-100); }
+.service-card-glow.purple { background: var(--purple-100); }
+
+.service-card-content {
+    position: relative;
+    z-index: 10;
+}
+
+.service-icon {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    transition: background 0.3s ease;
+}
+
+.service-icon.blue { background: var(--blue-50); }
+.service-icon.orange { background: var(--orange-50); }
+.service-icon.purple { background: var(--purple-50); }
+
+.service-card:hover .service-icon.blue { background: var(--blue-100); }
+.service-card:hover .service-icon.orange { background: var(--orange-100); }
+.service-card:hover .service-icon.purple { background: var(--purple-100); }
+
+.service-icon svg {
+    width: 2rem;
+    height: 2rem;
+    transition: transform 0.3s ease;
+}
+
+.service-card:hover .service-icon svg {
+    transform: scale(1.1) rotate(3deg);
+}
+
+.service-icon.blue svg { color: var(--blue-600); }
+.service-icon.orange svg { color: var(--orange-600); }
+.service-icon.purple svg { color: var(--purple-600); }
+
+.service-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--slate-900);
+    margin-bottom: 1rem;
+    transition: color 0.3s ease;
+}
+
+.service-card:hover .service-title.blue { color: var(--blue-600); }
+.service-card:hover .service-title.orange { color: var(--orange-600); }
+.service-card:hover .service-title.purple { color: var(--purple-600); }
+
+.service-description {
+    color: var(--slate-600);
+    margin-bottom: 1.5rem;
+    line-height: 1.75;
+}
+
+.service-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.service-feature {
+    display: flex;
+    align-items: center;
+    color: var(--slate-700);
+}
+
+.service-feature svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--green-500);
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+}
+
+/* CTA 区域 */
+.cta {
+    padding: 5rem 1rem;
+    background: var(--brand-900);
+    color: white;
+    text-align: center;
+}
+
+.cta-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.cta-description {
+    color: var(--brand-100);
+    font-size: 1.125rem;
+    margin-bottom: 2rem;
+}
+
+/* Footer */
+.footer {
+    background: var(--slate-900);
+    color: var(--slate-400);
+    padding: 2rem 1rem;
+    text-align: center;
+}
+
+/* 动画 */
+@keyframes blob {
+    0% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(30px, -50px) scale(1.1); }
+    66% { transform: translate(-20px, 20px) scale(0.9); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+
+.fade-in-up {
+    animation: fadeInUp 0.5s ease-out forwards;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 滚动条 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* ========== Auth 页面样式 ========== */
+.auth-body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.auth-navbar {
+    background: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    width: 100%;
+}
+
+.auth-navbar-container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+}
+
+.auth-back-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--slate-600);
+}
+
+.auth-back-link:hover {
+    color: var(--brand-600);
+}
+
+.auth-back-link svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.auth-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--brand-600);
+}
+
+.auth-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.auth-card {
+    background: white;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    width: 100%;
+    max-width: 28rem;
+    overflow: hidden;
+}
+
+.auth-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--slate-100);
+}
+
+.auth-tab {
+    flex: 1;
+    padding: 1rem;
+    text-align: center;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    background: none;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+    color: var(--slate-400);
+}
+
+.auth-tab:hover {
+    color: var(--brand-600);
+}
+
+.auth-tab.active {
+    color: var(--brand-600);
+    border-bottom-color: var(--brand-600);
+}
+
+.auth-form-container {
+    padding: 2rem;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.auth-form.hidden {
+    display: none;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.form-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--slate-700);
+}
+
+.form-label .required {
+    color: #ef4444;
+}
+
+.form-input {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.form-input:focus {
+    border-color: var(--brand-500);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.875rem;
+}
+
+.form-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--slate-600);
+}
+
+.form-checkbox input {
+    width: 1rem;
+    height: 1rem;
+}
+
+.form-link {
+    color: var(--brand-600);
+}
+
+.form-link:hover {
+    text-decoration: underline;
+}
+
+.btn-submit {
+    width: 100%;
+    padding: 0.75rem;
+    background: var(--brand-600);
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-submit:hover {
+    background: var(--brand-700);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+.btn-submit:active {
+    transform: scale(0.98);
+}
+
+/* 文件上传区域 */
+.upload-zone {
+    margin-top: 0.25rem;
+    display: flex;
+    justify-content: center;
+    padding: 1.5rem;
+    border: 2px dashed #cbd5e1;
+    border-radius: 0.5rem;
+    background: var(--slate-50);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.upload-zone:hover {
+    border-color: var(--brand-500);
+    background: var(--brand-50);
+}
+
+.upload-zone input[type="file"] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.upload-placeholder {
+    text-align: center;
+}
+
+.upload-placeholder svg {
+    width: 3rem;
+    height: 3rem;
+    margin: 0 auto 0.5rem;
+    color: var(--slate-400);
+}
+
+.upload-zone:hover .upload-placeholder svg {
+    color: var(--brand-500);
+}
+
+.upload-text {
+    font-size: 0.875rem;
+    color: var(--slate-600);
+}
+
+.upload-text .highlight {
+    color: var(--brand-600);
+    font-weight: 500;
+}
+
+.upload-hint {
+    font-size: 0.75rem;
+    color: var(--slate-400);
+    margin-top: 0.25rem;
+}
+
+.upload-filename {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    color: var(--brand-600);
+    font-weight: 500;
+    min-height: 80px;
+}
+
+.upload-filename.show {
+    display: flex;
+}
+
+.upload-placeholder.hidden {
+    display: none;
+}
+
+.form-hint {
+    font-size: 0.75rem;
+    color: var(--slate-400);
+    text-align: center;
+    margin-top: 1rem;
+}
