From ded748ca87c6c84db9c3299a9756dbfe8b9f8586 Mon Sep 17 00:00:00 2001
From: liqian <735273025@qq.com>
Date: Tue, 16 Dec 2025 15:43:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/pc/public/header.html          |   3 +
 app/index/view/pc/topic_laptop/index.html     | 564 +++++++++---------
 .../static/index/pc/css/topic_laptop/fs.css   |   6 +
 .../index/pc/css/topic_laptop/index.css       |   6 +
 .../static/index/pc/css/topic_laptop/lb.css   |   4 +-
 public/static/index/pc/js/large.js            |   3 +-
 6 files changed, 301 insertions(+), 285 deletions(-)

diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html
index 934ff36f..c2216898 100644
--- a/app/index/view/pc/public/header.html
+++ b/app/index/view/pc/public/header.html
@@ -284,4 +284,7 @@
 			$('#top-country').hide();
 		});
 	});
+</script>
+<script>
+    console.log('触发触发触发!!!!!!!!!!')
 </script>
\ No newline at end of file
diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html
index 872705a7..25296692 100644
--- a/app/index/view/pc/topic_laptop/index.html
+++ b/app/index/view/pc/topic_laptop/index.html
@@ -27,26 +27,25 @@
 <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">
+<style>
+
+
+  
+</style>
 <script type="text/javascript">
     (function (doc, win)
     {
         var docEl = doc.documentElement;
         var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
-        // 设计稿基准宽度改为2560px
         var designWidth = 1920;
-        // 设计稿下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';
         }
@@ -59,7 +58,6 @@
 {/block}
 {block name="main"}
 {notempty name="data.top_focus_images"}
-<!-- 轮播核心容器 -->
 <div class="swiper-container auto-swiper-container" style="margin-top:60px;">
     <div class="swiper-wrapper">
         {volist name="data.top_focus_images" id="tfi"}
@@ -71,7 +69,6 @@
 </div>
 {/notempty}
 {notempty name="data.perf"}
-<!-- 性能 -->
 <div class="amd-box">
     <div class="amd-img-box">
         <div class="amd-img-1 opacity0" data-order="1" data-name="">
@@ -108,7 +105,6 @@
 </div>
 {/notempty}
 {notempty name="data.cpu"}
-<!-- 引擎 -->
 {assign name="cpu_first_section" value=":array_shift($data.cpu)" /}
 <div class="fullscreen-img-container" style="background: url('{$cpu_first_section.image|default=\'\'}');background-size:100% auto">
     <div class="overlay-text opacity0" data-order="7">
@@ -121,12 +117,10 @@
         {/volist}
     </div>
 </div>
-<!-- 引擎描述 -->
 <div class="bottom-desc">
     {$cpu_first_section.desc|default=''|raw}
 </div>
 {/notempty}
-<!-- 引擎进度条 写死在前端(后台配置太繁琐)-->
 <div class="container">
     <h1 class="progress-title">{:lang_i18n('CineBench R23 多核跑分')}</h1>
     <div class="progress-section">
@@ -189,7 +183,6 @@
     <div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
 </div>
 {notempty name="data.gpu"}
-<!-- 显卡-->
 {assign name="gpu_first_section" value=":array_shift($data.gpu)"/}
 <div class="readon-box" style="background: url('{$gpu_first_section.image|default=\'\'}');background-size:100% auto">
     <div class="readon-text opacity0" data-order="9">
@@ -206,7 +199,6 @@
     </div>
 </div>
 {/notempty}
- <!-- 显卡进度条 -->
 <div class="container">
     <h1 class="progress-title" style="padding-top: 0;">{:lang_i18n('3DMARK Time Spy显卡得分')}</h1>
     <div class="progress-section">
@@ -243,7 +235,6 @@
                 <span class="value gray font32 color8A8787">1000</span>
             </div>
         </div>
-
         <div class="progress-item w1000">
             <div class="progress-bar-container ">
                 <div class="progress-bar">
@@ -259,7 +250,6 @@
     <div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
 </div>
 {notempty name="data.ram"}
-<!-- 运行内存 -->
 <div class="wift" >
     <div class="wift-t opacity0" data-order="12">{$data.ram.title|raw}</div>
     <div class="wift-bg" style="background: url('{$data.ram.image}');background-size:100% auto;">
@@ -273,7 +263,6 @@
 </div>
 {/notempty}
 {notempty name="data.hard_drive"}
-<!-- 硬盘 -->
 <div class="m2">
     {assign name="hard_drive_first" value=":array_shift($data.hard_drive)"/}
     <div class="m2-bg" style="background: url('{$hard_drive_first.image|default=\'\'}');background-size:100% auto">
@@ -288,21 +277,20 @@
 {/notempty}
 {notempty name="data.cooling_system"}
 {notempty name="$data.cooling_system.0"}
-<!-- 45w -->
 <div class="dl opacity0" data-order="17">
     <div class="dl-t">{$data.cooling_system.0.title|raw}</div>
     <p class="dl-p">{$data.cooling_system.0.short_title|raw}</p>
 </div>
 {/notempty}
-<!-- 风扇 -->
 <div class="fs">
     <div class="fs-box">
         {notempty name="data.cooling_system.0"}
         <img src="{$data.cooling_system.0.image|default=''}" alt="" class="fs-img">
         <video
             src="{$data.cooling_system.0.video|default=''}"
-            class="fs-video" muted loop playsinline 
-            style="display: none;width: 1440px;margin:0 auto;max-width: 1440px;">
+            class="fs-video" muted loop playsinline autoplay
+            preload="auto"
+            style="display: none;width:1440px;height: 100%;margin:0 auto;">
             您的浏览器不支持HTML5视频播放，请升级浏览器
         </video>
         <div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
@@ -312,31 +300,25 @@
                 {notempty name="data.cooling_system.1"}<img src="{$data.cooling_system.1.image}" alt="">{/notempty}
                 {notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="">{/notempty}
             </div>
-            <!-- data-order="19" -->
             <div class="fs-b-img"  style="min-height: 20px;">
                 {notempty name="data.cooling_system.3"}<img src="{$data.cooling_system.3.image}" alt="">{/notempty}
             </div>
         </div>
     </div>
-  
 </div>
 {/notempty}
 {notempty name="data.apps"}
-<!-- 性能 -->
 <div class="xn">
     <div class="xn-t opacity0" data-order="19">{$data.apps.title|default=''}</div>
     <div class="xn-container">
-        <!-- 图片区域（滚动到此处自动放大） -->
         <div class="xn-image-section">
-            <!-- 示例图：MacBook Air 天蓝色款（替换为官网高清图） -->
-            <img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image" loading="lazy"> <!-- 懒加载优化 -->
+            <img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image" loading="lazy">
         </div>
     </div>
     <div class="xn-p">{$data.apps.desc|default=''|raw}</div>
 </div>
 {/notempty}
 {notempty name="data.screen_soft_light"}
-<!-- IPS -->
 {assign name="soft_light_first" value=":array_shift($data.screen_soft_light)"/}
 <div class="ips" style="background: url('{$soft_light_first.image|default=\'\'}');background-size:100% auto">
     <div class="ips-text opacity0" data-order="20">
@@ -353,7 +335,6 @@
 </div>
 {/notempty}
 {notempty name="data.screen_color_gamut"}
-<!-- RGB -->
 {assign name="color_gamut_first" value=":array_shift($data.screen_color_gamut)"/}
 <div class="rgb" style="background: url('{$color_gamut_first.image|default=\'\'}');background-size:100% auto">
     {notempty name="color_gamut_first"}
@@ -370,7 +351,6 @@
 </div>
 {/notempty}
 {notempty name="data.screen_anti_glare"}
-<!-- 舒适不累眼 -->
 <div class="bly">
     {assign name="anti_glare_first" value=":array_shift($data.screen_anti_glare)"/}
     {notempty name="anti_glare_first"}
@@ -380,21 +360,17 @@
     </div>
     {/notempty}
     <div class="beforeafter ba-slider">
-        <!-- 对比前的图片 -->
         {assign name="anti_glare_left" value=":array_shift($data.screen_anti_glare)"/}
         <img src="{$anti_glare_left.image|default=''}">
         <div class="resize">
-            <!-- 对比后的图片 -->
              {assign name="anti_glare_right" value=":array_shift($data.screen_anti_glare)"/}
             <img src="{$anti_glare_right.image|default=''}">
         </div>
-        <!-- 可拖动的分隔条 -->
         <span class="handle"></span>
     </div>
 </div>
 {/notempty}
 {notempty name="data.exterior_texture"}
-<!-- 轻薄有型 -->
 <div class="qb">
     <div class="qb-text opacity0" data-order="25">
         {assign name="exterior_texture_first" value=":array_shift($data.exterior_texture)"/}
@@ -413,7 +389,6 @@
 </div>
 {/notempty}
 {notempty name="data.network_card"}
-<!-- wifi6 -->
 {assign name="netword_card_first" value=":array_shift($data.network_card)"/}
 <div class="wift6" style="background: url('{$netword_card_first.image|default=\'\'}');background-size:100% auto">
     <div class="wift6-text opacity0" data-order="26">
@@ -428,7 +403,6 @@
 </div>
 {/notempty}
 {notempty name="data.battery_life"}
-<!-- 11.4h长久续航 -->
 {assign name="battery_life_first" value=":array_shift($data.battery_life)"/}
 <div class="xh" style="background: url('{$battery_life_first.image|default=\'\'}');background-size:100% auto">
     <div class="xh-text opacity0" data-order="28">
@@ -443,34 +417,27 @@
     <div class="xh-b-p">{$battery_life_first.desc|default=''|raw}</div>
 </div>
 {/notempty}
-<!-- 接口 -->
 <div class="zoom-container" id="zoomContainer">
-    <!-- <img src="__IMAGES__/topic_laptop/jk.png" alt="接口图" class="bg-img" id="bgImg"> -->
     <div class="img-wrapper">
         <img src="__IMAGES__/topic_laptop/jk.png" alt="接口图" class="bg-img" id="bgImg">
     </div>
-    <!-- 标注：top/left用百分比，位置相对图片不变 -->
     <div class="annotation anno-delay-1" style="top: 53.5%; left: 42%;"><span style="text-align: center;">{:lang_i18n('肯辛通锁孔')}</span></div>
     <div class="annotation anno-delay-1" style="top: 57%; left: 37%;"><span style="text-align: center;">{:lang_i18n('千兆网口')}</span></div>
     <div class="annotation anno-delay-1" style="top: 60.3%; left: 31%;"><span style="text-align: center;">{:lang_i18n('USB-A<br/>(5Gbps)')}</span></div>
     <div class="annotation anno-delay-1" style="top:63.4%; left:25%;"><span style="text-align: center;">{:lang_i18n('USB-A<br/>(480Mbps)')}</span></div>
     <div class="annotation anno-delay-1" style="top: 66%; left: 20.5%;"><span style="text-align: center;">{:lang_i18n('3.5mm<br/>耳麦合一')}</span></div>
     <div class="annotation anno-delay-1" style="top: 68%; left: 16%;"><span style="text-align: center;">{:lang_i18n('TF口3.0')}</span></div>
-
     <div class="annotation anno-delay-1" style="top: 63.5%; left: 70.5%;"><span style="text-align: center;">{:lang_i18n('USB-A<br/>(5Gbps)')}</span></div>
     <div class="annotation anno-delay-1" style="top: 66.5%; left: 76%;"><span style="text-align: center;">{:lang_i18n('USB-C<br/>(5Gbps)')}</span></div>
     <div class="annotation anno-delay-1" style="top: 59.5%; left: 64%;"><span style="text-align: center;">{:lang_i18n('HDMI')}</span></div>
     <div class="annotation anno-delay-1" style="top: 57%; left: 59%;"><span style="text-align: center;">{:lang_i18n('全功能<br/>USB-C')}</span></div>
 </div>
 {notempty name="data.scene_focus_images"}
-<!-- 轮播图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">
                 {volist name="data.scene_focus_images" id="so"}
@@ -478,15 +445,13 @@
                 {/volist}
             </div>
         </div>
-        <!-- 右箭头 -->
         <div class="carousel-arrow arrow-right">
             <img src="__IMAGES__/topic_laptop/r1.png" alt="右箭头">
         </div>
     </div>
-    <!-- 轮播对应文字 -->
     <div class="carousel-texts">
         {volist name="data.scene_focus_images" id="so"}
-        <div class="carousel-text active" data-index="{$key}">
+        <div class="carousel-text {if $key == 0}active{/if}" data-index="{$key}">
             <div class="carousel-text-t">{$so.title}</div>
             <div class="carousel-text-p">{$so.short_title}</div>
         </div>
@@ -495,31 +460,25 @@
 </div>
 {/notempty}
 {notempty name="data.camare_microphone_security"}
-<!-- 模块标题 -->
 {assign name="cms_section_title" value=":array_shift($data.camare_microphone_security)"/}
-<!-- 摄像头/麦克风 -->
 {assign name="camare_microphone" value=":array_shift($data.camare_microphone_security)"/}
-<!-- 安全介绍 -->
 {assign name="security" value=":array_shift($data.camare_microphone_security)"/}
 <div class="tabs-container">
     <div class="tab-t opacity0" data-order="30">{$cms_section_title.title|default=''}</div>
     <div class="tab-content">
-        <!-- 清晰通话 - 图片内容 -->
         {notempty name="camare_microphone"}
         <div class="tab-panel active">
             <div class="tab-panel-img">
                 <img src="{$camare_microphone.image}" alt="{$camare_microphone.title}" class="content-image">
             </div>
-           
         </div>
         {/notempty}
-        <!-- 安护密守 - 视频内容 -->
         {notempty name="security"}
         <div class="tab-panel">
             <video
                 src="{$security.video}"
-                id="securityVideo" class="content-video" muted loop playsinline
-                style="width: 1440px;margin:0 auto;max-width: 1440px;min-width: 1280px">
+                id="securityVideo" class="content-video" muted loop playsinline autoplay
+                style="width: 100%;margin:0 auto;max-width: 1440px;min-width: 1280px">
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
         </div>
@@ -541,11 +500,9 @@
 </div>
 {/notempty}
 {notempty name="data.unified_preinstall"}
-<!-- windows -->
 <div class="windows" style="background: url('{$data.unified_preinstall.image|default=\'\'}');background-size:100% auto"></div>
 {/notempty}
 {notempty name="data.product_testing"}
-<!-- 底部图片 -->
 <div class="bottom-img-box">
     <div class="bottom-img opacity0" data-order="31">
         {volist name="data.product_testing" id="po"}
@@ -555,7 +512,6 @@
 </div>
 {/notempty}
 {notempty name="data.webpage_footnotes"}
-<!-- 底部文字 -->
 <div class="bottom-text">
     <div class="bottom-p">{$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}</div>
 </div>
@@ -564,8 +520,7 @@
 {block name="script"}
 <script src="__JS__/before-after.min.js" type="text/javascript"></script>
 <script type="text/javascript">
-
-      // 轮播初始化
+    // 轮播初始化
     let swiper;
     window.onload = function ()
     {
@@ -575,10 +530,10 @@
         }
         swiper = new Swiper('.auto-swiper-container', {
             autoplay: {
-                delay: 3000, // 3秒切换
+                delay: 3000,
                 disableOnInteraction: false,
             },
-            loop: false,
+            loop: true,
             slidesPerView: 1,
             spaceBetween: 0,
             pagination: false,
@@ -591,17 +546,17 @@
                 },
             },
         });
