From 4e3daa9eeb206d1679f78e88749f51b26d6de696 Mon Sep 17 00:00:00 2001
From: liqian <735273025@qq.com>
Date: Sat, 20 Dec 2025 14:01:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/pc/topic_laptop/index.html     | 483 +++++++-----------
 .../index/pc/css/topic_laptop/index.css       |   5 -
 .../index/pc/css/topic_laptop/progress.css    |   6 +-
 .../static/index/pc/css/topic_laptop/wift.css |   2 +-
 .../index/pc/images/topic_laptop/eljgd.png    | Bin 0 -> 2484 bytes
 5 files changed, 186 insertions(+), 310 deletions(-)
 create mode 100644 public/static/index/pc/images/topic_laptop/eljgd.png

diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html
index 19157c94..3e927862 100644
--- a/app/index/view/pc/topic_laptop/index.html
+++ b/app/index/view/pc/topic_laptop/index.html
@@ -30,14 +30,13 @@
 <script type="text/javascript">
     (function (doc, win)
     {
-
         var docEl = doc.documentElement;
         var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
         var designWidth = 2560;
         var designRemPx = 100;
         function setRootFontSize ()
         {
-            console.log('触发')
+
             var clientWidth = docEl.clientWidth;
             if (!clientWidth) return;
             var fontSize = (clientWidth / designWidth) * designRemPx;
@@ -55,32 +54,26 @@
 {block name="main"}
 {notempty name="data.top_focus_images"}
 <div class="swiper-container auto-swiper-container" style="margin-top:60px;">
-        {eq name=":cookie('think_lang')" value="en-us"}
-            <div class="swiper-wrapper">
-                {volist name="data.top_focus_images" id="tfi"}
-                <a class="swiper-slide auto-swiper-slide" href="{$tfi.link}">
-                    <img src="{$tfi.image}" alt="{$tfi.title}" />
-                </a>
-                {/volist}
-            </div>
-        {else/}
-        <div class="swiper-wrapper">
-            {volist name="data.top_focus_images" id="tfi"}
-            <div class="swiper-slide auto-swiper-slide">
-                <div class="swiper-container-texts" style="color:#fff">
-                    <div  class="swiper-container-texts-t">{$tfi.title}</div>
-                    <div  class="swiper-container-texts-p">{$tfi.desc||raw|htmlspecialchars_decode}</div>
-                    <div class="swiper-container-texts-img">
-                        <a  href="{$tfi.link}">
-                            <img src="__IMAGES__/topic_laptop/ljgd.png" alt="" loading="lazy" >
-                        </a>
-                    </div>
+    <div class="swiper-wrapper">
+        {volist name="data.top_focus_images" id="tfi"}
+        <div class="swiper-slide auto-swiper-slide">
+            <div class="swiper-container-texts" style="color:#fff">
+                <div  class="swiper-container-texts-t">{$tfi.title}</div>
+                <div  class="swiper-container-texts-p">{$tfi.desc||raw|htmlspecialchars_decode}</div>
+                <div class="swiper-container-texts-img">
+                    <a  href="{$tfi.link}">
+                        {eq name=":cookie('think_lang')" value="en-us"}
+                        <img src="__IMAGES__/topic_laptop/eljgd.png" alt=""  >
+                        {else/}
+                        <img src="__IMAGES__/topic_laptop/ljgd.png" alt=""  >
+                        {/eq}
+                    </a>
                 </div>
-                <img src="{$tfi.image}" alt="{$tfi.title}" loading="lazy" />
             </div>
-            {/volist}
+            <img src="{$tfi.image}" alt="{$tfi.title}"  />
         </div>
-        {/eq}
+        {/volist}
+    </div>
 </div>
 {/notempty}
 {notempty name="data.perf"}
@@ -214,7 +207,6 @@
             <img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy" >
         </div>
         {/eq}
-
     </div>
     <div class="readon-img-box opacity0" data-order="11">
         {volist name="data.gpu" id="go"}
@@ -275,7 +267,6 @@
 </div>
 {notempty name="data.ram"}
 <div class="wift" >
-
     <div class="wift-bg" style="background: url('{$data.ram.image}');background-size:100% auto;">
         <div class="wift-test">
             <div class="wift-t opacity0" data-order="12">{$data.ram.title|raw}</div>
@@ -290,7 +281,6 @@
         <div class="wift-bg-img opacity0" data-order="14">
             {$data.ram.desc|raw}
         </div>
-
     </div>
 </div>
 {/notempty}
@@ -299,19 +289,18 @@
     {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">
         {eq name=":cookie('think_lang')" value="en-us"}
-            <div class="m2-bg-t1 opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
+        <div class="m2-bg-t1 opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
         {else/}
-            <div class="m2-bg-t opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
+        <div class="m2-bg-t opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
         {/eq}
-            <div class="m2-img-box opacity0" data-order="16">
-                {volist name="data.hard_drive" id="ho"}
-                <img src="{$ho.image}" alt="" loading="lazy" >
-                {/volist}
-            </div>
+        <div class="m2-img-box opacity0" data-order="16">
+            {volist name="data.hard_drive" id="ho"}
+            <img src="{$ho.image}" alt="" loading="lazy" >
+            {/volist}
+        </div>
     </div>
 </div>
 {/notempty}
-
 <div class="fs">
     {notempty name="data.cooling_system"}
     {notempty name="$data.cooling_system.0"}
@@ -332,13 +321,13 @@
         </video>
         <div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
         {/notempty}
-        <div class="fs-box-img opacity0" data-order="18">
+        <div class="fs-box-img" >
             <div class="fs-h-img">
-                {notempty name="data.cooling_system.1"}<img src="{$data.cooling_system.1.image}" alt="" loading="lazy" >{/notempty}
-                {notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="" loading="lazy" >{/notempty}
+                {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>
             <div class="fs-b-img"  style="min-height: 20px;">
-                {notempty name="data.cooling_system.3"}<img src="{$data.cooling_system.3.image}" alt="" loading="lazy" >{/notempty}
+                {notempty name="data.cooling_system.3"}<img src="{$data.cooling_system.3.image}" alt=""  >{/notempty}
             </div>
         </div>
     </div>
@@ -346,10 +335,10 @@
 {/notempty}
 {notempty name="data.apps"}
 <div class="xn">
-    <div class="xn-t opacity0" data-order="19">{$data.apps.title|default=''}</div>
+    <div class="xn-t" >{$data.apps.title|default=''}</div>
     <div class="xn-container">
         <div class="xn-image-section">
-            <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" >
         </div>
     </div>
     <div class="xn-p">{$data.apps.desc|default=''|raw}</div>
@@ -363,23 +352,19 @@
         <div class="ips-t">{$soft_light_first.title|raw}</div>
         <div class="ips-p">{$soft_light_first.short_title|raw}</div>
         {/notempty}
-
-
         {eq name=":cookie('think_lang')" value="en-us"}
-            <div class="ips-img1 opacity0" data-order="21">
-                {volist name="data.screen_soft_light" id="so"}
-                <img src="{$so.image}" alt="" loading="lazy" >
-                {/volist}
-            </div>
+        <div class="ips-img1 opacity0" data-order="21">
+            {volist name="data.screen_soft_light" id="so"}
+            <img src="{$so.image}" alt="" loading="lazy" >
+            {/volist}
+        </div>
         {else/}
-            <div class="ips-img opacity0" data-order="21">
-                {volist name="data.screen_soft_light" id="so"}
-                <img src="{$so.image}" alt="" loading="lazy" >
-                {/volist}
-            </div>
+        <div class="ips-img opacity0" data-order="21">
+            {volist name="data.screen_soft_light" id="so"}
+            <img src="{$so.image}" alt="" loading="lazy" >
+            {/volist}
+        </div>
         {/eq}
-
-
     </div>
 </div>
 {/notempty}
@@ -506,11 +491,11 @@
         {volist name="data.scene_focus_images" id="so"}
             <div class="carousel-text {if $key == 0}active{/if}" data-index="{$key}" loading="lazy" >
             {eq name=":cookie('think_lang')" value="en-us"}
-                <div class="carousel-text-t1">{$so.title}</div>
-                <div class="carousel-text-p1">{$so.short_title}</div>
+            <div class="carousel-text-t1">{$so.title}</div>
+            <div class="carousel-text-p1">{$so.short_title}</div>
             {else/}
-                <div class="carousel-text-t">{$so.title}</div>
-                <div class="carousel-text-p">{$so.short_title}</div>
+            <div class="carousel-text-t">{$so.title}</div>
+            <div class="carousel-text-p">{$so.short_title}</div>
             {/eq}
         </div>
         {/volist}
@@ -1260,7 +1245,6 @@
     const tabT = document.querySelectorAll('.tab-t');
     const indicator = document.querySelector('.tab-indicator');
     const securityVideo = document.getElementById('securityVideo');
-    console.log(tabT,'=========tabT=============')
     let prevIndex = 0;
     const tabRects = [];
 
@@ -1355,265 +1339,162 @@
         resetVideo();
     });
 
+    document.addEventListener('DOMContentLoaded', () => {
+        // 1. 获取元素
+        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 carouselContainer = document.querySelector('.carousel-container');
 
-// document.addEventListener('DOMContentLoaded', () => {
-//     // 1. 获取元素（匹配你的结构）
-//     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 carouselContainer = document.querySelector('.carousel-container');
-
-//     // 容错处理
-//     if (!carouselImgs || imgItems.length === 0) {
-//         console.warn('轮播图片为空，初始化终止');
-//         return;
-//     }
-
-//     // 2. 核心变量（仅索引，无尺寸计算）
-//     const imgCount = imgItems.length;
-//     let currentIndex = 0;
-//     let autoPlayTimer = null;
-//     let isResizing = false; // 缩放锁，避免重复触发
-
-//     // 3. 切换到指定索引（核心：百分比偏移，无尺寸计算）
-//     const goToIndex = (index) => {
-//         // 边界处理
-//         if (index < 0) index = imgCount - 1;
-//         if (index >= imgCount) index = 0;
-
-//         // 关键：用百分比偏移，彻底避开rem/px计算误差
-//         carouselImgs.style.transform = `translateX(-${index * 100}%)`;
-//         currentIndex = index;
-
-//         // 更新文字激活态
-//         textItems.forEach((item, idx) => {
-//             item.classList.toggle('active', idx === currentIndex);
-//         });
-//     };
-
-//     // 4. 左右切换逻辑
-//     const slideNext = () => goToIndex(currentIndex + 1);
-//     const slidePrev = () => goToIndex(currentIndex - 1);
-
-//     // 5. 自动播放逻辑
-//     const autoPlay = () => {
-//         clearInterval(autoPlayTimer);
-//         autoPlayTimer = setInterval(slideNext, 3000); // 3秒切换，可改
-//     };
-
-//     // 6. 绑定事件
-//     // 箭头点击
-//     leftArrow?.addEventListener('click', () => {
-//         slidePrev();
-//         autoPlay(); // 点击后重启自动播放
-//     });
-//     rightArrow?.addEventListener('click', () => {
-//         slideNext();
-//         autoPlay();
-//     });
-
-//     // 文字指示器点击
-//     textItems.forEach((item, idx) => {
-//         item.addEventListener('click', () => {
-//             goToIndex(idx);
-//             autoPlay();
-//         });
-//     });
-
-//     // 鼠标悬停暂停
-//     carouselContainer?.addEventListener('mouseenter', () => {
-//         clearInterval(autoPlayTimer);
-//     });
-//     carouselContainer?.addEventListener('mouseleave', autoPlay);
-
-//     // 7. 窗口缩放响应（核心：仅重新定位，无计算）
-//     const handleResize = () => {
-//         if (isResizing) return;
-//         isResizing = true;
-
-//         // 缩放时直接重新定位当前索引（百分比偏移无需计算）
-//         goToIndex(currentIndex);
-
-//         // 解锁
-//         setTimeout(() => {
-//             isResizing = false;
-//         }, 100);
-//     };
-
-//     // 防抖监听窗口缩放
-//     let resizeTimer;
-//     window.addEventListener('resize', () => {
-//         clearTimeout(resizeTimer);
-//         resizeTimer = setTimeout(handleResize, 150);
-//     });
-
-//     // 8. 初始化
-//     goToIndex(0); // 初始定位到第一张
-//     autoPlay();   // 启动自动播放
-
-//     // 9. 页面卸载清理定时器
-//     window.addEventListener('beforeunload', () => {
-//         clearInterval(autoPlayTimer);
-//     });
-// });
-document.addEventListener('DOMContentLoaded', () => {
-    // 1. 获取元素
-    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 carouselContainer = document.querySelector('.carousel-container');
-
-    // 容错处理
-    if (!carouselImgs || imgItems.length === 0) {
-        console.warn('轮播图片为空，初始化终止');
-        return;
-    }
-
-    // 2. 核心配置
-    const imgCount = imgItems.length; // 真实图片数量（如3张：1/2/3）
-    let currentRealIndex = 0; // 真实图片索引（0=1, 1=2, 2=3）
-    let isTransitioning = false; // 过渡锁，防止动画冲突
-    const transitionDuration = 500; // 过渡时长(ms)，需与CSS一致
-    let autoPlayTimer = null;
-
-    // 3. 初始化无缝DOM：仅复制第一张到末尾（适配3→1右侧滑入）
-    const initSeamless = () => {
-        // 复制第一张图片（1）到轮播容器末尾
-        const firstImgCopy = imgItems[0].cloneNode(true);
-        carouselImgs.appendChild(firstImgCopy);
-        // 初始定位：无过渡，显示真实第一张
-        carouselImgs.style.transition = 'none';
-        carouselImgs.style.transform = `translateX(0%)`;
-        void carouselImgs.offsetWidth; // 强制重绘
-        // 开启过渡
-        carouselImgs.style.transition = `transform ${transitionDuration}ms ease`;
-    };
-    initSeamless();
-
-    // 4. 核心切换函数（保证3→1时1从右侧滑入）
-    const slideToNext = () => {
-        if (isTransitioning) return;
-        isTransitioning = true;
-
-        // 步骤1：计算目标偏移，执行滑动动画
-        const targetTranslateX = -(currentRealIndex + 1) * 100;
-        carouselImgs.style.transform = `translateX(${targetTranslateX}%)`;
-
-        // 步骤2：监听过渡结束，处理无缝逻辑
-        const handleEnd = () => {
-            carouselImgs.removeEventListener('transitionend', handleEnd);
-            isTransitioning = false;
-
-            // 如果滑到了复制的第一张（3→1的视觉终点）
-            if (currentRealIndex === imgCount - 1) {
-                // 瞬间切回真实第一张（无过渡，用户无感知）
-                carouselImgs.style.transition = 'none';
-                carouselImgs.style.transform = `translateX(0%)`;
-                void carouselImgs.offsetWidth;
-                carouselImgs.style.transition = `transform ${transitionDuration}ms ease`;
-                currentRealIndex = 0; // 重置为真实第一张
-            } else {
-                currentRealIndex += 1; // 正常切换，索引+1
-            }
-
-            // 更新文字指示器激活态
-            textItems.forEach((item, idx) => {
-                item.classList.toggle('active', idx === currentRealIndex);
-            });
-        };
-        carouselImgs.addEventListener('transitionend', handleEnd);
-    };
-
-    // 5. 反向切换（1→3，可选保留）
-    const slideToPrev = () => {
-        if (isTransitioning) return;
-        isTransitioning = true;
-
-        // 1→3时，先瞬间切到复制的3位置，再滑入
-        if (currentRealIndex === 0) {
-            carouselImgs.style.transition = 'none';
-            carouselImgs.style.transform = `translateX(-${imgCount * 100}%)`;
-            void carouselImgs.offsetWidth;
-            carouselImgs.style.transition = `transform ${transitionDuration}ms ease`;
-            currentRealIndex = imgCount - 1;
+        // 容错处理
+        if (!carouselImgs || imgItems.length === 0) {
+            console.warn('轮播图片为空，初始化终止');
+            return;
         }
 
-        const targetTranslateX = -currentRealIndex * 100;
-        carouselImgs.style.transform = `translateX(${targetTranslateX}%)`;
+        // 2. 核心配置
+        const imgCount = imgItems.length; // 真实图片数量（如3张：1/2/3）
+        let currentRealIndex = 0; // 真实图片索引（0=1, 1=2, 2=3）
+        let isTransitioning = false; // 过渡锁，防止动画冲突
+        const transitionDuration = 500; // 过渡时长(ms)，需与CSS一致
+        let autoPlayTimer = null;
 
-        const handleEnd = () => {
-            carouselImgs.removeEventListener('transitionend', handleEnd);
-            isTransitioning = false;
-            // 更新文字指示器
-            textItems.forEach((item, idx) => {
-                item.classList.toggle('active', idx === currentRealIndex);
-            });
+        // 3. 初始化无缝DOM：仅复制第一张到末尾（适配3→1右侧滑入）
+        const initSeamless = () => {
+            // 复制第一张图片（1）到轮播容器末尾
+            const firstImgCopy = imgItems[0].cloneNode(true);
+            carouselImgs.appendChild(firstImgCopy);
+            // 初始定位：无过渡，显示真实第一张
+            carouselImgs.style.transition = 'none';
+            carouselImgs.style.transform = `translateX(0%)`;
+            void carouselImgs.offsetWidth; // 强制重绘
+            // 开启过渡
+            carouselImgs.style.transition = `transform ${transitionDuration}ms ease`;
         };
-        carouselImgs.addEventListener('transitionend', handleEnd);
-    };
+        initSeamless();
 
-    // 6. 自动播放：严格1→2→3→1循环
-    const autoPlay = () => {
-        clearInterval(autoPlayTimer);
-        autoPlayTimer = setInterval(() => {
-            if (!isTransitioning) slideToNext();
-        }, 3000); // 3秒切换一次，可调整
-    };
-
-    // 7. 事件绑定
-    // 右箭头：下一张（核心，保证3→1右侧滑入）
-    rightArrow?.addEventListener('click', () => {
-        slideToNext();
-        autoPlay(); // 点击后重启自动播放
-    });
-    // 左箭头：上一张（可选，如需取消可注释）
-    leftArrow?.addEventListener('click', () => {
-        slideToPrev();
-        autoPlay();
-    });
-
-    // 文字指示器点击
-    textItems.forEach((item, idx) => {
-        item.addEventListener('click', () => {
-            if (isTransitioning || currentRealIndex === idx) return;
+        // 4. 核心切换函数（保证3→1时1从右侧滑入）
+        const slideToNext = () => {
+            if (isTransitioning) return;
             isTransitioning = true;
-            
-            // 直接滑到目标图片
-            carouselImgs.style.transform = `translateX(-${idx * 100}%)`;
-            currentRealIndex = idx;
 
-            // 过渡结束解锁
+            // 步骤1：计算目标偏移，执行滑动动画
+            const targetTranslateX = -(currentRealIndex + 1) * 100;
+            carouselImgs.style.transform = `translateX(${targetTranslateX}%)`;
+
+            // 步骤2：监听过渡结束，处理无缝逻辑
             const handleEnd = () => {
                 carouselImgs.removeEventListener('transitionend', handleEnd);
                 isTransitioning = false;
+
+                // 如果滑到了复制的第一张（3→1的视觉终点）
+                if (currentRealIndex === imgCount - 1) {
+                    // 瞬间切回真实第一张（无过渡，用户无感知）
+                    carouselImgs.style.transition = 'none';
+                    carouselImgs.style.transform = `translateX(0%)`;
+                    void carouselImgs.offsetWidth;
+                    carouselImgs.style.transition = `transform ${transitionDuration}ms ease`;
+                    currentRealIndex = 0; // 重置为真实第一张
+                } else {
+                    currentRealIndex += 1; // 正常切换，索引+1
+                }
+
+                // 更新文字指示器激活态
+                textItems.forEach((item, idx) => {
+                    item.classList.toggle('active', idx === currentRealIndex);
+                });
             };
             carouselImgs.addEventListener('transitionend', handleEnd);
+        };
 
+        // 5. 反向切换（1→3，可选保留）
+        const slideToPrev = () => {
+            if (isTransitioning) return;
+            isTransitioning = true;
+
+            // 1→3时，先瞬间切到复制的3位置，再滑入
+            if (currentRealIndex === 0) {
+                carouselImgs.style.transition = 'none';
+                carouselImgs.style.transform = `translateX(-${imgCount * 100}%)`;
+                void carouselImgs.offsetWidth;
+                carouselImgs.style.transition = `transform ${transitionDuration}ms ease`;
+                currentRealIndex = imgCount - 1;
+            }
+
+            const targetTranslateX = -currentRealIndex * 100;
+            carouselImgs.style.transform = `translateX(${targetTranslateX}%)`;
+
+            const handleEnd = () => {
+                carouselImgs.removeEventListener('transitionend', handleEnd);
+                isTransitioning = false;
+                // 更新文字指示器
+                textItems.forEach((item, idx) => {
+                    item.classList.toggle('active', idx === currentRealIndex);
+                });
+            };
+            carouselImgs.addEventListener('transitionend', handleEnd);
+        };
+
+        // 6. 自动播放：严格1→2→3→1循环
+        const autoPlay = () => {
+            clearInterval(autoPlayTimer);
+            autoPlayTimer = setInterval(() => {
+                if (!isTransitioning) slideToNext();
+            }, 3000); // 3秒切换一次，可调整
+        };
+
+        // 7. 事件绑定
+        // 右箭头：下一张（核心，保证3→1右侧滑入）
+        rightArrow?.addEventListener('click', () => {
+            slideToNext();
+            autoPlay(); // 点击后重启自动播放
+        });
+        // 左箭头：上一张（可选，如需取消可注释）
+        leftArrow?.addEventListener('click', () => {
+            slideToPrev();
             autoPlay();
         });
-    });
 
-    // 鼠标悬停暂停/恢复
-    carouselContainer?.addEventListener('mouseenter', () => {
-        clearInterval(autoPlayTimer);
-    });
-    carouselContainer?.addEventListener('mouseleave', autoPlay);
+        // 文字指示器点击
+        textItems.forEach((item, idx) => {
+            item.addEventListener('click', () => {
+                if (isTransitioning || currentRealIndex === idx) return;
+                isTransitioning = true;
 
-    // 8. 初始化
-    // 激活第一个文字指示器
-    textItems.forEach((item, idx) => {
-        item.classList.toggle('active', idx === 0);
-    });
-    autoPlay(); // 启动自动播放
+                // 直接滑到目标图片
+                carouselImgs.style.transform = `translateX(-${idx * 100}%)`;
+                currentRealIndex = idx;
 
-    // 9. 页面卸载清理定时器
-    window.addEventListener('beforeunload', () => {
-        clearInterval(autoPlayTimer);
+                // 过渡结束解锁
+                const handleEnd = () => {
+                    carouselImgs.removeEventListener('transitionend', handleEnd);
+                    isTransitioning = false;
+                };
+                carouselImgs.addEventListener('transitionend', handleEnd);
+
+                autoPlay();
+            });
+        });
+
+        // 鼠标悬停暂停/恢复
+        carouselContainer?.addEventListener('mouseenter', () => {
+            clearInterval(autoPlayTimer);
+        });
+        carouselContainer?.addEventListener('mouseleave', autoPlay);
+
+        // 8. 初始化
+        // 激活第一个文字指示器
+        textItems.forEach((item, idx) => {
+            item.classList.toggle('active', idx === 0);
+        });
+        autoPlay(); // 启动自动播放
+
+        // 9. 页面卸载清理定时器
+        window.addEventListener('beforeunload', () => {
+            clearInterval(autoPlayTimer);
+        });
     });
-});
 </script>
 {/block}
diff --git a/public/static/index/pc/css/topic_laptop/index.css b/public/static/index/pc/css/topic_laptop/index.css
index 1f231ceb..cd66744a 100644
--- a/public/static/index/pc/css/topic_laptop/index.css
+++ b/public/static/index/pc/css/topic_laptop/index.css
@@ -43,8 +43,3 @@ body {
     /* [data-order="19"] {
         transition: all 0.3s ease-out 0.2s !important;
     } */
-[data-order], .annotation, .progress-fill, .zoom-image, .float-card {
-    transform: translateZ(0); /* 开启硬件加速，将元素交给 GPU 渲染 */
-    will-change: opacity, transform; /* 告诉浏览器提前优化这个元素 */
-    backface-visibility: hidden; /* 防止元素翻转时的闪烁 */
-}
\ No newline at end of file
diff --git a/public/static/index/pc/css/topic_laptop/progress.css b/public/static/index/pc/css/topic_laptop/progress.css
index 24d43300..2072cf57 100644
--- a/public/static/index/pc/css/topic_laptop/progress.css
+++ b/public/static/index/pc/css/topic_laptop/progress.css
@@ -189,14 +189,14 @@
 .progress-p {
 	color: #cbcfd8;
 	font-size: clamp(16px, 1vw, 0.22rem);
-	margin-top: 1.23rem;
-    margin-bottom: 5.04rem;
+	margin-top: 1.56rem;
+    margin-bottom: 2rem;
 	text-align: center;
 }
 .progress-p1 {
     color: #cbcfd8;
 	font-size: clamp(16px, 1vw, 0.22rem);
 	margin-top: 1.56rem;
-    /* margin-bottom: 2.3rem; */
+    /* margin-bottom: 1.66rem; */
 	text-align: center;
 }
\ No newline at end of file
diff --git a/public/static/index/pc/css/topic_laptop/wift.css b/public/static/index/pc/css/topic_laptop/wift.css
index cae4f2ba..6014f870 100644
--- a/public/static/index/pc/css/topic_laptop/wift.css
+++ b/public/static/index/pc/css/topic_laptop/wift.css
@@ -39,7 +39,7 @@
 	color: #cbcfd8;
 	width: 100%;
 	text-align: center;
-	padding-top: 0.39rem;
+	padding-top: 0.43rem;
     line-height: 1.8;
     font-family: "HarmonyOS-Light";
 }
diff --git a/public/static/index/pc/images/topic_laptop/eljgd.png b/public/static/index/pc/images/topic_laptop/eljgd.png
new file mode 100644
index 0000000000000000000000000000000000000000..666c9663a97b417f87e8880e9a5a5697e7736ec1
GIT binary patch
literal 2484
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

literal 0
HcmV?d00001