样式调整

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

@@ -13,7 +13,7 @@
                 {if condition="!empty($header_categorys)"}
                 <div class="header-nav-item">
                     <div class="header-nav-title">{:lang_i18n('产品列表')}</div>
-                    <div class="header-dropdown" >
+                    <div class="header-dropdown" style="display: block;">
                         <div class="header-dropdown-tabs">
                             {volist name="header_categorys" id="vo" key="idx"}
                             <div class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</div>
@@ -77,6 +77,7 @@
                     </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"}
@@ -187,6 +188,7 @@
     </div>
 </div>
 <div style="width: 100vw;height: 64px;"></div>
+<div id="mhk"></div>
 <script>
 
     // 获取所有包含商品卡片的元素
@@ -251,7 +253,7 @@
 
     tabItems.forEach(tab =>
     {
-        tab.addEventListener('click', () =>
+        tab.addEventListener('mouseenter', () =>
         {
             tabItems.forEach(item => item.classList.remove('active'));
             tab.classList.add('active');
@@ -355,6 +357,7 @@
         {
             e.stopPropagation();
             langDropdown.classList.remove('show');
+           
         });
     }
     //搜索关闭
@@ -364,6 +367,7 @@
 
             e.stopPropagation();
             searchDropdown.classList.remove('show');
+         
         });
     }
     // 鼠标移入导航项时，关闭购买下拉框
@@ -377,6 +381,7 @@
             buyDropdown.classList.remove('show');
             langDropdown.classList.remove('show');
             searchDropdown.classList.remove('show');
+           
         });
     });
 
@@ -457,4 +462,434 @@
     if (buyDropdown) buyDropdown.addEventListener('click', (e) => e.stopPropagation());
 
     renderHistory();
