refactor: pc header数据改两列显示

app/index/controller/Common.php

@@ -120,7 +120,13 @@ abstract class Common extends BaseController
                 }
                 $children = $this->toTreeAndChunk($categorys, $item['id'], $lv);
                 if (!empty($children)) {
-                    $item['children'] = $item['level'] == 1 ? array_chunk($children, 2) : $children;
+                    if ($lv == 1) {
+                        $item['children'] = array_chunk($children, 2);
+                    } else if ($lv == 2) {
+                        $item['children'] = array_chunk($children, 3);
+                    } else {
+                        $item['children'] = $children;
+                    }
                 }
                 $ret[] = $item;
             }

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

@@ -77,7 +77,6 @@
                     </div>
                     {else /}
                     <div class="header-nav-title">{$nav.name}</div>
-                    <!-- style="display: block;" -->
                     <div class="header-dropdown">
                         <div class="header-dropdown-content1">
                             {volist name="nav.children" id="child"}
@@ -137,7 +136,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="header-lang-wrapper" > 
+                <div class="header-lang-wrapper" >
                     <span class="header-nav-btn">
                         <img src="__IMAGES__/l1.png" alt="" style="width: 20px;height:20px">
                     </span>
@@ -199,23 +198,23 @@
             const imgContainer = card.querySelector('.header-buy-product-img');
             const defaultImg = imgContainer?.querySelector('.header-default-img');
             const hoverImg = imgContainer?.querySelector('.header-hover-img');
-            
+
             // 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
             const hasHoverImg = hoverImg !== null;
-            
+
             // 如果没有悬浮图，不需要任何交互，直接返回
             if (!hasHoverImg) return;
-            
+
             // 初始状态确保普通图显示，悬浮图隐藏
             defaultImg.style.opacity = '1';
             hoverImg.style.opacity = '0';
-            
+
             // 鼠标移入事件：显示悬浮图，隐藏普通图
             card.addEventListener('mouseenter', () => {
                 defaultImg.style.opacity = '0';
                 hoverImg.style.opacity = '1';
             });
-            
+
             // 鼠标移出事件：恢复普通图，隐藏悬浮图
             card.addEventListener('mouseleave', () => {
                 defaultImg.style.opacity = '1';
@@ -231,12 +230,12 @@
             setTimeout(() => {
                 const tabs = document.querySelectorAll('.header-tab-item');
                 const contents = document.querySelectorAll('.header-tab-content');
-                
+
                 // 重置到第一个tab
                 if (tabs.length > 0 && tabs[0]) {
                     tabs.forEach(tab => tab.classList.remove('active'));
                     contents.forEach(content => content.classList.remove('active'));
-                    
+
                     tabs[0].classList.add('active');
                     const firstContentId = tabs[0].getAttribute('data-tab');
                     const firstContent = document.getElementById(firstContentId);
@@ -268,10 +267,6 @@
         });
     });
 
-
-
-
-
     let searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]');
 
     function renderHistory ()
@@ -357,7 +352,7 @@
         {
             e.stopPropagation();
             langDropdown.classList.remove('show');
-           
+
         });
     }
     //搜索关闭
@@ -367,7 +362,7 @@
 
             e.stopPropagation();
             searchDropdown.classList.remove('show');
-         
+
         });
     }
     // 鼠标移入导航项时，关闭购买下拉框
@@ -377,11 +372,11 @@
 
         item.addEventListener('mouseenter', () =>
         {
-           
+
             buyDropdown.classList.remove('show');
             langDropdown.classList.remove('show');
             searchDropdown.classList.remove('show');
-           
+
         });
     });
 
@@ -463,13 +458,10 @@
 
     renderHistory();
 
-
 // ========== 蒙版层功能（支持所有弹窗，包括导航悬停下拉） ==========
 const mhk = document.getElementById('mhk');
 const body = document.body;
 
