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

refactor: 专题 - 电力品线

Browse Source
This commit is contained in:
liqian
2025-11-25 17:36:09 +08:00
parent 8186e859d2
commit 517aa9fd01
10 changed files with 741 additions and 719 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/index/view/pc/topic_power_prodline/index.html
View File

@@ -194,7 +194,7 @@
<a class="product-left" href="{$tc_first_section_lf.link}">
<img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
<div class="product-img-hover product-img-2">
<div class="product-img-hover product-img-2" >
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
</div>
</a>
@@ -299,8 +299,10 @@
{notempty name="cts_lf"}
<a class="product-left" href="{$cts_lf.link}">
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<div class="product-img-hover product-img-1">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<!--style="display:flex;justify-content: center;"-->
<div class="product-img-hover product-img-1" >
<!-- style="width:70%"-->
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
</div>
</a>
@@ -400,24 +402,24 @@
// 点击卡片显示详情
advantageItems.forEach((item) => {
item.addEventListener('click', (e) => {
// 获取当前点击卡片内的.mack-conten-text元素
const currentMackContent = e.currentTarget.querySelector('.mack-conten-text');
if (currentMackContent) {
// 关键修改：获取该元素的子内容（innerHTML 本身就是内部HTML，不含当前元素标签）
// 若想更彻底，可遍历子节点拼接内容（兼容特殊场景）
let contentHtml = '';
Array.from(currentMackContent.childNodes).forEach(child => {
// 只保留元素节点和文本节点（过滤空节点）
if (child.nodeType === 1 || child.nodeType === 3) {
contentHtml += child.outerHTML || child.textContent;
}
});
// 显示蒙版并传入纯净的子内容
showMask(contentHtml);
}
item.addEventListener('click', (e) => {
// 获取当前点击卡片内的.mack-conten-text元素
const currentMackContent = e.currentTarget.querySelector('.mack-conten-text');
if (currentMackContent) {
// 关键修改：获取该元素的子内容（innerHTML 本身就是内部HTML，不含当前元素标签）
// 若想更彻底，可遍历子节点拼接内容（兼容特殊场景）
let contentHtml = '';
Array.from(currentMackContent.childNodes).forEach(child => {
// 只保留元素节点和文本节点（过滤空节点）
if (child.nodeType === 1 || child.nodeType === 3) {
contentHtml += child.outerHTML || child.textContent;
}
});
// 显示蒙版并传入纯净的子内容
showMask(contentHtml);
}
});
});
});
// 关闭按钮事件
closeBtn.addEventListener('click', hideMask);
// 点击蒙版背景关闭（可选）
@@ -463,8 +465,9 @@
productRights.forEach((rightContainer) => {
const img = rightContainer.querySelector('.right-img');
const video = rightContainer.querySelector('.right-video');
const videoSrc = video.src.trim()
if (!img || !video) return;
if(!videoSrc) return;
const rect = rightContainer.getBoundingClientRect();
// 视口判断：容器进入视口50%以上视为活跃
const isInView =