调整产品列表

app/index/view/pc/public/header.html

@@ -102,7 +102,7 @@
             <div class="header-nav-actions">
                 <div class="header-search-wrapper">
                     <span class="header-nav-btn">
-                        <img src="__IMAGES__/s1.png" alt="" style="width: 17px;height: 17px;">
+                        <img src="__IMAGES__/s1.png" alt="" style="width: 20px;height: 20px;">
                     </span>
                     <div class="header-search-dropdown" id="searchDropdown">
                         <span class="header-search-dropdown-delete-icon">✕</span>
@@ -190,37 +190,37 @@
 <div id="mhk"></div>
 <script>
 
-    // 获取所有包含商品卡片的元素
+    // // 获取所有包含商品卡片的元素
-    const productCards = document.querySelectorAll('.header-buy-product-card');
+    // const productCards = document.querySelectorAll('.header-buy-product-card');
 
-    productCards.forEach(card => {
+    // productCards.forEach(card => {
-            // 获取卡片内的图片容器和两张图片
+    //         // 获取卡片内的图片容器和两张图片
-            const imgContainer = card.querySelector('.header-buy-product-img');
+    //         const imgContainer = card.querySelector('.header-buy-product-img');
-            const defaultImg = imgContainer?.querySelector('.header-default-img');
+    //         const defaultImg = imgContainer?.querySelector('.header-default-img');
-            const hoverImg = imgContainer?.querySelector('.header-hover-img');
+    //         const hoverImg = imgContainer?.querySelector('.header-hover-img');
 
-            // 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
+    //         // 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
-            const hasHoverImg = hoverImg !== null;
+    //         const hasHoverImg = hoverImg !== null;
 
-            // 如果没有悬浮图，不需要任何交互，直接返回
+    //         // 如果没有悬浮图，不需要任何交互，直接返回
-            if (!hasHoverImg) return;
+    //         if (!hasHoverImg) return;
 
-            // 初始状态确保普通图显示，悬浮图隐藏
+    //         // 初始状态确保普通图显示，悬浮图隐藏
-            defaultImg.style.opacity = '1';
+    //         defaultImg.style.opacity = '1';
-            hoverImg.style.opacity = '0';
+    //         hoverImg.style.opacity = '0';
 
-            // 鼠标移入事件：显示悬浮图，隐藏普通图
+    //         // 鼠标移入事件：显示悬浮图，隐藏普通图
-            card.addEventListener('mouseenter', () => {
+    //         card.addEventListener('mouseenter', () => {
-                defaultImg.style.opacity = '0';
+    //             defaultImg.style.opacity = '0';
-                hoverImg.style.opacity = '1';
+    //             hoverImg.style.opacity = '1';
-            });
+    //         });
 
-            // 鼠标移出事件：恢复普通图，隐藏悬浮图
+    //         // 鼠标移出事件：恢复普通图，隐藏悬浮图
-            card.addEventListener('mouseleave', () => {
+    //         card.addEventListener('mouseleave', () => {
-                defaultImg.style.opacity = '1';
+    //             defaultImg.style.opacity = '1';
-                hoverImg.style.opacity = '0';
+    //             hoverImg.style.opacity = '0';
-            });
+    //         });
-    });
+    // });
     //产品列表在hover复位tabs选择
     const productNavContainer = document.querySelector('.header-nav-item:first-child');
 

public/static/index/pc/css/header.css

@@ -323,37 +323,29 @@ a {
 
 /* 左侧6个分类区块 */
 .header-dropdown-category {
-    /* display: flex;
+    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    flex: 1; */
     flex: 1; 
-    margin-right: 24px;
+  
  
 }
 
 .header-category-box {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    margin-top:1.7em;
+    flex:1;
-}
+    max-width: 362px;
-.header-category-box:nth-child(1) {
+    margin-right:1.5em;
-    margin-top: 0;
+    gap: 1.7em 0;
+   
 }
+
 /* 单个分类区块 */
 .header-category-block {
     flex: 1;
-    box-sizing: border-box;
+    width: 22.625em;
-    max-width: 362px;
+   
 }
 
-/* .header-category-block:nth-child(5) {
-    margin-bottom: 0;
-}
-
-.header-category-block:nth-child(6) {
-    margin-bottom: 0;
-} */
 
 .header-category-title {
     font-size: 1em;
@@ -401,7 +393,7 @@ a {
     justify-content: space-between;
     flex: 1;
     min-width: 0;
-    gap: 1.5em 0;
+   
 }
 
 
@@ -437,11 +429,11 @@ a {
 
 .header-product-card:nth-child(3) {
     margin-right: 1.5em;
-    margin-top: 0;
+    margin-top: 1.5em;
 }
 
 .header-product-card:nth-child(4) {
-    margin-top: 0;
+    margin-top: 1.5em;
 }
 
 /*.header-product-img {*/