+
+
+// ========== 蒙版层功能（支持所有弹窗，包括导航悬停下拉） ==========
+const mhk = document.getElementById('mhk');
+const body = document.body;
+
+
+
+// 获取滚动条宽度（防止打开弹窗时页面抖动）
+function getScrollbarWidth() {
+    const scrollDiv = document.createElement('div');
+    scrollDiv.style.cssText = `
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        position: absolute;
+        top: -9999px;
+    `;
+    document.body.appendChild(scrollDiv);
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    console.log(scrollbarWidth,'=scrollbarWidth=')
+    document.body.removeChild(scrollDiv);
+    
+    return scrollbarWidth;
+}
+
+// 打开蒙版层的函数
+function openOverlay() {
+    if (mhk && mhk.style.display !== 'block') {
+        mhk.style.display = 'block';
+        body.style.overflow = 'hidden';
+        body.style.paddingRight = getScrollbarWidth() + 'px';
+    }
+}
+
+// 关闭蒙版层的函数
+function closeOverlay() {
+    if (mhk && mhk.style.display === 'block') {
+        // 检查是否还有其他弹窗打开（包括导航下拉菜单）
+        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)');
+        otherNavItems.forEach(item => {
+            const dropdown = item.querySelector('.header-dropdown');
+            if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
+                isOtherNavOpen = true;
+            }
+        });
+        
+        // 只有当所有弹窗和导航下拉菜单都关闭时，才关闭蒙版层
+        if (!isBuyOpen && !isSearchOpen && !isLangOpen && !isProductDropdownOpen && !isOtherNavOpen) {
+            mhk.style.display = 'none';
+            body.style.overflow = '';
+            body.style.paddingRight = '';
+        }
+    }
+}
+
+// 强制关闭所有弹窗和蒙版
+function closeAllDropdownsAndOverlay() {
+    let anyOpen = false;
+    
+    if (buyDropdown && buyDropdown.classList.contains('show')) {
+        buyDropdown.classList.remove('show');
+        anyOpen = true;
+    }
+    if (searchDropdown && searchDropdown.classList.contains('show')) {
+        searchDropdown.classList.remove('show');
+        anyOpen = true;
+    }
+    if (langDropdown && langDropdown.classList.contains('show')) {
+        langDropdown.classList.remove('show');
+        anyOpen = true;
+    }
+    
+    // 关闭产品列表导航的下拉菜单（通过移除hover触发的显示）
+    const productNavItem = document.querySelector('.header-nav-item:first-child');
+    if (productNavItem) {
+        const productDropdown = productNavItem.querySelector('.header-dropdown');
+        if (productDropdown && window.getComputedStyle(productDropdown).display !== 'none') {
+            productDropdown.style.display = '';
+            anyOpen = true;
+        }
+    }
+    
+    // 关闭其他导航的下拉菜单
+    const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
+    otherNavItems.forEach(item => {
+        const dropdown = item.querySelector('.header-dropdown');
+        if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
+            dropdown.style.display = '';
+            anyOpen = true;
+        }
+    });
+    
+    if (anyOpen) {
+        closeOverlay();
+    } else {
+        closeOverlay();
+    }
+}
+
+// ========== 监听导航下拉菜单的显示/隐藏 ==========
+
+// 1. 产品列表导航（第一个导航项）
+const productNavItem = document.querySelector('.header-nav-item:first-child');
+if (productNavItem) {
+    const productDropdown = productNavItem.querySelector('.header-dropdown');
+    
+    // 监听鼠标进入产品列表导航
+    productNavItem.addEventListener('mouseenter', () => {
+        // 当导航下拉菜单显示时，关闭其他点击弹窗
+        if (searchDropdown && searchDropdown.classList.contains('show')) {
+            searchDropdown.classList.remove('show');
+        }
+        if (langDropdown && langDropdown.classList.contains('show')) {
+            langDropdown.classList.remove('show');
+        }
+        if (buyDropdown && buyDropdown.classList.contains('show')) {
+            buyDropdown.classList.remove('show');
+        }
+        // 打开蒙版层
+        openOverlay();
+    });
+    
+    // 监听鼠标离开产品列表导航（延迟关闭，给用户移动到下拉菜单的时间）
+    productNavItem.addEventListener('mouseleave', () => {
+        setTimeout(() => {
+            // 检查鼠标是否在下拉菜单上
+            if (productDropdown) {
+                const isHoveringDropdown = productDropdown.matches(':hover');
+                const isHoveringNav = productNavItem.matches(':hover');
+                if (!isHoveringDropdown && !isHoveringNav) {
+                    closeOverlay();
+                }
+            } else {
+                closeOverlay();
+            }
+        }, 100);
+    });
+    
+    // 监听下拉菜单的鼠标离开事件
+    if (productDropdown) {
+        productDropdown.addEventListener('mouseleave', () => {
+            setTimeout(() => {
+                const isHoveringNav = productNavItem.matches(':hover');
+                if (!isHoveringNav) {
+                    closeOverlay();
+                }
+            }, 100);
+        });
+    }
+}
+
+// 2. 其他导航项（有下拉菜单的）
+const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
+otherNavItems.forEach(item => {
+    const hasDropdown = item.querySelector('.header-dropdown');
+    if (hasDropdown) {
+        const dropdown = hasDropdown;
+        
+        // 监听鼠标进入导航项
+        item.addEventListener('mouseenter', () => {
+            // 关闭其他点击弹窗
+            if (searchDropdown && searchDropdown.classList.contains('show')) {
+                searchDropdown.classList.remove('show');
+            }
+            if (langDropdown && langDropdown.classList.contains('show')) {
+                langDropdown.classList.remove('show');
+            }
+            if (buyDropdown && buyDropdown.classList.contains('show')) {
+                buyDropdown.classList.remove('show');
+            }
+            // 打开蒙版层
+            openOverlay();
+        });
+        
+        // 监听鼠标离开导航项
+        item.addEventListener('mouseleave', () => {
+            setTimeout(() => {
+                if (dropdown) {
+                    const isHoveringDropdown = dropdown.matches(':hover');
+                    const isHoveringNav = item.matches(':hover');
+                    if (!isHoveringDropdown && !isHoveringNav) {
+                        closeOverlay();
+                    }
+                } else {
+                    closeOverlay();
+                }
+            }, 100);
+        });
+        
+        // 监听下拉菜单的鼠标离开
+        if (dropdown) {
+            dropdown.addEventListener('mouseleave', () => {
+                setTimeout(() => {
+                    const isHoveringNav = item.matches(':hover');
+                    if (!isHoveringNav) {
+                        closeOverlay();
+                    }
+                }, 100);
+            });
+        }
+    }
+});
+
+// ========== 重新绑定所有点击弹窗事件 ==========
+
+// 1. 购买弹窗
+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();
+        } else {
+            // 关闭其他弹窗和导航下拉菜单
+            if (searchDropdown && searchDropdown.classList.contains('show')) {
+                searchDropdown.classList.remove('show');
+            }
+            if (langDropdown && langDropdown.classList.contains('show')) {
+                langDropdown.classList.remove('show');
+            }
+            // 关闭导航下拉菜单
+            closeAllNavDropdowns();
+            
+            buyDropdown.classList.add('show');
+            openOverlay();
+        }
+    });
+}
+
+// 2. 搜索弹窗
+const searchBtnNew = document.querySelector('.header-search-wrapper .header-nav-btn');
+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();
+        } else {
+            // 关闭其他弹窗和导航下拉菜单
+            if (buyDropdown && buyDropdown.classList.contains('show')) {
+                buyDropdown.classList.remove('show');
+            }
+            if (langDropdown && langDropdown.classList.contains('show')) {
+                langDropdown.classList.remove('show');
+            }
+            // 关闭导航下拉菜单
+            closeAllNavDropdowns();
+            
+            searchDropdown.classList.add('show');
+            openOverlay();
+            if (typeof renderHistory === 'function') {
+                renderHistory();
+            }
+        }
+    });
+}
+
+// 3. 语言弹窗
+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();
+        } else {
+            // 关闭其他弹窗和导航下拉菜单
+            if (buyDropdown && buyDropdown.classList.contains('show')) {
+                buyDropdown.classList.remove('show');
+            }
+            if (searchDropdown && searchDropdown.classList.contains('show')) {
+                searchDropdown.classList.remove('show');
+            }
+            // 关闭导航下拉菜单
+            closeAllNavDropdowns();
+            
+            langDropdown.classList.add('show');
+            openOverlay();
+        }
+    });
+}
+
+// 辅助函数：关闭所有导航下拉菜单
+function closeAllNavDropdowns() {
+    // 关闭产品列表导航下拉菜单
+    const productNavItem = document.querySelector('.header-nav-item:first-child');
+    if (productNavItem) {
+        const productDropdown = productNavItem.querySelector('.header-dropdown');
+        if (productDropdown) {
+            productDropdown.style.display = '';
+        }
+    }
+    
+    // 关闭其他导航下拉菜单
+    const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
+    otherNavItems.forEach(item => {
+        const dropdown = item.querySelector('.header-dropdown');
+        if (dropdown) {
+            dropdown.style.display = '';
+        }
+    });
+}
+
+// ========== 关闭按钮事件重新绑定 ==========
+
+// 语言关闭按钮
+const langCloseBtnNew = document.querySelector('.header-lang-dropdown-delete-icon');
+if (langCloseBtnNew && langDropdown) {
+    const newLangCloseBtn = langCloseBtnNew.cloneNode(true);
+    langCloseBtnNew.parentNode.replaceChild(newLangCloseBtn, langCloseBtnNew);
+    
+    newLangCloseBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        langDropdown.classList.remove('show');
+        closeOverlay();
+    });
+}
+
+// 搜索关闭按钮
+const searchCloseBtnNew = document.querySelector('.header-search-dropdown-delete-icon');
+if (searchCloseBtnNew && searchDropdown) {
+    const newSearchCloseBtn = searchCloseBtnNew.cloneNode(true);
+    searchCloseBtnNew.parentNode.replaceChild(newSearchCloseBtn, searchCloseBtnNew);
+    
+    newSearchCloseBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        searchDropdown.classList.remove('show');
+        closeOverlay();
+    });
+}
+
+// ========== 全局点击事件 ==========
+document.addEventListener('click', (e) => {
+    // 检查是否点击在购买区域外
+    if (!e.target.closest('.header-buy-wrapper') && !e.target.closest('#buyDropdown')) {
+        if (buyDropdown && buyDropdown.classList.contains('show')) {
+            buyDropdown.classList.remove('show');
+            closeOverlay();
+        }
+    }
+    
+    // 检查是否点击在搜索区域外
+    if (!e.target.closest('.header-search-wrapper') && !e.target.closest('#searchDropdown')) {
+        if (searchDropdown && searchDropdown.classList.contains('show')) {
+            searchDropdown.classList.remove('show');
+            closeOverlay();
+        }
+    }
+    
+    // 检查是否点击在语言区域外
+    if (!e.target.closest('.header-lang-wrapper') && !e.target.closest('#langDropdown')) {
+        if (langDropdown && langDropdown.classList.contains('show')) {
+            langDropdown.classList.remove('show');
+            closeOverlay();
+        }
+    }
+    
+    // 检查是否点击在导航区域外（如果点击在导航外部，关闭导航下拉菜单）
+    if (!e.target.closest('.header-nav-item')) {
+        closeAllNavDropdowns();
+        closeOverlay();
+    }
+});
+
+// ========== 蒙版层点击事件 ==========
+if (mhk) {
+    mhk.addEventListener('click', () => {
+        closeAllDropdownsAndOverlay();
+        closeAllNavDropdowns();
+        closeOverlay();
+    });
+}
+
+// ========== 监听弹窗状态变化 ==========
+function setupDropdownObserver(dropdown, name) {
+    if (!dropdown) return;
+    
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.attributeName === 'class') {
+                if (!dropdown.classList.contains('show')) {
+                    closeOverlay();
+                }
+            }
+        });
+    });
+    observer.observe(dropdown, { attributes: true });
+}
+
+setupDropdownObserver(buyDropdown, 'buy');
+setupDropdownObserver(searchDropdown, 'search');
+setupDropdownObserver(langDropdown, 'lang');
+
+// ========== 页面卸载时恢复滚动 ==========
+window.addEventListener('beforeunload', () => {
+    if (body) {
+        body.style.overflow = '';
+        body.style.paddingRight = '';
+    }
+});
+
+// 确保蒙版层初始状态正确
+closeOverlay();
 </script>

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

