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:
jsasg
2025-11-24 15:58:22 +08:00
committed by liqian
parent 6655095563
commit 41ddd03a25
11 changed files with 2113 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,513 @@
{extend name="public/nas_base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_card.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
{/block}
{block name="header"}
<!-- 重置header头为空 -->
{/block}
{block name="main"}
<a class="header" href="/">
<div class="header-img">
<img src="__IMAGES__/logo.png" alt="">
</div>
</a>
<!-- 轮播核心容器 -->
<div class="swiper-container auto-swiper-container">
{notempty name="data.focus_image"}
<div class="swiper-wrapper">
{volist name="data.focus_image" id="fo"}
<a class="swiper-slide auto-swiper-slide">
<img src="{$fo.image}" alt="{$fo.title}" href="{$fo.link}" />
</a>
{/volist}
</div>
{/notempty}
</div>
<!-- 分类 -->
{notempty name="data.category"}
<div class="nav-box">
{volist name="data.category" id="ca"}
<a class="nav-item" href="https://www.baidu.com">
<img src="{$ca.image}" alt="{$ca.title}">
<p {:style(['color'=>$ca.title_txt_color])}>{$ca.title}</p>
</a>
{/volist}
</div>
{/notempty}
<!-- 500万 -->
{notempty name="data.why_choose"}
<div class="advantage-section">
<h2 class="advantage-section__title">为什么500万+消费者 选择奥睿科?</h2>
<div class="advantage-section__list">
{volist name="data.why_choose" id="ch"}
<div class="advantage-card" data-target="design">
<img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
<div class="advantage-card__content">
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
<img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
</div>
<div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
<div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
</div>
</div>
{/volist}
</div>
</div>
{/notempty}
<!-- 产品差旅充 -->
{notempty name="data.travel_charger"}
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">差旅充</h2>
<p class="product-title-p">出差旅行, 一收就走</p>
</div>
<div class="product-container" >
{assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
<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">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<div class="product-img-hover product-img-1">
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
</div>
</a>
{assign name="tc_first_section_lr" value=":array_shift($data.travel_charger)" /}
<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>
</div>
{assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
{notempty name="tc_second_section"}
<div class="product-card-box">
<div class="product-card-container">
{volist name="tc_second_section" id="tss"}
<a class="product-card" href="{$tss.link}">
<div class="product-card-img">
<img src="{$tss.image}" alt="{$tss.title}">
</div>
<div class="product-card-text">
<div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
<div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
</div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
</div>
</a>
{/volist}
</div>
</div>
{assign name="tc_three_section" value=":array_shift($data.travel_charger)" /}
{notempty name="tc_three_section"}
<a href="{$tc_three_section.link}" class="more">
<div class="more-img">
查看更多
</div>
</a>
{/notempty}
{/notempty}
</div>
{/notempty}
<!-- 产品 家居充-->
{notempty name="data.home_charger"}
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">家居充</h2>
<p class="product-title-p">自在充能, 邂逅生活美学</p>
</div>
<div class="product-container">
{assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
{notempty name="hc_first_section_lf"}
<a class="product-left" href="{$tc_first_section_lf.link}">
<img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<div class="product-img-hover product-img-1">
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
</div>
</a>
{/notempty}
{assign name="hc_first_section_lr" value=":array_shift($data.home_charger)" /}
{notempty name="hc_first_section_lr"}
<div class="product-right">
<img src="{$hc_first_section_lr.image}" alt="{$hc_first_section_lr.title}" class="right-content right-img">
<video src="{$hc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
{/notempty}
</div>
{assign name="hc_second_section" value=":array_splice($data.home_charger, 0, 4)" /}
{notempty name="hc_second_section"}
<div class="product-card-box">
<div class="product-card-container">
{volist name="hc_second_section" id="hcs"}
<a class="product-card" href="#">
<div class="product-card-img">
<img src="{$hcs.image}" alt="{$hcs.short_title}">
</div>
<div class="product-card-text">
<div class="product-card-title">{$hcs.title}</div>
<div class="product-card-desc">{$hcs.short_title}</div>
</div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
</div>
</a>
{/volist}
</div>
</div>
{/notempty}
{assign name="hc_three_section" value=":array_shift($data.home_charger)" /}
{notempty name="hc_three_section"}
<a href="{$hc_three_section.link}" class="more">
<div class="more-img">
查看更多
</div>
</a>
{/notempty}
</div>
{/notempty}
<!-- 产品 桌面充（悬浮图上右超出）底部列表样式不一样(左文右图) -->
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">桌面充</h2>
<p class="product-title-p">精致桌面 高效美学</p>
</div>
<div class="product-container">
{assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
{notempty name="dc_first_section_lf"}
<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">
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
</div>
</a>
{/notempty}
{assign name="dc_first_section_lr" value=":array_shift($data.desktop_charger)" /}
{notempty name="dc_first_section_lr"}
<div class="product-right">
<img src="{$dc_first_section_lr.image}"
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 style="display: none;">
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
{/notempty}
</div>
<div class="product-card-box">
<div class="product-card-container2">
<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双向取电插排">
</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双向取电插排">
</div>
</a>
</div>
</div>
<a href="#" class="more">
<div class="more-img">
查看更多
</div>
</a>
</div>
<!-- 墙插 -->
<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">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<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">
<div class="more-img">
查看更多
</div>
</a>
</div>
<!-- 转换器 -->
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">转换器</h2>
<p class="product-title-p">随你看世界</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">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<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>
<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">
<div class="more-img">
查看更多
</div>
</a>
</div>
<!-- 底部 -->
<div class="footer">
<div class="footer-img">
<img src="./img/footer.png" alt="">
</div>
</div>
<!-- 蒙版 -->
<div class="mask" id="mask">
<div class="mask-content" >
<span class="close-btn">&times;</span>
</div>
</div>
{/block}
{block name="footer"}
<!-- 重置footer头为空 -->
{/block}
{block name="script"}
<script type="text/javascript">
const advantageItems = document.querySelectorAll('.advantage-card');
const mask = document.getElementById('mask');
const closeBtn = document.querySelector('.close-btn');
const maskContent = document.querySelector('.mask-content');
const mackContentText = document.querySelector('.mack-conten-text');
let closeBtnHtml = null
let scrollTop = 0; // 保存页面滚动位置
// 显示蒙版：禁止滚动 + 保存滚动位置
function createCloseBtn() {
if (closeBtnHtml) {
closeBtnHtml.remove();
}
// 创建关闭按钮元素
closeBtnHtml = document.createElement('span');
closeBtnHtml.className = 'close-btn';
closeBtnHtml.innerHTML = '&times;'; // 关闭符号（×）
// 绑定关闭事件
closeBtnHtml.addEventListener('click', hideMask);
// 添加到maskScrollContent（作为第一个子元素）
maskContent.prepend(closeBtnHtml);
}
function showMask(contentHtml) {
// 保存当前页面滚动位置（避免 fixed 导致页面跳顶）
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
maskContent.innerHTML = contentHtml;
createCloseBtn()
// 显示蒙版
mask.style.display = 'flex';
// 禁止 html + body 滚动
document.documentElement.classList.add('no-scroll');
document.body.classList.add('no-scroll');
// 强制让页面停留在原滚动位置（关键！）
document.body.style.top = `-${scrollTop}px`;
}
// 隐藏蒙版：恢复滚动 + 还原滚动位置
function hideMask() {
// 隐藏蒙版
mask.style.display = 'none';
// 恢复 html + body 滚动
document.documentElement.classList.remove('no-scroll');
document.body.classList.remove('no-scroll');
maskContent.innerHTML = ""
// 还原页面到之前的滚动位置
window.scrollTo(0, scrollTop);
document.body.style.top = ''; // 清除临时样式
}
// 点击卡片显示详情
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);
}
});
});
// 关闭按钮事件
closeBtn.addEventListener('click', hideMask);
// 点击蒙版背景关闭（可选）
mask.addEventListener('click', (e) => {
if (e.target === mask) hideMask();
});
// ESC 键关闭（可选）
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && mask.style.display === 'flex') hideMask();
});
// 关键：拦截蒙版的 touchmove 事件，阻止滚动穿透（移动端核心）
mask.addEventListener(
'touchmove',
(e) => {
// 只有点击蒙版背景（不是内容区域）才阻止滚动
if (e.target === mask) {
e.preventDefault(); // 阻止默认触摸滚动行为
e.stopPropagation(); // 阻止事件冒泡
}
},
{ passive: false }
); // passive: false 必须，否则 preventDefault 无效
const allVideos = document.querySelectorAll('.right-video');
// 停止所有视频播放
function stopAllVideos() {
allVideos.forEach((video) => {
video.pause();
video.style.display = 'none';
// 显示对应图片
const img = video.parentElement.querySelector('.right-img');
if (img) img.style.display = 'block';
});
}
// 滚动切换图片/视频（核心逻辑）
window.addEventListener('scroll', function () {
const productRights = document.querySelectorAll('.product-right');
let activeVideo = null;
// 找出当前在视口中的视频容器
productRights.forEach((rightContainer) => {
const img = rightContainer.querySelector('.right-img');
const video = rightContainer.querySelector('.right-video');
if (!img || !video) return;
const rect = rightContainer.getBoundingClientRect();
// 视口判断：容器进入视口50%以上视为活跃
const isInView =
rect.top < window.innerHeight * 0.7 &&
rect.bottom > window.innerHeight * 0.3;
if (isInView) {
activeVideo = video;
}
});
// 处理活跃视频
if (activeVideo) {
stopAllVideos(); // 先停止其他视频
const img = activeVideo.parentElement.querySelector('.right-img');
img.style.display = 'none';
activeVideo.style.display = 'block';
// 自动播放（兼容原生控制栏，用户手动暂停后不会强制播放）
if (activeVideo.paused) {
activeVideo.play().catch((err) => {
console.log('视频播放失败（浏览器限制）：', err);
// 播放失败时回退到图片
activeVideo.style.display = 'none';
img.style.display = 'block';
});
}
} else {
stopAllVideos(); // 无活跃视频时停止所有播放
}
});
</script>
{/block}