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

refactor: pc header.html
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
jsasg
2026-04-15 14:19:39 +08:00
parent 4b5dae8714
commit d6ce8aa2be
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"}
<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>
@@ -193,36 +193,36 @@
<script>
// // 获取所有包含商品卡片的元素
// const productCards = document.querySelectorAll('.header-buy-product-card');
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');
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;
// 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
const hasHoverImg = hoverImg !== null;
// // 如果没有悬浮图，不需要任何交互，直接返回
// if (!hasHoverImg) return;
// 如果没有悬浮图，不需要任何交互，直接返回
if (!hasHoverImg) return;
// // 初始状态确保普通图显示，悬浮图隐藏
// defaultImg.style.opacity = '1';
// hoverImg.style.opacity = '0';
// 初始状态确保普通图显示，悬浮图隐藏
defaultImg.style.opacity = '1';
hoverImg.style.opacity = '0';
// // 鼠标移入事件：显示悬浮图，隐藏普通图
// card.addEventListener('mouseenter', () => {
// defaultImg.style.opacity = '0';
// hoverImg.style.opacity = '1';
// });
// 鼠标移入事件：显示悬浮图，隐藏普通图
card.addEventListener('mouseenter', () => {
defaultImg.style.opacity = '0';
hoverImg.style.opacity = '1';
});
// // 鼠标移出事件：恢复普通图，隐藏悬浮图
// card.addEventListener('mouseleave', () => {
// defaultImg.style.opacity = '1';
// hoverImg.style.opacity = '0';
// });
// });
// 鼠标移出事件：恢复普通图，隐藏悬浮图
card.addEventListener('mouseleave', () => {
defaultImg.style.opacity = '1';
hoverImg.style.opacity = '0';
});
});
//产品列表在hover复位tabs选择
const productNavContainer = document.querySelector('.header-nav-item:first-child');