jsasg
d6ce8aa2be
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
890 lines
35 KiB
HTML
890 lines
35 KiB
HTML
<link rel="stylesheet" href="__CSS__/header.css">
|
||
<div class="header" >
|
||
<!-- 导航外容器：1920px宽，下拉框基于此定位 -->
|
||
<div class="header-nav-outer" >
|
||
<!-- 顶部导航栏 -->
|
||
<div class="header-nav-bar">
|
||
<div style="display:flex;align-items:center">
|
||
<a href="/" style="display:flex;align-items:center">
|
||
<img src="__IMAGES__/logo.png" alt="orico" class="header-log">
|
||
</a>
|
||
</div>
|
||
<div class="header-nav-items">
|
||
{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-tabs">
|
||
{volist name="header_categorys" id="vo" key="idx"}
|
||
<a href="{:url('product/category', ['id' => $vo.id])}" class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</a>
|
||
{/volist}
|
||
</div>
|
||
{volist name="header_categorys" id="vo" key="idx"}
|
||
<div class="header-dropdown-content header-tab-content {if condition="$idx == 1"}active{/if}" id="tag-{$vo.id}">
|
||
<div class="header-dropdown-category">
|
||
{if condition="!empty($vo.children)"}
|
||
{volist name="vo.children" id="vc"}
|
||
<div class="header-category-box">
|
||
{volist name="vc" id="vcc"}
|
||
<div class="header-category-block">
|
||
<div class="header-category-title">
|
||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}" target="_self">
|
||
{$vcc.name}
|
||
</a>
|
||
</div>
|
||
<ul class="header-category-list">
|
||
{if condition="!empty($vcc.children)"}
|
||
{volist name="vcc.children" id="vccc" length="5"}
|
||
<li class="header-category-item">
|
||
<a href="{:url('product/subcategory', ['id' => $vccc.id])}" target="_self">
|
||
{$vccc.name}
|
||
</a>
|
||
</li>
|
||
{/volist}
|
||
{/if}
|
||
</ul>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
<div class="header-dropdown-products">
|
||
{if condition="!empty($vo.recommends)"}
|
||
{volist name="vo.recommends" id="recommend"}
|
||
<div class="header-product-card">
|
||
<a href="{$recommend.link}">
|
||
<div class="header-product-img">
|
||
<img src="{$recommend.image}" alt="">
|
||
</div>
|
||
<div class="header-product-name">{$recommend.title}</div>
|
||
</a>
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
{if condition="!empty($header_navigation)"}
|
||
{volist name="header_navigation" id="nav"}
|
||
<div class="header-nav-item">
|
||
{if condition="empty($nav.children)"}
|
||
<div class="header-nav-title">
|
||
<a href="{$nav.link}" target="{$nav.blank==1?'_blank':'_self'}">{$nav.name}</a>
|
||
</div>
|
||
{else /}
|
||
<div class="header-nav-title">{$nav.name}</div>
|
||
<div class="header-dropdown">
|
||
<div class="header-dropdown-content1">
|
||
{volist name="nav.children" id="child"}
|
||
<div class="header-product-card-1">
|
||
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}">
|
||
<div class="header-product-img-1">
|
||
<img src="{$child.image}" alt="">
|
||
</div>
|
||
<div class="header-product-title-1">{$child.name}</div>
|
||
<div class="header-product-name-1">{$child.desc}</div>
|
||
</a>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- 右侧功能按钮 -->
|
||
<div class="header-nav-actions">
|
||
<div class="header-search-wrapper">
|
||
<span class="header-nav-btn">
|
||
<img src="__IMAGES__/s1.png" alt="" style="width: 20px;height: 20px;">
|
||
</span>
|
||
<div class="header-search-dropdown" id="searchDropdown">
|
||
<span class="header-search-dropdown-delete-icon">✕</span>
|
||
<div class="header-search-input-wrapper">
|
||
<input type="text" class="header-search-input" placeholder="{:lang_i18n('搜索产品、分类...')}">
|
||
<button class="header-search-submit">{:lang_i18n('搜索')}</button>
|
||
</div>
|
||
<div class="header-search-history" id="searchHistory">
|
||
<div class="header-history-title">
|
||
<span>{:lang_i18n('最近搜索')}</span>
|
||
<span class="header-clear-history" id="clearHistory">{:lang_i18n('清空')}</span>
|
||
</div>
|
||
<div class="header-history-list" id="historyList"></div>
|
||
</div>
|
||
<div class="header-hot-products">
|
||
<div class="header-hot-title">{:lang_i18n('热销产品')}</div>
|
||
<div class="header-hot-product-list">
|
||
{if condition="!empty($header_hot_products)"}
|
||
{volist name="header_hot_products" id="pro"}
|
||
<div class="header-hot-product-item" data-keyword="keyword-{$pro.id}">
|
||
<div class="header-hot-product-img">
|
||
<a href="{:url('product/detail', ['id' => $pro.id])}">
|
||
<img src="{:thumb($pro.cover_image)}" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="header-hot-product-name">{$pro.name}</div>
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-lang-wrapper" >
|
||
<span class="header-nav-btn">
|
||
<img src="__IMAGES__/l1.png" alt="" style="width: 20px;height:20px">
|
||
</span>
|
||
<div class="header-lang-dropdown" id="langDropdown">
|
||
<span class="header-lang-dropdown-delete-icon">✕</span>
|
||
{volist name="header_languages" id="vo"}
|
||
<a href="{$vo.lang_url}" class="header-lang-item" data-lang="zh-CN" target="_self">
|
||
<img src="{$vo.lang_icon}" alt="">
|
||
|
||
{eq name=":cookie('think_lang')" value="zh-cn"}
|
||
<span class="header-lang-code">{$vo.country_zh_name}</span>
|
||
<span class="header-lang-name">{$vo.lang_name}</span>
|
||
{else}
|
||
<span class="header-lang-code">{$vo.country_en_name}</span>
|
||
<span class="header-lang-name-en">{$vo.lang_en_name}</span>
|
||
{/eq}
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
<div class="header-buy-wrapper">
|
||
<button class="header-buy-btn" style="line-height: 1;">
|
||
<img src="__IMAGES__/g1.png" alt="" style="margin-right:5px;width: 14px;height: 14px;">
|
||
|
||
{:lang_i18n('购买')}
|
||
</button>
|
||
<!-- <img src="__IMAGES__/gm.png" alt="" style="margin-right: 3px;"> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 购买下拉框 -->
|
||
<div class="header-buy-dropdown" id="buyDropdown">
|
||
<div class="header-buy-dropdown-content">
|
||
{if condition="!empty($header_mall_entrance)"}
|
||
{volist name="header_mall_entrance" id="ma"}
|
||
<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>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</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');
|
||
|
||
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'));
|
||
|
||
tabs[0].classList.add('active');
|
||
const firstContentId = tabs[0].getAttribute('data-tab');
|
||
const firstContent = document.getElementById(firstContentId);
|
||
if (firstContent) firstContent.classList.add('active');
|
||
}
|
||
}, 350);
|
||
});
|
||
}
|
||
|
||
|
||
|
||
const tabItems = document.querySelectorAll('.header-tab-item');
|
||
const tabContents = document.querySelectorAll('.header-tab-content');
|
||
|
||
tabItems.forEach(tab =>
|
||
{
|
||
tab.addEventListener('mouseenter', () =>
|
||
{
|
||
tabItems.forEach(item => item.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
const tabId = tab.getAttribute('data-tab');
|
||
tabContents.forEach(content =>
|
||
{
|
||
content.classList.remove('active');
|
||
if (content.id === tabId) {
|
||
content.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
let searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]');
|
||
|
||
function renderHistory ()
|
||
{
|
||
const historyList = document.getElementById('historyList');
|
||
const historySection = document.getElementById('searchHistory');
|
||
if (searchHistory.length === 0) {
|
||
historySection.style.display = 'none';
|
||
return;
|
||
}
|
||
historySection.style.display = 'block';
|
||
historyList.innerHTML = searchHistory.map((item, index) => `
|
||
<div class="header-history-item" data-keyword="${item}">
|
||
<span>${item}</span>
|
||
<span class="header-delete-icon" data-index="${index}">✕</span>
|
||
</div>
|
||
`).join('');
|
||
document.querySelectorAll('.header-history-item').forEach(item =>
|
||
{
|
||
const keyword = item.getAttribute('data-keyword');
|
||
const deleteBtn = item.querySelector('.header-delete-icon');
|
||
item.addEventListener('click', (e) =>
|
||
{
|
||
if (e.target === deleteBtn) return;
|
||
performSearch(keyword);
|
||
});
|
||
if (deleteBtn) {
|
||
deleteBtn.addEventListener('click', (e) =>
|
||
{
|
||
e.stopPropagation();
|
||
const index = parseInt(deleteBtn.getAttribute('data-index'));
|
||
searchHistory.splice(index, 1);
|
||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||
renderHistory();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
function addToHistory (keyword)
|
||
{
|
||
if (!keyword.trim()) return;
|
||
searchHistory = searchHistory.filter(item => item !== keyword);
|
||
searchHistory.unshift(keyword);
|
||
if (searchHistory.length > 10) searchHistory.pop();
|
||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||
renderHistory();
|
||
}
|
||
|
||
const clearHistoryBtn = document.getElementById('clearHistory');
|
||
if (clearHistoryBtn) {
|
||
clearHistoryBtn.addEventListener('click', () =>
|
||
{
|
||
searchHistory = [];
|
||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||
renderHistory();
|
||
});
|
||
}
|
||
|
||
function performSearch (keyword)
|
||
{
|
||
if (keyword.trim()) {
|
||
addToHistory(keyword);
|
||
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(keyword);
|
||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||
if (searchInput) searchInput.value = '';
|
||
}
|
||
}
|
||
|
||
const searchBtn = document.querySelector('.header-search-wrapper .header-nav-btn');
|
||
const searchDropdown = document.getElementById('searchDropdown');
|
||
const searchInput = document.querySelector('.header-search-input');
|
||
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');
|
||
|
||
// 语言关闭按钮
|
||
if (langCloseBtn && langCloseBtn) {
|
||
langCloseBtn.addEventListener('click', (e) =>
|
||
{
|
||
e.stopPropagation();
|
||
langDropdown.classList.remove('show');
|
||
|
||
});
|
||
}
|
||
//搜索关闭
|
||
if (searchCloseBtn && searchCloseBtn) {
|
||
searchCloseBtn.addEventListener('click', (e) =>
|
||
{
|
||
|
||
e.stopPropagation();
|
||
searchDropdown.classList.remove('show');
|
||
|
||
});
|
||
}
|
||
// 鼠标移入导航项时，关闭购买下拉框
|
||
const navItems = document.querySelectorAll('.header-nav-item');
|
||
navItems.forEach(item =>
|
||
{
|
||
|
||
item.addEventListener('mouseenter', () =>
|
||
{
|
||
|
||
buyDropdown.classList.remove('show');
|
||
langDropdown.classList.remove('show');
|
||
searchDropdown.classList.remove('show');
|
||
|
||
});
|
||
});
|
||
|
||
if (searchBtn && searchDropdown) {
|
||
searchBtn.addEventListener('click', (e) =>
|
||
{
|
||
e.stopPropagation();
|
||
if (langDropdown) langDropdown.classList.remove('show');
|
||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||
searchDropdown.classList.toggle('show');
|
||
if (searchDropdown.classList.contains('show')) {
|
||
renderHistory();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (searchSubmit) {
|
||
searchSubmit.addEventListener('click', () =>
|
||
{
|
||
performSearch(searchInput.value);
|
||
});
|
||
}
|
||
|
||
if (searchInput) {
|
||
searchInput.addEventListener('keypress', (e) =>
|
||
{
|
||
if (e.key === 'Enter') {
|
||
performSearch(searchInput.value);
|
||
}
|
||
});
|
||
}
|
||
|
||
const hotProducts = document.querySelectorAll('.header-hot-product-item');
|
||
hotProducts.forEach(product =>
|
||
{
|
||
product.addEventListener('click', () =>
|
||
{
|
||
const keyword = product.getAttribute('data-keyword');
|
||
if (keyword) performSearch(keyword);
|
||
});
|
||
});
|
||
|
||
const langBtn = document.querySelector('.header-lang-wrapper .header-nav-btn');
|
||
if (langBtn && langDropdown) {
|
||
langBtn.addEventListener('click', (e) =>
|
||
{
|
||
e.stopPropagation();
|
||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||
langDropdown.classList.toggle('show');
|
||
});
|
||
}
|
||
|
||
const buyWrapper = document.querySelector('.header-buy-wrapper');
|
||
if (buyWrapper && buyDropdown) {
|
||
buyWrapper.addEventListener('click', () =>
|
||
{
|
||
// buyDropdown.classList.add('show');
|
||
buyDropdown.classList.toggle('show');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('click', (e) =>
|
||
{
|
||
if (!e.target.closest('.header-search-wrapper')) {
|
||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||
}
|
||
if (!e.target.closest('.header-lang-wrapper')) {
|
||
if (langDropdown) langDropdown.classList.remove('show');
|
||
}
|
||
if (!e.target.closest('.header-buy-wrapper')) {
|
||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
if (searchDropdown) searchDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||
if (langDropdown) langDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||
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>
|