liqian
5740437cf5
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 5s
1213 lines
48 KiB
HTML
1213 lines
48 KiB
HTML
{extend name="public/base" /}
|
||
{block name="style"}
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/header.css">
|
||
<link rel="stylesheet" href="__CSS__/before-after.min.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/swiper.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/footer.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/index.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/swiper.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/amd.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/yq.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/progress.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/readon.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/wift.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/m2.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/45w.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/fs.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/xn.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/ips.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/rgb.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/qb.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/xh.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/jk.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/th.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/lb.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/windows.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/bottom.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/wift6.css">
|
||
<script type="text/javascript">
|
||
(function (doc, win)
|
||
{
|
||
var docEl = doc.documentElement;
|
||
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
|
||
// 设计稿基准宽度改为2560px
|
||
var designWidth = 2560;
|
||
// 设计稿下1rem对应的px值（2560px下1rem=100px）
|
||
var designRemPx = 100;
|
||
|
||
function setRootFontSize ()
|
||
{
|
||
var clientWidth = docEl.clientWidth;
|
||
if (!clientWidth) return;
|
||
// 计算font-size：屏幕宽度/分割值（25.6）
|
||
var fontSize = (clientWidth / designWidth) * designRemPx;
|
||
// 关键：限制最小值（避免小屏幕下rem过小，内容不可读）
|
||
// 例如：最小1rem=20px（对应屏幕宽度512px，可调整）
|
||
fontSize = Math.max(fontSize, 20);
|
||
// 可选：限制最大值（若2560px以上屏幕不想继续放大）
|
||
fontSize = Math.min(fontSize, designRemPx);
|
||
docEl.style.fontSize = fontSize + 'px';
|
||
}
|
||
|
||
setRootFontSize();
|
||
win.addEventListener(resizeEvt, setRootFontSize);
|
||
doc.addEventListener('DOMContentLoaded', setRootFontSize);
|
||
})(document, window);
|
||
</script>
|
||
{/block}
|
||
{block name="main"}
|
||
<!-- 轮播核心容器 -->
|
||
<div class="swiper-container auto-swiper-container">
|
||
<div class="swiper-wrapper">
|
||
<a class="swiper-slide auto-swiper-slide">
|
||
<img src="__IMAGES__/topic_laptop/banner1.png" alt="测试" href="https://www.baidu.com">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- 性能 -->
|
||
<div class="amd-box">
|
||
<div class="amd-img-box">
|
||
<div class="amd-img-1 opacity0" data-order="1" data-name="AMD主图">
|
||
<img src="__IMAGES__/topic_laptop/amd1.png" alt="amd图片" class="amd-img-1-1">
|
||
</div>
|
||
<div class="amd-img-2 opacity0" data-order="2" data-name="飓风+显卡图">
|
||
<div class="amd-img-2-1"><img src="__IMAGES__/topic_laptop/amd2.png" alt="飓风图片"></div>
|
||
<div class="amd-img-2-2"><img src="__IMAGES__/topic_laptop/amd3.png" alt="显卡图片"></div>
|
||
</div>
|
||
<div class="amd-img-3 opacity0" data-order="3" data-name="飓风分栏图">
|
||
<div class="amd-img-3-left"><img src="__IMAGES__/topic_laptop/amd4.png" alt="飓风图片" class="amd-img-3-1-left"></div>
|
||
<div class="amd-img-3-right">
|
||
<div class="amd-img-3-1-right"><img src="__IMAGES__/topic_laptop/amd5.png" alt="飓风图片"></div>
|
||
<div class="amd-img-3-2-right"><img src="__IMAGES__/topic_laptop/amd6.png" alt="飓风图片"></div>
|
||
</div>
|
||
</div>
|
||
<div class="amd-img-4 opacity0" data-order="4" data-name="功能图">
|
||
<img src="__IMAGES__/topic_laptop/amd7.png" alt="">
|
||
</div>
|
||
<div class="amd-img-5 opacity0" data-order="5" data-name="功能双图">
|
||
<img src="__IMAGES__/topic_laptop/amd8.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/amd9.png" alt="">
|
||
</div>
|
||
<div class="amd-img-6 opacity0" data-order="6" data-name="Windows图">
|
||
<img src="__IMAGES__/topic_laptop/amd10.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 引擎 -->
|
||
<div class="fullscreen-img-container" style="background: url('__IMAGES__/topic_laptop/yq1.png');background-size:100% auto">
|
||
<div class="overlay-text opacity0" data-order="7">
|
||
<h2>超能引擎 性能拉满</h2>
|
||
<p>强悍「芯」实力 定义性能新标杆</p>
|
||
</div>
|
||
<div class="float-cards opacity0" data-order="8" >
|
||
<img class="float-card" src="__IMAGES__/topic_laptop/yq2.png" alt="核心卡片">
|
||
<img class="float-card" src="__IMAGES__/topic_laptop/yq3.png" alt="线程卡片">
|
||
<img class="float-card" src="__IMAGES__/topic_laptop/yq4.png" alt="频率卡片">
|
||
</div>
|
||
</div>
|
||
<!-- 引擎描述 -->
|
||
<div class="bottom-desc">
|
||
搭载高性能CPU与GPU，多任务并行流畅不卡顿
|
||
</div>
|
||
<!-- 引擎进度条 写死在前端(后台配置太繁琐)-->
|
||
<div class="container">
|
||
<h1 class="progress-title">CineBench R23 多核跑分</h1>
|
||
<div class="progress-section">
|
||
<div class="progress-item">
|
||
<div class="progress-bar-container">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill m4-max" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<span class="device-name colorLinearGradient">Ryzen7 7735HS:</span>
|
||
<span class="value m4-max colorLinearGradient">13766</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-bar-container w1368">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill m2-max" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label w1368">
|
||
<span class="device-name font32 colorCBCFD8">Ryzen5 7640HS:</span>
|
||
<span class="value gray font32 color8A8787">12950</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-bar-container w1243">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill m1-max" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label w1243">
|
||
<span class="device-name font32 colorCBCFD8">锐龙9 6900HX:</span>
|
||
<span class="value gray font32 color8A8787">13183</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-bar-container w964">
|
||
<div class="progress-bar w964">
|
||
<div class="progress-fill baseline" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label w964">
|
||
<span class="device-name baseline font32 colorCBCFD8">酷睿i5-12450H:</span>
|
||
<span class="value gray font32 color8A8787">10200</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<div class="progress-bar-container w681">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill baseline" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label w681 ">
|
||
<span class="device-name baseline font32 colorCBCFD8">Ryzen5 6600H:</span>
|
||
<span class="value gray font32 color8A8787">10297</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
|
||
</div>
|
||
<!-- 显卡-->
|
||
<div class="readon-box" style="background: url('__IMAGES__/topic_laptop/xkbg.png');background-size:100% auto">
|
||
<div class="readon-text opacity0" data-order="9">
|
||
<div class="readon-t">Radeon 680M</div>
|
||
<div class="readon-p">独显级显卡 低延迟</br> 全能创作力</div>
|
||
<div class="readon-js">搭配高效架构与先进制程，在低功耗下实现游戏</br> 创作场景的逼真光影渲染与流畅性能输出</div>
|
||
<div class="readon-img opacity0" data-order="10">
|
||
<img src="__IMAGES__/topic_laptop/clq.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="readon-img-box opacity0" data-order="11">
|
||
<img src="__IMAGES__/topic_laptop/readon1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/readon2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/readon3.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/readon4.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 显卡进度条 -->
|
||
<div class="container">
|
||
<h1 class="progress-title">3DMARK Time Spy显卡得分</h1>
|
||
<div class="progress-section">
|
||
<div class="progress-item">
|
||
<div class="progress-bar-container">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill m4-max" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<span class="device-name colorLinearGradient">Ryzen7 7735HS:</span>
|
||
<span class="value m4-max colorLinearGradient">13766</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w1274">
|
||
<div class="progress-bar-container ">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill m2-max" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<span class="device-name font32 colorCBCFD8">Ryzen7 7735HS:</span>
|
||
<span class="value gray font32 color8A8787">1000</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w1274">
|
||
<div class="progress-bar-container ">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill m1-max" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label ">
|
||
<span class="device-name font32 colorCBCFD8">NVIDIA GTX 750:</span>
|
||
<span class="value gray font32 color8A8787">1000</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item w1000">
|
||
<div class="progress-bar-container ">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill baseline" data-value="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<span class="device-name baseline font32 colorCBCFD8">Ryzen5 6600H:</span>
|
||
<span class="value gray font32 color8A8787">950</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
|
||
</div>
|
||
<!-- 网速 -->
|
||
<div class="wift" >
|
||
<div class="wift-t opacity0" data-order="12">6400MT/s</div>
|
||
<div class="wift-bg" style="background: url('__IMAGES__/topic_laptop/w1.png');background-size:100% auto;">
|
||
<div class="opacity0" data-order="13">
|
||
<div class="wift-bg-t">高频狂飙 超大带宽，游戏创作飞快</div>
|
||
<div class="wift-bg-p">
|
||
搭载新一代DDR5架构，性能频率跃升至6400MHz，16GB/32GB运行内存，双通道高带宽设计叠加低延迟优化，大型软件</br>秒加载;多任务多窗口同步并行也能流畅无卡顿,尽情释放你的创作潜能。
|
||
</div>
|
||
</div>
|
||
<div class="wift-bg-img opacity0" data-order="14">
|
||
<img src="__IMAGES__/topic_laptop/sjdb.png" alt="">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 硬盘M2 -->
|
||
<div class="m2">
|
||
<div class="m2-bg" style="background: url('__IMAGES__/topic_laptop/m2.png');background-size:100% auto">
|
||
<div class="m2-bg-t opacity0" data-order="15">支持PCle 4.0 M.2扩容</br>释放存储潜能</div>
|
||
<div class="m2-img-box opacity0" data-order="16">
|
||
<img src="__IMAGES__/topic_laptop/m2-1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/m2-2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/m2-3.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 45w -->
|
||
<div class="dl opacity0" data-order="17">
|
||
<div class="dl-t">静享 45W强悍性能</br>“飓冷”轻音散热系统</div>
|
||
<p class="dl-p">牛角形双热管架构搭配定制高性能涡轮风扇，超强的散热能力，长时间运行不降频；</br>在创作、游戏等高负载场景，性能拉满 全程高能</p>
|
||
</div>
|
||
<!-- 风扇 -->
|
||
<div class="fs">
|
||
<div class="fs-box">
|
||
<img src="__IMAGES__/topic_laptop/fs.png" alt="使用场景" class="fs-img">
|
||
<video
|
||
src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
|
||
class="fs-video" muted loop playsinline controls
|
||
style="display: none;width: 1440px;margin:0 auto;max-width: 1440px;">
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
<div class="fs-ts">* 散热图仅为示意, 具体以实物为准</div>
|
||
<div class="fs-box-img opacity0" data-order="18">
|
||
<img src="__IMAGES__/topic_laptop/jq.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/jq.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="fs-b-img">
|
||
<img src="__IMAGES__/topic_laptop/sjdb.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 性能 -->
|
||
<div class="xn">
|
||
<div class="xn-t opacity0" data-order="19">性能大跃级 拿捏多场景</div>
|
||
<div class="xn-container">
|
||
<!-- 图片区域（滚动到此处自动放大） -->
|
||
<div class="xn-image-section">
|
||
<!-- 示例图：MacBook Air 天蓝色款（替换为官网高清图） -->
|
||
<img src="__IMAGES__/topic_laptop/xn1.png" alt="" class="zoom-image first-image" loading="lazy"> <!-- 懒加载优化 -->
|
||
</div>
|
||
</div>
|
||
<div class="xn-p">
|
||
<p>游戏软件: ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ</p>
|
||
<p>设计/编程:
|
||
ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ
|
||
</p>
|
||
<p>办公/娱乐: ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ</p>
|
||
</div>
|
||
</div>
|
||
<!-- IPS -->
|
||
<div class="ips" style="background: url('__IMAGES__/topic_laptop/ips1.png');background-size:100% auto">
|
||
<div class="ips-text opacity0" data-order="20">
|
||
<div class="ips-t">
|
||
14寸 IPS 柔光舒适屏</br>细腻 真实 沉浸
|
||
</div>
|
||
<div class="ips-p">
|
||
超清IPS屏，专业级色彩表现，画面显示生动细腻。</br> 办公、学习、创作、游戏、观影，长时间专注眼部依然舒适
|
||
|
||
</div>
|
||
<div class="ips-img opacity0" data-order="21">
|
||
<img src="__IMAGES__/topic_laptop/ips2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/ips2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/ips2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/ips2.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- RGB -->
|
||
<div class="rgb" style="background: url('__IMAGES__/topic_laptop/rgb.png');background-size:100% auto">
|
||
<div class="rgb-text opacity0" data-order="22">
|
||
<div class="rgb-t">100%sRGB超广色域</br>斑斓色彩跃然眼前</div>
|
||
<div class="rgb-p">色彩丰富真实、细节生动逼真，还原万物本色，画面更出彩。每台电脑出厂前专业调校，</br>算法硬件助力，色彩精准度高。</div>
|
||
</div>
|
||
|
||
<div class="rgb-img opacity0" data-order="23">
|
||
<img src="__IMAGES__/topic_laptop/rgb1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/rgb2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/rgb2.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 舒适不累眼 -->
|
||
<div class="bly">
|
||
<div class="bly-text opacity0" data-order="24">
|
||
<div class="bly-t">舒适不累眼</div>
|
||
<div class="bly-p">有效防眩光，显示清晰不刺眼，强光下依然表现出色；搭配类自然光护眼科技，呵护双眼，久看不累</div>
|
||
</div>
|
||
<div class="beforeafter ba-slider">
|
||
<!-- 对比前的图片 -->
|
||
<img src="__IMAGES__/topic_laptop/yq1.png">
|
||
<div class="resize">
|
||
<!-- 对比后的图片 -->
|
||
<img src="__IMAGES__/topic_laptop/w1.png">
|
||
</div>
|
||
<!-- 可拖动的分隔条 -->
|
||
<span class="handle"></span>
|
||
</div>
|
||
</div>
|
||
<!-- 轻薄有型 -->
|
||
<div class="qb">
|
||
<div class="qb-text opacity0" data-order="24">
|
||
<div class="qb-t">轻薄有型 便捷随行</div>
|
||
<div class="qb-p">外观优雅简约 ，黄金比例机身，棱角分明，诠释利落风格。表面精密喷砂，复刻Mac级出众质感</div>
|
||
<div class="swiper-container auto-swiper-container">
|
||
<div class="swiper-wrapper">
|
||
<a class="swiper-slide auto-swiper-slide">
|
||
<img src="__IMAGES__/topic_laptop/qb1.png" alt="测试" href="https://www.baidu.com">
|
||
</a>
|
||
<a class="swiper-slide auto-swiper-slide">
|
||
<img src="__IMAGES__/topic_laptop/qb2.png" alt="测试" href="https://www.baidu.com">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- wifi6 -->
|
||
<div class="wift6" style="background: url('__IMAGES__/topic_laptop/wift61.png');background-size:100% auto">
|
||
<div class="wift6-text opacity0" data-order="25">
|
||
<div class="wift6-t">网速时刻在线 跃级流畅</br>千兆有线网+WiFi6</div>
|
||
<div class="wift6-p">
|
||
折叠式千兆有线网口和Wi-Fi6无线超能网卡，速度快、抗干扰、低延时，满足多种学习和办公</br>场合需要，带来前所未有的畅连体验，学习、办公流畅不卡顿，拒绝掉线尴尬
|
||
</div>
|
||
</div>
|
||
<div class="wift6-img opacity0" data-order="26">
|
||
<img src="__IMAGES__/topic_laptop/wifi6-2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/wifi6-3.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 11.4h长久续航 -->
|
||
<div class="xh" style="background: url('__IMAGES__/topic_laptop/cj1.png');background-size:100% auto">
|
||
<div class="xh-text opacity0" data-order="27">
|
||
<div class="xh-t">11.4h长久续航 电量满满</div>
|
||
<div class="xh-p">
|
||
配备57.5Wh大电池，续航长达11.4h，搭配100W闪充充电器，充一次，用一天
|
||
</div>
|
||
</div>
|
||
<div class="xh-img opacity0" data-order="28">
|
||
<img src="__IMAGES__/topic_laptop/xh1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/xh2.png" alt="">
|
||
</div>
|
||
<div class="xh-b-p">*此数据为ORICO实验室测定所得，请以实际使用为准；</div>
|
||
</div>
|
||
<!-- 接口 -->
|
||
<div class="zoom-container" id="zoomContainer">
|
||
<img src="__IMAGES__/topic_laptop/jk.png" alt="接口图" class="bg-img" id="bgImg">
|
||
<!-- 标注：top/left用百分比，位置相对图片不变 -->
|
||
<div class="annotation anno-delay-1" style="top: 54%; left: 42%;"><span>肯幸通锁孔</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 57.5%; left: 37%;"><span>千兆网口</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 62.5%; left: 28%;"><span>USB-A<br>(5Gbps)</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 66.3%; left: 19%;"><span>3.5mm耳麦合一</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 68.5%; left: 16%;"><span>TF口3.0</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 64%; left: 70.5%;"><span>USB-A<br>(5Gbps)</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 67%; left: 76%;"><span>USB-C<br>(5Gbps)</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 60.5%; left: 64%;"><span>HDMI </span></div>
|
||
<div class="annotation anno-delay-1" style="top: 57.5%; left: 59%;"><span>全功能<br>USB-C</span></div>
|
||
</div>
|
||
<!-- 轮播图2 -->
|
||
<div class="lb">
|
||
<div class="carousel-wrapper">
|
||
<!-- 左箭头 -->
|
||
<div class="carousel-arrow arrow-left">
|
||
<img src="__IMAGES__/topic_laptop/l1.png" alt="左箭头">
|
||
</div>
|
||
<!-- 轮播图容器 -->
|
||
<div class="carousel-container">
|
||
<div class="carousel-imgs">
|
||
<img src="/storage/images/banner/20250409/4983472423d1ef1bfb43b921895c1c15.jpg" alt="轮播图1" class="carousel-img">
|
||
<img src="/storage/images/banner/20250409/b0c971c0232d52f57f4cee6ce5951537.jpg" alt="轮播图2" class="carousel-img">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右箭头 -->
|
||
<div class="carousel-arrow arrow-right">
|
||
<img src="__IMAGES__/topic_laptop/r1.png" alt="右箭头">
|
||
</div>
|
||
</div>
|
||
<!-- 轮播对应文字 -->
|
||
<div class="carousel-texts">
|
||
<div class="carousel-text active" data-index="0">
|
||
<div class="carousel-text-t">自然风光 - 山川湖海</div>
|
||
<div class="carousel-text-p">轻薄长续航，随时随地自在办公</div>
|
||
</div>
|
||
<div class="carousel-text" data-index="1">
|
||
<div class="carousel-text-t">自然风光 - 山川湖海</div>
|
||
<div class="carousel-text-p">轻薄长续航，随时随地自在办公</div>
|
||
</div>
|
||
<div class="carousel-text" data-index="2">
|
||
<div class="carousel-text-t">自然风光 - 山川湖海</div>
|
||
<div class="carousel-text-p">轻薄长续航，随时随地自在办公</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 通话 -->
|
||
<div class="tabs-container">
|
||
<div class="tab-t opacity0" data-order="29">清晰通话 尽兴畅聊</div>
|
||
<div class="tab-content">
|
||
<!-- 清晰通话 - 图片内容 -->
|
||
<div class="tab-panel active">
|
||
<img src="__IMAGES__/topic_laptop/yq1.png" alt="清晰通话展示图" class="content-image">
|
||
</div>
|
||
<!-- 安护密守 - 视频内容 -->
|
||
<div class="tab-panel">
|
||
<video
|
||
src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
|
||
id="securityVideo" class="content-video" muted loop playsinline controls
|
||
style="width: 1440px;margin:0 auto;max-width: 1440px;min-width: 1280px">
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
</div>
|
||
</div>
|
||
<div class="tabs-header-box">
|
||
<div class="tabs-header">
|
||
<div class="tab-item active" data-index="0">清晰通话</div>
|
||
<div class="tab-item" data-index="1">安护密守</div>
|
||
<div class="tab-indicator"></div>
|
||
</div>
|
||
</div>
|
||
<div class="tabs-p">
|
||
配置1080p前置高清摄像头, 矩阵式降噪麦克风, 噪音环境亦享受清晰通话
|
||
</div>
|
||
</div>
|
||
<!-- windows -->
|
||
<div class="windows" style="background: url('__IMAGES__/topic_laptop/windows1.png');background-size:100% auto">
|
||
</div>
|
||
<!-- 底部图片 -->
|
||
<div class="bottom-img-box">
|
||
<div class="bottom-img opacity0" data-order="30">
|
||
<img src="__IMAGES__/topic_laptop/bottom1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/bottom1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/bottom1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/bottom1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/bottom1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/bottom1.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 底部文字 -->
|
||
<div class="bottom-text">
|
||
<div class="bottom-p">· 由于产品批次和生成供应因素实时变化, 为尽可能提供准确的产品信息,规格参数,产品特性等,可能会调整和修订以上页面中的文字描述,图片效果等内容,一球与实际产品性能,规格,直属,零部件等信息相匹配.</div>
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script src="__JS__/before-after.min.js" type="text/javascript"></script>
|
||
<script type="text/javascript">
|
||
// 轮播
|
||
let swiper;
|
||
window.onload = function ()
|
||
{
|
||
if (typeof Swiper === 'undefined') {
|
||
console.error('Swiper加载失败，请刷新页面重试');
|
||
return;
|
||
}
|
||
swiper = new Swiper('.auto-swiper-container', {
|
||
autoplay: {
|
||
delay: 3000, // 调整为3秒切换，更友好
|
||
disableOnInteraction: false,
|
||
},
|
||
loop: false,
|
||
slidesPerView: 1,
|
||
spaceBetween: 0,
|
||
pagination: false,
|
||
navigation: false,
|
||
scrollbar: false,
|
||
on: {
|
||
resize: function ()
|
||
{
|
||
this.update();
|
||
},
|
||
},
|
||
});
|
||
// 初始化时触发滚动事件，确保状态正确
|
||
window.dispatchEvent(new Event('scroll'));
|
||
};
|
||
//滚动淡入
|
||
(function ()
|
||
{
|
||
// ========== 核心配置 ==========
|
||
const TRIGGER_RATIO = 0.1; // 元素10%进入可视区触发淡入
|
||
let lastScrollY = window.scrollY; // 记录上次滚动位置
|
||
|
||
// ========== 元素初始化 ==========
|
||
const els = Array.from(document.querySelectorAll('[data-order]')).sort((a, b) => a.dataset.order - b.dataset.order);
|
||
const elState = new Map();
|
||
els.forEach(el =>
|
||
{
|
||
elState.set(el, {
|
||
isInView: false, // 是否在可视区
|
||
isFadedIn: false // 是否已淡入
|
||
});
|
||
});
|
||
|
||
// ========== 核心工具函数 ==========
|
||
// 1. 判断元素是否在可视区
|
||
const isElementInView = (el) =>
|
||
{
|
||
const rect = el.getBoundingClientRect();
|
||
const viewportHeight = window.innerHeight;
|
||
const viewportWidth = window.innerWidth;
|
||
|
||
// 元素是否部分在可视区
|
||
const intersects = (
|
||
rect.bottom > 0 &&
|
||
rect.top < viewportHeight &&
|
||
rect.right > 0 &&
|
||
rect.left < viewportWidth
|
||
);
|
||
|
||
if (!intersects) return false;
|
||
|
||
// 计算可见比例（确保触发精度）
|
||
const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);
|
||
const visibleWidth = Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
|
||
const visibleRatio = (visibleHeight * visibleWidth) / (rect.height * rect.width);
|
||
|
||
return visibleRatio >= TRIGGER_RATIO;
|
||
};
|
||
|
||
// 2. 淡入元素（向下滚动时触发）
|
||
const fadeInElement = (el) =>
|
||
{
|
||
if (elState.get(el).isFadedIn) return;
|
||
el.classList.add('fade-in');
|
||
elState.get(el).isFadedIn = true;
|
||
console.log(`[向下滚动-淡入] ${el.dataset.name || `图片${el.dataset.order}`}`);
|
||
};
|
||
|
||
// 3. 隐藏元素（仅向上滚动时触发）
|
||
const hideElement = (el) =>
|
||
{
|
||
if (!elState.get(el).isFadedIn) return;
|
||
el.classList.remove('fade-in');
|
||
elState.get(el).isFadedIn = false;
|
||
console.log(`[向上滚动-隐藏] ${el.dataset.name || `图片${el.dataset.order}`}`);
|
||
};
|
||
|
||
// 4. 防抖处理（避免高频触发）
|
||
const debounce = (fn) =>
|
||
{
|
||
let timer = null;
|
||
return () =>
|
||
{
|
||
clearTimeout(timer);
|
||
timer = setTimeout(fn, 16);
|
||
};
|
||
};
|
||
|
||
// ========== 核心滚动逻辑 ==========
|
||
const handleScroll = debounce(() =>
|
||
{
|
||
const currentScrollY = window.scrollY;
|
||
const isScrollUp = currentScrollY < lastScrollY; // 是否向上滚动
|
||
const isScrollDown = currentScrollY > lastScrollY; // 是否向下滚动
|
||
|
||
els.forEach(el =>
|
||
{
|
||
const prevInView = elState.get(el).isInView;
|
||
const currentInView = isElementInView(el);
|
||
elState.set(el, { ...elState.get(el), isInView: currentInView });
|
||
|
||
// 1. 向下滚动：仅处理淡入（进入可视区则淡入，不做任何隐藏）
|
||
if (isScrollDown) {
|
||
if (currentInView && !prevInView) {
|
||
fadeInElement(el);
|
||
}
|
||
}
|
||
|
||
// 2. 向上滚动：仅处理隐藏（离开可视区则隐藏，不干扰淡入）
|
||
if (isScrollUp) {
|
||
if (!currentInView && prevInView) {
|
||
hideElement(el);
|
||
}
|
||
}
|
||
});
|
||
|
||
lastScrollY = currentScrollY; // 更新上次滚动位置
|
||
});
|
||
|
||
// ========== 事件监听 ==========
|
||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||
window.addEventListener('resize', handleScroll);
|
||
|
||
// 初始化检测（首屏可见元素淡入）
|
||
window.addEventListener('load', () =>
|
||
{
|
||
setTimeout(() =>
|
||
{
|
||
els.forEach(el =>
|
||
{
|
||
if (isElementInView(el)) {
|
||
fadeInElement(el);
|
||
}
|
||
});
|
||
}, 100);
|
||
});
|
||
})();
|
||
|
||
// 接口模块动画 ==========
|
||
(function ()
|
||
{
|
||
// 完全复用滚动淡入的配置
|
||
const TRIGGER_RATIO = 0.1;
|
||
let lastScrollY = window.scrollY;
|
||
|
||
// 目标元素
|
||
const zoomContainer = document.getElementById('zoomContainer');
|
||
const annotations = document.querySelectorAll('.annotation');
|
||
const bgImg = document.getElementById('bgImg');
|
||
|
||
// 完全复用滚动淡入的状态结构
|
||
const elState = new Map();
|
||
elState.set(zoomContainer, {
|
||
isInView: false,
|
||
isFadedIn: false // 和滚动淡入保持一致的命名
|
||
});
|
||
|
||
// ========== 完全复用滚动淡入的工具函数 ==========
|
||
const isElementInView = (el) =>
|
||
{
|
||
const rect = el.getBoundingClientRect();
|
||
const viewportHeight = window.innerHeight;
|
||
const viewportWidth = window.innerWidth;
|
||
|
||
const intersects = (
|
||
rect.bottom > 0 &&
|
||
rect.top < viewportHeight &&
|
||
rect.right > 0 &&
|
||
rect.left < viewportWidth
|
||
);
|
||
|
||
if (!intersects) return false;
|
||
|
||
const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);
|
||
const visibleWidth = Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
|
||
const visibleRatio = (visibleHeight * visibleWidth) / (rect.height * rect.width);
|
||
|
||
return visibleRatio >= TRIGGER_RATIO;
|
||
};
|
||
|
||
// 接口动画的“淡入”（对应滚动淡入的fadeInElement）
|
||
const fadeInInterface = (el) =>
|
||
{
|
||
if (elState.get(el).isFadedIn) return;
|
||
annotations.forEach(anno => anno.classList.add('anno-show'));
|
||
bgImg.classList.add('zoom-out');
|
||
elState.get(el).isFadedIn = true;
|
||
console.log('[接口模块] 向下滚动-进入可视区-触发动画');
|
||
};
|
||
|
||
// 接口动画的“隐藏”（对应滚动淡入的hideElement）
|
||
const hideInterface = (el) =>
|
||
{
|
||
if (!elState.get(el).isFadedIn) return;
|
||
annotations.forEach(anno => anno.classList.remove('anno-show'));
|
||
bgImg.classList.remove('zoom-out');
|
||
elState.get(el).isFadedIn = false;
|
||
console.log('[接口模块] 向上滚动-离开可视区-重置动画');
|
||
};
|
||
|
||
// 完全复用滚动淡入的防抖
|
||
const debounce = (fn) =>
|
||
{
|
||
let timer = null;
|
||
return () =>
|
||
{
|
||
clearTimeout(timer);
|
||
timer = setTimeout(fn, 16);
|
||
};
|
||
};
|
||
|
||
// ========== 1:1 复刻滚动淡入的核心滚动逻辑 ==========
|
||
const handleScroll = debounce(() =>
|
||
{
|
||
const currentScrollY = window.scrollY;
|
||
const isScrollUp = currentScrollY < lastScrollY;
|
||
const isScrollDown = currentScrollY > lastScrollY;
|
||
|
||
// 仅处理接口模块（和滚动淡入的forEach逻辑一致，只是单元素）
|
||
const el = zoomContainer;
|
||
const prevInView = elState.get(el).isInView;
|
||
const currentInView = isElementInView(el);
|
||
// 更新可视区状态（和滚动淡入一致）
|
||
elState.set(el, { ...elState.get(el), isInView: currentInView });
|
||
|
||
// 1. 向下滚动逻辑：和滚动淡入完全一致
|
||
if (isScrollDown) {
|
||
if (currentInView && !prevInView) { // 从“不在”到“在”可视区
|
||
fadeInInterface(el);
|
||
}
|
||
}
|
||
|
||
// 2. 向上滚动逻辑：和滚动淡入完全一致
|
||
if (isScrollUp) {
|
||
if (!currentInView && prevInView) { // 从“在”到“不在”可视区
|
||
hideInterface(el);
|
||
}
|
||
}
|
||
|
||
lastScrollY = currentScrollY;
|
||
});
|
||
|
||
// ========== 完全复用滚动淡入的事件监听 ==========
|
||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||
window.addEventListener('resize', handleScroll);
|
||
|
||
// 初始化：和滚动淡入一致
|
||
window.addEventListener('load', () =>
|
||
{
|
||
setTimeout(() =>
|
||
{
|
||
const el = zoomContainer;
|
||
if (isElementInView(el)) {
|
||
fadeInInterface(el);
|
||
}
|
||
}, 100);
|
||
});
|
||
})();
|
||
|
||
// ========== 修复后的多进度条动画逻辑 ==========
|
||
// 1. 进度条动画核心函数（给指定容器内的进度条执行动画）
|
||
function animateProgressBars (container)
|
||
{
|
||
const progressFills = container.querySelectorAll('.progress-fill');
|
||
progressFills.forEach(fill =>
|
||
{
|
||
// 重置宽度（确保动画从头开始）
|
||
fill.style.width = '0';
|
||
// 延迟触发动画（避免DOM渲染问题）
|
||
setTimeout(() =>
|
||
{
|
||
const targetValue = fill.getAttribute('data-value');
|
||
fill.style.width = targetValue + '%';
|
||
}, 100);
|
||
});
|
||
}
|
||
|
||
// 2. 判断元素是否进入可视区（复用滚动淡入的逻辑）
|
||
function isElementInView (el)
|
||
{
|
||
const rect = el.getBoundingClientRect();
|
||
const viewportHeight = window.innerHeight;
|
||
const viewportWidth = window.innerWidth;
|
||
|
||
const intersects = (
|
||
rect.bottom > 0 &&
|
||
rect.top < viewportHeight &&
|
||
rect.right > 0 &&
|
||
rect.left < viewportWidth
|
||
);
|
||
|
||
if (!intersects) return false;
|
||
|
||
const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);
|
||
const visibleWidth = Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
|
||
const visibleRatio = (visibleHeight * visibleWidth) / (rect.height * rect.width);
|
||
|
||
return visibleRatio >= 0.1; // 10% 可见即触发
|
||
}
|
||
|
||
// 3. 防抖函数
|
||
const debounce = (fn, delay = 16) =>
|
||
{
|
||
let timer = null;
|
||
return () =>
|
||
{
|
||
clearTimeout(timer);
|
||
timer = setTimeout(fn, delay);
|
||
};
|
||
};
|
||
|
||
// 4. 处理多进度条容器
|
||
const progressContainers = document.querySelectorAll('.container'); // 获取所有进度条容器
|
||
const progressAnimatedMap = new Map(); // 记录每个容器是否已触发动画
|
||
|
||
// 初始化：给每个容器标记为未触发
|
||
progressContainers.forEach(container =>
|
||
{
|
||
progressAnimatedMap.set(container, false);
|
||
});
|
||
|
||
// 5. 滚动监听：遍历所有容器，独立判断触发
|
||
const handleProgressScroll = debounce(() =>
|
||
{
|
||
progressContainers.forEach(container =>
|
||
{
|
||
const isAnimated = progressAnimatedMap.get(container);
|
||
// 仅当容器进入可视区且未触发过动画时执行
|
||
if (isElementInView(container) && !isAnimated) {
|
||
animateProgressBars(container);
|
||
progressAnimatedMap.set(container, true); // 标记为已触发
|
||
// 【可选】离开可视区后重置（取消注释启用）
|
||
// } else if (!isElementInView(container) && isAnimated) {
|
||
// const progressFills = container.querySelectorAll('.progress-fill');
|
||
// progressFills.forEach(fill => fill.style.width = '0');
|
||
// progressAnimatedMap.set(container, false);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 6. 绑定事件
|
||
window.addEventListener('scroll', handleProgressScroll, { passive: true });
|
||
window.addEventListener('resize', handleProgressScroll);
|
||
|
||
// 7. 初始化检查：页面加载时如果容器已在可视区，直接触发
|
||
document.addEventListener('DOMContentLoaded', () =>
|
||
{
|
||
progressContainers.forEach(container =>
|
||
{
|
||
if (isElementInView(container)) {
|
||
animateProgressBars(container);
|
||
progressAnimatedMap.set(container, true);
|
||
}
|
||
});
|
||
});
|
||
|
||
//视频
|
||
const allVideos = document.querySelectorAll('.fs-video');
|
||
// 停止所有视频播放
|
||
function stopAllVideos ()
|
||
{
|
||
allVideos.forEach((video) =>
|
||
{
|
||
video.pause();
|
||
video.style.display = 'none';
|
||
// 显示对应图片
|
||
const img = video.parentElement.querySelector('.fs-img');
|
||
// const fsBoxImg = activeVideo.parentElement.querySelector('.fs-box-img');
|
||
if (img) img.style.display = 'block';
|
||
// if (fsBoxImg) fsBoxImg.style.display = 'block';
|
||
});
|
||
}
|
||
|
||
// 滚动切换图片/视频（核心逻辑）
|
||
window.addEventListener('scroll', function ()
|
||
{
|
||
const productRights = document.querySelectorAll('.fs-box');
|
||
let activeVideo = null;
|
||
// 找出当前在视口中的视频容器
|
||
productRights.forEach((rightContainer) =>
|
||
{
|
||
const img = rightContainer.querySelector('.fs-img');
|
||
const video = rightContainer.querySelector('.fs-video');
|
||
const videoSrc = video.src.trim()
|
||
if (!img || !video) return;
|
||
if (!videoSrc) 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('.fs-img');
|
||
// const fsBoxImg = activeVideo.parentElement.querySelector('.fs-box-img');
|
||
img.style.display = 'none';
|
||
// fsBoxImg.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';
|
||
// fsBoxImg.style.display = 'block';
|
||
});
|
||
}
|
||
} else {
|
||
stopAllVideos(); // 无活跃视频时停止所有播放
|
||
}
|
||
});
|
||
|
||
|
||
//图片放大
|
||
document.addEventListener('DOMContentLoaded', function ()
|
||
{
|
||
const zoomImages = document.querySelectorAll('.zoom-image');
|
||
|
||
// 监听滚动事件
|
||
window.addEventListener('scroll', function ()
|
||
{
|
||
zoomImages.forEach(image =>
|
||
{
|
||
// 获取图片位置信息
|
||
const imageRect = image.getBoundingClientRect();
|
||
const windowHeight = window.innerHeight;
|
||
|
||
// 触发条件：图片顶部进入视口底部1/3处（避免过早放大）
|
||
const triggerPoint = windowHeight * (2 / 3);
|
||
|
||
// 图片进入可视区域 → 添加active类（放大）
|
||
if (imageRect.top < triggerPoint && imageRect.bottom > 0) {
|
||
image.classList.add('active');
|
||
}
|
||
// 图片完全离开视口 → 移除active类（还原）
|
||
// else if (imageRect.bottom < 0 || imageRect.top > windowHeight) {
|
||
// image.classList.remove('active');
|
||
// }
|
||
});
|
||
});
|
||
|
||
// 初始化时触发一次（避免页面加载时已在可视区域的图片不放大）
|
||
window.dispatchEvent(new Event('scroll'));
|
||
});
|
||
$(document).ready(function ()
|
||
{
|
||
// 图片左右移动显示全部
|
||
$('.ba-slider').beforeAfter({
|
||
startPercent: 50, // 初始分隔条位置为 50%
|
||
handle: '.handle', // 指定分隔条元素的选择器
|
||
resize: '.resize' // 指定可调整大小部分的选择器
|
||
});
|
||
})
|
||
|
||
|
||
//tabs
|
||
const tabItems = document.querySelectorAll('.tab-item');
|
||
const tabPanels = document.querySelectorAll('.tab-panel');
|
||
const indicator = document.querySelector('.tab-indicator');
|
||
const securityVideo = document.getElementById('securityVideo');
|
||
let prevIndex = 0;
|
||
const tabRects = [];
|
||
function cacheTabRects ()
|
||
{
|
||
tabRects.length = 0;
|
||
tabItems.forEach(item =>
|
||
{
|
||
tabRects.push({
|
||
left: item.offsetLeft,
|
||
width: item.offsetWidth
|
||
});
|
||
});
|
||
const initRect = tabRects[0];
|
||
indicator.style.width = initRect.width + 'px';
|
||
indicator.style.transform = `translateX(${initRect.left}px)`;
|
||
}
|
||
|
||
cacheTabRects();
|
||
|
||
// 重置视频状态
|
||
function resetVideo ()
|
||
{
|
||
if (securityVideo) {
|
||
securityVideo.pause(); // 暂停播放
|
||
securityVideo.currentTime = 0; // 重置到开始位置
|
||
// 如果需要移除播放控件的播放状态样式，可以在这里添加
|
||
}
|
||
}
|
||
|
||
// 播放视频
|
||
function playVideo ()
|
||
{
|
||
|
||
if (securityVideo) {
|
||
// 自动播放（需要用户交互过的页面才能自动播放）
|
||
securityVideo.play().catch(err =>
|
||
{
|
||
console.log('自动播放失败，请手动点击播放:', err);
|
||
// 可以在这里显示提示，让用户手动点击播放
|
||
});
|
||
}
|
||
}
|
||
|
||
tabItems.forEach(item =>
|
||
{
|
||
item.addEventListener('click', () =>
|
||
{
|
||
const index = parseInt(item.dataset.index);
|
||
if (index === prevIndex) return;
|
||
|
||
tabItems[prevIndex].classList.remove('active');
|
||
item.classList.add('active');
|
||
|
||
tabPanels[prevIndex].classList.remove('active');
|
||
tabPanels[index].classList.add('active');
|
||
|
||
// 处理视频播放逻辑
|
||
if (index === 1) {
|
||
// 切换到安护密守 - 播放视频
|
||
playVideo();
|
||
} else if (prevIndex === 1) {
|
||
// 从安护密守切换到其他 - 重置视频
|
||
resetVideo();
|
||
}
|
||
|
||
const rect = tabRects[index];
|
||
indicator.style.width = rect.width + 'px';
|
||
indicator.style.transform = `translateX(${rect.left}px)`;
|
||
|
||
prevIndex = index;
|
||
});
|
||
});
|
||
|
||
window.addEventListener('resize', () =>
|
||
{
|
||
cacheTabRects();
|
||
const currentRect = tabRects[prevIndex];
|
||
indicator.style.width = currentRect.width + 'px';
|
||
indicator.style.transform = `translateX(${currentRect.left}px)`;
|
||
});
|
||
|
||
tabItems.forEach(item =>
|
||
{
|
||
item.addEventListener('touchstart', (e) =>
|
||
{
|
||
e.preventDefault();
|
||
item.click();
|
||
}, { passive: false });
|
||
});
|
||
|
||
// 页面加载完成后确保视频初始状态是重置的
|
||
document.addEventListener('DOMContentLoaded', () =>
|
||
{
|
||
resetVideo();
|
||
});
|
||
|
||
// 可选：添加视频播放错误处理
|
||
if (securityVideo) {
|
||
securityVideo.addEventListener('error', (e) =>
|
||
{
|
||
console.error('视频加载失败:', e);
|
||
securityVideo.innerHTML = '<p>视频加载失败，请检查网络或视频地址</p>';
|
||
});
|
||
}
|
||
|
||
//轮播2 获取DOM元素
|
||
const carouselImgs = document.querySelector('.carousel-imgs');
|
||
const imgItems = document.querySelectorAll('.carousel-img');
|
||
const leftArrow = document.querySelector('.arrow-left');
|
||
const rightArrow = document.querySelector('.arrow-right');
|
||
const textItems = document.querySelectorAll('.carousel-text');
|
||
|
||
// 基础参数
|
||
const imgCount = imgItems.length; // 轮播图数量
|
||
let imgWidth = imgItems[0]?.offsetWidth || 800; // 单张图宽度（增加容错）
|
||
let currentIndex = 0; // 当前轮播索引
|
||
let autoPlayTimer = null; // 自动轮播定时器
|
||
|
||
// 【修复1】初始化时确保宽度正确（避免DOM未加载完成导致宽度为0）
|
||
window.addEventListener('load', () =>
|
||
{
|
||
imgWidth = imgItems[0].offsetWidth;
|
||
carouselImgs.style.transform = `translateX(-${currentIndex * imgWidth}px)`;
|
||
});
|
||
|
||
// 切换轮播图核心函数
|
||
function switchCarousel (index)
|
||
{
|
||
// 边界处理（防止越界）
|
||
currentIndex = index;
|
||
if (currentIndex < 0) {
|
||
currentIndex = imgCount - 1;
|
||
} else if (currentIndex >= imgCount) {
|
||
currentIndex = 0;
|
||
}
|
||
|
||
// 1. 切换图片（移动图片列表）
|
||
carouselImgs.style.transform = `translateX(-${currentIndex * imgWidth}px)`;
|
||
|
||
// 2. 切换文字高亮
|
||
textItems.forEach((item, idx) =>
|
||
{
|
||
item.classList.toggle('active', idx === currentIndex);
|
||
});
|
||
}
|
||
|
||
// 左箭头点击事件
|
||
leftArrow.addEventListener('click', () =>
|
||
{
|
||
switchCarousel(currentIndex - 1);
|
||
restartAutoPlay(); // 点击后重启自动轮播
|
||
});
|
||
|
||
// 右箭头点击事件
|
||
rightArrow.addEventListener('click', () =>
|
||
{
|
||
switchCarousel(currentIndex + 1);
|
||
restartAutoPlay(); // 点击后重启自动轮播
|
||
});
|
||
|
||
// 文字点击切换轮播
|
||
// textItems.forEach((item) =>
|
||
// {
|
||
// item.addEventListener('click', () =>
|
||
// {
|
||
// const targetIndex = parseInt(item.dataset.index);
|
||
// switchCarousel(targetIndex);
|
||
// restartAutoPlay();
|
||
// });
|
||
// });
|
||
|
||
// 自动轮播函数
|
||
function autoPlay ()
|
||
{
|
||
// 【修复2】创建定时器前先清除旧的（核心！防止重复创建）
|
||
clearInterval(autoPlayTimer);
|
||
autoPlayTimer = setInterval(() =>
|
||
{
|
||
switchCarousel(currentIndex + 1);
|
||
}, 2500); // 2.5秒切换一次（可调整）
|
||
}
|
||
|
||
// 重启自动轮播（清除旧定时器，重新开始）
|
||
function restartAutoPlay ()
|
||
{
|
||
clearInterval(autoPlayTimer); // 先清除
|
||
autoPlay(); // 再重建
|
||
}
|
||
|
||
// 鼠标悬停轮播容器时，暂停自动轮播
|
||
document.querySelector('.carousel-wrapper').addEventListener('mouseenter', () =>
|
||
{
|
||
clearInterval(autoPlayTimer);
|
||
});
|
||
|
||
// 鼠标离开轮播容器时，恢复自动轮播
|
||
document.querySelector('.carousel-wrapper').addEventListener('mouseleave', () =>
|
||
{
|
||
autoPlay();
|
||
});
|
||
|
||
// 初始化：启动自动轮播
|
||
autoPlay();
|
||
|
||
// 窗口大小变化时，重新计算宽度（适配响应式）
|
||
window.addEventListener('resize', () =>
|
||
{
|
||
imgWidth = imgItems[0].offsetWidth;
|
||
carouselImgs.style.transform = `translateX(-${currentIndex * imgWidth}px)`;
|
||
});
|
||
|
||
// 【修复3】页面卸载时清除定时器（防止内存泄漏）
|
||
window.addEventListener('beforeunload', () =>
|
||
{
|
||
clearInterval(autoPlayTimer);
|
||
});
|
||
</script>
|
||
{/block} |