修改移动端样式

app/index/view/mobile/product/classify.html

@@ -56,9 +56,9 @@
             <section class="sec-box">
                 <div class="sec-header">
                     <div class="sec-title">{$child.name}</div>
-                    <div class="sec-arrow" onclick="scrollNext(this)">
+                    <a class="sec-arrow" href="#" target="_self">
                         <img src="__IMAGES__/y.png" alt="">
-                    </div>
+                    </a>
                 </div>
                 {if condition="!empty($child.products)"}
                 <div class="scroll-box">

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

@@ -23,7 +23,7 @@
                 <img src="__IMAGES__/header/b.png" class="menu-item-img">
             </div>
             {if condition="!empty($header_categorys)"}
-            <div class="sub-menu">
+            <div class="sub-menu" style="overflow-y: auto;">
                 {volist name="header_categorys" id="vo" key="idx"}
                 <div class="sub-item"><a href="{:url('product/classify', ['id' => $vo.id])}" target="_self">{$vo.name}</a></div>
                 {/volist}
@@ -43,9 +43,9 @@
                 <img src="__IMAGES__/header/b.png" class="menu-item-img">
             </div>
             {if condition="!empty($nav.children)"}
-            <div class="sub-menu">
+            <div class="sub-menu" style="border: none;" >
                 {volist name="nav.children" id="child"}
-                <div class="sub-item no-padding">
+                <div class="sub-item no-padding ">
                     <a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}" class="sub-item-card">
                         <img src="{$child.image}" alt="" class="sub-item-card-img">
                         <div class="sub-item-card-title">{$child.name}</div>
@@ -67,14 +67,18 @@
             {if condition="!empty($header_mall_entrance)"}
             <div class="modal-items-list">
                 {volist name="header_mall_entrance" id="ma"}
-                {if condition="!empty($ma.link) && empty($ma.hover_image)"}
+                {if condition="!empty($ma.link)"}
                 <a class="modal-item" href="{$ma.link}" target="_self">
                     <img src="{$ma.image}" alt="" class="modal-item-img">
                     <div class="modal-item-title">{$ma.name}</div>
                 </a>
                 {else/}
                 <!--悬浮图-->
-                <div class="modal-item">
+                <div class="modal-item" data-link="{$ma.link}" style="cursor: pointer;">
+                    <img src="{$ma.image}" alt="" class="modal-item-img">
+                    <div class="modal-item-title">{$ma.name}</div>
+                </div>
+                <div class="modal-item" style="display:none">
                     <img src="{$ma.hover_image}" alt="" class="modal-item-img">
                 </div>
                 {/if}
@@ -133,10 +137,80 @@
         const navBtn1 = document.querySelector('.nav-img1');
         const dropdownMenu = document.querySelector('.nav-dropdown-menu');
 
+        // 禁止body滚动
+        function disableBodyScroll() {
+            document.body.style.overflow = 'hidden';
+            document.body.style.position = 'fixed';
+            document.body.style.top = `-${window.scrollY}px`;
+            document.body.style.width = '100%';
+        }
+
+        // 恢复body滚动
+        function enableBodyScroll() {
+            const scrollY = document.body.style.top;
+            document.body.style.overflow = '';
+            document.body.style.position = '';
+            document.body.style.top = '';
+            document.body.style.width = '';
+            if (scrollY) {
+                window.scrollTo(0, parseInt(scrollY || '0') * -1);
+            }
+        }
+
+        // 复位所有子菜单（关闭并重置滚动位置）
+        function resetAllSubMenus() {
+            let hasOpenMenu = false;
+            document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
+                if (subMenu.classList.contains('show')) {
+                    hasOpenMenu = true;
+                }
+                subMenu.classList.remove('show');
+                // 重置滚动位置到顶部
+                subMenu.scrollTop = 0;
+            });
+            document.querySelectorAll('.has-child').forEach(function(item) {
+                item.classList.remove('open');
+            });
+            
+            // 如果没有打开的菜单，恢复body滚动
+            if (!hasOpenMenu) {
+                enableBodyScroll();
+            }
+        }
+
+        // 关闭单个子菜单并重置滚动位置
+        function closeSubMenu(subMenu, menuItem) {
+            if (subMenu) {
+                subMenu.classList.remove('show');
+                subMenu.scrollTop = 0; // 重置滚动位置
+            }
+            if (menuItem) {
+                menuItem.classList.remove('open');
+            }
+            // 检查是否还有其他打开的菜单
+            const anyOpen = document.querySelector('.has-child .sub-menu.show');
+            if (!anyOpen) {
+                enableBodyScroll();
+            }
+        }
+
+        // 打开子菜单
+        function openSubMenu(subMenu, menuItem) {
+            // 禁止body滚动
+            disableBodyScroll();
+            
+            subMenu.classList.add('show');
+            menuItem.classList.add('open');
+            // 确保新打开的菜单滚动位置在顶部
+            subMenu.scrollTop = 0;
+        }
+
         // 打开菜单
         navBtn.addEventListener('click', function (e)
         {
             e.stopPropagation();
+            // 禁止body滚动
+            disableBodyScroll();
             // 关闭所有弹窗
             closeAllModals();
             dropdownMenu.classList.add('show');
@@ -144,16 +218,19 @@
             navBtn1.style.display = 'block';
         });
 