-        // 初始化时触发滚动事件，确保状态正确
         window.dispatchEvent(new Event('scroll'));
     };
 
-    // 滚动淡入动效（修复刷新/缩放隐藏问题）
+    // 滚动淡入动效（核心优化：18-19号顺序执行）
     (function ()
     {
-        const TRIGGER_RATIO = 0.1; // 10%可见触发
+        const TRIGGER_RATIO = 0.1;
         let lastScrollY = window.scrollY;
         let isResizing = false;
         let resizeTimer = null;
+        let is18Animated = false; // 18号执行标记
 
         const els = Array.from(document.querySelectorAll('[data-order]')).sort((a, b) => a.dataset.order - b.dataset.order);
         const elState = new Map();
@@ -609,11 +564,12 @@
         {
             elState.set(el, {
                 isInView: false,
-                isFadedIn: false
+                isFadedIn: false,
+                is18: el.dataset.order === '18',
+                is19: el.dataset.order === '19'
             });
         });
 
-        // 可视区判断工具函数
         const isElementInView = (el) =>
         {
             const rect = el.getBoundingClientRect();
@@ -633,25 +589,28 @@
             const visibleWidth = Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
             const visibleRatio = (visibleHeight * visibleWidth) / (rect.height * rect.width);
 
+            // 18号降低阈值，19号必须等18号执行完
+            const state = elState.get(el);
+            if (state.is18) return visibleRatio >= 0.3;
+            if (state.is19) return visibleRatio >= 0.5 && is18Animated;
             return visibleRatio >= TRIGGER_RATIO;
         };
 
-        // 判断元素是否在当前滚动位置上方
         const isElementAboveViewport = (el) =>
         {
             const rect = el.getBoundingClientRect();
             return rect.bottom <= 0 || isElementInView(el);
         };
 
-        // 淡入元素
         const fadeInElement = (el) =>
         {
             if (elState.get(el).isFadedIn) return;
             el.classList.add('fade-in');
             elState.get(el).isFadedIn = true;
+            // 标记18号执行完成
+            if (elState.get(el).is18) is18Animated = true;
         };
 
-        // 隐藏元素（缩放时跳过）
         const hideElement = (el) =>
         {
             if (isResizing) return;
@@ -660,7 +619,6 @@
             elState.get(el).isFadedIn = false;
         };
 
-        // 防抖函数
         const debounce = (fn, delay = 16) =>
         {
             let timer = null;
@@ -673,13 +631,18 @@
                     fn();
                     if (isResize) {
                         isResizing = false;
-                        refreshAllElementsState();
+                        els.forEach(el =>
+                        {
+                            const isFaded = elState.get(el).isFadedIn;
+                            const isAbove = isElementAboveViewport(el);
+                            if (isFaded) el.classList.add('fade-in');
+                            if (!isFaded && isAbove) fadeInElement(el);
+                        });
                     }
                 }, delay);
             };
         };
 