@@ -13,7 +13,7 @@
                 {if condition="!empty($header_categorys)"}
                 <div class="header-nav-item">
                     <div class="header-nav-title">{:lang_i18n('产品列表')}</div>
-                    <div class="header-dropdown" style="display: block;">
+                    <div class="header-dropdown" >
                         <div class="header-dropdown-tabs">
                             {volist name="header_categorys" id="vo" key="idx"}
                             <div class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</div>
@@ -77,7 +77,8 @@
                     </div>
                     {else /}
                     <div class="header-nav-title">{$nav.name}</div>
-                    <div class="header-dropdown">
+                    <!-- style="display: block;" -->
+                    <div class="header-dropdown" >
                         <div class="header-dropdown-content1">
                             {volist name="nav.children" id="child"}
                             <div class="header-product-card-1">
@@ -136,7 +137,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>
@@ -174,7 +175,9 @@
                 <a class="header-buy-product-card" target="_self" href="{$ma.link}">
                     <div class="header-buy-product-img">
                         <img class="header-default-img" src="{$ma.image}" alt="{$ma.name}">
+                        {if condition="!empty($ma.hover_image)"}
                         <img class="header-hover-img" src="{$ma.hover_image}" alt="{$ma.name}">
+                        {/if}
                     </div>
                     <div class="header-buy-product-title">{$ma.name}</div>
                 </a>
