feat:重构 UI 样式并优化用户体验

- 更新了全局样式，增加了更多主题颜色和样式
- 重新设计了首页、登录和注册页面的布局和样式
- 增加了暗黑主题支持
- 优化了表单元素和按钮的样式- 调整了字体颜色和背景渐变

biji-qianduan/src/assets/styles/global.css

@@ -7,9 +7,10 @@ body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--bg-color);
+  background: var(--bg-gradient);
   color: var(--text-color);
-  transition: background-color var(--transition-duration), color var(--transition-duration);
+  transition: background var(--transition-duration), color var(--transition-duration);
+  background-attachment: fixed;
 }
 
 /* 滚动条美化 */

biji-qianduan/src/assets/styles/theme.css

@@ -2,46 +2,66 @@
 
 /* 默认浅色主题 */
 :root {
+  /* 主色调 - 活力紫 */
+  --primary-color: #6a11cb;
+  --primary-color-light: #f3e5f5; /* 浅紫色，用于悬停 */
+  --primary-color-dark: #4a008f; /* 深紫色，用于激活 */
+
+  /* 辅助色 */
+  --secondary-color: #f7fafc;
+  --accent-color: #2575fc; /* 亮蓝色，用于强调 */
+  --danger-color: #f5365c;
+  --success-color: #2dce89;
+  --warning-color: #fb6340;
+
+  /* 背景色 - 带有色彩倾向的渐变 */
   --bg-color: #ffffff;
-  --bg-color-secondary: #f7f8fa;
-  --bg-color-tertiary: #eff2f5;
-  --text-color: #303133;
-  --text-color-secondary: #606266;
-  --text-color-placeholder: #a8abb2;
-  --border-color: #dcdfe6;
-  --border-color-light: #e4e7ed;
-  --primary-color: #409eff;
-  --primary-color-light: #ecf5ff;
-  --danger-color: #f56c6c;
-  --success-color: #67c23a;
-  --warning-color: #e6a23c;
-  --info-color: #909399;
+  --bg-color-secondary: #f8f9fe;
+  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 
-  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.08);
-  --box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.15);
+  /* 文本色 */
+  --text-color: #32325d; /* 深蓝灰色 */
+  --text-color-secondary: #6b7c93; /* 灰蓝色 */
+  --text-color-placeholder: #adb5bd;
 
-  --transition-duration: 0.3s;
+  /* 边框和阴影 */
+  --border-color: #e9ecef;
+  --border-radius: 8px;
+  --box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --box-shadow-light: 0 2px 4px rgba(50, 50, 93, 0.1);
+  --box-shadow-dark: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+
+  /* 过渡 */
+  --transition-duration: 0.25s;
 }
 
 /* 深色主题 */
 .dark-theme {
-  --bg-color: #141414;
-  --bg-color-secondary: #1a1a1a;
-  --bg-color-tertiary: #222222;
-  --text-color: #e5e5e5;
-  --text-color-secondary: #a3a3a3;
-  --text-color-placeholder: #5c5c5c;
-  --border-color: #3a3a3a;
-  --border-color-light: #2a2a2a;
-  --primary-color: #409eff;
-  --primary-color-light: #26334f;
-  --danger-color: #f56c6c;
-  --success-color: #67c23a;
-  --warning-color: #e6a23c;
-  --info-color: #909399;
+  /* 主色调 - 科技蓝 */
+  --primary-color: #007bff;
+  --primary-color-light: #1f2937;
+  --primary-color-dark: #0056b3;
 
-  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.25);
-  --box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.4);
+  /* 辅助色 */
+  --secondary-color: #111827;
+  --accent-color: #10b981; /* 亮绿色 */
+  --danger-color: #ef4444;
+  --success-color: #22c55e;
+  --warning-color: #f97316;
+
+  /* 背景色 - 深邃的渐变 */
+  --bg-color: #0d1117;
+  --bg-color-secondary: #1f2937;
+  --bg-gradient: linear-gradient(135deg, #0d1117 0%, #1f2937 100%);
+
+  /* 文本色 */
+  --text-color: #e5e7eb;
+  --text-color-secondary: #9ca3af;
+  --text-color-placeholder: #4b5563;
+
+  /* 边框和阴影 */
+  --border-color: #374151;
+  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
+  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.18);
+  --box-shadow-dark: 0 7px 14px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
 }