-        // 关闭菜单
+        // 关闭菜单 - 复位所有子菜单
         navBtn1.addEventListener('click', function (e)
         {
             e.stopPropagation();
             dropdownMenu.classList.remove('show');
             navBtn.style.display = 'block';
             navBtn1.style.display = 'none';
+            
+            // 复位所有子菜单到初始状态
+            resetAllSubMenus();
         });
 
-        // 处理所有菜单项
+        // ====================== 处理所有菜单项（同一时间只展开一个） ======================
         document.querySelectorAll('.menu-item').forEach(function (item)
         {
             const isHasChild = item.classList.contains('has-child');
@@ -161,11 +238,33 @@
             const box = item.querySelector('.menu-item-box');
 
             if (isHasChild && subMenu) {
-                box.addEventListener('click', function (e)
+                // 移除原有事件，重新绑定（确保只有一个展开）
+                const newBox = box.cloneNode(true);
+                box.parentNode.replaceChild(newBox, box);
+                
+                newBox.addEventListener('click', function (e)
                 {
                     e.stopPropagation();
-                    subMenu.classList.toggle('show');
-                    item.classList.toggle('open');
+                    
+                    // 检查当前是否已展开
+                    const isOpen = subMenu.classList.contains('show');
+                    
+                    // 关闭所有其他子菜单并重置滚动位置
+                    document.querySelectorAll('.has-child').forEach(function (otherItem) {
+                        const otherSubMenu = otherItem.querySelector('.sub-menu');
+                        if (otherSubMenu && otherSubMenu !== subMenu) {
+                            otherSubMenu.classList.remove('show');
+                            otherSubMenu.scrollTop = 0; // 重置滚动位置
+                            otherItem.classList.remove('open');
+                        }
+                    });
+                    
+                    // 切换当前菜单
+                    if (!isOpen) {
+                        openSubMenu(subMenu, item);
+                    } else {
+                        closeSubMenu(subMenu, item);
+                    }
                 });
             } else {
                 const link = item.getAttribute('data-link');
@@ -221,6 +320,8 @@
             navBtn.style.display = 'block';
             navBtn1.style.display = 'none';
             closeAllModals();
+            // 复位所有子菜单
+            resetAllSubMenus();
             cartModal.classList.add('show');
         });
 
@@ -249,6 +350,8 @@
             navBtn.style.display = 'block';
             navBtn1.style.display = 'none';
             closeAllModals();
+            // 复位所有子菜单
+            resetAllSubMenus();
             langModal.classList.add('show');
         });
 
@@ -410,6 +513,8 @@
             navBtn.style.display = 'block';
             navBtn1.style.display = 'none';
             closeAllModals();
+            // 复位所有子菜单
+            resetAllSubMenus();
             renderSearchHistory();
             searchModal.classList.add('show');
             setTimeout(() =>
@@ -449,7 +554,8 @@
                 }
 
             }
-        }12
+        }
+        
         searchSubmit.addEventListener('click', function (e)
         {
             e.stopPropagation();
@@ -464,5 +570,189 @@
                 doSearch(searchInput.value);
             }
         });
