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

调整产品列表
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 17:35:27 +08:00
parent 80d3aa8160
commit a18ff844a4
2 changed files with 40 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,7 +102,7 @@
<div class="header-nav-actions">
<div class="header-search-wrapper">
<span class="header-nav-btn">
<img src="__IMAGES__/s1.png" alt="" style="width: 17px;height: 17px;">
<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>
@@ -190,37 +190,37 @@
<div id="mhk"></div>
<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');

36
public/static/index/pc/css/header.css
View File

@@ -323,37 +323,29 @@ a {
/* 左侧6个分类区块 */
.header-dropdown-category {
/* display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 1; */
display: flex;
flex: 1;
margin-right: 24px;
}
.header-category-box {
display: flex;
justify-content: space-between;
margin-top:1.7em;
}
.header-category-box:nth-child(1) {
margin-top: 0;
flex-direction: column;
flex:1;
max-width: 362px;
margin-right:1.5em;
gap: 1.7em 0;
}
/* 单个分类区块 */
.header-category-block {
flex: 1;
box-sizing: border-box;
max-width: 362px;
width: 22.625em;
}
/* .header-category-block:nth-child(5) {
margin-bottom: 0;
}
.header-category-block:nth-child(6) {
margin-bottom: 0;
} */
.header-category-title {
font-size: 1em;
@@ -401,7 +393,7 @@ a {
justify-content: space-between;
flex: 1;
min-width: 0;
gap: 1.5em 0;
}
@@ -437,11 +429,11 @@ a {
.header-product-card:nth-child(3) {
margin-right: 1.5em;
margin-top: 0;
margin-top: 1.5em;
}
.header-product-card:nth-child(4) {
margin-top: 0;
margin-top: 1.5em;
}
/*.header-product-img {*/