style(frontend): 优化前端样式和界面细节

- 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量
- 调整应用头部布局及风格，增加logo子标题和用户头像显示
- 细化分类导航样式，添加品类图标和渐变背景
- 优化颜色选择器的交互动效和样式细节
- 美化设计预览组件，提升边框圆角和阴影效果
- 调整子类型面板布局、尺寸及交互动画效果
- 修正全局样式中字体和滚动条的表现，增强用户体验
- 统一按钮、标签等控件的圆角和颜色渐变样式
- 增强Element Plus UI组件的主题覆盖和交互状态样式

frontend/src/views/Login.vue

@@ -3,7 +3,8 @@
     <div class="login-card">
       <!-- 品牌区域 -->
       <div class="brand-section">
-        <h1 class="brand-name">玉宗</h1>
+        <h1 class="brand-name">玉 宗</h1>
+        <p class="brand-en">YUZONG JEWELRY</p>
         <p class="brand-subtitle">珠宝设计大师</p>
       </div>
 
@@ -105,22 +106,41 @@ const handleLogin = async () => {
 </script>
 
 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+$primary-lighter: #D4E5DB;
+
 .login-page {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #FAF8F5;
+  background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
   padding: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    right: 10%;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba($primary-color, 0.05) 0%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+  }
 }
 
 .login-card {
   width: 100%;
-  max-width: 400px;
-  padding: 48px 40px;
+  max-width: 420px;
+  padding: 48px 44px;
   background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-radius: 20px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
 }
 
 .brand-section {
@@ -129,10 +149,18 @@ const handleLogin = async () => {
 
   .brand-name {
     font-size: 36px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 8px;
-    margin: 0 0 8px 0;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 10px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-en {
+    font-size: 10px;
+    color: #999;
+    letter-spacing: 3px;
+    margin: 0 0 12px 0;
+    opacity: 0.7;
   }
 
   .brand-subtitle {
@@ -145,12 +173,18 @@ const handleLogin = async () => {
 
 .login-form {
   :deep(.el-input__wrapper) {
-    border-radius: 8px;
-    padding: 4px 12px;
+    border-radius: 10px;
+    padding: 6px 14px;
+    box-shadow: 0 0 0 1px #E8E4DF inset !important;
+    transition: all 0.25s ease;
+
+    &:hover, &.is-focus {
+      box-shadow: 0 0 0 1px $primary-color inset !important;
+    }
   }
 
   :deep(.el-input__prefix) {
-    color: #999;
+    color: #bbb;
   }
 
   :deep(.el-form-item) {
@@ -160,24 +194,24 @@ const handleLogin = async () => {
 
 .login-button {
   width: 100%;
-  height: 48px;
-  border-radius: 8px;
+  height: 50px;
+  border-radius: 12px;
   font-size: 16px;
-  font-weight: 500;
-  background-color: #5B7E6B;
-  border-color: #5B7E6B;
-  letter-spacing: 2px;
+  font-weight: 600;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
+  border-color: $primary-color;
+  letter-spacing: 3px;
 
   &:hover,
   &:focus {
-    background-color: #3D5A4A;
-    border-color: #3D5A4A;
+    background: linear-gradient(135deg, $primary-dark, #2d4638);
+    border-color: $primary-dark;
   }
 }
 
 .footer-links {
   text-align: center;
-  margin-top: 24px;
+  margin-top: 28px;
   font-size: 14px;
 
   .text {
@@ -185,13 +219,13 @@ const handleLogin = async () => {
   }
 
   .link {
-    color: #5B7E6B;
+    color: $primary-color;
     text-decoration: none;
     margin-left: 4px;
-    font-weight: 500;
+    font-weight: 600;
 
     &:hover {
-      color: #3D5A4A;
+      color: $primary-dark;
       text-decoration: underline;
     }
   }