-        // 缩放后刷新所有元素状态（保留已显示）
         const refreshAllElementsState = () =>
         {
             els.forEach(el =>
@@ -695,7 +658,6 @@
             });
         };
 
-        // 核心滚动逻辑
         const handleScroll = debounce((isResize) =>
         {
             if (isResize) return;
@@ -710,14 +672,12 @@
                 const currentInView = isElementInView(el);
                 elState.set(el, { ...elState.get(el), isInView: currentInView });
 
-                // 向下滚动淡入
                 if (isScrollDown) {
                     if (currentInView && !prevInView) {
                         fadeInElement(el);
                     }
                 }
 
-                // 向上滚动隐藏
                 if (isScrollUp) {
                     if (!currentInView && prevInView) {
                         hideElement(el);
@@ -728,7 +688,6 @@
             lastScrollY = currentScrollY;
         });
 
-        // 缩放处理
         const handleResize = () =>
         {
             clearTimeout(resizeTimer);
@@ -740,7 +699,6 @@
             }, 200);
         };
 
-        // 初始化上方元素
         const initAllAboveElements = () =>
         {
             setTimeout(() =>
@@ -754,14 +712,13 @@
             }, 100);
         };
 
-        // 事件绑定
         window.addEventListener('scroll', () => handleScroll(false), { passive: true });
         window.addEventListener('resize', handleResize);
         window.addEventListener('load', initAllAboveElements);
         document.addEventListener('DOMContentLoaded', initAllAboveElements);
     })();
 