@@ -185,32 +188,63 @@
     </div>
 </div>
 <div style="width: 100vw;height: 64px;"></div>
+<div id="mhk"></div>
 <script>
 
+    // 获取所有包含商品卡片的元素
+    const productCards = document.querySelectorAll('.header-buy-product-card');
 
+    productCards.forEach(card => {
+            // 获取卡片内的图片容器和两张图片
+            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';
+                hoverImg.style.opacity = '0';
+            });
+    });
     //产品列表在hover复位tabs选择
-    // const productNavContainer = document.querySelector('.header-nav-item:first-child');
+    const productNavContainer = document.querySelector('.header-nav-item:first-child');
 
-    // if (productNavContainer) {
-    //     productNavContainer.addEventListener('mouseleave', () => {
-    //         // 延迟执行，确保下拉菜单已经隐藏
-    //         setTimeout(() => {
-    //             const tabs = document.querySelectorAll('.header-tab-item');
-    //             const contents = document.querySelectorAll('.header-tab-content');
+    if (productNavContainer) {
+        productNavContainer.addEventListener('mouseleave', () => {
+            // 延迟执行，确保下拉菜单已经隐藏
+            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'));
+                // 重置到第一个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);
-    //                 if (firstContent) firstContent.classList.add('active');
-    //             }
-    //         }, 350);
-    //     });
-    // }
+                    tabs[0].classList.add('active');
+                    const firstContentId = tabs[0].getAttribute('data-tab');
+                    const firstContent = document.getElementById(firstContentId);
+                    if (firstContent) firstContent.classList.add('active');
+                }
+            }, 350);
+        });
+    }
 
 
 
@@ -234,6 +268,10 @@
         });
     });
 
+
+
+
+
     let searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]');
 
     function renderHistory ()
@@ -309,6 +347,7 @@
     const searchSubmit = document.querySelector('.header-search-submit');
     const langDropdown = document.getElementById('langDropdown');
     const buyDropdown = document.getElementById('buyDropdown');
+
     const langCloseBtn = document.querySelector('.header-lang-dropdown-delete-icon');
     const searchCloseBtn = document.querySelector('.header-search-dropdown-delete-icon');
 
@@ -318,6 +357,7 @@
         {
             e.stopPropagation();
             langDropdown.classList.remove('show');
+           
         });
     }
     //搜索关闭