+        
+        // ====================== 添加：点击空白区域关闭所有子菜单 ======================
+        document.addEventListener('click', function(e) {
+            // 如果点击的不是菜单项内部，关闭所有子菜单
+            if (!e.target.closest('.menu-item')) {
+                resetAllSubMenus();
+            }
+        });
+        
+        // ====================== 动态计算子菜单高度并添加滚动功能（产品列表除外） ======================
+        // 判断是否为产品列表（第一个菜单项）
+        function isProductList(menuItem) {
+            const firstMenuItem = document.querySelector('.menu-item');
+            return menuItem === firstMenuItem;
+        }
+        
+        // 设置子菜单的最大高度
+        function setSubMenuHeight(subMenu, menuItem) {
+            if (!subMenu || !menuItem) return;
+            
+            // 产品列表不处理
+            if (isProductList(menuItem)) {
+                subMenu.style.maxHeight = '';
+                subMenu.style.overflowY = '';
+                return;
+            }
+            
+            // 获取菜单位置信息
+            const rect = menuItem.getBoundingClientRect();
+            const bottomSpace = 50;   // 底部留白空间
+            
+            // 计算可用高度 = 视口高度 - 菜单顶部距离 - 底部留白
+            let availableHeight = window.innerHeight - rect.top - bottomSpace;
+            
+            // 限制最小高度
+            if (availableHeight < 200) {
+                availableHeight = 200;
+            }
+            
+            // 设置子菜单的最大高度和滚动
+            subMenu.style.maxHeight = availableHeight + 'px';
+            subMenu.style.overflowY = 'auto';
+            subMenu.style.overflowX = 'hidden';
+            subMenu.style.WebkitOverflowScrolling = 'touch';
+        }
+        
+        // 为所有有子菜单的导航项（产品列表除外）绑定事件
+        const allMenuItems = document.querySelectorAll('.has-child');
+        
+        allMenuItems.forEach(function(menuItem) {
+            const subMenu = menuItem.querySelector('.sub-menu');
+            const box = menuItem.querySelector('.menu-item-box');
+            
+            if (!subMenu || !box) return;
+            
+            // 产品列表不处理滚动功能
+            if (isProductList(menuItem)) {
+                return;
+            }
+            
+            // 添加点击事件处理高度
+            box.addEventListener('click', function(e) {
+                // 如果子菜单即将打开，计算高度
+                if (!subMenu.classList.contains('show')) {
+                    // 延迟一帧，确保DOM已更新
+                    setTimeout(function() {
+                        setSubMenuHeight(subMenu, menuItem);
+                        // 确保滚动位置在顶部
+                        subMenu.scrollTop = 0;
+                    }, 0);
+                }
+            });
+        });
+        
+        // 窗口大小改变时，重新计算已打开的子菜单高度
+        window.addEventListener('resize', function() {
+            const openSubMenus = document.querySelectorAll('.has-child .sub-menu.show');
+            openSubMenus.forEach(function(subMenu) {
+                const menuItem = subMenu.closest('.has-child');
+                if (menuItem && !isProductList(menuItem)) {
+                    setSubMenuHeight(subMenu, menuItem);
+                }
+            });
+        });
+        
+        // 监听菜单打开状态变化（使用 MutationObserver 确保高度正确设置）
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'class') {
+                    const target = mutation.target;
+                    if (target.classList && target.classList.contains('sub-menu') && target.classList.contains('show')) {
+                        const menuItem = target.closest('.has-child');
+                        if (menuItem && !isProductList(menuItem)) {
+                            setSubMenuHeight(target, menuItem);
+                            // 确保滚动位置在顶部
+                            target.scrollTop = 0;
+                        }
+                    }
+                }
+            });
+        });
+        
+        // 观察所有子菜单的class变化
+        document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
+            observer.observe(subMenu, { attributes: true });
+        });
+        
+        // ====================== 购物车弹窗悬浮图功能 ======================
+        // 处理购物车弹窗中的图片悬浮效果
+        function initCartModalHover() {
+            const modalItems = document.querySelectorAll('#cartModal .modal-item');
+            
+            modalItems.forEach(function(item) {
+                // 查找当前item中是否有悬浮图（隐藏的那个）
+                const defaultImg = item.querySelector('.modal-item-img');
+                const hiddenItem = item.nextElementSibling;
+                let hoverImg = null;
+                
+                // 检查下一个元素是否是隐藏的悬浮图容器
+                if (hiddenItem && hiddenItem.classList && hiddenItem.classList.contains('modal-item') && hiddenItem.style.display === 'none') {
+                    hoverImg = hiddenItem.querySelector('.modal-item-img');
+                }
+                
+                // 如果有悬浮图
+                if (hoverImg && defaultImg) {
+                    const originalSrc = defaultImg.src;
+                    const hoverSrc = hoverImg.src;
+                    const link = item.getAttribute('data-link');
+                    
+                    // 移除原有的href，因为需要悬浮图效果
+                    item.style.cursor = 'pointer';
+                    
+                    // 鼠标移入：显示悬浮图
+                    item.addEventListener('mouseenter', function(e) {
+                        e.stopPropagation();
+                        defaultImg.src = hoverSrc;
+                    });
+                    
+                    // 鼠标移出：恢复普通图
+                    item.addEventListener('mouseleave', function(e) {
+                        e.stopPropagation();
+                        defaultImg.src = originalSrc;
+                    });
+                    
+                    // 点击事件：如果有链接就跳转
+                    item.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        if (link && link !== '#') {
+                            window.location.href = link;
+                        }
+                    });
+                } else {
+                    // 没有悬浮图，保持原有链接
+                    const link = item.getAttribute('href') || item.getAttribute('data-link');
+                    if (link && link !== '#') {
+                        item.addEventListener('click', function(e) {
+                            e.stopPropagation();
+                            window.location.href = link;
+                        });
+                    }
+                }
+            });
+        }
+        
+        // 在购物车弹窗打开时初始化悬浮图功能
+        const cartModalObserver = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'class') {
+                    if (cartModal.classList.contains('show')) {
+                        setTimeout(function() {
+                            initCartModalHover();
+                        }, 50);
+                    }
+                }
+            });
+        });
+        
+        if (cartModal) {
+            cartModalObserver.observe(cartModal, { attributes: true });
+            // 如果弹窗默认是打开的，也初始化一次
+            if (cartModal.classList.contains('show')) {
+                initCartModalHover();
+            }
+        }
     });
 </script>

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

