refactor: pc header.html
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
This commit is contained in:
@@ -13,7 +13,7 @@
|
|||||||
{if condition="!empty($header_categorys)"}
|
{if condition="!empty($header_categorys)"}
|
||||||
<div class="header-nav-item">
|
<div class="header-nav-item">
|
||||||
<div class="header-nav-title">{:lang_i18n('产品列表')}</div>
|
<div class="header-nav-title">{:lang_i18n('产品列表')}</div>
|
||||||
<div class="header-dropdown" style="display: block;">
|
<div class="header-dropdown" >
|
||||||
<div class="header-dropdown-tabs">
|
<div class="header-dropdown-tabs">
|
||||||
{volist name="header_categorys" id="vo" key="idx"}
|
{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>
|
<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>
|
<script>
|
||||||
|
|
||||||
// // 获取所有包含商品卡片的元素
|
// // 获取所有包含商品卡片的元素
|
||||||
// const productCards = document.querySelectorAll('.header-buy-product-card');
|
const productCards = document.querySelectorAll('.header-buy-product-card');
|
||||||
|
|
||||||
// productCards.forEach(card => {
|
productCards.forEach(card => {
|
||||||
// // 获取卡片内的图片容器和两张图片
|
// 获取卡片内的图片容器和两张图片
|
||||||
// const imgContainer = card.querySelector('.header-buy-product-img');
|
const imgContainer = card.querySelector('.header-buy-product-img');
|
||||||
// const defaultImg = imgContainer?.querySelector('.header-default-img');
|
const defaultImg = imgContainer?.querySelector('.header-default-img');
|
||||||
// const hoverImg = imgContainer?.querySelector('.header-hover-img');
|
const hoverImg = imgContainer?.querySelector('.header-hover-img');
|
||||||
|
|
||||||
// // 检查悬浮图是否存在(因为HTML中用了if判断,所以可能有也可能没有这个元素)
|
// 检查悬浮图是否存在(因为HTML中用了if判断,所以可能有也可能没有这个元素)
|
||||||
// const hasHoverImg = hoverImg !== null;
|
const hasHoverImg = hoverImg !== null;
|
||||||
|
|
||||||
// // 如果没有悬浮图,不需要任何交互,直接返回
|
// 如果没有悬浮图,不需要任何交互,直接返回
|
||||||
// if (!hasHoverImg) return;
|
if (!hasHoverImg) return;
|
||||||
|
|
||||||
// // 初始状态确保普通图显示,悬浮图隐藏
|
// 初始状态确保普通图显示,悬浮图隐藏
|
||||||
// defaultImg.style.opacity = '1';
|
defaultImg.style.opacity = '1';
|
||||||
// hoverImg.style.opacity = '0';
|
hoverImg.style.opacity = '0';
|
||||||
|
|
||||||
// // 鼠标移入事件:显示悬浮图,隐藏普通图
|
// 鼠标移入事件:显示悬浮图,隐藏普通图
|
||||||
// card.addEventListener('mouseenter', () => {
|
card.addEventListener('mouseenter', () => {
|
||||||
// defaultImg.style.opacity = '0';
|
defaultImg.style.opacity = '0';
|
||||||
// hoverImg.style.opacity = '1';
|
hoverImg.style.opacity = '1';
|
||||||
// });
|
});
|
||||||
|
|
||||||
// // 鼠标移出事件:恢复普通图,隐藏悬浮图
|
// 鼠标移出事件:恢复普通图,隐藏悬浮图
|
||||||
// card.addEventListener('mouseleave', () => {
|
card.addEventListener('mouseleave', () => {
|
||||||
// defaultImg.style.opacity = '1';
|
defaultImg.style.opacity = '1';
|
||||||
// hoverImg.style.opacity = '0';
|
hoverImg.style.opacity = '0';
|
||||||
// });
|
});
|
||||||
// });
|
});
|
||||||
//产品列表在hover复位tabs选择
|
//产品列表在hover复位tabs选择
|
||||||
const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user