@@ -327,17 +367,21 @@
 
             e.stopPropagation();
             searchDropdown.classList.remove('show');
+         
         });
     }
     // 鼠标移入导航项时，关闭购买下拉框
-    const navItems = document.querySelectorAll('.nav-item');
+    const navItems = document.querySelectorAll('.header-nav-item');
     navItems.forEach(item =>
     {
+
         item.addEventListener('mouseenter', () =>
         {
-            if (buyDropdown) {
+           
             buyDropdown.classList.remove('show');
-            }
+            langDropdown.classList.remove('show');
+            searchDropdown.classList.remove('show');
+           
         });
     });
 
@@ -395,8 +439,8 @@
     if (buyWrapper && buyDropdown) {
         buyWrapper.addEventListener('click', () =>
         {
-            console.log('123232323')
-            buyDropdown.classList.add('show');
+            // buyDropdown.classList.add('show');
+            buyDropdown.classList.toggle('show');
         });
     }
 
@@ -418,4 +462,432 @@
     if (buyDropdown) buyDropdown.addEventListener('click', (e) => e.stopPropagation());
 
     renderHistory();
+
+
+// ========== 蒙版层功能（支持所有弹窗，包括导航悬停下拉） ==========
+const mhk = document.getElementById('mhk');
+const body = document.body;
+
+
+
+// 获取滚动条宽度（防止打开弹窗时页面抖动）
+function getScrollbarWidth() {
+    const scrollDiv = document.createElement('div');
+    scrollDiv.style.cssText = `
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        position: absolute;
+        top: -9999px;
+    `;
+    document.body.appendChild(scrollDiv);
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    document.body.removeChild(scrollDiv);
+    return scrollbarWidth;
+}
+
+// 打开蒙版层的函数
+function openOverlay() {
+    if (mhk && mhk.style.display !== 'block') {
+        mhk.style.display = 'block';
+        body.style.overflow = 'hidden';
+        body.style.paddingRight = getScrollbarWidth() + 'px';
+    }
+}
+
+// 关闭蒙版层的函数
+function closeOverlay() {
+    if (mhk && mhk.style.display === 'block') {
+        // 检查是否还有其他弹窗打开（包括导航下拉菜单）
+        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)');
+        otherNavItems.forEach(item => {
+            const dropdown = item.querySelector('.header-dropdown');
+            if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
+                isOtherNavOpen = true;
+            }
+        });
+        
+        // 只有当所有弹窗和导航下拉菜单都关闭时，才关闭蒙版层
+        if (!isBuyOpen && !isSearchOpen && !isLangOpen && !isProductDropdownOpen && !isOtherNavOpen) {
+            mhk.style.display = 'none';
+            body.style.overflow = '';
+            body.style.paddingRight = '';
+        }
+    }
+}
+
+// 强制关闭所有弹窗和蒙版
+function closeAllDropdownsAndOverlay() {
+    let anyOpen = false;
+    
+    if (buyDropdown && buyDropdown.classList.contains('show')) {
+        buyDropdown.classList.remove('show');
+        anyOpen = true;
+    }
+    if (searchDropdown && searchDropdown.classList.contains('show')) {
+        searchDropdown.classList.remove('show');
+        anyOpen = true;
+    }
+    if (langDropdown && langDropdown.classList.contains('show')) {
+        langDropdown.classList.remove('show');
+        anyOpen = true;
+    }
+    
+    // 关闭产品列表导航的下拉菜单（通过移除hover触发的显示）
+    const productNavItem = document.querySelector('.header-nav-item:first-child');
+    if (productNavItem) {
+        const productDropdown = productNavItem.querySelector('.header-dropdown');
+        if (productDropdown && window.getComputedStyle(productDropdown).display !== 'none') {
+            productDropdown.style.display = '';
+            anyOpen = true;
+        }
+    }
+    
+    // 关闭其他导航的下拉菜单
+    const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
+    otherNavItems.forEach(item => {
+        const dropdown = item.querySelector('.header-dropdown');
+        if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
+            dropdown.style.display = '';
+            anyOpen = true;
+        }
+    });
+    
+    if (anyOpen) {
+        closeOverlay();
+    } else {
+        closeOverlay();
+    }
+}
+
+// ========== 监听导航下拉菜单的显示/隐藏 ==========
+
+// 1. 产品列表导航（第一个导航项）
+const productNavItem = document.querySelector('.header-nav-item:first-child');
+if (productNavItem) {
+    const productDropdown = productNavItem.querySelector('.header-dropdown');
+    
+    // 监听鼠标进入产品列表导航
+    productNavItem.addEventListener('mouseenter', () => {
+        // 当导航下拉菜单显示时，关闭其他点击弹窗
+        if (searchDropdown && searchDropdown.classList.contains('show')) {
+            searchDropdown.classList.remove('show');
+        }
+        if (langDropdown && langDropdown.classList.contains('show')) {
+            langDropdown.classList.remove('show');
+        }
+        if (buyDropdown && buyDropdown.classList.contains('show')) {
+            buyDropdown.classList.remove('show');
+        }
+        // 打开蒙版层
+        openOverlay();
+    });
+    
+    // 监听鼠标离开产品列表导航（延迟关闭，给用户移动到下拉菜单的时间）
+    productNavItem.addEventListener('mouseleave', () => {
+        setTimeout(() => {
+            // 检查鼠标是否在下拉菜单上
+            if (productDropdown) {
+                const isHoveringDropdown = productDropdown.matches(':hover');
+                const isHoveringNav = productNavItem.matches(':hover');
+                if (!isHoveringDropdown && !isHoveringNav) {
+                    closeOverlay();
+                }
+            } else {
+                closeOverlay();
+            }
+        }, 100);
+    });
+    
+    // 监听下拉菜单的鼠标离开事件
+    if (productDropdown) {
+        productDropdown.addEventListener('mouseleave', () => {
+            setTimeout(() => {
+                const isHoveringNav = productNavItem.matches(':hover');
+                if (!isHoveringNav) {
+                    closeOverlay();
+                }
+            }, 100);
+        });
+    }
+}
+
+// 2. 其他导航项（有下拉菜单的）
+const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
+otherNavItems.forEach(item => {
+    const hasDropdown = item.querySelector('.header-dropdown');
+    if (hasDropdown) {
+        const dropdown = hasDropdown;
+        
+        // 监听鼠标进入导航项
+        item.addEventListener('mouseenter', () => {
+            // 关闭其他点击弹窗
+            if (searchDropdown && searchDropdown.classList.contains('show')) {
+                searchDropdown.classList.remove('show');
+            }
+            if (langDropdown && langDropdown.classList.contains('show')) {
+                langDropdown.classList.remove('show');
+            }
+            if (buyDropdown && buyDropdown.classList.contains('show')) {
+                buyDropdown.classList.remove('show');
+            }
+            // 打开蒙版层
+            openOverlay();
+        });
+        
+        // 监听鼠标离开导航项
+        item.addEventListener('mouseleave', () => {
+            setTimeout(() => {
+                if (dropdown) {
+                    const isHoveringDropdown = dropdown.matches(':hover');
+                    const isHoveringNav = item.matches(':hover');
+                    if (!isHoveringDropdown && !isHoveringNav) {
+                        closeOverlay();
+                    }
+                } else {
+                    closeOverlay();
+                }
+            }, 100);
+        });
+        
+        // 监听下拉菜单的鼠标离开
+        if (dropdown) {
+            dropdown.addEventListener('mouseleave', () => {
+                setTimeout(() => {
+                    const isHoveringNav = item.matches(':hover');
+                    if (!isHoveringNav) {
+                        closeOverlay();
+                    }
+                }, 100);
+            });
+        }
+    }
+});
+
+// ========== 重新绑定所有点击弹窗事件 ==========
+
+// 1. 购买弹窗
+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();
+        } else {
+            // 关闭其他弹窗和导航下拉菜单
+            if (searchDropdown && searchDropdown.classList.contains('show')) {
+                searchDropdown.classList.remove('show');
+            }
+            if (langDropdown && langDropdown.classList.contains('show')) {
+                langDropdown.classList.remove('show');
+            }
+            // 关闭导航下拉菜单
+            closeAllNavDropdowns();
+            
+            buyDropdown.classList.add('show');
+            openOverlay();
+        }
+    });
+}
+
+// 2. 搜索弹窗
+const searchBtnNew = document.querySelector('.header-search-wrapper .header-nav-btn');
+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();
+        } else {
+            // 关闭其他弹窗和导航下拉菜单
+            if (buyDropdown && buyDropdown.classList.contains('show')) {
+                buyDropdown.classList.remove('show');
+            }
+            if (langDropdown && langDropdown.classList.contains('show')) {
+                langDropdown.classList.remove('show');
+            }
+            // 关闭导航下拉菜单
+            closeAllNavDropdowns();
+            
+            searchDropdown.classList.add('show');
+            openOverlay();
+            if (typeof renderHistory === 'function') {
+                renderHistory();
+            }
+        }
+    });
+}
+
+// 3. 语言弹窗
+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();
+        } else {
+            // 关闭其他弹窗和导航下拉菜单
+            if (buyDropdown && buyDropdown.classList.contains('show')) {
+                buyDropdown.classList.remove('show');
+            }
+            if (searchDropdown && searchDropdown.classList.contains('show')) {
+                searchDropdown.classList.remove('show');
+            }
+            // 关闭导航下拉菜单
+            closeAllNavDropdowns();
+            
+            langDropdown.classList.add('show');
+            openOverlay();
+        }
+    });
+}
+
+// 辅助函数：关闭所有导航下拉菜单
+function closeAllNavDropdowns() {
+    // 关闭产品列表导航下拉菜单
+    const productNavItem = document.querySelector('.header-nav-item:first-child');
+    if (productNavItem) {
+        const productDropdown = productNavItem.querySelector('.header-dropdown');
+        if (productDropdown) {
+            productDropdown.style.display = '';
+        }
+    }
+    
+    // 关闭其他导航下拉菜单
+    const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
+    otherNavItems.forEach(item => {
+        const dropdown = item.querySelector('.header-dropdown');
+        if (dropdown) {
+            dropdown.style.display = '';
+        }
+    });
+}
+
+// ========== 关闭按钮事件重新绑定 ==========
+
+// 语言关闭按钮
+const langCloseBtnNew = document.querySelector('.header-lang-dropdown-delete-icon');
+if (langCloseBtnNew && langDropdown) {
+    const newLangCloseBtn = langCloseBtnNew.cloneNode(true);
+    langCloseBtnNew.parentNode.replaceChild(newLangCloseBtn, langCloseBtnNew);
+    
+    newLangCloseBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        langDropdown.classList.remove('show');
+        closeOverlay();
+    });
+}
+
+// 搜索关闭按钮
+const searchCloseBtnNew = document.querySelector('.header-search-dropdown-delete-icon');
+if (searchCloseBtnNew && searchDropdown) {
+    const newSearchCloseBtn = searchCloseBtnNew.cloneNode(true);
+    searchCloseBtnNew.parentNode.replaceChild(newSearchCloseBtn, searchCloseBtnNew);
+    
+    newSearchCloseBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        searchDropdown.classList.remove('show');
+        closeOverlay();
+    });
+}
+
+// ========== 全局点击事件 ==========
+document.addEventListener('click', (e) => {
+    // 检查是否点击在购买区域外
+    if (!e.target.closest('.header-buy-wrapper') && !e.target.closest('#buyDropdown')) {
+        if (buyDropdown && buyDropdown.classList.contains('show')) {
+            buyDropdown.classList.remove('show');
+            closeOverlay();
+        }
+    }
+    
+    // 检查是否点击在搜索区域外
+    if (!e.target.closest('.header-search-wrapper') && !e.target.closest('#searchDropdown')) {
+        if (searchDropdown && searchDropdown.classList.contains('show')) {
+            searchDropdown.classList.remove('show');
+            closeOverlay();
+        }
+    }
+    
+    // 检查是否点击在语言区域外
+    if (!e.target.closest('.header-lang-wrapper') && !e.target.closest('#langDropdown')) {
+        if (langDropdown && langDropdown.classList.contains('show')) {
+            langDropdown.classList.remove('show');
+            closeOverlay();
+        }
+    }
+    
+    // 检查是否点击在导航区域外（如果点击在导航外部，关闭导航下拉菜单）
+    if (!e.target.closest('.header-nav-item')) {
+        closeAllNavDropdowns();
+        closeOverlay();
+    }
+});
+
+// ========== 蒙版层点击事件 ==========
+if (mhk) {
+    mhk.addEventListener('click', () => {
+        closeAllDropdownsAndOverlay();
+        closeAllNavDropdowns();
+        closeOverlay();
+    });
+}
+
+// ========== 监听弹窗状态变化 ==========
+function setupDropdownObserver(dropdown, name) {
+    if (!dropdown) return;
+    
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.attributeName === 'class') {
+                if (!dropdown.classList.contains('show')) {
+                    closeOverlay();
+                }
+            }
+        });
+    });
+    observer.observe(dropdown, { attributes: true });
+}
+
+setupDropdownObserver(buyDropdown, 'buy');
+setupDropdownObserver(searchDropdown, 'search');
+setupDropdownObserver(langDropdown, 'lang');
+
+// ========== 页面卸载时恢复滚动 ==========
+window.addEventListener('beforeunload', () => {
+    if (body) {
+        body.style.overflow = '';
+        body.style.paddingRight = '';
+    }
+});
+
+// 确保蒙版层初始状态正确
+closeOverlay();
 </script>

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

