liqian
48e3d7f846
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
1130 lines
45 KiB
HTML
1130 lines
45 KiB
HTML
{extend name="public/base" /}
|
||
{block name="style"}
|
||
<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/cpu.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/progress.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/gpu.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/memory.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/m2.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/qb.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/wift.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/endurance.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/zoom.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/tabs.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/window.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_laptop/footer.css">
|
||
<script type="text/javascript">
|
||
(function (doc, win)
|
||
{
|
||
var docEl = doc.documentElement;
|
||
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
|
||
|
||
function setRootFontSize ()
|
||
{
|
||
var clientWidth = docEl.clientWidth;
|
||
if (!clientWidth) return;
|
||
var fontSize = clientWidth / 7.5; // 750px/7.5=100px，375px/7.5=50px
|
||
// 直接修改内联样式，优先级最高
|
||
docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
|
||
}
|
||
|
||
setRootFontSize();
|
||
win.addEventListener(resizeEvt, setRootFontSize);
|
||
doc.addEventListener('DOMContentLoaded', setRootFontSize);
|
||
})(document, window);
|
||
</script>
|
||
{/block}
|
||
{block name="header"}
|
||
<!-- 重置header头为空 -->
|
||
{/block}
|
||
{block name="main"}
|
||
<!-- 顶部轮播 -->
|
||
<div class="swiper-container auto-swiper-container" style="margin-top:60px;">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide auto-swiper-slide">
|
||
<div class="swiper-container-texts" style="color:#fff">
|
||
<div class="swiper-container-texts-t">轻启强大 跃级体验</div>
|
||
<div class="swiper-container-texts-p">
|
||
<div>锐龙R7 7735HS标压处理器</div>
|
||
<div style="width: 1px; height: 0.16rem;background: #fff;margin: 0 0.15rem;"></div>
|
||
<div>IPS柔光舒适屏</div>
|
||
<div style="width: 1px; height: 0.16rem;background: #fff;margin: 0 0.15rem;"></div>
|
||
<div>轻至1.45kg</div>
|
||
</div>
|
||
<div class="swiper-container-texts-img">
|
||
<a href="">
|
||
<img src="__IMAGES__/topic_laptop/ljgd.png" alt="">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<img src="__IMAGES__/topic_laptop/banner.png" alt="" />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 笔记本配置图 -->
|
||
<div class="amd-box">
|
||
<div class="amd-img-header">
|
||
<img src="__IMAGES__/topic_laptop/amd1.png" alt="" loading="lazy">
|
||
</div>
|
||
<div class="amd-img-main " data-order="2" data-name="">
|
||
<div class="amd-img-main-left">
|
||
<img src="__IMAGES__/topic_laptop/amd-l-1-1.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/amd-l-1-2.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/amd-l-1-3.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/amd-l-1-4.png" alt="" loading="lazy">
|
||
</div>
|
||
<div class="amd-img-main-right">
|
||
<img src="__IMAGES__/topic_laptop/amd-r-1-1.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/amd-r-1-2.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/amd-r-1-3.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/amd-r-1-4.png" alt="" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="amd-img-footer">
|
||
<img src="__IMAGES__/topic_laptop/amd10.png" alt="" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- 超能引擎 -->
|
||
<div class="cpu">
|
||
<div class="cpu-main" style="background: url('__IMAGES__/topic_laptop/cpu.png');background-size:100% auto">
|
||
<div class="cpu-texts">
|
||
<div class="cpu-texts-t">超能引擎 性能拉满</div>
|
||
<p class="cpu-texts-p">强悍「芯」实力 定义性能新标杆</p>
|
||
</div>
|
||
<div class="cpu-footer">
|
||
<div class="cpu-footer-img">
|
||
<img src="__IMAGES__/topic_laptop/cpu-1.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/cpu-2.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/cpu-3.png" alt="" loading="lazy">
|
||
</div>
|
||
<div class="cpu-footer-desc">
|
||
搭载高性能CPU与GPU，多任务并行流畅不卡顿
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 进度条 -->
|
||
<div class="progress">
|
||
<div class="progress-title">CineBench R23 多核跑分</div>
|
||
<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 font20">Ryzen7 7735HS:</span>
|
||
<span class="value m4-max colorLinearGradient font20">13766</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w645">
|
||
<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 colorCBCFD8 font18">Ryzen5 7640HS:</span>
|
||
<span class="value colorCBCFD8 font18">12950</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w585">
|
||
<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 font18 colorCBCFD8 font18">锐龙9 6900HX:</span>
|
||
<span class="value font18 colorCBCFD8 font18">13183</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w454">
|
||
<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 font18 colorCBCFD8">酷睿i5-12450H:</span>
|
||
<span class="value font18 colorCBCFD8">10200</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w321">
|
||
<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 m2-max font18 colorCBCFD8">Ryzen5 6600H:</span>
|
||
<span class="value font18 colorCBCFD8">10297</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
|
||
</div>
|
||
<!-- 显卡 GPU -->
|
||
<div class="gpu">
|
||
<div class="gpu-texts">
|
||
<div class="gpu-texts-t">
|
||
Radeon 680M</br>
|
||
独显级显卡 低延迟 全能创作力
|
||
</div>
|
||
<div class="gpu-texts-p">
|
||
搭配高效架构与先进制程，在低功耗下实现游戏创作场景的</br>
|
||
逼真光影渲染与流畅性能输出
|
||
</div>
|
||
</div>
|
||
<div class="gpu-main-img"
|
||
style="background: url('__IMAGES__/topic_laptop/gpu-main.png');background-size:100% auto">
|
||
<div class="gpu-amd-img">
|
||
<img src="__IMAGES__/topic_laptop/gpu-amd.png" alt="" loading="lazy">
|
||
</div>
|
||
<div class="gpu-footer-imgs">
|
||
<img src="__IMAGES__/topic_laptop/gpu-imgs-1.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/gpu-imgs-2.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/gpu-imgs-3.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/gpu-imgs-4.png" alt="" loading="lazy">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 进度条 -->
|
||
<div class="progress">
|
||
<div class="progress-title">3DMARK Time Spy显卡得分</div>
|
||
<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 font20">Ryzen7 7735HS:</span>
|
||
<span class="value m4-max colorLinearGradient font20">1700</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w596">
|
||
<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 colorCBCFD8 font18">NVIDIA GTX 750:</span>
|
||
<span class="value colorCBCFD8 font18">1000</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w596">
|
||
<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 font18 colorCBCFD8 font18">i7-13620H:</span>
|
||
<span class="value font18 colorCBCFD8 font18">1000</span>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item w467">
|
||
<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 font18 colorCBCFD8">Ryzen5 6600H:</span>
|
||
<span class="value font18 colorCBCFD8">950</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
|
||
</div>
|
||
<!-- 内存 memory-->
|
||
<div class="memory">
|
||
<div class="memory-t">
|
||
6400MT/s</br>高频狂飙 超大带宽，游戏创作飞快
|
||
</div>
|
||
<div class="memory-img"
|
||
style="background: url('__IMAGES__/topic_laptop/memory-1.png'); background-size:100% auto">
|
||
<div class="memory-p">
|
||
搭载新一代DDR5架构，性能频率跃升至6400MHz，
|
||
</br>16GB/32GB运行内存，双通道高带宽设计叠加低延迟优化，大型软件秒加</br>载;多任务多窗口同步并行也能流程无卡顿,尽情释放你的创作潜能。
|
||
</div>
|
||
<div class="memory-footer-img">
|
||
<img src="__IMAGES__/topic_laptop/memory-2.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ssd -->
|
||
<div class="m2">
|
||
<div class="m2-bg" style="background: url('__IMAGES__/topic_laptop/ssd-img-1.png');background-size:100% auto">
|
||
<div class="m2-bg-t1">
|
||
支持PCle 4.0 M.2 扩容</br>释放存储潜能
|
||
</div>
|
||
|
||
<div class="m2-img-box">
|
||
<img src="__IMAGES__/topic_laptop/ssd-img-2.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/ssd-img-3.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/ssd-img-4.png" alt="" loading="lazy">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- fs -->
|
||
<div class="fs">
|
||
<div class="dl">
|
||
<div class="dl-t">
|
||
静享 45W强悍性能</br>
|
||
“飓冷”轻音散热系统
|
||
</div>
|
||
<p class="dl-p">
|
||
牛角形双热管架构搭配定制高性能涡轮风扇，超强的散热能力，长时</br>间运行不降频；在创作、游戏等高负载场景，性能拉满 全程高能
|
||
</p>
|
||
</div>
|
||
<div class="fs-box">
|
||
<video
|
||
src="https://ow.static.f2b211.com/storage/videos/banner/20251219/584940a4e2f48d0c08345ce84b93826a_dmlkZW9fcWluaXU=.mp4"
|
||
class="fs-video" muted loop playsinline autoplay
|
||
poster="https://dev.ow.f2b211.com/storage/images/banner/20251220/bd1f918627eecb7ff2898229e275729c.png"
|
||
preload="auto" style="width: 100%;">
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
<div class="fs-ts">*散热图仅为示意，具体以实物为准</div>
|
||
<div class="fs-box-img">
|
||
<div class="fs-h-img">
|
||
<img src="__IMAGES__/topic_laptop/fs-img-1.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/fs-img-2.png" alt="">
|
||
</div>
|
||
<div class="fs-b-img" style="min-height: 20px;">
|
||
<img src="__IMAGES__/topic_laptop/fs-img-3.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 性能大拿 -->
|
||
<div class="xn">
|
||
<div class="xn-t">性能大跃级 拿捏多场景</div>
|
||
<div class="xn-container">
|
||
<div class="xn-image-section">
|
||
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/60cac336860c8b69e34bb7de81cc9c17.png"
|
||
alt="" class="zoom-image first-image">
|
||
</div>
|
||
</div>
|
||
<div class="xn-p">
|
||
<p>游戏软件: ELDÀ、逆水寒、DIABLO、AION、无悔华夏、E- sports Game、原神</p>
|
||
<p>设计/编程: python、C语言、CAD、mysql、PS、Pr、DW、3Dmax、C4D、Ai、Au、Ae、Fw、En</p>
|
||
<p> 办公/娱乐: 钉钉、WPS、XMind、有道云笔记、爱奇艺、音乐软件、同花顺</p>
|
||
</div>
|
||
</div>
|
||
<!-- IPS -->
|
||
<div class="ips">
|
||
<div class="ips-t">
|
||
14寸IPS 柔光舒适屏</br>
|
||
细腻 真实 沉浸
|
||
</div>
|
||
<div class="ips-bg" style="background: url('__IMAGES__/topic_laptop/ips-img-1.png');background-size:100% auto">
|
||
<p>超清IPS屏，专业级色彩表现，画面显示生动细腻。 </br>办公、学习、创作、游戏、观影，长时间专注眼部依然舒适</p>
|
||
</div>
|
||
<div class="ips-imgs">
|
||
<img src="__IMAGES__/topic_laptop/ips-img-2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/ips-img-3.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/ips-img-4.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/ips-img-5.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 色彩RGB -->
|
||
<div class="rgb">
|
||
<div class="rgb-t">100%sRGB超广色域</br>斑斓色彩跃然眼前</div>
|
||
<div class="rgb-bg" style="background: url('__IMAGES__/topic_laptop/rgb-img-1.png');background-size:100% auto">
|
||
<p class="rgb-p">色彩丰富真实、细节生动逼真，还原万物本色， </br>画面更出彩。每台电脑出厂前专业调校，算法硬件助力，色彩精准度高。</p>
|
||
</div>
|
||
<div class="rgb-imgs">
|
||
<img src="__IMAGES__/topic_laptop/rgb-img-2.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/rgb-img-3.png" alt="">
|
||
<img src="__IMAGES__/topic_laptop/rgb-img-4.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 对比图 -->
|
||
<div class="bly">
|
||
<div class="bly-texts">
|
||
<div class="bly-t">舒适不累眼</div>
|
||
<div class="bly-p">有效防眩光，显示清晰不刺眼，强光下依然表现出色</br>搭配类自然光护眼科技，呵护双眼，久看不累</div>
|
||
</div>
|
||
<div class="beforeafter ba-slider">
|
||
|
||
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/70f84be28ec96250a7c44ae51ffecdf0.webp"
|
||
loading="lazy">
|
||
<div class="resize">
|
||
|
||
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/09d2f45344a3f28db4e5f767888a845d.webp"
|
||
loading="lazy">
|
||
</div>
|
||
<span class="handle"></span>
|
||
</div>
|
||
</div>
|
||
<!-- 轮播图 -->
|
||
<div class="qb">
|
||
<div class="qb-text">
|
||
<div class="qb-t">轻薄有型 便捷随行</div>
|
||
<div class="qb-p">外观优雅简约 ，黄金比例机身，棱角分明，</br>
|
||
诠释利落风格。表面精密喷砂，复刻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/qb-img-1.png" alt="" loading="lazy">
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- wift -->
|
||
<div class="wifi" style="background: url('__IMAGES__/topic_laptop/wifi-img-1.png');background-size:100% auto">
|
||
<div class="wifi-texts">
|
||
<div class="wifi-t">网速时刻在线 跃级流畅 </br>千兆有线网+WiFi6</div>
|
||
<div class="wifi-p">折叠式千兆有线网口和Wi-Fi6无线超能网卡，速度快、抗干扰、低延时，满</br>足多种学习和办公场合需要，带来前所未有的畅连体验，学习,办公流畅不</br>卡顿,拒绝掉线尴尬
|
||
</div>
|
||
</div>
|
||
<div class="wifi-img">
|
||
|
||
<img src="__IMAGES__/topic_laptop/wifi-img-2.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/wifi-img-3.png" alt="" loading="lazy">
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 长久续航 -->
|
||
<div class="endurance"
|
||
style="background: url('__IMAGES__/topic_laptop/endurance-img-3.png');background-size:100% auto">
|
||
|
||
<div class="endurance-texts">
|
||
<div class="endurance-t">
|
||
<span>11.4h</span>
|
||
<span>长久续航 电量满满</span>
|
||
</div>
|
||
<div class="endurance-p">配备57.5Wh大电池，续航长达11.4h，搭配100W闪充充电器，充一次，用一天</div>
|
||
</div>
|
||
<div class="endurance-img">
|
||
|
||
<img src="__IMAGES__/topic_laptop/endurance-img-1.png" alt="" loading="lazy">
|
||
<img src="__IMAGES__/topic_laptop/endurance-img-2.png" alt="" loading="lazy">
|
||
</div>
|
||
<div class="endurance-footer-p">*此数据为ORICO实验室测定所得，请以实际使用为准；</div>
|
||
</div>
|
||
|
||
<!-- 接口大满贯 -->
|
||
<div class="zoom-t">接口大满贯</div>
|
||
<div class="zoom-container" id="zoomContainer">
|
||
<div class="img-wrapper">
|
||
<p class="zoom-p">标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定</p>
|
||
<img src="__IMAGES__/topic_laptop/zoom-img-1.png" alt="接口图" class="bg-img" id="bgImg" loading="lazy">
|
||
</div>
|
||
<!-- 左边 -->
|
||
<div class="annotation anno-delay-1" style="top:60%; left: 37.5%;">
|
||
<span style="text-align: center; font-size: 0.18rem;">肯辛通锁孔</span>
|
||
</div>
|
||
<div class="annotation anno-delay-1 anno-up" style="top: 31.5%; left: 32%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">千兆网口</span>
|
||
</div>
|
||
<div class="annotation anno-delay-1" style="top: 68%; left: 26%;"><span
|
||
style="text-align: center; font-size: 0.16rem;">USB-A<br />(5Gbps)</span></div>
|
||
<div class="annotation anno-delay-1 anno-up1" style="top:35.5%; left:18%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">USB-A<br />(480Mbps)</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 73%; left: 14.5%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">3.5mm<br />耳麦合一</span></div>
|
||
<div class="annotation anno-delay-1 anno-up" style="top: 43%; left: 9%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">TF口3.0</span></div>
|
||
<!-- 右边 -->
|
||
<div class="annotation anno-delay-1" style="top: 64%; left: 58%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">全功能<br />USB-C</span></div>
|
||
<div class="annotation anno-up anno-delay-1" style="top: 34%; left: 65%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">HDMI</span></div>
|
||
<div class="annotation anno-delay-1" style="top: 70.5%; left: 70.5%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">USB-A<br />(5Gbps)</span></div>
|
||
<div class="annotation anno-up1 anno-delay-1" style="top:38.5%; left: 77%;"><span
|
||
style="text-align: center; font-size: 0.18rem;">USB-C<br />(5Gbps)</span></div>
|
||
</div>
|
||
<!-- 滑块 -->
|
||
<div class="swiper swiper-container-1" style="width: 6.82rem;margin: 0 auto;">
|
||
<div class="swiper-wrapper">
|
||
<!-- 滑块1 -->
|
||
<div class="swiper-slide" style="width: 4.5rem;">
|
||
<img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="" style="width: 4.5rem;">
|
||
<div>
|
||
<div class="swiper-slide-t">高效 时刻在线</div>
|
||
<div class="swiper-slide-p">长续航, 随时随地自在办公
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 滑块2 -->
|
||
<div class="swiper-slide" style="width: 4.5rem;">
|
||
<img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="图片2" style="width: 4.5rem;">
|
||
<div>
|
||
<div class="swiper-slide-t">高效 时刻在线</div>
|
||
<div class="swiper-slide-p">长续航, 随时随地自在办公
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 滑块3 -->
|
||
<div class="swiper-slide" style="width: 4.5rem;">
|
||
<img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="" style="width: 4.5rem;">
|
||
<div>
|
||
<div class="swiper-slide-t">高效 时刻在线</div>
|
||
<div class="swiper-slide-p">长续航, 随时随地自在办公
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- tabs -->
|
||
<div class="tabs-container">
|
||
<div class="tab-t active" data-index="0">清晰通话 尽兴畅聊</div>
|
||
<div class="tab-t" data-index="1">更安全 更私密</div>
|
||
<div class="tab-content">
|
||
|
||
<div class="tab-panel active">
|
||
<div class="tab-panel-img">
|
||
<img src="__IMAGES__/topic_laptop/tabs-img-1.png" alt="" class="content-image" loading="lazy">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-panel">
|
||
<video
|
||
src="https://ow.static.f2b211.com/storage/videos/banner/20251215/f3223da3e06367fd417dd983a5382912_dmlkZW9fcWluaXU=.mp4"
|
||
id="securityVideo" class="content-video" muted loop playsinline autoplay
|
||
style="width: 100%;margin:0 auto;">
|
||
您的浏览器不支持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 active" data-index="0">配置1080p前置高清摄像头, 矩阵式降噪麦克风, 噪音环境亦享受清晰通话</div>
|
||
<div class="tabs-p" data-index="1">物理防窥拨片，防止软件恶意开启摄像头</div>
|
||
</div>
|
||
<!-- windows11-->
|
||
<div class="window">
|
||
<img src="__IMAGES__/topic_laptop/windows-1.png" alt="">
|
||
</div>
|
||
<!-- 六宫格 -->
|
||
<div class="footer-imgs">
|
||
<img src="__IMAGES__/topic_laptop/footer-img-1.png">
|
||
<img src="__IMAGES__/topic_laptop/footer-img-2.png">
|
||
<img src="__IMAGES__/topic_laptop/footer-img-3.png">
|
||
<img src="__IMAGES__/topic_laptop/footer-img-4.png">
|
||
<img src="__IMAGES__/topic_laptop/footer-img-5.png">
|
||
<img src="__IMAGES__/topic_laptop/footer-img-6.png">
|
||
</div>
|
||
<!-- 底部文字 -->
|
||
<div class="footer-texts">
|
||
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script src="__JS__/before-after.min.js" type="text/javascript"></script>
|
||
<script>
|
||
// 轮播初始化
|
||
let swiper;
|
||
let swiper1;
|
||
window.onload = function ()
|
||
{
|
||
if (typeof Swiper === 'undefined') {
|
||
console.error('Swiper加载失败，请刷新页面重试');
|
||
return;
|
||
}
|
||
swiper = new Swiper('.auto-swiper-container', {
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false,
|
||
},
|
||
loop: true,
|
||
slidesPerView: 1,
|
||
spaceBetween: 0,
|
||
pagination: false,
|
||
navigation: false,
|
||
scrollbar: false,
|
||
on: {
|
||
resize: function ()
|
||
{
|
||
this.update();
|
||
},
|
||
},
|
||
});
|
||
swiper1 = new Swiper('.swiper-container-1', {
|
||
slidesPerView: 'auto', // 关键：让Swiper识别你设置的4.5rem宽度，不自动计算
|
||
freeMode: true, // 自由滑动，跟手
|
||
grabCursor: true, // 手势提示
|
||
touchMoveStopPropagation: true, // 防滑动穿透
|
||
spaceBetween: 10 // 图片间距（可选）
|
||
});
|
||
};
|
||
|
||
// 进度条动画 - 零HTML改动，仅优化性能
|
||
function animateProgressBars (container)
|
||
{
|
||
// 性能优化1：用WeakMap管理状态，避免污染DOM属性
|
||
const animationState = new WeakMap();
|
||
const state = animationState.get(container) || { isAnimating: false };
|
||
|
||
// 防止重复触发
|
||
if (state.isAnimating) return;
|
||
state.isAnimating = true;
|
||
animationState.set(container, state);
|
||
|
||
const progressFills = container.querySelectorAll('.progress-fill');
|
||
console.log(progressFills, '=progressFills=')
|
||
progressFills.forEach(fill =>
|
||
{
|
||
clearTimeout(fill._animateTimer);
|
||
// 性能优化2：重置用transform而非width
|
||
fill.style.transform = 'scaleX(0)';
|
||
// 性能优化3：用requestAnimationFrame替代setTimeout，对齐浏览器刷新
|
||
fill._animateTimer = requestAnimationFrame(() =>
|
||
{
|
||
const targetValue = fill.getAttribute('data-value');
|
||
console.log(targetValue, '=targetValue=')
|
||
console.log(fill.style)
|
||
// 性能优化4：用transform替代width，消除重排
|
||
fill.style.transform = `scaleX(${targetValue / 100})`;
|
||
});
|
||
});
|
||
}
|
||
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;
|
||
}
|
||
function isProgressContainerAbove (container)
|
||
{
|
||
const rect = container.getBoundingClientRect();
|
||
return rect.bottom <= 0 || isElementInView(container);
|
||
}
|
||
|
||
const debounce = (fn, delay = 16) =>
|
||
{
|
||
let timer = null;
|
||
return (isResize = false) =>
|
||
{
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => fn(isResize), delay);
|
||
};
|
||
};
|
||
|
||
// 修复1：修正选择器，匹配HTML中的.progress-section
|
||
const progressContainers = document.querySelectorAll('.progress-section');
|
||
const progressAnimatedMap = new Map();
|
||
const progressPermanentMap = new Map();
|
||
|
||
progressContainers.forEach(container =>
|
||
{
|
||
progressAnimatedMap.set(container, false);
|
||
progressPermanentMap.set(container, false);
|
||
});
|
||
|
||
const handleProgressScroll = debounce((isResize) =>
|
||
{
|
||
if (isResize) return;
|
||
|
||
progressContainers.forEach(container =>
|
||
{
|
||
if (progressPermanentMap.get(container)) return;
|
||
|
||
const isAnimated = progressAnimatedMap.get(container);
|
||
if (isElementInView(container) && !isAnimated) {
|
||
animateProgressBars(container);
|
||
progressAnimatedMap.set(container, true);
|
||
progressPermanentMap.set(container, true);
|
||
}
|
||
});
|
||
});
|
||
|
||
let progressResizeTimer = null;
|
||
const handleProgressResize = () =>
|
||
{
|
||
clearTimeout(progressResizeTimer);
|
||
progressResizeTimer = setTimeout(() =>
|
||
{
|
||
progressContainers.forEach(container =>
|
||
{
|
||
const isPermanent = progressPermanentMap.get(container);
|
||
if (isPermanent) {
|
||
const progressFills = container.querySelectorAll('.progress-fill');
|
||
progressFills.forEach(fill =>
|
||
{
|
||
clearTimeout(fill._animateTimer);
|
||
const targetValue = fill.getAttribute('data-value');
|
||
fill.style.transform = `scaleX(${targetValue / 100})`;
|
||
});
|
||
}
|
||
});
|
||
}, 200);
|
||
};
|
||
|
||
const initAllProgressContainers = () =>
|
||
{
|
||
setTimeout(() =>
|
||
{
|
||
progressContainers.forEach(container =>
|
||
{
|
||
if (!progressPermanentMap.get(container) && isProgressContainerAbove(container)) {
|
||
animateProgressBars(container);
|
||
progressAnimatedMap.set(container, true);
|
||
progressPermanentMap.set(container, true);
|
||
}
|
||
});
|
||
}, 100);
|
||
};
|
||
|
||
window.addEventListener('scroll', () => handleProgressScroll(false), { passive: true });
|
||
window.addEventListener('resize', handleProgressResize);
|
||
document.addEventListener('DOMContentLoaded', initAllProgressContainers);
|
||
|
||
|
||
// Tab切换
|
||
const tabItems = document.querySelectorAll('.tab-item');
|
||
const tabPanels = document.querySelectorAll('.tab-panel');
|
||
const tabPs = document.querySelectorAll('.tabs-p');
|
||
const tabT = document.querySelectorAll('.tab-t');
|
||
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.muted = true;
|
||
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');
|
||
|
||
tabPs[prevIndex].classList.remove('active');
|
||
tabPs[index].classList.add('active');
|
||
|
||
tabT[prevIndex].classList.remove('active');
|
||
tabT[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;
|
||
});
|
||
});
|
||
|
||
// 接口模块动画
|
||
(function ()
|
||
{
|
||
const TRIGGER_RATIO = 0.1;
|
||
let lastScrollY = window.scrollY;
|
||
let isResizing = false;
|
||
let resizeTimer = null;
|
||
|
||
const zoomContainer = document.getElementById('zoomContainer');
|
||
const annotations = document.querySelectorAll('.annotation');
|
||
const bgImg = document.getElementById('bgImg');
|
||
|
||
const elState = new Map();
|
||
if (zoomContainer) {
|
||
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;
|
||
};
|
||
|
||
const isElementAboveViewport = (el) =>
|
||
{
|
||
const rect = el.getBoundingClientRect();
|
||
return rect.bottom <= 0 || isElementInView(el);
|
||
};
|
||
|
||
const fadeInInterface = (el) =>
|
||
{
|
||
if (!el || elState.get(el).isFadedIn) return;
|
||
annotations.forEach(anno => anno.classList.add('anno-show'));
|
||
bgImg.classList.add('zoom-out');
|
||
elState.get(el).isFadedIn = true;
|
||
};
|
||
|
||
const hideInterface = (el) =>
|
||
{
|
||
if (isResizing) return;
|
||
if (!el || !elState.get(el).isFadedIn) return;
|
||
annotations.forEach(anno => anno.classList.remove('anno-show'));
|
||
bgImg.classList.remove('zoom-out');
|
||
elState.get(el).isFadedIn = false;
|
||
};
|
||
|
||
const debounce = (fn, delay = 16) =>
|
||
{
|
||
let timer = null;
|
||
return (isResize = false) =>
|
||
{
|
||
clearTimeout(timer);
|
||
isResizing = isResize;
|
||
timer = setTimeout(() =>
|
||
{
|
||
fn();
|
||
isResizing = false;
|
||
}, delay);
|
||
};
|
||
};
|
||
|
||
const handleScroll = debounce((isResize) =>
|
||
{
|
||
if (isResize) return;
|
||
|
||
const currentScrollY = window.scrollY;
|
||
const isScrollUp = currentScrollY < lastScrollY;
|
||
const isScrollDown = currentScrollY > lastScrollY;
|
||
|
||
if (!zoomContainer) return;
|
||
|
||
const prevInView = elState.get(zoomContainer).isInView;
|
||
const currentInView = isElementInView(zoomContainer);
|
||
elState.set(zoomContainer, { ...elState.get(zoomContainer), isInView: currentInView });
|
||
|
||
if (isScrollDown) {
|
||
if (currentInView && !prevInView) {
|
||
fadeInInterface(zoomContainer);
|
||
}
|
||
}
|
||
|
||
if (isScrollUp) {
|
||
if (!currentInView && prevInView) {
|
||
hideInterface(zoomContainer);
|
||
}
|
||
}
|
||
|
||
lastScrollY = currentScrollY;
|
||
});
|
||
|
||
const handleResize = () =>
|
||
{
|
||
clearTimeout(resizeTimer);
|
||
isResizing = true;
|
||
resizeTimer = setTimeout(() =>
|
||
{
|
||
isResizing = false;
|
||
if (zoomContainer && elState.get(zoomContainer).isFadedIn) {
|
||
annotations.forEach(anno => anno.classList.add('anno-show'));
|
||
bgImg.classList.add('zoom-out');
|
||
}
|
||
}, 200);
|
||
};
|
||
|
||
const initInterfaceElement = () =>
|
||
{
|
||
setTimeout(() =>
|
||
{
|
||
if (zoomContainer && isElementAboveViewport(zoomContainer)) {
|
||
fadeInInterface(zoomContainer);
|
||
}
|
||
}, 100);
|
||
};
|
||
|
||
window.addEventListener('scroll', () => handleScroll(false), { passive: true });
|
||
window.addEventListener('resize', handleResize);
|
||
window.addEventListener('load', initInterfaceElement);
|
||
document.addEventListener('DOMContentLoaded', initInterfaceElement);
|
||
})();
|
||
// 图片对比滑块
|
||
$(document).ready(function ()
|
||
{
|
||
$('.ba-slider').beforeAfter({
|
||
startPercent: 50,
|
||
handle: '.handle',
|
||
resize: '.resize'
|
||
});
|
||
});
|
||
|
||
// 视频自动播放（移除显隐逻辑，仅保留播放/暂停核心）
|
||
(function ()
|
||
{
|
||
const allVideos = document.querySelectorAll('.fs-video');
|
||
const fsBox = document.querySelector('.fs-box');
|
||
let isVideoPlaying = false;
|
||
let videoTip = null;
|
||
|
||
// 初始化视频提示
|
||
const initVideoTip = () =>
|
||
{
|
||
if (!fsBox || videoTip) return;
|
||
videoTip = document.createElement('div');
|
||
videoTip.className = 'video-tip';
|
||
videoTip.innerText = '点击播放视频';
|
||
fsBox.appendChild(videoTip);
|
||
videoTip.style.display = 'none';
|
||
};
|
||
|
||
// 停止所有视频（仅暂停，无显隐）
|
||
function stopAllVideos ()
|
||
{
|
||
allVideos.forEach((video) =>
|
||
{
|
||
video.pause(); // 仅暂停，删除display修改
|
||
});
|
||
isVideoPlaying = false;
|
||
if (videoTip) videoTip.style.display = 'none';
|
||
}
|
||
|
||
// 播放指定视频（仅播放，无显隐）
|
||
const playTargetVideo = (video) =>
|
||
{
|
||
if (!video) return;
|
||
stopAllVideos();
|
||
|
||
// 强制静音+播放
|
||
video.muted = true;
|
||
video.play().then(() =>
|
||
{
|
||
isVideoPlaying = true;
|
||
if (videoTip) videoTip.style.display = 'none';
|
||
}).catch((err) =>
|
||
{
|
||
console.log('视频自动播放失败：', err);
|
||
if (videoTip) videoTip.style.display = 'block';
|
||
// 点击视频手动播放（仅执行一次）
|
||
video.addEventListener('click', () =>
|
||
{
|
||
video.play();
|
||
isVideoPlaying = true;
|
||
if (videoTip) videoTip.style.display = 'none';
|
||
}, { once: true });
|
||
});
|
||
};
|
||
|
||
// 可视区判断（优化触发时机）
|
||
const isFsBoxInView = () =>
|
||
{
|
||
if (!fsBox) return false;
|
||
const rect = fsBox.getBoundingClientRect();
|
||
return rect.top < window.innerHeight * 0.8 && rect.bottom > window.innerHeight * 0.2;
|
||
};
|
||
|
||
// 滚动处理（防抖+节流）
|
||
let lastVideoScrollTime = 0;
|
||
const handleVideoScroll = () =>
|
||
{
|
||
const now = Date.now();
|
||
if (now - lastVideoScrollTime < 50) return; // 节流50ms
|
||
lastVideoScrollTime = now;
|
||
|
||
if (isFsBoxInView() && !isVideoPlaying) {
|
||
const video = fsBox.querySelector('.fs-video');
|
||
playTargetVideo(video);
|
||
} else if (!isFsBoxInView() && isVideoPlaying) {
|
||
stopAllVideos();
|
||
}
|
||
};
|
||
|
||
// 页面交互后自动播放（仅执行一次）
|
||
document.addEventListener('click', () =>
|
||
{
|
||
if (isFsBoxInView() && !isVideoPlaying) {
|
||
const video = fsBox.querySelector('.fs-video');
|
||
playTargetVideo(video);
|
||
}
|
||
}, { once: true });
|
||
|
||
// 窗口缩放处理（移除显隐相关，仅保留状态判断）
|
||
let isVideoResizing = false;
|
||
let videoResizeTimer = null;
|
||
const handleVideoResize = () =>
|
||
{
|
||
clearTimeout(videoResizeTimer);
|
||
isVideoResizing = true;
|
||
videoResizeTimer = setTimeout(() =>
|
||
{
|
||
isVideoResizing = false;
|
||
// 移除显隐逻辑，仅保留状态标记
|
||
}, 200);
|
||
};
|
||
|
||
// 初始化执行
|
||
initVideoTip();
|
||
window.addEventListener('scroll', handleVideoScroll, { passive: true });
|
||
window.addEventListener('resize', handleVideoResize);
|
||
// 页面加载完成后尝试播放视频
|
||
window.addEventListener('load', () =>
|
||
{
|
||
if (isFsBoxInView()) {
|
||
const video = fsBox.querySelector('.fs-video');
|
||
playTargetVideo(video);
|
||
}
|
||
});
|
||
})();
|
||
// 图片放大动效
|
||
document.addEventListener('DOMContentLoaded', function ()
|
||
{
|
||
const zoomImages = document.querySelectorAll('.zoom-image');
|
||
let isResizing = false;
|
||
let resizeTimer = null;
|
||
|
||
const isImageAboveViewport = (image) =>
|
||
{
|
||
const rect = image.getBoundingClientRect();
|
||
return rect.bottom <= 0 || (rect.top < window.innerHeight * (2 / 3) && rect.bottom > 0);
|
||
};
|
||
|
||
const debounce = (fn) =>
|
||
{
|
||
let timer = null;
|
||
return () =>
|
||
{
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() =>
|
||
{
|
||
if (!isResizing) fn();
|
||
}, 16);
|
||
};
|
||
};
|
||
|
||
const handleScroll = debounce(() =>
|
||
{
|
||
zoomImages.forEach(image =>
|
||
{
|
||
const imageRect = image.getBoundingClientRect();
|
||
const windowHeight = window.innerHeight;
|
||
const triggerPoint = windowHeight * (2 / 3);
|
||
|
||
if (imageRect.top < triggerPoint && imageRect.bottom > 0) {
|
||
image.classList.add('active');
|
||
} else {
|
||
image.classList.remove('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
const handleResize = () =>
|
||
{
|
||
clearTimeout(resizeTimer);
|
||
isResizing = true;
|
||
resizeTimer = setTimeout(() =>
|
||
{
|
||
isResizing = false;
|
||
zoomImages.forEach(image =>
|
||
{
|
||
if (image.classList.contains('active')) {
|
||
image.classList.add('active');
|
||
}
|
||
});
|
||
}, 200);
|
||
};
|
||
|
||
const initZoomImages = () =>
|
||
{
|
||
zoomImages.forEach(image =>
|
||
{
|
||
if (isImageAboveViewport(image)) {
|
||
image.classList.add('active');
|
||
}
|
||
});
|
||
};
|
||
|
||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||
window.addEventListener('resize', handleResize);
|
||
window.addEventListener('load', initZoomImages);
|
||
document.addEventListener('DOMContentLoaded', initZoomImages);
|
||
window.dispatchEvent(new Event('scroll'));
|
||
});
|
||
</script>
|
||
{/block} |