Prechádzať zdrojové kódy

feat(web): refactor app title styling and update button neumorphism design

- Change app title from div to h1 semantic element for better accessibility
- Increase app title font size from 1.75rem to 3rem for better visibility
- Add text-shadow effect to app title for neumorphic depth (right-bottom shadow and left-top highlight)
- Split app title into main text and secondary span with reduced font weight and color
- Update button background from gradient to solid white (#ffffff)
- Refine button box-shadow colors for improved neumorphic appearance
- Change button text color from blue (#5a8fb5) to gray (#aab2bd)
- Update button text-shadow to use solid white instead of rgba
- Adjust button hover state with updated shadow colors (#c8d0e7)
- Modify button active state background to light gray (#f5f5f5) with inset shadows
- Improve overall visual hierarchy and neumorphic design consistency across the interface
sy 1 mesiac pred
rodič
commit
4cdec58760
1 zmenil súbory, kde vykonal 27 pridanie a 14 odobranie
  1. 27 14
      web/src/views/HomeView.vue

+ 27 - 14
web/src/views/HomeView.vue

@@ -215,7 +215,7 @@ watch(() => global.inputLine, () => {
         <span class="back-icon">←</span>
         <span>返回首页</span>
       </div>
-      <div class="app-title">商小川智能助手</div>
+      <h1 class="app-title">商小川<span>智能助手</span></h1>
       <div class="nav-spacer"></div>
     </div>
     
@@ -543,18 +543,18 @@ watch(() => global.inputLine, () => {
         padding: 0.875rem 2.5rem;
         border-radius: 3.125rem; /* 胶囊形状 */
         border: 1px solid rgba(255, 255, 255, 0.4);
-        background: linear-gradient(145deg, #d4ebf7, #b8daf0);
+        background: #ffffff;
         box-shadow: 
-          -10px -10px 20px rgba(255, 255, 255, 0.8),
-          10px 10px 20px rgba(176, 210, 232, 0.6),
+          -10px -10px 20px #ffffff,
+          10px 10px 20px #d1d9e6,
           inset 1px 1px 0px rgba(255, 255, 255, 1);
-        color: #5a8fb5;
+        color: #aab2bd;
         font-size: 1.125rem;
         font-weight: 400;
         letter-spacing: 0.125rem;
         cursor: pointer;
         transition: all 0.3s ease;
-        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
+        text-shadow: 1px 1px 0 #ffffff;
         min-width: 100px;
         min-height: 50px;
         justify-content: center;
@@ -562,17 +562,17 @@ watch(() => global.inputLine, () => {
         &:hover {
           transform: translateY(-2px);
           box-shadow: 
-            -12px -12px 24px rgba(255, 255, 255, 0.9),
-            12px 12px 24px rgba(176, 210, 232, 0.7),
+            -12px -12px 24px #ffffff,
+            12px 12px 24px #c8d0e7,
             inset 1px 1px 0px rgba(255, 255, 255, 1);
         }
 
         &:active {
           transform: translateY(0);
-          background: #b8daf0;
+          background: #f5f5f5;
           box-shadow: 
-            inset 6px 6px 12px rgba(176, 210, 232, 0.6),
-            inset -6px -6px 12px rgba(255, 255, 255, 0.8);
+            inset 6px 6px 12px #d1d9e6,
+            inset -6px -6px 12px #ffffff;
           border: 1px solid transparent;
         }
 
@@ -582,9 +582,22 @@ watch(() => global.inputLine, () => {
       }
 
       .app-title {
-        font-size: 1.75rem;
-        font-weight: 600;
-        color: #101333;
+        font-size: 3rem;
+        font-weight: 700;
+        color: #555964;
+        letter-spacing: 0.125rem;
+        margin: 0;
+        /* 核心:文字双重阴影营造新拟态效果 */
+        text-shadow: 
+          4px 4px 8px #d1d9e6,    /* 右下深色阴影 */
+          -4px -4px 8px #ffffff;  /* 左上高光 */
+        
+        /* 让"智能助手"四个字稍微淡一点,突出"商小川" */
+        span {
+          font-weight: 300;
+          color: #8990a0;
+          font-size: 0.8em; /* 稍微小一点 */
+        }
       }
 
       .nav-spacer {