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

refactor: 专题 - 电力品线pc端

Browse Source
This commit is contained in:
liqian
2025-11-25 14:56:57 +08:00
parent f48e1d0a5b
commit 710a066db4
1 changed files with 75 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,6 +73,7 @@
</div>
<div class="product-container" >
{assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
{notempty name="tc_first_section_lf"}
<a class="product-left" href="{$tc_first_section_lf.link}">
<img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
@@ -80,13 +81,16 @@
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
</div>
</a>
{/notempty}
{assign name="tc_first_section_lr" value=":array_shift($data.travel_charger)" /}
{notempty name="tc_first_section_lr"}
<div class="product-right">
<img src="{$tc_first_section_lr.image}" alt="{$tc_first_section_lr.title}" class="right-content right-img">
<video src="{$tc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
{/notempty}
</div>
{assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
{notempty name="tc_second_section"}
@@ -208,150 +212,136 @@
</div>
{/notempty}
</div>
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
{notempty name="dc_second_section"}
<div class="product-card-box">
<div class="product-card-container2">
<a class="product-card2" href="#">
{volist name="dc_second_section" id="dcs"}
<a class="product-card2" href="{$dcs.link}">
<div class="product-text2">
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
<div class="product-text-content2">
<div class="product-card-title2">安全 精准掌控 超长标题测试示例内容</div> <!-- 测试超出一行省略 -->
<div class="product-card-desc2">12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸</div> <!-- 测试超出2行省略 -->
<div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
<div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
<div class="product-card-link2">
<img src="./img/ljgd.png" alt="了解更多">
<img src="__IMAGES__/ljgd.png" alt="了解更多">
</div>
</div>
</div>
<div class="product-card-img2">
<img src="./img/zm-2.png" alt="10口合1双向取电插排">
</div>
</a>
<a class="product-card2" href="#">
<div class="product-text2">
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
<div class="product-text-content2">
<div class="product-card-title2">安全 精准掌控 超长标题测试示例内容</div> <!-- 测试超出一行省略 -->
<div class="product-card-desc2">12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸</div> <!-- 测试超出2行省略 -->
<div class="product-card-link2">
<img src="./img/ljgd.png" alt="了解更多">
</div>
</div>
</div>
<div class="product-card-img2">
<img src="./img/zm-2.png" alt="10口合1双向取电插排">
<img src="{$dcs.image}" alt="{$dcs.title}">
</div>
</a>
{/volist}
</div>
</div>
<a href="#" class="more">
{/notempty}
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
{notempty name="dc_three_section"}
<a href="{$dc_three_section.link}" class="more">
<div class="more-img">
查看更多
</div>
</a>
{/notempty}
</div>
<!-- 墙插 -->
{notempty name="data.wall_charger"}
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">墙插</h2>
<p class="product-title-p">1转多</p>
</div>
<div class="product-container">
<a class="product-left" href="{$tc_first_section_lf.link}">
<img src="./img/jjbj.png" alt="65W快充插座" class="product-img">
{assign name="wc_first_section_lf" value=":array_shift($data.wall_charger)" /}
{notempty name="wc_first_section_lf"}
<a class="product-left" href="{$wc_first_section_lf.link}">
<img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<div class="product-img-hover product-img-1">
<img src="./img/jj-4.png" alt="产品细节图">
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
</div>
</a>
{/notempty}
{assign name="wc_first_section_lr" value=":array_shift($data.wall_charger)" /}
{notempty name="wc_first_section_lr"}
<div class="product-right">
<img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
alt="使用场景" class="right-content right-img">
<video
src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
class="right-content right-video" muted loop playsinline controls>
<img src="{$wc_first_section_lr.image}" alt="{$wc_first_section_lr.title}" class="right-content right-img">
<video src="{$wc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
{/notempty}
</div>
<a href="#" class="more">
{assign name="wc_more_section" value=":array_shift($data.wall_charger)" /}
{notempty name="wc_more_section"}
<a href="{$wc_more_section.link}" class="more">
<div class="more-img">
查看更多
</div>
</a>
{/notempty}
</div>
{/notempty}
{notempty name="data.converter"}
<!-- 转换器 -->
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">转换器</h2>
<p class="product-title-p">随你看世界</p>
</div>
{assign name="ct_more_section" value=":array_pop($data.converter)" /}
{assign name="ct_chunk_section" value=":array_chunk($data.converter, 2)" /}
{assign name="ct_chunk_section_len" value=":count($ct_chunk_section)" /}
{volist name="ct_chunk_section" id="cts" key="k"}
<div class="product-container">
<a class="product-left" href="{$tc_first_section_lf.link}">
<img src="./img/jjbj.png" alt="65W快充插座" class="product-img">
{assign name="cts_lf" value=":array_shift($cts)" /}
{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">
<img src="./img/jj-4.png" alt="产品细节图">
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
</div>
</a>
{/notempty}
{assign name="cts_lr" value=":array_shift($cts)" /}
{notempty name="cts_lr"}
<div class="product-right">
<img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
alt="使用场景" class="right-content right-img">
<video
src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
class="right-content right-video" muted loop playsinline controls>
<img src="{$cts_lr.image}" alt="{$cts_lr.title}" class="right-content right-img">
<video src="{$cts_lr.video}" class="right-content right-video" muted loop playsinline controls>
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
{/notempty}
</div>
{neq name="k" value="$ct_chunk_section_len"}
<div class="line"></div>
<div class="product-container">
<a class="product-left" href="{$tc_first_section_lf.link}">
<img src="./img/jjbj.png" alt="65W快充插座" class="product-img">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<div class="product-img-hover product-img-1">
<img src="./img/jj-4.png" alt="产品细节图">
</div>
</a>
<div class="product-right">
<img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
alt="使用场景" class="right-content right-img">
<video
src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
class="right-content right-video" muted loop playsinline controls>
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
</div>
<a href="#" class="more">
{/neq}
{/volist}
{notempty name="ct_more_section"}
<a href="{$ct_more_section.link}" class="more">
<div class="more-img">
查看更多
</div>
</a>
{/notempty}
</div>
{/notempty}
{notempty name="data.footer_info"}
<!-- 底部 -->
<div class="footer">
<div class="footer-img">
<img src="./img/footer.png" alt="">
<img src="{$data.footer_info.0.image}" alt="">
</div>
</div>
<!-- 蒙版 -->
<div class="mask" id="mask">
<div class="mask-content" >
<span class="close-btn">&times;</span>
</div>
{/notempty}
<!-- 蒙版 -->
<div class="mask" id="mask">
<div class="mask-content" >
<span class="close-btn">&times;</span>
</div>
{/block}
{block name="footer"}
<!-- 重置footer头为空 -->
</div>
{/block}
{block name="script"}
<script type="text/javascript">
@@ -368,16 +358,16 @@
closeBtnHtml.remove();
}
// 创建关闭按钮元素
closeBtnHtml = document.createElement('span');
closeBtnHtml.className = 'close-btn';
closeBtnHtml.innerHTML = '&times;'; // 关闭符号（×）
// 创建关闭按钮元素
closeBtnHtml = document.createElement('span');
closeBtnHtml.className = 'close-btn';
closeBtnHtml.innerHTML = '&times;'; // 关闭符号（×）
// 绑定关闭事件
closeBtnHtml.addEventListener('click', hideMask);
// 绑定关闭事件
closeBtnHtml.addEventListener('click', hideMask);
// 添加到maskScrollContent（作为第一个子元素）
maskContent.prepend(closeBtnHtml);
// 添加到maskScrollContent（作为第一个子元素）
maskContent.prepend(closeBtnHtml);
}
function showMask(contentHtml) {
@@ -453,9 +443,6 @@
{ passive: false }
); // passive: false 必须，否则 preventDefault 无效
const allVideos = document.querySelectorAll('.right-video');
// 停止所有视频播放
function stopAllVideos() {