-    // 接口模块动画（同步修复）
+    // 接口模块动画
     (function ()
     {
         const TRIGGER_RATIO = 0.1;
@@ -781,7 +738,6 @@
             });
         }
 
-        // 可视区判断
         const isElementInView = (el) =>
         {
             const rect = el.getBoundingClientRect();
@@ -804,14 +760,12 @@
             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;
@@ -820,7 +774,6 @@
             elState.get(el).isFadedIn = true;
         };
 
-        // 隐藏接口模块（缩放时跳过）
         const hideInterface = (el) =>
         {
             if (isResizing) return;
@@ -830,7 +783,6 @@
             elState.get(el).isFadedIn = false;
         };
 
-        // 防抖
         const debounce = (fn, delay = 16) =>
         {
             let timer = null;
@@ -846,7 +798,6 @@
             };
         };
 
-        // 滚动逻辑
         const handleScroll = debounce((isResize) =>
         {
             if (isResize) return;
@@ -876,7 +827,6 @@
             lastScrollY = currentScrollY;
         });
 
-        // 缩放处理
         const handleResize = () =>
         {
             clearTimeout(resizeTimer);
@@ -884,7 +834,6 @@
             resizeTimer = setTimeout(() =>
             {
                 isResizing = false;
-                // 保留已显示状态
                 if (zoomContainer && elState.get(zoomContainer).isFadedIn) {
                     annotations.forEach(anno => anno.classList.add('anno-show'));
                     bgImg.classList.add('zoom-out');
@@ -892,7 +841,6 @@
             }, 200);
         };
 
-        // 初始化
         const initInterfaceElement = () =>
         {
             setTimeout(() =>
@@ -903,30 +851,27 @@
             }, 100);
         };
 
