jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

refactor: pc header数据改两列显示
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
Details

Browse Source
This commit is contained in:
jsasg
2026-04-14 16:57:19 +08:00
parent d79b418310
commit 80d3aa8160
2 changed files with 49 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/index/view/pc/public/header.html
View File

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