-
-
 // 获取滚动条宽度（防止打开弹窗时页面抖动）
 function getScrollbarWidth() {
     const scrollDiv = document.createElement('div');
@@ -484,7 +476,7 @@ function getScrollbarWidth() {
     const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
     console.log(scrollbarWidth,'=scrollbarWidth=')
     document.body.removeChild(scrollDiv);
-    
+
     return scrollbarWidth;
 }
 
@@ -504,11 +496,11 @@ function closeOverlay() {
         const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show');
         const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show');
         const isLangOpen = langDropdown && langDropdown.classList.contains('show');
-        
+
         // 检查导航下拉菜单是否打开（通过检查是否有 active 或显示状态）
         const productDropdown = document.querySelector('.header-nav-item:first-child .header-dropdown');
         const isProductDropdownOpen = productDropdown && window.getComputedStyle(productDropdown).display !== 'none';
-        
+
         // 检查其他导航下拉菜单
         let isOtherNavOpen = false;
         const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
@@ -518,7 +510,7 @@ function closeOverlay() {
                 isOtherNavOpen = true;
             }
         });
-        
+
         // 只有当所有弹窗和导航下拉菜单都关闭时，才关闭蒙版层
         if (!isBuyOpen && !isSearchOpen && !isLangOpen && !isProductDropdownOpen && !isOtherNavOpen) {
             mhk.style.display = 'none';
@@ -531,7 +523,7 @@ function closeOverlay() {
 // 强制关闭所有弹窗和蒙版
 function closeAllDropdownsAndOverlay() {
     let anyOpen = false;
-    
+
     if (buyDropdown && buyDropdown.classList.contains('show')) {
         buyDropdown.classList.remove('show');
         anyOpen = true;
@@ -544,7 +536,7 @@ function closeAllDropdownsAndOverlay() {
         langDropdown.classList.remove('show');
         anyOpen = true;
     }
-    
+
     // 关闭产品列表导航的下拉菜单（通过移除hover触发的显示）
     const productNavItem = document.querySelector('.header-nav-item:first-child');
     if (productNavItem) {
@@ -554,7 +546,7 @@ function closeAllDropdownsAndOverlay() {
             anyOpen = true;
         }
     }
-    
+
     // 关闭其他导航的下拉菜单
     const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
     otherNavItems.forEach(item => {
@@ -564,7 +556,7 @@ function closeAllDropdownsAndOverlay() {
             anyOpen = true;
         }
     });
-    
+
     if (anyOpen) {
         closeOverlay();
     } else {
@@ -578,7 +570,7 @@ function closeAllDropdownsAndOverlay() {
 const productNavItem = document.querySelector('.header-nav-item:first-child');
 if (productNavItem) {
     const productDropdown = productNavItem.querySelector('.header-dropdown');
-    
+
     // 监听鼠标进入产品列表导航
     productNavItem.addEventListener('mouseenter', () => {
         // 当导航下拉菜单显示时，关闭其他点击弹窗
@@ -594,7 +586,7 @@ if (productNavItem) {
         // 打开蒙版层
         openOverlay();
     });
-    
+
     // 监听鼠标离开产品列表导航（延迟关闭，给用户移动到下拉菜单的时间）
     productNavItem.addEventListener('mouseleave', () => {
         setTimeout(() => {
@@ -610,7 +602,7 @@ if (productNavItem) {
             }
         }, 100);
     });
-    
+
     // 监听下拉菜单的鼠标离开事件
     if (productDropdown) {
         productDropdown.addEventListener('mouseleave', () => {
@@ -630,7 +622,7 @@ otherNavItems.forEach(item => {
     const hasDropdown = item.querySelector('.header-dropdown');
     if (hasDropdown) {
         const dropdown = hasDropdown;
-        
+
         // 监听鼠标进入导航项
         item.addEventListener('mouseenter', () => {
             // 关闭其他点击弹窗
@@ -646,7 +638,7 @@ otherNavItems.forEach(item => {
             // 打开蒙版层
             openOverlay();
         });
-        
+
         // 监听鼠标离开导航项
         item.addEventListener('mouseleave', () => {
             setTimeout(() => {
@@ -661,7 +653,7 @@ otherNavItems.forEach(item => {
                 }
             }, 100);
         });
-        
+
         // 监听下拉菜单的鼠标离开
         if (dropdown) {
             dropdown.addEventListener('mouseleave', () => {
@@ -683,11 +675,11 @@ const buyWrapperNew = document.querySelector('.header-buy-wrapper');
 if (buyWrapperNew && buyDropdown) {
     const newBuyWrapper = buyWrapperNew.cloneNode(true);
     buyWrapperNew.parentNode.replaceChild(newBuyWrapper, buyWrapperNew);
-    
+
     newBuyWrapper.addEventListener('click', (e) => {
         e.stopPropagation();
         const isOpen = buyDropdown.classList.contains('show');
-        
+
         if (isOpen) {
             buyDropdown.classList.remove('show');
             closeOverlay();
@@ -701,7 +693,7 @@ if (buyWrapperNew && buyDropdown) {
             }
             // 关闭导航下拉菜单
             closeAllNavDropdowns();
-            
+
             buyDropdown.classList.add('show');
             openOverlay();
         }
@@ -713,11 +705,11 @@ const searchBtnNew = document.querySelector('.header-search-wrapper .header-nav-
 if (searchBtnNew && searchDropdown) {
     const newSearchBtn = searchBtnNew.cloneNode(true);
     searchBtnNew.parentNode.replaceChild(newSearchBtn, searchBtnNew);
-    
+
     newSearchBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         const isOpen = searchDropdown.classList.contains('show');
-        
+
         if (isOpen) {
             searchDropdown.classList.remove('show');
             closeOverlay();
@@ -731,7 +723,7 @@ if (searchBtnNew && searchDropdown) {
             }
             // 关闭导航下拉菜单
             closeAllNavDropdowns();
-            
+
             searchDropdown.classList.add('show');
             openOverlay();
             if (typeof renderHistory === 'function') {
@@ -746,11 +738,11 @@ const langBtnNew = document.querySelector('.header-lang-wrapper .header-nav-btn'
 if (langBtnNew && langDropdown) {
     const newLangBtn = langBtnNew.cloneNode(true);
     langBtnNew.parentNode.replaceChild(newLangBtn, langBtnNew);
-    
+
     newLangBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         const isOpen = langDropdown.classList.contains('show');
-        
+
         if (isOpen) {
             langDropdown.classList.remove('show');
             closeOverlay();
@@ -764,7 +756,7 @@ if (langBtnNew && langDropdown) {
             }
             // 关闭导航下拉菜单
             closeAllNavDropdowns();
-            
+
             langDropdown.classList.add('show');
             openOverlay();
         }
@@ -781,7 +773,7 @@ function closeAllNavDropdowns() {
             productDropdown.style.display = '';
         }
     }
-    
+
     // 关闭其他导航下拉菜单
     const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
     otherNavItems.forEach(item => {
@@ -799,7 +791,7 @@ const langCloseBtnNew = document.querySelector('.header-lang-dropdown-delete-ico
 if (langCloseBtnNew && langDropdown) {
     const newLangCloseBtn = langCloseBtnNew.cloneNode(true);
     langCloseBtnNew.parentNode.replaceChild(newLangCloseBtn, langCloseBtnNew);
-    
+
     newLangCloseBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         langDropdown.classList.remove('show');
@@ -812,7 +804,7 @@ const searchCloseBtnNew = document.querySelector('.header-search-dropdown-delete
 if (searchCloseBtnNew && searchDropdown) {
     const newSearchCloseBtn = searchCloseBtnNew.cloneNode(true);
     searchCloseBtnNew.parentNode.replaceChild(newSearchCloseBtn, searchCloseBtnNew);
-    
+
     newSearchCloseBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         searchDropdown.classList.remove('show');
@@ -829,7 +821,7 @@ document.addEventListener('click', (e) => {
             closeOverlay();
         }
     }
-    
+
     // 检查是否点击在搜索区域外
     if (!e.target.closest('.header-search-wrapper') && !e.target.closest('#searchDropdown')) {
         if (searchDropdown && searchDropdown.classList.contains('show')) {
@@ -837,7 +829,7 @@ document.addEventListener('click', (e) => {
             closeOverlay();
         }
     }
-    
+
     // 检查是否点击在语言区域外
     if (!e.target.closest('.header-lang-wrapper') && !e.target.closest('#langDropdown')) {
         if (langDropdown && langDropdown.classList.contains('show')) {
@@ -845,7 +837,7 @@ document.addEventListener('click', (e) => {
             closeOverlay();
         }
     }
-    
+
     // 检查是否点击在导航区域外（如果点击在导航外部，关闭导航下拉菜单）
     if (!e.target.closest('.header-nav-item')) {
         closeAllNavDropdowns();
@@ -865,7 +857,7 @@ if (mhk) {
 // ========== 监听弹窗状态变化 ==========
 function setupDropdownObserver(dropdown, name) {
     if (!dropdown) return;
-    
+
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (mutation.attributeName === 'class') {