-        // 事件绑定
         window.addEventListener('scroll', () => handleScroll(false), { passive: true });
         window.addEventListener('resize', handleResize);
         window.addEventListener('load', initInterfaceElement);
         document.addEventListener('DOMContentLoaded', initInterfaceElement);
     })();
 
-    // 进度条动画（修复重复触发）
+    // 进度条动画
     function animateProgressBars (container)
     {
-        // 防重复执行锁
         if (container._isAnimating) return;
         container._isAnimating = true;
 
         const progressFills = container.querySelectorAll('.progress-fill');
         progressFills.forEach(fill =>
         {
-            clearTimeout(fill._animateTimer); // 清空旧定时器
+            clearTimeout(fill._animateTimer);
             fill.style.width = '0';
             fill._animateTimer = setTimeout(() =>
             {
                 const targetValue = fill.getAttribute('data-value');
                 fill.style.width = targetValue + '%';
-                // 动画结束解锁
                 setTimeout(() =>
                 {
                     container._isAnimating = false;
@@ -957,7 +902,6 @@
         return visibleRatio >= 0.1;
     }
 
-    // 判断进度条容器是否在上方
     function isProgressContainerAbove (container)
     {
         const rect = container.getBoundingClientRect();
@@ -976,34 +920,31 @@
 
     const progressContainers = document.querySelectorAll('.container');
     const progressAnimatedMap = new Map();
-    const progressPermanentMap = 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; // 已触发则跳过
+            if (progressPermanentMap.get(container)) return;
 
             const isAnimated = progressAnimatedMap.get(container);
             if (isElementInView(container) && !isAnimated) {
                 animateProgressBars(container);
                 progressAnimatedMap.set(container, true);
-                progressPermanentMap.set(container, true); // 标记永久触发
+                progressPermanentMap.set(container, true);
             }
         });
     });
 
-    // 缩放处理（仅刷新样式，不重复动画）
     let progressResizeTimer = null;
     const handleProgressResize = () =>
     {
@@ -1019,14 +960,13 @@
                     {
                         clearTimeout(fill._animateTimer);
                         const targetValue = fill.getAttribute('data-value');
-                        fill.style.width = targetValue + '%'; // 直接设置最终宽度
+                        fill.style.width = targetValue + '%';
                     });
                 }
             });
         }, 200);
     };
 
-    // 初始化进度条
     const initAllProgressContainers = () =>
     {
         setTimeout(() =>
@@ -1042,99 +982,137 @@
         }, 100);
     };
 
-    // 事件绑定
     window.addEventListener('scroll', () => handleProgressScroll(false), { passive: true });
     window.addEventListener('resize', handleProgressResize);
     document.addEventListener('DOMContentLoaded', initAllProgressContainers);
 
