jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity
Files
2df5c929d6b1abaacac51a1695c59a5585e56645
orico-official-website/app/index/view/pc/topic_power_prodline/index.html
jsasg 2df5c929d6
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details
refactor: 主题 - 电力品线
2025-11-24 16:17:17 +08:00

558 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{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/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="https://www.orico.com.cn/">
<div class="header-img">
<img src="https://www.orico.com.cn/static/index/pc/images/logo.png" alt="">
</div>
</a>
<!-- 轮播核心容器 -->
<div class="swiper-container auto-swiper-container">
<div class="swiper-wrapper">
<a class="swiper-slide auto-swiper-slide">
<img src="https://www.orico.com.cn/storage/images/banner/20250719/33bb92abb7d43726417b6c8358dd4e10.webp"
alt="测试" href="https://www.baidu.com">
</a>
<a class="swiper-slide auto-swiper-slide">
<img src="https://www.orico.com.cn//storage/images/banner/20251031/b83b88c183a059cfb385c2a721564aff.webp"
alt="测试" href="https://www.baidu.com">
</a>
</div>
</div>
<!-- 导航 -->
<div class="nav-box">
<a class="nav-item" href="https://www.baidu.com">
<img src="./img/1.png" alt="差旅充">
<p>差旅充</p>
</a>
<a class="nav-item" href="https://www.baidu.com">
<img src="./img/2.png" alt="居家充">
<p>居家充</p>
</a>
<a class="nav-item" href="https://www.baidu.com">
<img src="./img/3.png" alt="桌面充">
<p>桌面充</p>
</a>
<a class="nav-item" href="https://www.baidu.com">
<img src="./img/4.png" alt="墙墙插">
<p>墙墙插</p>
</a>
<a class="nav-item" href="https://www.baidu.com">
<img src="./img/5.png" alt="转换器">
<p>转换器</p>
</a>
</div>
<!-- 500万 -->
<div class="advantage-section">
<h2 class="advantage-section__title">为什么500万+消费者 选择奥睿科?</h2>
<div class="advantage-section__list">
<!-- 设计 -->
<div class="advantage-card" data-target="design">
<img src="./img/500-1.png" alt="设计：岂止于满电，处处皆美学" class="advantage-card__img">
<div class="advantage-card__content">
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading">设计</div>
<!-- <i class="card-arrow fa-solid fa-arrow-right" aria-hidden="true"></i> -->
<img src="./img/jiant.png" alt="" class="card-arrow">
</div>
<p class="advantage-card__description">岂止于满电,处处皆美学</p>
</div>
</div>
<!-- 随行 -->
<div class="advantage-card" data-target="travel">
<img src="./img/500-2.png" alt="随行：陪你看世界" class="advantage-card__img">
<div class="advantage-card__content">
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading">随行</div>
<img src="./img/jiant.png" alt="" class="card-arrow">
</div>
<p class="advantage-card__description">陪你看世界</p>
</div>
</div>
<!-- 快充 -->
<div class="advantage-card" data-target="fastcharge">
<img src="./img/500-3.png" alt="快充：低温快充，氮化镓黑科技" class="advantage-card__img">
<div class="advantage-card__content">
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading">快充</div>
<img src="./img/jiant.png" alt="" class="card-arrow">
</div>
<p class="advantage-card__description">低温快充,氮化镓黑科技</p>
</div>
</div>
<!-- 安全 -->
<div class="advantage-card" data-target="safety">
<img src="./img/500-4.png" alt="安全：12年安全快充技术沉淀" class="advantage-card__img">
<div class="advantage-card__content">
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading">安全</div>
<img src="./img/jiant.png" alt="" class="card-arrow">
</div>
<p class="advantage-card__description">12年安全快充技术沉淀</p>
</div>
</div>
<!-- 引领 -->
<div class="advantage-card" data-target="lead">
<img src="./img/500-5.png" alt="引领：USB插排开创者" class="advantage-card__img">
<div class="advantage-card__content">
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading">引领</div>
<img src="./img/jiant.png" alt="" class="card-arrow">
</div>
<p class="advantage-card__description">USB插排开创者</p>
</div>
</div>
</div>
</div>
<!-- 蒙版 -->
<div class="mask" id="mask">
<div class="mask-content" id="design">
<span class="close-btn">&times;</span>
<img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
alt="设计详情" class="detail-img">
<div class="detail-info">
<h2 class="detail-title">设计：岂止于满电，处处皆美学</h2>
<p class="detail-desc">
奥睿科坚持"科技与美学融合"的设计理念，每一款产品都经过数百次打磨。从极简主义的外观设计，到人体工学的握持手感，再到多彩配色的个性化选择，让充电设备不再是冰冷的工具，而是生活中的美学单品。无论是办公场景的沉稳大气，还是户外出行的时尚便携，都能完美适配你的生活方式。
</p>
<p class="detail-desc">产品设计团队荣获多项国际设计大奖，将细节做到极致：圆润的边角处理、细腻的磨砂质感、隐藏式接口设计，兼顾美观与实用性，让充电体验更具仪式感。</p>
</div>
</div>
<span class="close-btn">&times;</span>
<img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
alt="引领详情" class="detail-img">
</div>
</div>
<!-- 产品差旅充 -->
<div class="product-box">
<div class="product-title">
<h2 class="product-title-h2">差旅充</h2>
<p class="product-title-p">出差旅行, 一收就走</p>
</div>
<a class="product-container" href="#">
<div class="product-left">
<img src="./img/clbj.png" alt="65W快充插座" class="product-img">
<!-- 公共类+定位类：尺寸统一，定位不同 -->
<div class="product-img-hover product-img-1">
<img src="./img/cl-1.png" alt="产品细节图">
</div>
</div>
<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>
</a>
<div class="product-card-box">
<div class="product-card-container">
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="12口合1分控插排">
</div>
<div class="product-card-text">
<div class="product-card-title">安全 精准掌控</div>
<div class="product-card-desc">12口合1 分控插排 安全可靠 多设备适配</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</div>
</a>
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="10口合1双向取电插排">
</div>
<div class="product-card-text">
<div class="product-card-title">双向取电 高效又整洁</div>
<div class="product-card-desc">10口合1 双向取电（仅1行文字）</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</div>
</a>
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="7口合1多向取电插排">
</div>
<div class="product-card-text">
<div class="product-card-title">1秒收纳 秩序美学</div>
<div class="product-card-desc">7口合1 多向取电 便携小巧 居家必备 超长描述测试（截断为2行）</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</div>
</a>
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="10口合1独立开关插排">
</div>
<div class="product-card-text">
<div class="product-card-title">独立开关 10口合1</div>
<div class="product-card-desc">少插拔 更安心（仅1行文字）</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</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">自在充能, 邂逅生活美学</p>
</div>
<div class="product-container">
<div class="product-left">
<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>
</div>
<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="product-card-box">
<div class="product-card-container">
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="12口合1分控插排">
</div>
<div class="product-card-text">
<div class="product-card-title">安全 精准掌控</div>
<div class="product-card-desc">12口合1 分控插排 安全可靠 多设备适配</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</div>
</a>
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="10口合1双向取电插排">
</div>
<div class="product-card-text">
<div class="product-card-title">双向取电 高效又整洁</div>
<div class="product-card-desc">10口合1 双向取电（仅1行文字）</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</div>
</a>
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="7口合1多向取电插排">
</div>
<div class="product-card-text">
<div class="product-card-title">1秒收纳 秩序美学</div>
<div class="product-card-desc">7口合1 多向取电 便携小巧 居家必备 超长描述测试（截断为2行）</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</div>
</a>
<a class="product-card" href="#">
<div class="product-card-img">
<img src="./img/jj-3.png" alt="10口合1独立开关插排">
</div>
<div class="product-card-text">
<div class="product-card-title">独立开关 10口合1</div>
<div class="product-card-desc">少插拔 更安心（仅1行文字）</div>
</div>
<div class="product-card-link">
<img src="./img/ljgd.png" alt="查看更多">
</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">
<div class="product-left">
<img src="./img/zmbg.png" alt="墙插" class="product-img">
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
<div class="product-img-hover product-img-2">
<img src="./img/zm.png" alt="墙插细节图">
</div>
</div>
<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 style="display: none;">
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
</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">
<div class="product-left">
<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>
</div>
<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">
<div class="product-left">
<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>
</div>
<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">
<div class="product-left">
<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>
</div>
<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>
{/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 maskContents = document.querySelectorAll('.mask-content');
const closeBtns = document.querySelectorAll('.close-btn');
// 点击卡片显示详情
advantageItems.forEach((item) => {
item.addEventListener('click', () => {
const targetId = item.getAttribute('data-target');
maskContents.forEach((content) => {
content.style.display = 'none';
});
document.getElementById(targetId).style.display = 'flex';
mask.style.display = 'flex';
const detailInfo = document
.getElementById(targetId)
.querySelector('.detail-info');
if (detailInfo) detailInfo.scrollTop = 0;
});
});
// 关闭蒙版
closeBtns.forEach((btn) => {
btn.addEventListener('click', () => {
mask.style.display = 'none';
});
});
mask.addEventListener('click', (e) => {
if (e.target === mask) {
mask.style.display = 'none';
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && mask.style.display === 'flex') {
mask.style.display = 'none';
}
});
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}
Reference in New Issue View Git Blame Copy Permalink