@@ -0,0 +1,679 @@
+<link rel="stylesheet" href="__CSS__/new_header.css">
+<header>
+    <div class="mobile-header-box">
+        <div class="mobile-header-left">
+            <img src="__IMAGES__/header/nav.png" class="nav-img">
+            <img src="__IMAGES__/header/x.png" class="nav-img1">
+            <a href="/" target="_self" style="display: flex; justify-content: center;">
+                <img src="__IMAGES__/logo.png" class="nav-log">
+            </a>
+        </div>
+        <div class="mobile-header-right">
+            <img src="__IMAGES__/header/search.png" class="nav-search">
+            <img src="__IMAGES__/header/lang.png" class="nav-lang">
+            <img src="__IMAGES__/header/card.png" class="nav-card">
+        </div>
+    </div>
+
+    <div class="nav-dropdown-menu">
+        <!-- 产品列表 - 有子菜单 -->
+        <div class="menu-item has-child">
+            <div class="menu-item-box">
+                <span>{:lang_i18n('产品列表')}</span>
+                <img src="__IMAGES__/header/b.png" class="menu-item-img">
+            </div>
+            {if condition="!empty($header_categorys)"}
+            <div class="sub-menu" style="overflow-y: auto;">
+                {volist name="header_categorys" id="vo" key="idx"}
+                <div class="sub-item"><a href="{:url('product/classify', ['id' => $vo.id])}" target="_self">{$vo.name}</a></div>
+                {/volist}
+            </div>
+            {/if}
+        </div>
+
+        {if condition="!empty($header_navigation)"}
+        {volist name="header_navigation" id="nav"}
+        {empty name='nav.children'}
+        <div class="menu-item no-child" data-link="{$nav.link}">
+        {else/}
+        <div class="menu-item has-child" data-link="{$nav.link}">
+        {/empty}
+            <div class="menu-item-box">
+                <span>{$nav.name}</span>
+                <img src="__IMAGES__/header/b.png" class="menu-item-img">
+            </div>
+            {if condition="!empty($nav.children)"}
+            <div class="sub-menu" style="border: none;" >
+                {volist name="nav.children" id="child"}
+                <div class="sub-item no-padding ">
+                    <a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}" class="sub-item-card">
+                        <img src="{$child.image}" alt="" class="sub-item-card-img">
+                        <div class="sub-item-card-title">{$child.name}</div>
+                        <div class="sub-item-card-name">{$child.desc}</div>
+                    </a>
+                </div>
+                {/volist}
+            </div>
+            {/if}
+        </div>
+        {/volist}
+        {/if}
+    </div>
+
+    <!-- ====================== 购物车弹窗 ====================== -->
+    <div class="modal-overlay" id="cartModal">
+        <div class="modal-content">
+            <img src="__IMAGES__/header/x.png" class="modal-close">
+            {if condition="!empty($header_mall_entrance)"}
+            <div class="modal-items-list">
+                {volist name="header_mall_entrance" id="ma"}
+                {if condition="!empty($ma.link) && empty($ma.hover_image)"}
+                <a class="modal-item" href="{$ma.link}" target="_self">
+                    <img src="{$ma.image}" alt="" class="modal-item-img">
+                    <div class="modal-item-title">{$ma.name}</div>
+                </a>
+                {else/}
+                <!--悬浮图-->
+                <a class="modal-item" href="{$ma.link}" target="_self">
+                    <img src="{$ma.image}" alt="" class="modal-item-img">
+                    <div class="modal-item-title">{$ma.name}</div>
+                </a>
+                <div class="modal-item" style="display:none">
+                    <img src="{$ma.hover_image}" alt="" class="modal-item-img">
+                </div>
+                {/if}
+                {/volist}
+            </div>
+            {/if}
+        </div>
+    </div>
+
+    <!-- ====================== 语言弹窗 ====================== -->
+    <div class="modal-overlay" id="langModal">
+        <div class="lang-modal-content">
+            <img src="__IMAGES__/header/x.png" class="modal-close">
+            <div class="lang-items-list">
+                {volist name="header_languages" id="la"}
+                <a class="lang-item" href="{$la.lang_url}" target="_self">
+                    <img src="{$la.lang_icon}" />
+                    <div>{$la.country_en_name} - {$la.lang_en_name}</div>
+                </a>
+                {/volist}
+            </div>
+        </div>
+    </div>
+
+    <!-- ====================== 搜索弹窗 ====================== -->
+    <div class="modal-overlay" id="searchModal">
+        <div class="search-modal-content">
+            <img src="__IMAGES__/header/x.png" class="modal-close">
+            <div class="search-input-box">
+                <input type="text" placeholder="{:lang_i18n('请输入搜索关键词')}" id="searchInput">
+
+                <div class="search-clear-box">
+                    <img src="__IMAGES__/header/x.png" alt="{:lang_i18n('清除')}" class="search-clear-btn" id="searchClearBtn" style="display: none;">
+                </div>
+                <!-- <span style="width: 1px; color:#d9d9d9;margin: 0 10px;">|</span> -->
+                <div class="search-submit-box">
+                    <img src="__IMAGES__/header/search.png" alt="{:lang_i18n('搜索')}" class="search-submit-icon" id="searchSubmit">
+                </div>
+            </div>
+            <div class="search-history">
+                <div class="search-history-header">
+                    <div class="search-history-title">{:lang_i18n('搜索记录')}</div>
+                    <div class="search-history-clear" id="clearAllHistory">{:lang_i18n('清空')}</div>
+                </div>
+                <div class="search-history-list" id="searchHistoryList">
+                    <!-- 搜索记录会动态显示在这里 -->
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<script>
+    document.addEventListener('DOMContentLoaded', function ()
+    {
+        const navBtn = document.querySelector('.nav-img');
+        const navBtn1 = document.querySelector('.nav-img1');
+        const dropdownMenu = document.querySelector('.nav-dropdown-menu');
+
+        // 禁止body滚动
+        function disableBodyScroll() {
+            document.body.style.overflow = 'hidden ';
+            document.body.style.position = 'fixed';
+            document.body.style.top = `-${window.scrollY}px`;
+            document.body.style.width = '100%';
+        }
+
+        // 恢复body滚动
+        function enableBodyScroll() {
+            const scrollY = document.body.style.top;
+            document.body.style.overflow = '';
+            document.body.style.position = '';
+            document.body.style.top = '';
+            document.body.style.width = '';
+            if (scrollY) {
+                window.scrollTo(0, parseInt(scrollY || '0') * -1);
+            }
+        }
+
+        // 复位所有子菜单（关闭并重置滚动位置）
+        function resetAllSubMenus() {
+            let hasOpenMenu = false;
+            document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
+                if (subMenu.classList.contains('show')) {
+                    hasOpenMenu = true;
+                }
+                subMenu.classList.remove('show');
+                // 重置滚动位置到顶部
+                subMenu.scrollTop = 0;
+            });
+            document.querySelectorAll('.has-child').forEach(function(item) {
+                item.classList.remove('open');
+            });
+            
+            // 如果没有打开的菜单，恢复body滚动
+            if (!hasOpenMenu) {
+                enableBodyScroll();
+            }
+        }
+
+        // 关闭单个子菜单并重置滚动位置
+        function closeSubMenu(subMenu, menuItem) {
+            if (subMenu) {
+                subMenu.classList.remove('show');
+                subMenu.scrollTop = 0; // 重置滚动位置
+            }
+            if (menuItem) {
+                menuItem.classList.remove('open');
+            }
+            // 检查是否还有其他打开的菜单
+            const anyOpen = document.querySelector('.has-child .sub-menu.show');
+            if (!anyOpen) {
+                enableBodyScroll();
+            }
+        }
+
+        // 打开子菜单
+        function openSubMenu(subMenu, menuItem) {
+          
+            
+            subMenu.classList.add('show');
+            menuItem.classList.add('open');
+            // 确保新打开的菜单滚动位置在顶部
+            subMenu.scrollTop = 0;
+        }
+
+        // 打开菜单
+        navBtn.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+              // 禁止body滚动
+              disableBodyScroll();
+            // 关闭所有弹窗
+            closeAllModals();
+            dropdownMenu.classList.add('show');
+            navBtn.style.display = 'none';
+            navBtn1.style.display = 'block';
+        });
+
+        // 关闭菜单 - 复位所有子菜单
+        navBtn1.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+            dropdownMenu.classList.remove('show');
+            navBtn.style.display = 'block';
+            navBtn1.style.display = 'none';
+            
+            // 复位所有子菜单到初始状态
+            resetAllSubMenus();
+        });
+
+        // ====================== 处理所有菜单项（同一时间只展开一个） ======================
+        document.querySelectorAll('.menu-item').forEach(function (item)
+        {
+            const isHasChild = item.classList.contains('has-child');
+            const subMenu = item.querySelector('.sub-menu');
+            const box = item.querySelector('.menu-item-box');
+
+            if (isHasChild && subMenu) {
+                // 移除原有事件，重新绑定（确保只有一个展开）
+                const newBox = box.cloneNode(true);
+                box.parentNode.replaceChild(newBox, box);
+                
+                newBox.addEventListener('click', function (e)
+                {
+                    e.stopPropagation();
+                    
+                    // 检查当前是否已展开
+                    const isOpen = subMenu.classList.contains('show');
+                    
+                    // 关闭所有其他子菜单并重置滚动位置
+                    document.querySelectorAll('.has-child').forEach(function (otherItem) {
+                        const otherSubMenu = otherItem.querySelector('.sub-menu');
+                        if (otherSubMenu && otherSubMenu !== subMenu) {
+                            otherSubMenu.classList.remove('show');
+                            otherSubMenu.scrollTop = 0; // 重置滚动位置
+                            otherItem.classList.remove('open');
+                        }
+                    });
+                    
+                    // 切换当前菜单
+                    if (!isOpen) {
+                        openSubMenu(subMenu, item);
+                    } else {
+                        closeSubMenu(subMenu, item);
+                    }
+                });
+            } else {
+                const link = item.getAttribute('data-link');
+                if (link) {
+                    item.addEventListener('click', function (e)
+                    {
+                        e.stopPropagation();
+                        window.location.href = link;
+                    });
+                }
+            }
+        });
+
+        // 阻止子菜单链接冒泡
+        document.querySelectorAll('.sub-item').forEach(function (sub)
+        {
+            sub.addEventListener('click', function (e)
+            {
+                e.stopPropagation();
+            });
+        });
+
+        dropdownMenu.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+        });
+
+        navBtn1.style.display = 'none';
+        navBtn.style.display = 'block';
+
+        // 关闭所有弹窗的公共函数
+        function closeAllModals ()
+        {
+            cartModal.classList.remove('show');
+            langModal.classList.remove('show');
+            searchModal.classList.remove('show');
+            if (searchInput) {
+                searchInput.value = '';
+                if (searchClearBtn) searchClearBtn.style.display = 'none';
+            }
+        }
+
+        // ====================== 购物车弹窗交互 ======================
+        const cardBtn = document.querySelector('.nav-card');
+        const cartModal = document.getElementById('cartModal');
+        const cartModalClose = cartModal.querySelector('.modal-close');
+
+        cardBtn.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+            // 关闭下拉菜单和其他弹窗
+            dropdownMenu.classList.remove('show');
+            navBtn.style.display = 'block';
+            navBtn1.style.display = 'none';
+            closeAllModals();
+            // 复位所有子菜单
+            resetAllSubMenus();
+            cartModal.classList.add('show');
+        });
+
+        cartModalClose.addEventListener('click', function ()
+        {
+            cartModal.classList.remove('show');
+        });
+
+        cartModal.addEventListener('click', function (e)
+        {
+            if (e.target === cartModal) {
+                cartModal.classList.remove('show');
+            }
+        });
+
+        // ====================== 语言弹窗交互 ======================
+        const langBtn = document.querySelector('.nav-lang');
+        const langModal = document.getElementById('langModal');
+        const langModalClose = langModal.querySelector('.modal-close');
+
+        langBtn.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+            // 关闭下拉菜单和其他弹窗
+            dropdownMenu.classList.remove('show');
+            navBtn.style.display = 'block';
+            navBtn1.style.display = 'none';
+            closeAllModals();
+            // 复位所有子菜单
+            resetAllSubMenus();
+            langModal.classList.add('show');
+        });
+
+        langModalClose.addEventListener('click', function ()
+        {
+            langModal.classList.remove('show');
+        });
+
+        langModal.addEventListener('click', function (e)
+        {
+            if (e.target === langModal) {
+                langModal.classList.remove('show');
+            }
+        });
+
+        document.querySelectorAll('.lang-item').forEach(function (item)
+        {
+            item.addEventListener('click', function (e)
+            {
+                e.stopPropagation();
+                console.log('选择了语言:', this.innerText);
+                langModal.classList.remove('show');
+            });
+        });
+
+        // ====================== 搜索记录功能 ======================
+        // 获取搜索记录
+        function getSearchHistory ()
+        {
+            const history = localStorage.getItem('searchHistory');
+            return history ? JSON.parse(history) : [];
+        }
+
+        // 保存搜索记录
+        function saveSearchHistory (history)
+        {
+            localStorage.setItem('searchHistory', JSON.stringify(history));
+        }
+
+        // 添加搜索记录
+        function addSearchHistory (keyword)
+        {
+            if (!keyword || !keyword.trim()) return;
+            keyword = keyword.trim();
+            let history = getSearchHistory();
+            history = history.filter(item => item !== keyword);
+            history.unshift(keyword);
+            if (history.length > 10) {
+                history = history.slice(0, 10);
+            }
+            saveSearchHistory(history);
+            renderSearchHistory();
+        }
+
+        // 删除单条搜索记录
+        function deleteSearchHistoryItem (keyword)
+        {
+            let history = getSearchHistory();
+            history = history.filter(item => item !== keyword);
+            saveSearchHistory(history);
+            renderSearchHistory();
+        }
+
+        // 清空所有搜索记录
+        function clearAllSearchHistory ()
+        {
+            saveSearchHistory([]);
+            renderSearchHistory();
+        }
+
+        // 渲染搜索记录列表
+        function renderSearchHistory ()
+        {
+            const historyList = document.getElementById('searchHistoryList');
+            const history = getSearchHistory();
+
+            if (!historyList) return;
+
+            if (history.length === 0) {
+                historyList.innerHTML = '<div class="empty-history">暂无搜索记录</div>';
+                return;
+            }
+
+            historyList.innerHTML = '';
+            history.forEach(function (keyword)
+            {
+                const itemDiv = document.createElement('div');
+                itemDiv.className = 'search-history-item';
+                itemDiv.innerHTML = `
+                    <span>${escapeHtml(keyword)}</span>
+                    <img src="__IMAGES__/header/x.png" class="delete-icon" data-keyword="${escapeHtml(keyword)}">
+                `;
+                itemDiv.addEventListener('click', function (e)
+                {
+                    if (e.target.classList && e.target.classList.contains('delete-icon')) {
+                        e.stopPropagation();
+                        deleteSearchHistoryItem(keyword);
+                    } else {
+                        e.stopPropagation();
+                        searchInput.value = keyword;
+                        doSearch(keyword);
+                    }
+                });
+                historyList.appendChild(itemDiv);
+            });
+        }
+
+        // 简单的防XSS
+        function escapeHtml (str)
+        {
+            return str.replace(/[&<>]/g, function (m)
+            {
+                if (m === '&') return '&amp;';
+                if (m === '<') return '&lt;';
+                if (m === '>') return '&gt;';
+                return m;
+            });
+        }
+
+        // ====================== 搜索弹窗交互 ======================
+        const searchBtn = document.querySelector('.nav-search');
+        const searchModal = document.getElementById('searchModal');
+        const searchModalClose = searchModal.querySelector('.modal-close');
+        const searchInput = document.getElementById('searchInput');
+        const searchSubmit = document.getElementById('searchSubmit');
+        const searchClearBtn = document.getElementById('searchClearBtn');
+        const clearAllHistoryBtn = document.getElementById('clearAllHistory');
+
+        searchInput.addEventListener('input', function (e)
+        {
+            if (searchInput.value.length > 0) {
+                searchClearBtn.style.display = 'block';
+            } else {
+                searchClearBtn.style.display = 'none';
+            }
+        });
+
+        searchClearBtn.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+            searchInput.value = '';
+            searchClearBtn.style.display = 'none';
+            searchInput.focus();
+        });
+
+        if (clearAllHistoryBtn) {
+            clearAllHistoryBtn.addEventListener('click', function (e)
+            {
+                e.stopPropagation();
+                clearAllSearchHistory();
+            });
+        }
+
+        searchBtn.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+            // 关闭下拉菜单和其他弹窗
+            dropdownMenu.classList.remove('show');
+            navBtn.style.display = 'block';
+            navBtn1.style.display = 'none';
+            closeAllModals();
+            // 复位所有子菜单
+            resetAllSubMenus();
+            renderSearchHistory();
+            searchModal.classList.add('show');
+            setTimeout(() =>
+            {
+                searchInput.focus();
+            }, 100);
+        });
+
+        searchModalClose.addEventListener('click', function ()
+        {
+            searchModal.classList.remove('show');
+            searchInput.value = '';
+            searchClearBtn.style.display = 'none';
+        });
+
+        searchModal.addEventListener('click', function (e)
+        {
+            if (e.target === searchModal) {
+                searchModal.classList.remove('show');
+                searchInput.value = '';
+                searchClearBtn.style.display = 'none';
+            }
+        });
+
+        // 执行搜索
+        function doSearch (keyword)
+        {
+            if (keyword && keyword.trim()) {
+                const searchKeyword = keyword.trim();
+                console.log('搜索关键词:', searchKeyword);
+                if (searchKeyword) {
+                    addSearchHistory(searchKeyword);
+                    window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(searchKeyword);
+                    searchModal.classList.remove('show');
+                    searchInput.value = '';
+                    searchClearBtn.style.display = 'none';
+                }
+
+            }
+        }
+        
+        searchSubmit.addEventListener('click', function (e)
+        {
+            e.stopPropagation();
+            doSearch(searchInput.value);
+        });
+
+        searchInput.addEventListener('keypress', function (e)
+        {
+            console.log(e,'========e=============')
+            if (e.key === 'Enter' || e.key === 'enter' || e.keyCode === 13) {
+                e.preventDefault();
+                doSearch(searchInput.value);
+            }
+        });
+        
+        // ====================== 添加：点击空白区域关闭所有子菜单 ======================
+        document.addEventListener('click', function(e) {
+            // 如果点击的不是菜单项内部，关闭所有子菜单
+            if (!e.target.closest('.menu-item')) {
+                resetAllSubMenus();
+            }
+        });
+        
+        // ====================== 动态计算子菜单高度并添加滚动功能（产品列表除外） ======================
+        // 判断是否为产品列表（第一个菜单项）
+        function isProductList(menuItem) {
+            const firstMenuItem = document.querySelector('.menu-item');
+            return menuItem === firstMenuItem;
+        }
+        
+        // 设置子菜单的最大高度
+        function setSubMenuHeight(subMenu, menuItem) {
+            if (!subMenu || !menuItem) return;
+            
+            // 产品列表不处理
+            if (isProductList(menuItem)) {
+                subMenu.style.maxHeight = '';
+                subMenu.style.overflowY = '';
+                return;
+            }
+            
+            // 获取菜单位置信息
+            const rect = menuItem.getBoundingClientRect();
+            const bottomSpace = 50;   // 底部留白空间
+            
+            // 计算可用高度 = 视口高度 - 菜单顶部距离 - 底部留白
+            let availableHeight = window.innerHeight - rect.top - bottomSpace;
+            
+            // 限制最小高度
+            if (availableHeight < 200) {
+                availableHeight = 200;
+            }
+            
+            // 设置子菜单的最大高度和滚动
+            subMenu.style.maxHeight = availableHeight + 'px';
+            subMenu.style.overflowY = 'auto';
+            subMenu.style.overflowX = 'hidden';
+            subMenu.style.WebkitOverflowScrolling = 'touch';
+        }
+        
+        // 为所有有子菜单的导航项（产品列表除外）绑定事件
+        const allMenuItems = document.querySelectorAll('.has-child');
+        
+        allMenuItems.forEach(function(menuItem) {
+            const subMenu = menuItem.querySelector('.sub-menu');
+            const box = menuItem.querySelector('.menu-item-box');
+            
+            if (!subMenu || !box) return;
+            
+            // 产品列表不处理滚动功能
+            if (isProductList(menuItem)) {
+                return;
+            }
+            
+            // 添加点击事件处理高度
+            box.addEventListener('click', function(e) {
+                // 如果子菜单即将打开，计算高度
+                if (!subMenu.classList.contains('show')) {
+                    // 延迟一帧，确保DOM已更新
+                    setTimeout(function() {
+                        setSubMenuHeight(subMenu, menuItem);
+                        // 确保滚动位置在顶部
+                        subMenu.scrollTop = 0;
+                    }, 0);
+                }
+            });
+        });
+        
+        // 窗口大小改变时，重新计算已打开的子菜单高度
+        window.addEventListener('resize', function() {
+            const openSubMenus = document.querySelectorAll('.has-child .sub-menu.show');
+            openSubMenus.forEach(function(subMenu) {
+                const menuItem = subMenu.closest('.has-child');
+                if (menuItem && !isProductList(menuItem)) {
+                    setSubMenuHeight(subMenu, menuItem);
+                }
+            });
+        });
+        
+        // 监听菜单打开状态变化（使用 MutationObserver 确保高度正确设置）
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'class') {
+                    const target = mutation.target;
+                    if (target.classList && target.classList.contains('sub-menu') && target.classList.contains('show')) {
+                        const menuItem = target.closest('.has-child');
+                        if (menuItem && !isProductList(menuItem)) {
+                            setSubMenuHeight(target, menuItem);
+                            // 确保滚动位置在顶部
+                            target.scrollTop = 0;
+                        }
+                    }
+                }
+            });
+        });
+        
+        // 观察所有子菜单的class变化
+        document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
+            observer.observe(subMenu, { attributes: true });
+        });
+    });
+</script>