-    // 视频/图片切换（修复缩放隐藏）
-    const allVideos = document.querySelectorAll('.fs-video');
-    function stopAllVideos ()
-    {
-        allVideos.forEach((video) =>
+    // 视频/图片切换（核心优化：恢复自动播放+防卡顿）
+    (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 ()
         {
-            video.pause();
-            video.style.display = 'none';
-            const img = video.parentElement.querySelector('.fs-img');
-            if (img) img.style.display = 'block';
-        });
-    }
-
-    let isVideoResizing = false;
-    let videoResizeTimer = null;
-
-    // 滚动处理
-    const handleVideoScroll = () =>
-    {
-        if (isVideoResizing) return;
-
-        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();
-            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');
-            img.style.display = 'none';
-            activeVideo.style.display = 'block';
-
-            if (activeVideo.paused) {
-                activeVideo.play().catch((err) =>
-                {
-                    console.log('视频播放失败（浏览器限制）：', err);
-                    activeVideo.style.display = 'none';
-                    img.style.display = 'block';
-                });
-            }
-        } else {
-            stopAllVideos();
+            allVideos.forEach((video) =>
+            {
+                video.pause();
+                video.style.display = 'none';
+                const img = video.parentElement.querySelector('.fs-img');
+                if (img) img.style.display = 'block';
+            });
+            isVideoPlaying = false;
+            if (videoTip) videoTip.style.display = 'none';
         }
-    };
 
-    // 缩放处理
-    const handleVideoResize = () =>
-    {
-        clearTimeout(videoResizeTimer);
-        isVideoResizing = true;
-        videoResizeTimer = setTimeout(() =>
-        {
-            isVideoResizing = false;
-            // 保留视频播放状态
-            const playingVideo = document.querySelector('.fs-video[style*="display: block"]');
-            if (playingVideo) {
-                const img = playingVideo.parentElement.querySelector('.fs-img');
+        // 播放指定视频
+        const playTargetVideo = (video) => {
+            if (!video) return;
+            stopAllVideos();
+            const img = video.parentElement.querySelector('.fs-img');
+            img.style.display = 'none';
+            video.style.display = 'block';
+            
+            // 强制静音+播放
+            video.muted = true;
+            video.play().then(() => {
+                isVideoPlaying = true;
+                if (videoTip) videoTip.style.display = 'none';
+            }).catch((err) => {
+                console.log('视频自动播放失败：', err);
+                video.style.display = 'block';
                 img.style.display = 'none';
-                playingVideo.style.display = 'block';
+                if (videoTip) videoTip.style.display = 'block';
+                // 点击视频手动播放
+                video.addEventListener('click', () => {
+                    video.play();
+                    isVideoPlaying = true;
+                    if (videoTip) videoTip.style.display = 'none';
+                }, { once: true });
+            });
+        };
+
+        // 可视区判断（优化18号触发）
+        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();
             }
-        }, 200);
-    };
+        };
 
-    window.addEventListener('scroll', handleVideoScroll, { passive: true });
-    window.addEventListener('resize', handleVideoResize);
+        // 页面交互后自动播放
+        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;
+                if (isVideoPlaying) {
+                    const playingVideo = document.querySelector('.fs-video[style*="display: block"]');
+                    if (playingVideo) {
+                        const img = playingVideo.parentElement.querySelector('.fs-img');
+                        img.style.display = 'none';
+                        playingVideo.style.display = 'block';
+                    }
+                }
+            }, 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();
@@ -1170,7 +1148,6 @@
             });
         });
 
