瀏覽代碼

style(mobile/Header): 优化移动端导航菜单项的视觉样式

调整下拉菜单项的间距、颜色和悬停效果,移除底部边框并统一为透明背景,提升视觉一致性和交互反馈。
reaper 1 月之前
父節點
當前提交
90e78bde33
共有 1 個文件被更改,包括 18 次插入6 次删除
  1. 18 6
      app/components/mobile/Header.vue

+ 18 - 6
app/components/mobile/Header.vue

@@ -185,6 +185,12 @@ const toggleProducts = () => {
 }
 
 .nav-item-wrapper {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+  .nav-item {
+    border-bottom: none;
+  }
+
   &:last-of-type {
     border-bottom: none;
   }
@@ -207,30 +213,36 @@ const toggleProducts = () => {
 }
 
 .dropdown-item {
-  padding: 12px;
+  padding: 8px 10px 8px 24px;
   display: flex;
   align-items: center;
-  color: #FFF;
+  color: #bdbdbd;
   text-decoration: none;
   font-size: 14px;
-  transition: background 0.2s;
+  transition: color 0.2s;
   gap: 12px;
   white-space: nowrap;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: transparent;
+    color: #ffffff;
   }
 
   .item-img {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
+    opacity: 0.8;
+  }
+
+  &:hover .item-img {
+    opacity: 1;
   }
 
   p {
-    color: #FFF;
+    color: inherit;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     margin: 0;
     white-space: nowrap;
   }