@@ -266,7 +266,7 @@ a {
     top: 4em;
     left: 0;
     right: 0;
-    background-color: #fafafb;
+    background-color: #fff;
     z-index: 199;
     border-top: none;
     overflow: hidden;
@@ -303,7 +303,7 @@ a {
 .header-tab-item.active::after {
     content: '';
     position: absolute;
-    bottom: -0.6875em;
+    bottom: -0.5075em;
     left: 0;
     width: 100%;
     height: 0.125em;
@@ -328,6 +328,8 @@ a {
     flex-direction: column;
     flex: 1; */
     flex: 1; 
+    margin-right: 24px;
+ 
 }
 
 .header-category-box {
@@ -342,6 +344,7 @@ a {
 .header-category-block {
     flex: 1;
     box-sizing: border-box;
+    max-width: 362px;
 }
 
 /* .header-category-block:nth-child(5) {
@@ -357,6 +360,7 @@ a {
     color: #1d1d1f;
     margin-bottom: 0.75em;
     font-weight: 900;
+    line-height: 1;
 }
 
 .header-category-list {
@@ -433,11 +437,11 @@ a {
 
 .header-product-card:nth-child(3) {
     margin-right: 1.5em;
-    margin-top: 1.4375em;
+    margin-top: 0;
 }
 
 .header-product-card:nth-child(4) {
-    margin-top: 1.4375em;
+    margin-top: 0;
 }
 
 /*.header-product-img {*/
@@ -463,7 +467,7 @@ a {
     justify-content: center;
     color: #999;
     overflow: hidden;
-    border-radius: 0.5em;
+    /* border-radius: 0.5em; */
 }
 
 .header-product-img img {
@@ -475,7 +479,7 @@ a {
 .header-product-name {
     font-size: 1em;
     color: #1d1d1f;
-    line-height: 1.5;
+    line-height: 2;
 }
 
 /* 修改 .dropdown-content1 的样式 - 卡片居中对齐 */
@@ -493,7 +497,7 @@ a {
 /* 修改 .product-card-1 的样式 - 设置宽度，确保一行最多4个 */
 .header-product-card-1 {
     width: calc(25% - 1.40625em);
-    background: #fff;
+    /* background: #fff; */
     border-radius: 0.5em;
     max-width: 362px;
     flex-shrink: 0;
@@ -512,6 +516,7 @@ a {
     padding-bottom: 53%;
     height: 0;
     overflow: hidden;
+    font-size: 16px;
 }
 
 /* 图片样式 - 确保图片正确显示 */
@@ -531,18 +536,20 @@ a {
     font-size: 1em;
     color: #1d1d1f;
     text-align: left;
-    margin-top: 1.125em;
+    margin-top: 1em;
     padding: 0 0.5em;
+    line-height: 1.5;
     word-break: break-word;
 }
 
 .header-product-name-1 {
-    font-size: 1em;
+    font-size: 0.875em;
     color: #686a70;
     text-align: left;
     margin-top: 0.25em;
     margin-bottom: 1.0625em;
     padding: 0 0.5em;
+    line-height: 1.5;
     word-break: break-word;
 }
 
@@ -818,7 +825,7 @@ a {
     top: 3.75em;
     left: 0;             
     right: 0;
-    background-color: #fafafb;
+    background-color: #fff;
     z-index: 999;
     border-top: none;
     overflow: visible;
@@ -847,18 +854,22 @@ a {
     width: 96px;
     text-align: center;
     cursor: pointer;
-    margin-right: calc((100% - (96px * 7)) / 6);
+    margin-right: calc((100% - (96px * 7)) / 4);
 
 }
 
+
+/* 每行第7个卡片（一行最后一个）清除右边距 */
+.header-buy-product-card:last-of-type {
+    margin-right: 0;
+}
+
+
 .header-buy-product-card:hover {
     transform: translateY(-2px)
 }
 
-/* 每行第7个卡片（一行最后一个）清除右边距 */
-.header-buy-product-card:nth-child(7n) {
-    margin-right: 0;
-}
+
 
 .header-buy-product-card a {
     text-decoration: none;
@@ -1025,3 +1036,14 @@ a {
         row-gap: 60px;
     }
 }
+#mhk {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    backdrop-filter: blur(5px);
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 88;
+    display: none;
+}