-        // 缩放处理
         const handleResize = () =>
         {
             clearTimeout(resizeTimer);
@@ -1178,7 +1155,6 @@
             resizeTimer = setTimeout(() =>
             {
                 isResizing = false;
-                // 保留已放大状态
                 zoomImages.forEach(image =>
                 {
                     if (image.classList.contains('active')) {
@@ -1188,7 +1164,6 @@
             }, 200);
         };
 
-        // 初始化
         const initZoomImages = () =>
         {
             zoomImages.forEach(image =>
@@ -1216,11 +1191,10 @@
         });
     });
 
-    // Tab切换（图/视频）
+    // Tab切换
     const tabItems = document.querySelectorAll('.tab-item');
     const tabPanels = document.querySelectorAll('.tab-panel');
     const tabPs = document.querySelectorAll('.tabs-p');
-    console.log(tabPs,'=tabPs=')
     const indicator = document.querySelector('.tab-indicator');
     const securityVideo = document.getElementById('securityVideo');
 
@@ -1244,7 +1218,6 @@
 
     cacheTabRects();
 
-    // 重置视频
     function resetVideo ()
     {
         if (securityVideo) {
@@ -1253,10 +1226,10 @@
         }
     }
 
-    // 播放视频
     function playVideo ()
     {
         if (securityVideo) {
+            securityVideo.muted = true;
             securityVideo.play().catch(err =>
             {
                 console.log('自动播放失败，请手动点击播放:', err);
@@ -1264,7 +1237,6 @@
         }
     }
 
-    // Tab点击事件
     tabItems.forEach(item =>
     {
         item.addEventListener('click', () =>
@@ -1277,19 +1249,15 @@
 
             tabPanels[prevIndex].classList.remove('active');
             tabPanels[index].classList.add('active');
-
-            // console.log(tabPs[prevIndex],'========tabPs[prevIndex]==========')
             tabPs[prevIndex].classList.remove('active');
             tabPs[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)`;
@@ -1298,7 +1266,6 @@
         });
     });
 
-    // 缩放适配
     window.addEventListener('resize', () =>
     {
         cacheTabRects();
@@ -1307,7 +1274,6 @@
         indicator.style.transform = `translateX(${currentRect.left}px)`;
     });
 
-    // 移动端touch事件
     tabItems.forEach(item =>
     {
         item.addEventListener('touchstart', (e) =>
@@ -1317,111 +1283,145 @@
         }, { passive: false });
     });
 
-    // 初始化视频状态
     document.addEventListener('DOMContentLoaded', () =>
     {
         resetVideo();
     });
 
-    // 自定义轮播（场景）
-    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');
+    // 自定义轮播
+    document.addEventListener('DOMContentLoaded', () => {
+        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 carouselWrapper = document.querySelector('.carousel-wrapper');
 
-    const imgCount = imgItems.length;
-    let imgWidth = imgItems[0]?.offsetWidth || 800;
-    let currentIndex = 0;
-    let autoPlayTimer = null;
-    let carouselResizeTimer = null;
-
-    // 缩放适配
-    const handleCarouselResize = () =>
-    {
-        clearTimeout(carouselResizeTimer);
-        carouselResizeTimer = setTimeout(() =>
-        {
-            imgWidth = imgItems[0].offsetWidth;
-            carouselImgs.style.transform = `translateX(-${currentIndex * imgWidth}px)`;
-        }, 200);
-    };
-
-    // 加载时初始化宽度
-    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;
+        if (!carouselImgs || imgItems.length === 0) {
+            console.warn('轮播图片为空，初始化终止');
+            return;
         }
 
-        carouselImgs.style.transform = `translateX(-${currentIndex * imgWidth}px)`;
-        // 文字联动
-        textItems.forEach((item, idx) =>
-        {
-            item.classList.toggle('active', idx === currentIndex);
-        });
-    }
+        const imgCount = imgItems.length;
+        const imgWidth = 1440;
+        let currentOffset = -imgWidth;
+        let autoPlayTimer = null;
+        let isAnimating = false;
 
-    // 箭头事件
-    leftArrow.addEventListener('click', () =>
-    {
-        switchCarousel(currentIndex - 1);
-        restartAutoPlay();
-    });
+        const firstImgClone = imgItems[0].cloneNode(true);
+        carouselImgs.appendChild(firstImgClone);
+        const lastImgClone = imgItems[imgCount - 1].cloneNode(true);
+        carouselImgs.insertBefore(lastImgClone, imgItems[0]);
+        const allImgItems = document.querySelectorAll('.carousel-img');
 
-    rightArrow.addEventListener('click', () =>
-    {
-        switchCarousel(currentIndex + 1);
-        restartAutoPlay();
-    });
+        carouselImgs.style.transform = `translateX(-${imgWidth}px)`;
+        carouselImgs.style.transition = 'transform 0.5s ease-out';
 
-    // 自动轮播
-    function autoPlay ()
-    {
-        clearInterval(autoPlayTimer);
-        autoPlayTimer = setInterval(() =>
-        {
-            switchCarousel(currentIndex + 1);
-        }, 2500);
-    }
+        const slideToRight = () => {
+            if (isAnimating) return;
+            isAnimating = true;
+
+            currentOffset -= imgWidth;
+            carouselImgs.style.transform = `translateX(${currentOffset}px)`;
+
+            if (currentOffset <= -(imgWidth * (imgCount + 1))) {
+                setTimeout(() => {
+                    carouselImgs.style.transition = 'none';
+                    currentOffset = -imgWidth;
+                    carouselImgs.style.transform = `translateX(${currentOffset}px)`;
+                    setTimeout(() => {
+                        carouselImgs.style.transition = 'transform 0.5s ease-out';
+                        isAnimating = false;
+                    }, 50);
+                }, 500);
+            } else {
+                setTimeout(() => {
+                    isAnimating = false;
+                }, 500);
+            }
+
+            updateTextActive();
+        };
+
+        const slideToLeft = () => {
+            if (isAnimating) return;
+            isAnimating = true;
+
+            currentOffset += imgWidth;
+            carouselImgs.style.transform = `translateX(${currentOffset}px)`;
+
+            if (currentOffset >= 0) {
+                setTimeout(() => {
+                    carouselImgs.style.transition = 'none';
+                    currentOffset = -(imgWidth * imgCount);
+                    carouselImgs.style.transform = `translateX(${currentOffset}px)`;
+                    setTimeout(() => {
+                        carouselImgs.style.transition = 'transform 0.5s ease-out';
+                        isAnimating = false;
+                    }, 50);
+                }, 500);
+            } else {
+                setTimeout(() => {
+                    isAnimating = false;
+                }, 500);
+            }
+
+            updateTextActive();
+        };
+
+        const updateTextActive = () => {
+            let currentIndex = Math.abs(Math.round(currentOffset / imgWidth)) - 1;
+            currentIndex = currentIndex % imgCount;
+            if (currentIndex < 0) currentIndex = imgCount - 1;
+
+            textItems.forEach((item, idx) => {
+                item.classList.toggle('active', idx === currentIndex);
+            });
+        };
+
+        const autoPlay = () => {
+            clearInterval(autoPlayTimer);
+            autoPlayTimer = setInterval(() => {
+                slideToRight();
+            }, 2500);
+        };
+
+        const restartAutoPlay = () => {
+            clearInterval(autoPlayTimer);
+            autoPlay();
+        };
+
+        if (leftArrow) {
+            leftArrow.addEventListener('click', () => {
+                slideToLeft();
+                restartAutoPlay();
+            });
+        }
+        if (rightArrow) {
+            rightArrow.addEventListener('click', () => {
+                slideToRight();
+                restartAutoPlay();
+            });
+        }
+
+        if (carouselWrapper) {
+            carouselWrapper.addEventListener('mouseenter', () => {
+                clearInterval(autoPlayTimer);
+            });
+            carouselWrapper.addEventListener('mouseleave', () => {
+                autoPlay();
+            });
+        }
 
-    // 重启自动轮播
-    function restartAutoPlay ()
-    {
-        clearInterval(autoPlayTimer);
         autoPlay();
-    }
-
-    // 悬停暂停
-    document.querySelector('.carousel-wrapper').addEventListener('mouseenter', () =>
-    {
-        clearInterval(autoPlayTimer);
+        updateTextActive();
     });
 
-    // 离开恢复
-    document.querySelector('.carousel-wrapper').addEventListener('mouseleave', () =>
-    {
-        autoPlay();
-    });
-
-    // 初始化自动轮播
-    autoPlay();
-
-    // 事件绑定
-    window.addEventListener('resize', handleCarouselResize);
-    window.addEventListener('beforeunload', () =>
-    {
-        clearInterval(autoPlayTimer);
+    window.addEventListener('beforeunload', () => {
+        const carouselWrapper = document.querySelector('.carousel-wrapper');
+        if (carouselWrapper && carouselWrapper.autoPlayTimer) {
+            clearInterval(carouselWrapper.autoPlayTimer);
+        }
     });
 </script>
-{/block}
+{/block}
\ No newline at end of file
diff --git a/public/static/index/pc/css/topic_laptop/fs.css b/public/static/index/pc/css/topic_laptop/fs.css
index d62df45b..60c04e64 100644
--- a/public/static/index/pc/css/topic_laptop/fs.css
+++ b/public/static/index/pc/css/topic_laptop/fs.css
@@ -5,6 +5,12 @@
 	width: 100%;
 	aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */
 	position: relative;
+    will-change: contents; /* 告诉浏览器该元素即将变化，提前优化 */
+    contain: layout paint; /* 限制重排重绘范围 */
+}
+.fs-img, .fs-video {
+    backface-visibility: hidden; /* 开启硬件加速 */
+    transform: translateZ(0); /* 硬件加速 */
 }
 .fs-box img {
 	width: 100%;
diff --git a/public/static/index/pc/css/topic_laptop/index.css b/public/static/index/pc/css/topic_laptop/index.css
index 9cfe1fa0..841910c9 100644
--- a/public/static/index/pc/css/topic_laptop/index.css
+++ b/public/static/index/pc/css/topic_laptop/index.css
@@ -7,6 +7,8 @@ body {
 	height: 100vh; */
 	background: #000;
 	overflow-x: hidden;
+    scroll-behavior: smooth !important;
+    -webkit-overflow-scrolling: touch !important;
     /* padding: 0 !important;
     margin:0 !important; */
     /* width: 100vw !important; */
@@ -24,3 +26,7 @@ body {
 	transition: opacity 0.8s ease-out, transform 0.8s ease-out,
 		visibility 0.8s ease-out;
 }
+    /* 18-19号防卡顿：延迟19号动画 */
+    /* [data-order="19"] {
+        transition: all 0.3s ease-out 0.2s !important;
+    } */
diff --git a/public/static/index/pc/css/topic_laptop/lb.css b/public/static/index/pc/css/topic_laptop/lb.css
index 6dfca21d..2412ac99 100644
--- a/public/static/index/pc/css/topic_laptop/lb.css
+++ b/public/static/index/pc/css/topic_laptop/lb.css
@@ -77,10 +77,10 @@
 
 /* 移除定位相关的箭头位置控制（Flex布局无需） */
 .arrow-left {
-	margin-right: 2.32rem;
+	margin-right: 1rem;
 }
 .arrow-right {
-	margin-left: 2.32rem;
+	margin-left:  1rem;
 }
 
 /* 轮播下方文字区域（保留原有） */
diff --git a/public/static/index/pc/js/large.js b/public/static/index/pc/js/large.js
index 1f51a85b..9f269801 100644
--- a/public/static/index/pc/js/large.js
+++ b/public/static/index/pc/js/large.js
@@ -10,6 +10,7 @@ $(document).ready(function () {
 
   // 初始化图片放大功能
   initImageEnlarger();
+  console.log('触发')
 });
 
 /**
@@ -294,4 +295,4 @@ function initImageEnlarger() {
       $enlargeImg.hide();
     }
   });
-}
\ No newline at end of file
+}