From d79b418310670c704412db47a09e8019b619ed91 Mon Sep 17 00:00:00 2001
From: jsasg <735273025@qq.com>
Date: Tue, 14 Apr 2026 16:23:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/pc/public/header.html   |  441 +++++++++-
 app/index/view/pc/public/header1.html  |  528 +++++++++++-
 public/static/index/pc/css/header.css  |   56 +-
 public/static/index/pc/css/header1.css | 1039 ++++++++++++++++++++++++
 4 files changed, 2016 insertions(+), 48 deletions(-)
 create mode 100644 public/static/index/pc/css/header1.css

diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html
index f3a4ced9..23e65bdc 100644
--- a/app/index/view/pc/public/header.html
+++ b/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');
@@ -345,7 +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');
 
@@ -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>
diff --git a/app/index/view/pc/public/header1.html b/app/index/view/pc/public/header1.html
index b5f6e707..ae91c413 100644
--- a/app/index/view/pc/public/header1.html
+++ b/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');
-            }
+           
+            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>
diff --git a/public/static/index/pc/css/header.css b/public/static/index/pc/css/header.css
index 712406ad..6bb407ad 100644
--- a/public/static/index/pc/css/header.css
+++ b/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;
 }
 
@@ -816,9 +823,9 @@ a {
     width: 100%;
     position: absolute;
     top: 3.75em;
-    left: 0;
+    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;
@@ -1024,4 +1035,15 @@ a {
         max-width: 1000px;
         row-gap: 60px;
     }
-}
\ No newline at end of file
+}
+#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;
+}
diff --git a/public/static/index/pc/css/header1.css b/public/static/index/pc/css/header1.css
new file mode 100644
index 00000000..2712c16c
--- /dev/null
+++ b/public/static/index/pc/css/header1.css
@@ -0,0 +1,1039 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: '微软雅黑', sans-serif;
+}
+
+body {
+    overflow-x: hidden;
+
+}
+
+a {
+    text-decoration: none;
+}
+.header {
+    position: fixed;
+    top:0;
+    z-index: 999;
+    max-width: 1920px;
+    width: 100%;
+    background: #fff;
+    font-size: 16px;
+    box-sizing: border-box;
+    height: 64px;
+}
+/* 导航外容器：1920px宽，居中 */
+.header-nav-outer {
+    max-width: 1920px;
+    position: relative;
+    padding: 0 12.5em;
+    overflow: visible;
+    height: 64px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    /* margin: 0 auto; */
+}
+
+/* 顶部导航栏：内容区带左右边距，外框1920px */
+.header-nav-bar {
+    width: 100%;
+    max-width: 1520px;
+    height: 4em;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
+.header-log {
+    width: 6.9375em;
+    height: 1.75em;
+    margin-right: 9.125em;
+    flex-shrink: 0;
+}
+
+.header-nav-items {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    flex-wrap: nowrap;
+    flex: 1;
+    min-width: 0;
+    margin-right: 5.125em;
+}
+
+.header-nav-item {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: #1d1d1f;
+    flex-shrink: 1;
+    min-width: 0;
+}
+
+.header-nav-title {
+    position: relative;
+    height: 100%;
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    padding: 0 0.3em;
+}
+
+/* 导航项下划线 */
+.header-nav-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0.125em;
+    background-color: #004bfa;
+    transform: scaleX(0);
+    transition: transform 0.2s ease;
+}
+
+.header-nav-title:hover::after,
+.header-nav-title.active::after {
+    transform: scaleX(1);
+}
+
+.header-nav-title.active {
+    color: #004bfa;
+}
+
+/* 右侧功能按钮 */
+.header-nav-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 2em;
+    position: relative;
+    flex-shrink: 0;
+}
+
+/* 搜索按钮容器 */
+.header-search-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+/* 语言按钮容器 */
+.header-lang-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+/* 购买按钮容器 */
+.header-buy-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.header-nav-btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: color 0.2s;
+}
+
+/* .header-nav-btn img {
+    width: 1.5em;
+    max-width: 17px;
+    max-height: 17px;
+    height: 1.5em;
+} */
+
+.header-nav-btn:hover {
+    color: #004bfa;
+}
+
+.header-buy-btn {
+    background-color:#004bfa;
+    color: #fff;
+    padding: 0.375em 1.125em;
+    border-radius: 1.25em;
+    border: none;
+    cursor: pointer;
+    font-size: 1em;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    
+}
+
+/* ========== 响应式设计 - 整体缩放，保持比例 ========== */
+
+/* 1920px 及以上 - 100% */
+@media screen and (min-width: 1920px) {
+    .header {
+        font-size: 16px;
+    }
+}
+
+/* 1680px - 1919px - 缩放至 93.75% */
+@media screen and (max-width: 1919px) and (min-width: 1680px) {
+    .header {
+        font-size: 15px;
+    }
+}
+
+/* 1600px - 1679px - 缩放至 90.625% */
+@media screen and (max-width: 1679px) and (min-width: 1600px) {
+    .header {
+        font-size: 14.5px;
+    }
+}
+
+/* 1520px - 1599px - 缩放至 87.5% */
+@media screen and (max-width: 1599px) and (min-width: 1520px) {
+    .header {
+        font-size: 14px;
+    }
+}
+
+/* 1440px - 1519px - 缩放至 84.375% */
+@media screen and (max-width: 1519px) and (min-width: 1440px) {
+    .header {
+        font-size: 13.5px;
+    }
+}
+
+/* 1360px - 1439px - 缩放至 81.25% */
+@media screen and (max-width: 1439px) and (min-width: 1360px) {
+    .header {
+        font-size: 13px;
+    }
+}
+
+/* 1280px - 1359px - 缩放至 78.125% */
+@media screen and (max-width: 1359px) and (min-width: 1280px) {
+    .header {
+        font-size: 12.5px;
+    }
+}
+
+/* 1200px - 1279px - 缩放至 75% */
+@media screen and (max-width: 1279px) and (min-width: 1200px) {
+    .header {
+        font-size: 12px;
+    }
+}
+
+/* 1140px - 1199px - 缩放至 75% (保持最小12px) */
+@media screen and (max-width: 1199px) and (min-width: 1140px) {
+    .header {
+        font-size: 12px;
+    }
+}
+
+/* 1080px - 1139px - 缩放至 75% (保持最小12px) */
+@media screen and (max-width: 1139px) and (min-width: 1080px) {
+    .header {
+        font-size: 12px;
+    }
+}
+
+/* 992px - 1079px - 缩放至 75% (保持最小12px) */
+@media screen and (max-width: 1079px) and (min-width: 992px) {
+    .header {
+        font-size: 12px;
+    }
+}
+
+/* 小于992px - 保持最小12px */
+@media screen and (max-width: 991px) {
+    .header {
+        font-size: 12px;
+    }
+}
+
+/* ========== 以下为原有样式，保持不变 ========== */
+
+/* 原有的下拉框样式 */
+.header-dropdown {
+    box-sizing: border-box;
+    max-width: 1920px;
+    width: 100%;
+    position: absolute;
+    top: 4em;
+    left: 0;
+    right: 0;
+    background-color: #fafafb;
+    z-index: 199;
+    border-top: none;
+    overflow: hidden;
+    padding-bottom: 2.375em;
+    display: none;
+}
+
+.header-nav-item:hover .header-dropdown {
+    display: block;
+}
+
+/* Tabs切换栏：居中，宽度100%（基于下拉框内容区） */
+.header-dropdown-tabs {
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
+    padding-bottom: 1.75em;
+    padding-top: 1.75em;
+    width: calc(100% - 2.5em);
+}
+
+.header-tab-item:last-child {
+    margin-right: 0;
+}
+
+.header-tab-item {
+    font-size: 1em;
+    color: #1d1d1f;
+    cursor: pointer;
+    position: relative;
+    margin-right: 9.375em;
+}
+
+.header-tab-item.active::after {
+    content: '';
+    position: absolute;
+    bottom: -0.6875em;
+    left: 0;
+    width: 100%;
+    height: 0.125em;
+    background-color: #004bfa;
+}
+
+/* 下拉框内容容器：宽度100%，左右留20px边距 */
+.header-dropdown-content {
+    width: 100%;
+    min-width: 1080px;
+    padding: 0 12.5em;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    align-items: flex-start;
+}
+
+/* 左侧6个分类区块 */
+.header-dropdown-category {
+    /* display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    flex: 1; */
+    flex: 1; 
+ 
+}
+
+.header-category-box {
+    display: flex;
+    justify-content: space-between;
+    margin-top:1.7em;
+}
+.header-category-box:nth-child(1) {
+    margin-top: 0;
+}
+/* 单个分类区块 */
+.header-category-block {
+    flex: 1;
+    box-sizing: border-box;
+}
+
+/* .header-category-block:nth-child(5) {
+    margin-bottom: 0;
+}
+
+.header-category-block:nth-child(6) {
+    margin-bottom: 0;
+} */
+
+.header-category-title {
+    font-size: 1em;
+    color: #1d1d1f;
+    margin-bottom: 0.75em;
+    font-weight: 900;
+}
+
+.header-category-list {
+    list-style: none;
+}
+
+.header-category-item {
+    font-size: 0.875em;
+    color: #686a70;
+    margin-bottom: 0.71em;
+    cursor: pointer;
+}
+
+.header-category-item a {
+    color: #686a70;
+}
+
+.header-category-item:last-child {
+    margin: 0;
+}
+
+.header-category-item a:hover {
+    color: #0066ff;
+}
+
+/* 右侧产品展示区：自适应剩余宽度，无溢出 */
+/* .header-dropdown-products {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    max-width: 46.75em;
+} */
+
+
+.header-dropdown-products {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    flex: 1;
+    min-width: 0;
+    gap: 1.5em 0;
+}
+
+
+
+.header-product-card {
+     text-align: center;
+    width: calc(50% - 0.75em);
+    max-width: 22.625em;
+    flex-shrink: 1;
+    min-width: 260px;
+    transition: transform 0.2s ease;
+}
+
+
+.header-product-card-1 {
+    text-align: center;
+    width: 100%;
+    max-width: 22.625em;
+
+}
+
+.header-product-card:hover {
+    transform: translateY(-2px)
+}
+
+.header-product-card-1:hover {
+    transform: translateY(-2px)
+}
+
+.header-product-card:nth-child(1) {
+    margin-right: 1.5em;
+}
+
+.header-product-card:nth-child(3) {
+    margin-right: 1.5em;
+    margin-top: 1.4375em;
+}
+
+.header-product-card:nth-child(4) {
+    margin-top: 1.4375em;
+}
+
+/*.header-product-img {*/
+/*    width: 22.625em;*/
+/*    height: 12.25em;*/
+/*    background-color: #f5f5f5;*/
+/*    display: flex;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
+/*    color: #999;*/
+/*}*/
+
+/*.header-product-img img {*/
+/*    width: 22.625em;*/
+/*    height: 12.25em;*/
+/*}*/
+.header-product-img {
+    width: 100%;
+    aspect-ratio: 22.625 / 12.25;
+    background-color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    overflow: hidden;
+    border-radius: 0.5em;
+}
+
+.header-product-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.header-product-name {
+    font-size: 1em;
+    color: #1d1d1f;
+    line-height: 1.5;
+}
+
+/* 修改 .dropdown-content1 的样式 - 卡片居中对齐 */
+.header-dropdown-content1 {
+    width: 100%;
+    min-width: 1080px;
+    padding: 3.4em 12.5em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 3.4em 1.875em;
+    box-sizing: border-box;
+}
+
+/* 修改 .product-card-1 的样式 - 设置宽度，确保一行最多4个 */
+.header-product-card-1 {
+    width: calc(25% - 1.40625em);
+    /* background: #fff; */
+    border-radius: 0.5em;
+    max-width: 362px;
+    flex-shrink: 0;
+
+}
+
+/* 如果需要更好的兼容性，用 padding 技巧替代 aspect-ratio */
+.header-product-img-1 {
+    background-color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    width: 100%;
+    position: relative;
+    padding-bottom: 53%;
+    height: 0;
+    overflow: hidden;
+}
+
+/* 图片样式 - 确保图片正确显示 */
+.header-product-img-1 img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* 内容区域自适应 */
+.header-product-title-1 {
+    font-weight: 900;
+    font-size: 1em;
+    color: #1d1d1f;
+    text-align: left;
+    margin-top: 1.125em;
+    padding: 0 0.5em;
+    word-break: break-word;
+}
+
+.header-product-name-1 {
+    font-size: 1em;
+    color: #686a70;
+    text-align: left;
+    margin-top: 0.25em;
+    margin-bottom: 1.0625em;
+    padding: 0 0.5em;
+    word-break: break-word;
+}
+
+/* 隐藏非当前选中的Tabs内容 */
+.header-tab-content {
+    display: none;
+}
+
+.header-tab-content.active {
+    display: flex;
+}
+
+/* ========== 搜索下拉框样式 ========== */
+.header-search-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 0.75em;
+    background: #ffffff;
+    border-radius: 0.75em;
+    box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12);
+    width: 26em;
+    padding: 1.5em;
+    z-index: 1000;
+    display: none;
+    animation: fadeIn 0.2s ease;
+}
+
+.header-search-dropdown.show {
+    display: block;
+}
+
+.header-search-input-wrapper {
+    display: flex;
+    gap: 0.625em;
+    border: 1px solid #e5e7eb;
+    border-radius: 2em;
+    padding: 0.5em 1em;
+    background: #f9fafb;
+    margin-bottom: 1em;
+}
+
+.header-search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.875em;
+    color: #1d1d1f;
+}
+
+.header-search-input::placeholder {
+    color: #9ca3af;
+}
+
+.header-search-submit {
+    background: #004bfa;
+    color: white;
+    border: none;
+    padding: 0.375em 1em;
+    border-radius: 1.5em;
+    cursor: pointer;
+    font-size: 0.8125em;
+    transition: background 0.2s;
+}
+
+.header-search-submit:hover {
+    background: #0039cc;
+}
+
+/* 搜索记录区域 */
+.header-search-history {
+    margin-bottom: 1.25em;
+}
+
+.header-history-title {
+    font-size: 1em;
+    color: #9ca3af;
+    margin-bottom: 0.625em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-clear-history {
+    color: #004bfa;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0.2em 0.5em;
+    border-radius: 0.25em;
+    transition: background 0.2s;
+}
+
+.header-clear-history:hover {
+    background: #f0f7ff;
+}
+
+.header-history-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+}
+
+.header-history-item {
+    font-size: 0.8125em;
+    color: #1d1d1f;
+    cursor: pointer;
+    padding: 0.25em 0.625em;
+    background: #f3f4f6;
+    border-radius: 1em;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+}
+
+.header-history-item:hover {
+    background: #004bfa;
+    color: white;
+}
+
+.header-history-item .header-delete-icon {
+    font-size: 0.875em;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.header-history-item:hover .header-delete-icon {
+    opacity: 1;
+}
+
+/* 热销产品区域 - 使用flex-wrap，一行最多3个，超过自动换行 */
+.header-hot-products {
+    border-top: 1px solid #f0f0f0;
+    padding-top: 0.75em;
+}
+
+.header-hot-title {
+    font-size: 1em;
+    color: #9ca3af;
+    margin-bottom: 0.75em;
+}
+
+.header-hot-product-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5em;
+    margin: 0;
+    padding: 0;
+}
+
+.header-hot-product-item {
+    flex: 0 0 calc(33.333% - 1em);
+    min-width: 0;
+    cursor: pointer;
+    text-align: center;
+    transition: transform 0.2s;
+    box-sizing: border-box;
+}
+
+.header-hot-product-item:hover {
+    transform: translateY(-2px);
+}
+
+.header-hot-product-img {
+    width: 7.1875em;
+    height: 7.1875em;
+    max-width: 115px;
+    max-height: 115px;
+    background: linear-gradient(135deg, #f5f7fc 0%, #eef2f8 100%);
+    border-radius: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.5em auto;
+    overflow: hidden;
+}
+
+.header-hot-product-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.header-hot-product-img .emoji {
+    font-size: 2.5em;
+}
+
+.header-hot-product-name {
+    font-size: 0.8125em;
+    color: #1d1d1f;
+    font-weight: 500;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 语言下拉框样式 */
+.header-lang-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 0.75em;
+    background: #ffffff;
+    border-radius: 0.75em;
+    box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12);
+    min-width: 12em;
+    padding: 1.5em 0;
+    z-index: 1000;
+    display: none;
+    animation: fadeIn 0.2s ease;
+}
+
+.header-lang-dropdown.show {
+    display: block;
+}
+
+.header-lang-item {
+    display: block;
+    padding: 0.75em 1.25em;
+    cursor: pointer;
+    transition: background 0.2s;
+    width: 100%;
+    font-size: 0.875em;
+    color: #1d1d1f;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.625em;
+}
+
+.header-lang-item:hover {
+    background: #f3f4f6;
+    color: #004bfa;
+}
+
+.header-lang-item.active {
+    color: #004bfa;
+    background: #f0f7ff;
+}
+
+.header-lang-code {
+    font-weight: 500;
+    min-width: 2.5em;
+    white-space:nowrap;
+}
+
+.header-lang-name {
+    flex: 1;
+}
+.header-lang-name-en {
+    flex: 1;
+    min-width: 126px;
+}
+.header-lang-dropdown-delete-icon,
+.header-search-dropdown-delete-icon {
+    font-size: 12px;
+    position: absolute;
+    top: 10px;
+    right: 14px;
+    cursor: pointer;
+
+}
+
+/* ========== 购买下拉框样式 ========== */
+.header-buy-dropdown {
+    box-sizing: border-box;
+    max-width: 1920px;
+    width: 100%;
+    position: absolute;
+    top: 3.75em;
+    left: 0;
+    right: 0;
+    background-color: #fafafb;
+    z-index: 999;
+    border-top: none;
+    overflow: visible;
+    display: none;
+    padding: 3.5em 12.5em;
+}
+
+.header-buy-dropdown.show {
+    display: block;
+}
+
+/* 购买下拉框内容容器 - 居中显示，固定一行7个卡片 */
+.header-buy-dropdown-content {
+    width: 100%;
+    max-width: 1520px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    box-sizing: border-box;
+    row-gap: 121px;
+}
+
+/* 购买产品卡片：宽度96px，右边距动态计算 */
+.header-buy-product-card {
+    width: 96px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: calc((100% - (96px * 7)) / 6);
+
+}
+
+.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;
+    display: block;
+}
+
+/* 图片容器：宽度100%，高度自适应，保持正方形比例 */
+.header-buy-product-img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    background-color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 0.5em;
+    position: relative;
+}
+
+/* 图片样式：实现悬浮切换效果，完全填充容器 */
+.header-buy-product-img img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: opacity 0.2s ease;
+}
+
+/* 默认显示普通图，隐藏悬浮图 */
+.header-buy-product-img .header-default-img {
+    opacity: 1;
+}
+
+.header-buy-product-img .header-hover-img {
+    opacity: 0;
+}
+
+/* 鼠标悬停时：显示悬浮图，隐藏普通图 */
+/* .header-buy-product-card:hover .header-buy-product-img .header-default-img {
+    opacity: 0;
+}
+
+.header-buy-product-card:hover .header-buy-product-img .header-hover-img {
+    opacity: 1;
+} */
+
+/* 产品标题样式：不加粗，字体大小16px，超出一行显示省略号 */
+.header-buy-product-title {
+    font-weight: normal;
+    font-size: 1em;
+    color: #1d1d1f;
+    text-align: center;
+    margin-top: 0.75em;
+    word-break: break-word;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+}
+
+/* 动画 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-0.5em);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 1280px及以下屏幕，渐进式调整间距 */
+@media screen and (max-width: 1280px) {
+    .header-log {
+        margin-right: 2em;
+    }
+
+    .header-nav-items {
+        margin-right: 1em;
+    }
+
+    .header-nav-outer {
+        padding: 0 12em;
+    }
+
+    .header-dropdown-content {
+        padding: 0 12em;
+    }
+
+    .header-dropdown-content1 {
+        padding: 0 12em;
+    }
+
+    .header-buy-dropdown {
+        padding: 3.5em 12em;
+    }
+
+    .header-buy-dropdown-content {
+        max-width: 1200px;
+        row-gap: 100px;
+    }
+}
+
+/* 1152px及以下，进一步缩小 */
+@media screen and (max-width: 1152px) {
+    .header-log {
+        margin-right: 1em;
+    }
+
+    .header-nav-outer {
+        padding: 0 10em;
+    }
+
+    .header-dropdown-content {
+        padding: 0 10em;
+    }
+
+    .header-dropdown-content1 {
+        padding: 0 10em;
+    }
+
+    .header-buy-dropdown {
+        padding: 3.5em 10em;
+    }
+
+    .buy-dropdown-content {
+        max-width: 1080px;
+        row-gap: 80px;
+    }
+}
+
+/* 1080px及以下，最小间距 */
+@media screen and (max-width: 1080px) {
+    .header-log {
+        margin-right: 1em;
+    }
+
+    .header-nav-outer {
+        padding: 0 8em;
+    }
+
+    .header-dropdown-content {
+        padding: 0 8em;
+    }
+
+    .header-dropdown-content1 {
+        padding: 0 8em;
+    }
+
+    .header-buy-dropdown {
+        padding: 3.5em 8em;
+    }
+
+    .header-buy-dropdown-content {
+        max-width: 1000px;
+        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;
+}