jsasg
dd3643792b
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 2s
468 lines
21 KiB
HTML
468 lines
21 KiB
HTML
{extend name="public/nas_base" /}
|
||
{block name="style"}
|
||
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
<link rel="stylesheet" href="./css/swiper.css">
|
||
<link rel="stylesheet" href="./css/nav.css">
|
||
<link rel="stylesheet" href="./css/advantage.css">
|
||
<link rel="stylesheet" href="./css/mask.css">
|
||
<link rel="stylesheet" href="./css/product.css">
|
||
<link rel="stylesheet" href="./css/product_list.css">
|
||
<link rel="stylesheet" href="./css/product_card.css">
|
||
<link rel="stylesheet" href="./css/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">×</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">×</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 src="./js/swiper-bundle.min.js"></script>
|
||
<script src="./js/swiper.js"></script>
|
||
<script src="./js/mask.js"></script>
|
||
<script src="./js/product.js"></script>
|
||
{/block}
|