diff --git a/app/index/controller/Common.php b/app/index/controller/Common.php
index 880f8072..703890c8 100644
--- a/app/index/controller/Common.php
+++ b/app/index/controller/Common.php
@@ -107,13 +107,6 @@ abstract class Common extends BaseController
                 'status'       => 1
             ])
             ->where('status', '=', 1)
-            ->where(function($query) {
-                // 临时代码，移动端暂时不显示 "AI PC"
-                if (request()->from == 'mobile') {
-                    $table_name = SysNavigationItemModel::getTable();
-                    $query->whereNotIn($table_name . ".id", [77, 78]);
-                }
-            })
             ->order(['sort' => 'asc', 'id' => 'asc'])
             ->select();
         if ($nav->isEmpty()) {
diff --git a/app/index/controller/TopicLaptop.php b/app/index/controller/TopicLaptop.php
index 1cba3335..0682bb0b 100644
--- a/app/index/controller/TopicLaptop.php
+++ b/app/index/controller/TopicLaptop.php
@@ -5,7 +5,6 @@ namespace app\index\controller;
 
 use app\index\model\SysBannerModel;
 use think\facade\View;
-use think\Request;
 
 class TopicLaptop extends Common
 {
@@ -96,7 +95,7 @@ class TopicLaptop extends Common
             // 产品检测介绍
             $data['product_testing'] = data_get($banners_map, 'BANNER_693a2ff4629bd')?->items->toArray();
             // 网页脚注
-            $data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray(); 
+            $data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray();
         }
         View::assign('data', $data);
 
diff --git a/app/index/lang/en-us/mobile.php b/app/index/lang/en-us/mobile.php
index 175712be..4e0cde9b 100644
--- a/app/index/lang/en-us/mobile.php
+++ b/app/index/lang/en-us/mobile.php
@@ -92,9 +92,9 @@ return [
     ],
     'attachment/video' => [
         '软件和驱动程序' => 'Software and Drivers',
-        '您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.', 
+        '您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.',
     ],
-    
+
     // 联系我们批量购买页面
     'contactus/bulkbuy' => [
         '批量购买' => 'Bulk Buy',
@@ -219,4 +219,21 @@ return [
         '联系我们' => 'Contact US',
         '目录' => 'Content'
     ],
-];
\ No newline at end of file
+
+    // 笔记本专题 - 首页
+    'topiclaptop/index' => [
+        'CineBench R23 多核跑分' => 'Outperforms Ryzen 5 & Intel i5',
+        '*此跑分为ORICO实验室测定所得，请以实际使用为准' => '*Data measured by ORICO Lab. Actual performance may vary.',
+        '3DMARK Time Spy显卡得分' => 'Handles Office & Gaming with Ease',
+        '肯辛通锁孔' => 'Kensington <br/> Lock Slot',
+        '千兆网口' => 'Gigabit <br/> Ethernet',
+        'USB-A<br/>(5Gbps)' => 'USB-A <br/> (5Gbps)',
+        '3.5mm<br/>耳麦合一' => '3.5mm <br/> Combo Audio',
+        'TF口3.0' => 'TF 3.0 <br/> Card Slot',
+        '全功能<br/>USB-C' => 'All-in-One <br/> USB-C',
+        "接口大满贯" => "Full-Featured Ports",
+        "酷睿i5-12450H" => "Core i5-12450H",
+        "锐龙9 6900HX" => "Ryzen9 6900HX",
+        "标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定" => "Versatile Ports for Easy Connectivity. Effortlessly</br> link to projectors, U disks, TF cards, and more.",
+    ],
+];
diff --git a/app/index/view/mobile/topic_laptop/index.html b/app/index/view/mobile/topic_laptop/index.html
index 6de16ef2..819bdbfc 100644
--- a/app/index/view/mobile/topic_laptop/index.html
+++ b/app/index/view/mobile/topic_laptop/index.html
@@ -1,13 +1,1270 @@
 {extend name="public/base" /}
 {block name="style"}
+    <link rel="stylesheet" href="__CSS__/topic_laptop/header.css">
+    <link rel="stylesheet" href="__CSS__/topic_laptop/index.css">
+    <link rel="stylesheet" href="__CSS__/topic_laptop/swiper.css">
+    <link rel="stylesheet" href="__CSS__/topic_laptop/amd.css">
+    <link rel="stylesheet" href="__CSS__/topic_laptop/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;
+                console.log(clientWidth,'=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;');
+                console.log(fontSize,'=fontSize=')
+            }
+
+            setRootFontSize();
+            win.addEventListener(resizeEvt, setRootFontSize);
+            doc.addEventListener('DOMContentLoaded', setRootFontSize);
+        })(document, window);
+    </script>
 {/block}
-{block name="header"}
-<!-- 重置header头为空 -->
-{/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"}
+        <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="{$tfi.extra_image}" alt="">
+                    </a>
+                </div>
+            </div>
+            <img src="{$tfi.image}" alt="{$tfi.title}" />
+        </div>
+        {/volist}
+    </div>
+</div>
+{/notempty}
+{notempty name="data.perf"}
+<!-- 笔记本配置图 -->
+<div class="amd-box">
+    <div class="amd-img-header">
+        {notempty name="data.perf.0"}
+        <img src="{$data.perf.0.image}" alt="{$data.perf.0.title}" loading="lazy">
+        {/notempty}
+    </div>
+    <div class="amd-img-main " data-order="2" data-name="">
+        <div class="amd-img-main-left">
+            {notempty name="data.perf.1"}
+            <img src="{$data.perf.1.image}" alt="{$data.perf.1.title}" loading="lazy">
+            {/notempty}
+            {notempty name="data.perf.2"}
+            <img src="{$data.perf.2.image}" alt="{$data.perf.2.title}" loading="lazy">
+            {/notempty}
+            {notempty name="data.perf.3"}
+            <img src="{$data.perf.3.image}" alt="{$data.perf.3.title}" loading="lazy">
+            {/notempty}
+            {notempty name="data.perf.4"}
+            <img src="{$data.perf.4.image}" alt="{$data.perf.4.title}" loading="lazy">
+            {/notempty}
+        </div>
+        <div class="amd-img-main-right">
+            {notempty name="data.perf.5"}
+            <img src="{$data.perf.5.image}" alt="{$data.perf.5.title}" loading="lazy">
+            {/notempty}
+            {notempty name="data.perf.6"}
+            <img src="{$data.perf.6.image}" alt="{$data.perf.6.title}" loading="lazy">
+            {/notempty}
+            {notempty name="data.perf.7"}
+            <img src="{$data.perf.7.image}" alt="{$data.perf.7.title}" loading="lazy">
+            {/notempty}
+            {notempty name="data.perf.8"}
+            <img src="{$data.perf.8.image}" alt="{$data.perf.8.title}" loading="lazy">
+            {/notempty}
+        </div>
+    </div>
+    <div class="amd-img-footer">
+        {notempty name="data.perf.9"}
+        <img src="{$data.perf.9.image}" alt="{$data.perf.9.title}" loading="lazy">
+        {/notempty}
+    </div>
+</div>
+{/notempty}
+{notempty name="data.cpu"}
+<!-- 超能引擎 -->
+<div class="cpu">
+    {assign name="cpu_first_section" value=":array_shift($data.cpu)"/}
+    <div class="cpu-main" style="background: url('{$cpu_first_section.image|default=\'\'}');background-size:100% auto">
+        <div class="cpu-texts">
+            {eq name=":cookie('think_lang')" value="en-us"}
+                <div class="cpu-texts-t f36 lh1">{$cpu_first_section.title|default=''|raw}</div>
+                <p class="cpu-texts-p f18">{$cpu_first_section.short_title|default=''|raw}</p>
+            {else/}
+                <div class="cpu-texts-t">{$cpu_first_section.title|default=''|raw}</div>
+                <p class="cpu-texts-p">{$cpu_first_section.short_title|default=''|raw}</p>
+            {/eq}
+        </div>
+        <div class="cpu-footer">
+            <div class="cpu-footer-img">
+                {volist name="data.cpu" id="co"}
+                <img src="{$co.image}" alt="{$co.title}" loading="lazy">
+                {/volist}
+            </div>
+            <div class="cpu-footer-desc">{$cpu_first_section.desc|default=''|raw}</div>
+        </div>
+    </div>
+</div>
+{/notempty}
+<!-- 进度条 -->
+<div class="progress">
+    <div class="progress-title">{:lang_i18n('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">{:lang_i18n('锐龙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">{:lang_i18n('酷睿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">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
+</div>
+{notempty name="data.gpu"}
+<!-- 显卡 GPU -->
+<div class="gpu">
+    {assign name="gpu_first_section" value=":array_shift($data.gpu)"/}
+    <div class="gpu-texts">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="gpu-texts-t f36">{$gpu_first_section.title|default=''|raw}</div>
+        <div class="gpu-texts-p f18">{$gpu_first_section.short_title|default=''|raw}</div>
+        {else/}
+            <div class="gpu-texts-t">{$gpu_first_section.title|default=''|raw}</div>
+            <div class="gpu-texts-p">{$gpu_first_section.short_title|default=''|raw}</div>
+        {/eq}
+    </div>
+    <div class="gpu-main-img" style="background: url('{$gpu_first_section.image|default=\'\'}');background-size:100% auto">
+        <div class="gpu-amd-img">
+            <img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy">
+        </div>
+        <div class="gpu-footer-imgs">
+            {volist name="data.gpu" id="go"}
+            <img src="{$go.image}" alt="{$go.title}" loading="lazy">
+            {/volist}
+        </div>
+    </div>
+</div>
+{/notempty}
+<!-- 进度条 -->
+<div class="progress">
+    <div class="progress-title">{:lang_i18n('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">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
+</div>
+{notempty name="data.ram"}
+<!-- 内存 memory-->
+<div class="memory">
+    {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="memory-t f36 lh1">{$data.ram.title|raw}</div>
+    {else/}
+        <div class="memory-t">{$data.ram.title|raw}</div>
+    {/eq}
+    <div class="memory-img" style="background: url('{$data.ram.image|default=\'\'}'); background-size:100% auto">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="memory-p f18">{$data.ram.short_title|raw}</div>
+        {else/}
+        <div class="memory-p ">{$data.ram.short_title|raw}</div>
+        {/eq}
+        <div class="memory-footer-img">{$data.ram.desc|raw}</div>
+    </div>
+</div>
+{/notempty}
+{notempty name="data.hard_drive"}
+<!-- ssd -->
+<div class="m2">
+    {assign name="ssd_first_section" value=":array_shift($data.hard_drive)"/}
+    <div class="m2-bg" style="background: url('{$ssd_first_section.image|default=\'\'}');background-size:100% auto">
+        {eq name=":cookie('think_lang')" value="en-us"}
+            <div class="m2-bg-t1 f36 lh1">{$ssd_first_section.title|default=''|raw}</div>
+        {else/}
+            <div class="m2-bg-t1">{$ssd_first_section.title|default=''|raw}</div>
+        {/eq}
+        <div class="m2-bg-p">{$ssd_first_section.short_title|default=''|raw}</div>
+        <div class="m2-img-box">
+            {volist name="data.hard_drive" id="ho"}
+            <img src="{$ho.image}" alt="{$ho.title}" loading="lazy">
+            {/volist}
+        </div>
+    </div>
+</div>
+{/notempty}
+{notempty name="data.cooling_system"}
+<!-- fs -->
+<div class="fs">
+    {notempty name="data.cooling_system.0"}
+    <div class="dl">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="dl-t f36">{$data.cooling_system.0.title|raw}</div>
+        <p class="dl-p f18">{$data.cooling_system.0.short_title|raw}</p>
+        {else/}
+        <div class="dl-t">{$data.cooling_system.0.title|raw}</div>
+        <p class="dl-p">{$data.cooling_system.0.short_title|raw}</p>
+        {/eq}
+    </div>
+    {/notempty}
+    <div class="fs-box">
+        {notempty name="data.cooling_system.0"}
+        <video
+            src="{$data.cooling_system.0.video|default=''}"
+            class="fs-video" muted loop playsinline autoplay
+            poster="{$data.cooling_system.0.image|default=''}"
+            preload="auto" style="width: 100%;">
+            您的浏览器不支持HTML5视频播放，请升级浏览器
+        </video>
+        <div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
+        {/notempty}
+        <div class="fs-box-img">
+            <div class="fs-h-img">
+                {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="">{/notempty}
+            </div>
+        </div>
+    </div>
+</div>
+{/notempty}
+{notempty name="data.apps"}
+<!-- 性能大拿 -->
+<div class="xn">
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="xn-t f28 ">{$data.apps.title|default=''}</div>
+    {else/}
+    <div class="xn-t">{$data.apps.title|default=''}</div>
+    {/eq}
+    <div class="xn-container">
+        <div class="xn-image-section">
+            <img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image">
+        </div>
+    </div>
+    <div class="xn-p">{$data.apps.desc|default=''|raw}</div>
+</div>
+{/notempty}
+{notempty name="data.screen_soft_light"}
+<!-- IPS -->
+<div class="ips">
+    {assign name="ips_fisrt_section" value=":array_shift($data.screen_soft_light)"/}
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="ips-t f48">{$ips_fisrt_section.title|default=''|raw}</div>
+    {else/}
+    <div class="ips-t">{$ips_fisrt_section.title|default=''|raw}</div>
+    {/eq}
+    <div class="ips-bg" style="background: url('{$ips_fisrt_section.image|default=\'\'}');background-size:100% auto">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <p class="f18">{$ips_fisrt_section.short_title|default=''|raw}</p>
+        {else/}
+        <p>{$ips_fisrt_section.short_title|default=''|raw}</p>
+        {/eq}
+    </div>
+    <div class="ips-imgs">
+        {volist name="data.screen_soft_light" id="lo"}
+        <img src="{$lo.image}" alt="">
+        {/volist}
+    </div>
+</div>
+{/notempty}
+{notempty name="data.screen_color_gamut"}
+<!-- 色彩RGB -->
+<div class="rgb">
+    {assign name="gamut_first_section" value=":array_shift($data.screen_color_gamut)"/}
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="rgb-t f36 lh1">{$gamut_first_section.title|default=''|raw}</div>
+    {else/}
+    <div class="rgb-t">{$gamut_first_section.title|default=''|raw}</div>
+    {/eq}
+    <div class="rgb-bg" style="background: url('{$gamut_first_section.image|default=\'\'}');background-size:100% auto">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <p class="rgb-p f18">{$gamut_first_section.short_title|default=''|raw}</p>
+        {else/}
+        <p class="rgb-p">{$gamut_first_section.short_title|default=''|raw}</p>
+        {/eq}
+    </div>
+    <div class="rgb-imgs">
+        {volist name="data.screen_color_gamut" id="go"}
+        <img src="{$go.image}" alt="">
+        {/volist}
+    </div>
+</div>
+{/notempty}
+{notempty name="data.screen_anti_glare"}
+<!-- 对比图 -->
+<div class="bly">
+    {assign name="glare_first_section" value=":array_shift($data.screen_anti_glare)"/}
+    <div class="bly-texts">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="bly-t f36 lh1">{$glare_first_section.title|default=''|raw}</div>
+        <div class="bly-p f18">{$glare_first_section.short_title|default=''|raw}</div>
+        {else/}
+        <div class="bly-t">{$glare_first_section.title|default=''|raw}</div>
+        <div class="bly-p">{$glare_first_section.short_title|default=''|raw}</div>
+        {/eq}
+    </div>
+    <div class="beforeafter ba-slider" style="border-radius: 0.14rem;height: 3.4rem;">
+        {assign name="glare_left" value=":array_shift($data.screen_anti_glare)"/}
+        <img src="{$glare_left.image|default=''}" loading="lazy">
+        <div class="resize">
+            {assign name="glare_right" value=":array_shift($data.screen_anti_glare)"/}
+            <img src="{$glare_right.image|default=''}" loading="lazy">
+        </div>
+        <span class="handle"></span>
+    </div>
+</div>
+{/notempty}
+{notempty name="data.exterior_texture"}
+<!-- 轮播图 -->
+<div class="qb">
+    <div class="qb-text">
+        {assign name="texture_first_section" value=":array_shift($data.exterior_texture)"/}
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="qb-t f36 lh1">{$texture_first_section.title|default=''|raw}</div>
+        <div class="qb-p f18">{$texture_first_section.short_title|default=''|raw}</div>
+        {else/}
+        <div class="qb-t">{$texture_first_section.title|default=''|raw}</div>
+        <div class="qb-p">{$texture_first_section.short_title|default=''|raw}</div>
+        {/eq}
+        <div class="swiper-container auto-swiper-container">
+            <div class="swiper-wrapper">
+                {volist name="data.exterior_texture" id="to"}
+                <a class="swiper-slide auto-swiper-slide">
+                    <img src="{$to.image}" alt="" loading="lazy">
+                </a>
+                {/volist}
+            </div>
+        </div>
+    </div>
+</div>
+{/notempty}
+{notempty name="data.network_card"}
+<!-- wifi -->
+{assign name="wifi_first_section" value=":array_shift($data.network_card)"/}
+<div class="wifi" style="background: url('{$wifi_first_section.image|default=\'\'}');background-size:100% auto">
+    <div class="wifi-texts">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="wifi-t f36 ">{$wifi_first_section.title|default=''|raw}</div>
+        <div class="wifi-p f18">{$wifi_first_section.short_title|default=''|raw}</div>
+        {else/}
+        <div class="wifi-t">{$wifi_first_section.title|default=''|raw}</div>
+        <div class="wifi-p">{$wifi_first_section.short_title|default=''|raw}</div>
+        {/eq}
+    </div>
+    <div class="wifi-img">
+        {volist name="data.network_card" id="co"}
+        <img src="{$co.image}" alt="" loading="lazy">
+        {/volist}
+    </div>
+</div>
+{/notempty}
+{notempty name="data.battery_life"}
+<!-- 长久续航 -->
+{assign name="battery_first_section" value=":array_shift($data.battery_life)"/}
+<div class="endurance" style="background: url('{$battery_first_section.image|default=\'\'|raw}');background-size:100% auto">
+    <div class="endurance-texts">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="endurance-t f36">{$battery_first_section.title|default=''|raw}</div>
+        <div class="endurance-p f18">{$battery_first_section.short_title|default=''|raw}</div>
+        {else/}
+        <div class="endurance-t">{$battery_first_section.title|default=''|raw}</div>
+        <div class="endurance-p">{$battery_first_section.short_title|default=''|raw}</div>
+        {/eq}
+    </div>
+    <div class="endurance-img">
+        {volist name="data.battery_life" id="lo"}
+        <img src="{$lo.image}" alt="" loading="lazy">
+        {/volist}
+    </div>
+    <div class="endurance-footer-p">{$battery_first_section.desc|default=''|raw}</div>
+</div>
+{/notempty}
+<!-- 接口大满贯 -->
 
+{eq name=":cookie('think_lang')" value="en-us"}
+<div class="zoom-t f36 lh1">{:lang_i18n('接口大满贯')}</div>
+{else/}
+<div class="zoom-t">{:lang_i18n('接口大满贯')}</div>
+{/eq}
+<div class="zoom-container" id="zoomContainer">
+    <div class="img-wrapper">
+        {eq name=":cookie('think_lang')" value="en-us"}
+        <p class="zoom-p f18">{:lang_i18n('标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定')}</p>
+        {else/}
+        <p class="zoom-p">{:lang_i18n('标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定')}</p>
+        {/eq}
+        <img src="__IMAGES__/topic_laptop/zoom-img-1.png" alt="接口图" class="bg-img" id="bgImg" loading="lazy">
+    </div>
+    <!-- 左边 -->
+    {eq name=":cookie('think_lang')" value="en-us"}
+        <div class="annotation anno-delay-1 anno-up1" style="top: 29%; left: 33%;">
+            <span style="text-align: center; font-size: 0.16rem;">Gigabit <br/> Ethernet</span>
+        </div>
+    {else/}
+        <div class="annotation anno-delay-1 anno-up" style="top: 32.5%; left: 32%;">
+            <span style="text-align: center; font-size: 0.16rem;">千兆网口</span>
+        </div>
+    {/eq}
+    <div class="annotation anno-delay-1" style="top:60%; left: 39%;">
+        <span style="text-align: center; font-size: 0.16rem;">{:lang_i18n('肯辛通锁孔')}</span>
+    </div>
+    <div class="annotation anno-delay-1" style="top: 68%; left: 26%;">
+        <span style="text-align: center; font-size: 0.16rem;">{:lang_i18n('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.16rem;">{:lang_i18n('USB-A<br/>(480Mbps)')}</span>
+    </div>
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="annotation anno-delay-1" style="top: 73%; left: 13.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">3.5mm <br/> Combo Audio</span>
+    </div>
+    {else/}
+    <div class="annotation anno-delay-1" style="top: 73%; left: 15.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">3.5mm<br/>耳麦合一</span>
+    </div>
+    {/eq}
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="annotation anno-delay-1 anno-up1" style="top: 40%; left: 9.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">TF 3.0 <br/> Card Slot</span>
+    </div>
+    {else/}
+    <div class="annotation anno-delay-1 anno-up" style="top: 43%; left: 9%;">
+        <span style="text-align: center; font-size: 0.16rem;">TF口3.0</span>
+    </div>
+    {/eq}
+
+    <!-- 右边 -->
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="annotation anno-delay-1" style="top: 64%; left: 56.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">All-in-One <br/> USB-C</span>
+    </div>
+    {else/}
+    <div class="annotation anno-delay-1" style="top: 64%; left: 58.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">全功能<br/>USB-C</span>
+    </div>
+    {/eq}
+
+    <div class="annotation anno-up anno-delay-1" style="top: 34%; left: 66.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">{:lang_i18n('HDMI')}</span>
+    </div>
+    <div class="annotation anno-delay-1" style="top: 70.5%; left: 71.5%;">
+        <span style="text-align: center; font-size: 0.16rem;">{:lang_i18n('USB-A<br/>(5Gbps)')}</span>
+    </div>
+    <div class="annotation anno-up1 anno-delay-1" style="top:38.5%; left: 78%;">
+        <span style="text-align: center; font-size: 0.16rem;">{:lang_i18n('USB-C<br/>(5Gbps)')}</span>
+    </div>
+</div>
+{notempty name="data.scene_focus_images"}
+<!-- 滑块 -->
+<div class="swiper swiper-container-1" style="width: 6.82rem;margin: 0 auto;">
+    <div class="swiper-wrapper">
+        {volist name="data.scene_focus_images" id="fo"}
+        <div class="swiper-slide" style="width: 4.5rem;">
+            <img src="{$fo.image}" alt="" style="width: 4.5rem;">
+            <div>
+                <div class="swiper-slide-t">{$fo.title}</div>
+                <div class="swiper-slide-p">{$fo.short_title}</div>
+            </div>
+        </div>
+        {/volist}
+    </div>
+</div>
+{/notempty}
+{notempty name="data.camare_microphone_security"}
+<!-- tabs -->
+{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">
+    {eq name=":cookie('think_lang')" value="en-us"}
+        {notempty name="camare_microphone"}
+        <div class="tab-t active f36 lh1" data-index="0">{$camare_microphone.title|default=''}</div>
+        {/notempty}
+        {notempty name="security"}
+        <div class="tab-t f36 lh1" data-index="1">{$security.title|default=''}</div>
+        {/notempty}
+    {else/}
+     {notempty name="camare_microphone"}
+        <div class="tab-t active" data-index="0">{$camare_microphone.title|default=''}</div>
+        {/notempty}
+        {notempty name="security"}
+        <div class="tab-t" data-index="1">{$security.title|default=''}</div>
+        {/notempty}
+    {/eq}
+    <div class="tab-content">
+        {notempty name="camare_microphone"}
+        <div class="tab-panel active">
+            <div class="tab-panel-img">
+                <img src="{$camare_microphone.image}" alt="" class="content-image" loading="lazy">
+            </div>
+        </div>
+        {/notempty}
+        {notempty name="security"}
+        <div class="tab-panel">
+            <video
+                src="{$security.video}"
+                id="securityVideo" class="content-video" muted loop playsinline autoplay
+                style="width: 100%;margin:0 auto;">
+                您的浏览器不支持HTML5视频播放，请升级浏览器
+            </video>
+        </div>
+        {/notempty}
+    </div>
+    <div class="tabs-header-box">
+        <div class="tabs-header">
+            {notempty name="camare_microphone"}
+            <div class="tab-item active" data-index="0">{$camare_microphone.short_title|default=''|raw}</div>
+            {/notempty}
+            {notempty name="security"}
+            <div class="tab-item" data-index="1">{$security.short_title|default=''|raw}</div>
+            {/notempty}
+            <div class="tab-indicator"></div>
+        </div>
+    </div>
+    {notempty name="camare_microphone"}
+    <div class="tabs-p active" data-index="0">{$camare_microphone.desc|default=''|raw}</div>
+    {/notempty}
+    {notempty name="security"}
+    <div class="tabs-p" data-index="1">{$security.desc|default=''|raw}</div>
+    {/notempty}
+</div>
+{/notempty}
+{notempty name="data.unified_preinstall"}
+<!-- windows11-->
+<div class="window">
+    <img src="{$data.unified_preinstall.image}" alt="">
+</div>
+{/notempty}
+{notempty name="data.product_testing"}
+<!-- 六宫格 -->
+<div class="footer-imgs">
+    {volist name="data.product_testing" id="to"}
+    <img src="{$to.image}">
+    {/volist}
+</div>
+{/notempty}
+{notempty name="data.webpage_footnotes"}
+<!-- 底部文字 -->
+{eq name=":cookie('think_lang')" value="en-us"}
+    <div class="footer-texts-en">
+        {$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}
+    </div>
+    {else/}
+    <div class="footer-texts">
+        {$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}
+    </div>
+    {/eq}
+
+{/notempty}
 {/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       // 图片间距（可选）
+        });
+    };
 
-{/block}
\ No newline at end of file
+    // 进度条动画 - 零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}
diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html
index 80501448..fae0c8f6 100644
--- a/app/index/view/pc/topic_laptop/index.html
+++ b/app/index/view/pc/topic_laptop/index.html
@@ -18,7 +18,6 @@
 <link rel="stylesheet" href="__CSS__/topic_laptop/ips.css">
 <link rel="stylesheet" href="__CSS__/topic_laptop/rgb.css">
 <link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
-<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
 <link rel="stylesheet" href="__CSS__/topic_laptop/qb.css">
 <link rel="stylesheet" href="__CSS__/topic_laptop/xh.css">
 <link rel="stylesheet" href="__CSS__/topic_laptop/jk.css">
@@ -59,7 +58,7 @@
         <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-p">{$tfi.desc|raw|htmlspecialchars_decode}</div>
                 <div class="swiper-container-texts-img">
                     <a href="{$tfi.link}">
                         <img src="{$tfi.extra_image}" alt="" >
diff --git a/public/static/index/mobile/css/topic_laptop/amd.css b/public/static/index/mobile/css/topic_laptop/amd.css
new file mode 100644
index 00000000..cface428
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/amd.css
@@ -0,0 +1,40 @@
+.amd-box {
+	width: 100%;
+	position: relative;
+	max-width: 6.82rem;
+	margin: 0 auto;
+	margin-top: -0.86rem;
+	z-index: 1;
+}
+
+.amd-img-header,
+.amd-img-main,
+.amd-img-footer {
+	width: 100%;
+	max-width: 6.82rem;
+}
+.amd-img-main {
+	display: flex;
+	justify-content: space-between;
+}
+.amd-img-main-left,
+.amd-img-main-right {
+	flex: 1;
+	max-width: 3.36rem;
+	display: block;
+}
+.amd-img-main-left img,
+.amd-img-main-right img {
+	width: 3.36rem;
+	display: block;
+	margin-top: 0.1rem;
+}
+.amd-img-header img {
+	width: 6.82rem;
+	display: block;
+}
+.amd-img-footer img {
+	width: 6.82rem;
+	margin-top: 0.1rem;
+	display: block;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/bly.css b/public/static/index/mobile/css/topic_laptop/bly.css
new file mode 100644
index 00000000..dde850be
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/bly.css
@@ -0,0 +1,50 @@
+.bly {
+	margin: 0 0.34rem;
+	aspect-ratio: 682/338;
+	/* max-height: 6.97rem; */
+	padding-top: 1.5rem;
+}
+
+.bly .ba-slider .handle:after {
+	position: absolute;
+	top: 50%;
+	/* 1. 缩小宽高：从48px改为32px（可根据需求再调，比如28px/30px） */
+	width: 0.32rem;
+	height: 0.32rem;
+	/* 2. 同步调整margin：宽高的一半，保证居中（48px对应-24px，32px对应-16px） */
+	margin: -0.16rem 0 0 -0.16rem;
+	content: '';
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #fff
+		url('https://dev.ow.f2b211.com/static/index/pc/images/ba-arrow.png')
+		/* 3. 缩小背景箭头：从22px改为16px（匹配整体尺寸） */ center center /
+		0.16rem 0.16rem no-repeat;
+	border: 1px solid #fff;
+	border-radius: 50%;
+	transition: all 0.3s ease;
+	transform: scale(1);
+	z-index: 5;
+	box-shadow: none;
+}
+
+.bly .ba-slider .handle.ba-draggable:after {
+	transform: scale(0.8);
+}
+.bly-t {
+	font-size: 0.48rem;
+	color: #fff;
+	text-align: center;
+	width: 100%;
+}
+.bly-p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	text-align: center;
+	width: 100%;
+	padding-top: 0.37rem;
+	padding-bottom: 0.56rem;
+	font-family: 'HarmonyOS-Light';
+	line-height: 1.5;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/cpu.css b/public/static/index/mobile/css/topic_laptop/cpu.css
new file mode 100644
index 00000000..a02eb452
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/cpu.css
@@ -0,0 +1,50 @@
+.cpu {
+	margin-top: 1.5rem;
+	width: 100%;
+	aspect-ratio: 750/882;
+	position: relative;
+}
+.cpu-main {
+	width: 100%;
+	aspect-ratio: 750/882;
+}
+.cpu-texts-t {
+	color: #fff;
+	font-size: 0.48rem;
+	line-height: 1;
+	text-align: center;
+	padding-top: 0.19rem;
+}
+.cpu-texts-p {
+	color: #cbcfd8;
+	font-size: 0.20rem;
+	margin-top: 0.37rem;
+	line-height: 1;
+	text-align: center;
+}
+
+.cpu-footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.cpu-footer-img {
+	display: flex;
+	gap: 0.1rem;
+}
+.cpu-footer img {
+	width: 100%;
+	max-width: 1.48rem;
+	display: block;
+}
+.cpu-footer-desc {
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 0.38rem;
+	margin-bottom: 0.51rem;
+	width: 100%;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/endurance.css b/public/static/index/mobile/css/topic_laptop/endurance.css
new file mode 100644
index 00000000..4d0385a8
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/endurance.css
@@ -0,0 +1,59 @@
+.endurance {
+	position: relative;
+	width: 100%;
+	margin-top: 1.78rem;
+	aspect-ratio: 750/778;
+}
+.endurance-texts {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: absolute;
+	top: -0.4rem;
+}
+.endurance-t {
+	width: 100%;
+	font-size: 0.5rem;
+	color: #fff;
+	text-align: center;
+}
+.endurance-t span:nth-child(1) {
+	font-size: 0.4rem;
+	line-height: 1;
+}
+.endurance-t span:nth-child(2) {
+	font-size: 0.48rem;
+	margin-left: 0.11rem;
+	line-height: 1;
+}
+.endurance-p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	text-align: center;
+	padding-top: 0.37rem;
+	font-family: 'HarmonyOS-Light';
+}
+.endurance-img {
+	width: 100%;
+
+	position: absolute;
+	bottom: 0.62rem;
+	display: flex;
+	justify-content: center;
+	gap: 0.1rem;
+}
+.endurance-img img {
+	width: 2.46rem;
+	display: block;
+}
+.endurance-footer-p {
+	color: #ffffff;
+	font-size: 0.18rem;
+	position: absolute;
+	bottom: 0;
+	text-align: center;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100%;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/footer.css b/public/static/index/mobile/css/topic_laptop/footer.css
new file mode 100644
index 00000000..ed6b16ef
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/footer.css
@@ -0,0 +1,161 @@
+.footer-imgs {
+	width: 6.8rem;
+	margin: 0 auto;
+	margin-top: 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+.footer-imgs img {
+	width: 2.22rem;
+}
+.footer-imgs img:nth-child(4),
+.footer-imgs img:nth-child(5),
+.footer-imgs img:nth-child(6) {
+	margin-top: 0.09rem;
+}
+
+.footer-texts {
+	width: 6.8rem;
+	margin: 1.5rem 0.35rem;
+	/* font-size: 0.16rem; */
+	color: #909399;
+	/* white-space: normal; */
+	/* margin-top: 1.5rem;
+    margin-bottom: 1.5rem; */
+    box-sizing: border-box;
+}
+.footer-texts p {
+    width: 6.8rem;
+    font-size: 0.16rem;
+    padding-left: 0.1rem;
+	text-indent: -0.2rem;
+	/* line-height: 1.5;
+	margin-bottom: 0.1rem; */
+	font-family: 'HarmonyOS-Light';
+	letter-spacing: 1px;
+}
+
+
+.footer-texts-en {
+    width: 6.8rem;
+	margin: 1.5rem 0.35rem;
+	/* font-size: 0.16rem; */
+	color: #909399;
+	/* white-space: normal; */
+	/* margin-top: 1.5rem;
+    margin-bottom: 1.5rem; */
+    box-sizing: border-box;
+}
+.footer-texts-en p {
+    width: 6.8rem;
+    font-size: 0.16rem;
+    padding-left: 0.1rem;
+	text-indent: -0.1rem;
+	/* line-height: 1.5;
+	margin-bottom: 0.1rem; */
+	font-family: 'HarmonyOS-Light';
+	/* letter-spacing: 1px; */
+}
+
+
+.oircoEgapp-foot .logo-white img {
+    margin: 0 auto;
+  }
+  .oircoEgapp-foot .m_footer {
+    display: flex;
+    /* flex-direction: row; */
+    align-items: center;
+    justify-content: center;
+    margin:0 4%;
+    padding-top: 0 !important;
+  }
+  /* .oircoEgapp-foot .m_footer .left,
+  .oircoEgapp-foot .foot-con {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  } */
+  .oircoEgapp-foot .m_footer .right {
+    flex:1;
+    width: 50% !important;
+    display: flex !important;
+    justify-content: end !important;
+    /* max-width: 55%; */
+  }
+  .oircoEgapp-foot .m_footer .left {
+    flex:1 !important;
+    /* max-width: 40%;
+    justify-content: end;
+    margin-right: 4%; */
+    width: 50% !important;
+    display: flex;
+    justify-content: space-between;
+  }
+  .oircoEgapp-foot .foot-con span {
+    width: auto;
+    padding: 0 0.625rem;
+  }
+  .oircoEgapp-foot .foot-cate .clearfix li h3 {
+    margin-bottom: 10px;
+  }
+  .oircoEgapp-foot .foot-cate .clearfix li p,
+  .oircoEgapp-foot .foot-cate .clearfix li p a {
+    font-size: 12px;
+  }
+  .logo-white {
+    text-align: center;
+    padding: 1rem 0 0;
+    display: flex;
+    align-items: center;
+}
+.foot-cate {
+    padding: 0.16rem;
+}
+.foot-cate h3 {
+    font-size: 0.28rem;
+}
+.foot-cate li {
+    padding: 0.16rem 0;
+    min-height: 276px;
+    
+}
+.foot-cate li p {
+    line-height: 40px;
+}
+.m_footer .right {
+    float: right;
+    width: 57%;
+    text-align: left;
+}
+.foot-con span {
+    font-size:14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    width: 100%;
+   height: auto;
+    cursor: pointer;
+    font-family: 'HarmonyOS-Medium';
+}
+.oircoEgapp-foot .foot-con span {
+    width: auto;
+    padding: 0 0.125rem;
+}
+.m_footer .left  a{
+    display: flex;
+    align-items: center;
+  
+}
+.m_footer .left img {
+   width: 30px;
+    padding-right:0 !important;
+    padding-top: 0;
+}
+/* .oircoEgapp-foot .m_footer .right {
+    max-width: 50%;
+} */
+.m_footer .right {
+    padding: 0 !important;
+}
\ No newline at end of file
diff --git a/public/static/index/mobile/css/topic_laptop/fs.css b/public/static/index/mobile/css/topic_laptop/fs.css
new file mode 100644
index 00000000..6414f014
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/fs.css
@@ -0,0 +1,69 @@
+.fs {
+	width: 100%;
+}
+.fs-box {
+	width: 100%;
+	aspect-ratio: 16/9; 
+}
+.fs-img,
+.fs-video {
+	backface-visibility: hidden; /* 开启硬件加速 */
+	transform: translateZ(0); /* 硬件加速 */
+}
+.fs-box img {
+	width: 100%;
+}
+.fs-box-img {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.fs-h-img {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 0.11rem;
+   
+}
+.fs-h-img img {
+	width: 3.35rem;
+    aspect-ratio: 335/95;
+    
+}
+.fs-b-img {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 0.1rem;
+    aspect-ratio: 681/122;
+}
+.fs-b-img img {
+	width: 6.81rem;
+}
+.fs-ts {
+	font-size: 0.18rem;
+	text-align: center;
+	color: #cbcfd8;
+	padding: 0.4rem 0;
+}
+.dl {
+	width: 100%;
+	padding-top: 1.01rem;
+}
+.dl-t {
+	color: #fff;
+	font-size: 0.48rem;
+	width: 100%;
+	text-align: center;
+	line-height: 1.5;
+}
+.dl-p {
+	color: #cbcfd8;
+	font-size: 0.20rem;
+	width: 100%;
+	text-align: center;
+	padding-top: 0.37rem;
+	/* padding-bottom: 0.37rem; */
+	line-height: 1.5;
+	font-family: 'HarmonyOS-Light';
+}
diff --git a/public/static/index/mobile/css/topic_laptop/gpu.css b/public/static/index/mobile/css/topic_laptop/gpu.css
new file mode 100644
index 00000000..cf62eb91
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/gpu.css
@@ -0,0 +1,44 @@
+.gpu {
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+}
+.gpu-texts {
+	color: #fff;
+	font-size: 0.48rem;
+	margin: 0 0.34rem;
+}
+.gpu-texts-t {
+	line-height: 1.5;
+}
+
+.gpu-texts-p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+	margin-top: 0.37rem;
+}
+.gpu-main-img {
+	width: 100%;
+	aspect-ratio: 750/780;
+}
+.gpu-amd-img {
+	width: 100%;
+}
+.gpu-amd-img img {
+	max-width: 2.26rem;
+	width: 100%;
+	margin-top: 2.39rem;
+	margin-left: 0.45rem;
+}
+.gpu-footer-imgs {
+	display: flex;
+	position: absolute;
+	bottom: 0.61rem;
+	gap: 0.1rem;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.gpu-footer-imgs img {
+	max-width: 1.63rem;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/header.css b/public/static/index/mobile/css/topic_laptop/header.css
new file mode 100644
index 00000000..1d1c4c96
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/header.css
@@ -0,0 +1,233 @@
+.oircoEgapp-head {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+    width: -webkit-fill-available;
+  }
+  .oircoEgapp-head .headtop {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.16rem;
+    height:60px;
+    background: #fff;
+  }
+  .oircoEgapp-head .headtop .headerlogimg {
+
+    max-width: 140px;
+    min-width: 123px;
+    height: auto !important;
+    display: block;
+    /* height: 2.25rem; */
+  }
+  .oircoEgapp-head .top-menu {
+    background-color: #fff;
+    overflow: hidden;
+    width: 100%;
+    color: #000;
+    display: none;
+  }
+  .oircoEgapp-head .top-menu .it-ct {
+    font-family: "HarmonyOS-SemiBold";
+    font-weight: bold;
+  }
+  .oircoEgapp-head .top-menu .it-ct .it-1 {
+    padding: 0.16rem 3.5% 0.2rem;
+    border-bottom: 1px solid #e5e5e5;
+    font-size: 14px;
+    position: relative;
+  }
+  .oircoEgapp-head .top-menu .it-ct .it-1-more {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 1.5%;
+  }
+  .oircoEgapp-head .top-menu .it-ct .it-1-more i {
+    font-weight: bold;
+  }
+  .oircoEgapp-head .top-menu .it-ct .it-1-2 {
+    padding-left: 0.16rem;
+    font-size: 13px;
+    line-height: 1.8;
+    font-weight: 100;
+    font-weight: bold;
+    display: none;
+  }
+  .oircoEgapp-head .top-menu .it-ct .it-1-2 a {
+    color: #666;
+  }
+  .cursor_p span {
+    font-size: 22px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    width: 100%;
+    /* height: 1.2rem; */
+    padding-left: 0.2rem;
+  }
+  .cursor_p span:hover {
+    font-size:22px;
+    white-space: normal;
+    width: 100%;
+    overflow: inherit;
+    line-height: 1.5;
+  }
+/* .cursor_p {
+    height: 0.38rem !important;
+} */
+.img-responsive {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+}
+.img-responsive span {
+    display: flex !important;
+    align-items: center !important;
+}
+.action-sheet {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    display: none;
+    background: #fff;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    z-index: 11111;
+    left: 0;
+  }
+  
+  .menu-name {
+    text-indent: 0.2rem;
+    font-size: 14px;
+    font-weight: 700;
+    color: #000;
+  }
+  .action-sheet ul li {
+    margin: 0 10px;
+    color: #333;
+    font-size: 12px;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+    padding: 12px 14px;
+  }
+  .action-sheet ul li a {
+    color: #333;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .action-sheet ul li img {
+    margin-right: 14px;
+  }
+  .menu-title {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+    justify-content: space-between;
+    background: #fff;
+    border-top-left-radius: 6px;
+    border-top-right-radius:6px;
+    padding: 5px 0;
+  }
+  .close-icon {
+    width: 24px;
+    display: flex;
+    align-items: center;
+  }
+  .close-icon img {
+    width: 24px !important;
+  }
+  .title-text {
+    padding-top: 0.24rem;
+    color: #333;
+    font-size: 14px;
+  }
+  .title-text p {
+    line-height: 2;
+  }
+  .title-text p a {
+    color: #989898;
+   
+  }
+  .title-text p a:hover {
+    color: #989898;
+  }
+  .marsk-container {
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    position: absolute;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0px;
+    z-index: 9999;
+  }
+  .marsk-container-detail {
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    position: absolute;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0px;
+    z-index: 9999;
+  }
+  .search-in {
+    margin-top:0.8rem;
+  }
+  .search-in input {
+    width: 70% !important;
+    height: 0.8rem;
+    background: #ffffff;
+    border: 1px solid #d6d6d6;
+    opacity: 1;
+    border-radius: 20px;
+    padding: 0 14px;
+    font-size: 14px;
+  }
+  ::-webkit-input-placeholder {
+    color: #989898;
+  }
+  .search-button {
+    border: none;
+    font-size: 14px;
+    color: #fff;
+    position: absolute;
+    right: 10px;
+    cursor: pointer;
+    background: #0060ff;
+    height:0.7rem;
+    border-radius: 20px;
+    padding: 0 14px;
+    width: 22%;
+  }
+  .search-in form{
+    display: flex;
+    flex-direction: row;
+     align-items: center;
+  }
+  .search-in .title-text p a{
+    font-size: 14px;
+  }
+  /*头部搜索弹窗*/
+.popup-quick {
+    width: 86%;
+    background-color: #fff;
+    z-index: 9999;
+    box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.2);
+    color: #333;
+    padding: 14px;
+    border-radius: 5px;
+    margin: 14px auto 0;
+    position: relative;
+    margin-top: 1rem;
+  }
\ No newline at end of file
diff --git a/public/static/index/mobile/css/topic_laptop/index.css b/public/static/index/mobile/css/topic_laptop/index.css
new file mode 100644
index 00000000..347ee8e7
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/index.css
@@ -0,0 +1,42 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+html {
+	width: 100% !important;
+	overflow-x: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: 100vw !important;
+}
+body {
+	width: 100%;
+	background: #000;
+	overflow-x: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: 100vw !important;
+}
+
+.f36{
+    font-size: 0.36rem !important;
+    font-family: "HarmonyOS-Medium" !important;
+    /* line-height: 1 !important; */
+}
+.f18{
+    font-size: 0.18rem !important;
+    line-height: 1.5 !important;
+}
+.lh1 {
+    line-height: 1 !important;
+}
+.f28 {
+    font-size: 0.28rem !important;
+    font-family: "HarmonyOS-Medium" !important;
+}
+.f48 {
+    font-size: 0.48rem !important;
+    line-height: 1 !important;
+    margin-bottom: 0.6rem !important;
+    font-family: "HarmonyOS-Medium" !important;
+}
\ No newline at end of file
diff --git a/public/static/index/mobile/css/topic_laptop/ips.css b/public/static/index/mobile/css/topic_laptop/ips.css
new file mode 100644
index 00000000..3c84437c
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/ips.css
@@ -0,0 +1,43 @@
+.ips {
+	position: relative;
+}
+.ips-t {
+	font-size: 0.48rem;
+	color: #fff;
+	line-height: 1.5;
+	margin-top: 1.5rem;
+	margin-left: 0.38rem;
+	margin-right: 0.38rem;
+	margin-bottom: 0.46rem;
+}
+.ips-bg {
+	aspect-ratio: 750/678;
+	position: relative;
+}
+.ips-bg p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+	margin-left: 0.38rem;
+	margin-right: 0.38rem;
+	position: absolute;
+	top: -0.3rem;
+}
+.ips-imgs {
+	width: 6.8rem;
+	flex-wrap: wrap;
+	gap: 0.1rem;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: -3rem;
+	display: flex;
+}
+.ips-imgs img {
+	width: 3.35rem;
+	display: block;
+}
+/* .ips-imgs img:nth-child(3),
+.ips-imgs img:nth-child(4) {
+	margin-top: 0.1rem;
+} */
diff --git a/public/static/index/mobile/css/topic_laptop/m2.css b/public/static/index/mobile/css/topic_laptop/m2.css
new file mode 100644
index 00000000..35b6d8ba
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/m2.css
@@ -0,0 +1,37 @@
+.m2 {
+	width: 100%;
+	margin-top: 1.09rem;
+}
+.m2-bg {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 750/846;
+}
+
+.m2-bg-t1 {
+	font-size: 0.48rem;
+	color: #fff;
+	width: 100%;
+	text-align: center;
+	line-height: 1.5;
+	padding-top: 1.3rem;
+}
+.m2-bg-p {
+    color: #CBCFD8ff;
+    font-size: 0.18rem;
+    padding-top:0.37rem;
+    width: 100%;
+    text-align: center;
+   
+}
+.m2-img-box {
+	position: absolute;
+	bottom: 0.66rem;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 0.11rem;
+}
+.m2-img-box img {
+	width: 2.22rem;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/memory.css b/public/static/index/mobile/css/topic_laptop/memory.css
new file mode 100644
index 00000000..9a0c5204
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/memory.css
@@ -0,0 +1,39 @@
+.memory {
+	width: 100%;
+}
+.memory-t {
+	font-size: 0.48rem;
+	color: #fff;
+	width: 100%;
+	text-align: center;
+	padding-bottom: 0.37rem;
+	line-height: 1.5;
+}
+.memory-img {
+	width: 100%;
+	aspect-ratio: 750/727;
+	position: relative;
+}
+.memory-p {
+	width: 100%;
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	text-align: center;
+	line-height: 1.5;
+}
+.memory-footer-img {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: -0.74rem;
+    width: 6.83rem;
+}
+.memory-footer-img p {
+    height:0;
+}
+.memory-footer-img img {
+	width: 6.83rem;
+   
+	display: block;
+    aspect-ratio: 683/148;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/progress.css b/public/static/index/mobile/css/topic_laptop/progress.css
new file mode 100644
index 00000000..05bfda76
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/progress.css
@@ -0,0 +1,129 @@
+.progress {
+	margin-left: 0.34rem;
+	margin-right: 0.34rem;
+	box-sizing: border-box;
+}
+/* .progress-section {
+	margin-left: 0.34rem;
+	margin-right: 0.34rem;
+	box-sizing: border-box;
+} */
+
+.progress-title {
+	font-size: 0.24rem;
+	color: #fff;
+	padding: 0.16rem 0 0.36rem 0;
+	font-family: 'HarmonyOS-Medium';
+}
+.progress-item .label {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	line-height: 1;
+	margin-top: 0.13rem;
+	margin-bottom: 0.36rem;
+}
+
+.progress-item .label .device-name {
+	flex: 1;
+	font-family: 'HarmonyOS-Medium';
+	margin-left: 0.04rem;
+}
+
+.progress-item .label .value {
+	text-align: right;
+	font-family: 'HarmonyOS-Medium';
+	margin-right: 0.04rem;
+}
+
+.colorLinearGradient {
+	background: linear-gradient(90deg, #7e51ff, #d5dfff);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+.progress-item .label .value.m4-max {
+	color: #5e5ce6;
+}
+
+.progress-bar {
+	flex: 1;
+	height: 0.1rem;
+	max-height: 0.2rem;
+	min-height: 0.1rem;
+	border-radius: 0.1rem;
+	overflow: hidden;
+	position: relative;
+	/* 性能优化1：开启硬件加速，减少重绘 */
+	transform: translateZ(0);
+	will-change: transform;
+}
+
+.progress-fill {
+	height: 100%;
+	border-radius: 0.05rem;
+	transform: scaleX(0);
+	transform-origin: left center;
+	transition: transform 1.2s ease-out;
+	will-change: transform;
+	position: relative;
+}
+
+/* 保留你所有原始的进度条颜色类 */
+.progress-fill.m4-max {
+	background: linear-gradient(40deg, #7e51ff, #e1d5ff);
+}
+
+.progress-fill.m2-max {
+	background: #bfc5d9;
+}
+
+@keyframes shimmer {
+	100% {
+		left: 150%;
+	}
+}
+
+.font20 {
+	font-size: 0.2rem !important;
+}
+.font18 {
+	font-size: 0.18rem !important;
+}
+.colorCBCFD8 {
+	color: #646778 !important;
+}
+
+.progress-p {
+	color: #cbcfd8;
+	font-size: 0.18rem;
+	margin-top: 0.51rem;
+	margin-bottom: 1.5rem;
+	text-align: center;
+}
+
+.progress-p1 {
+	color: #cbcfd8;
+	font-size: 0.18rem;
+	margin-top: 1.56rem;
+	text-align: center;
+}
+.w645 {
+	width: 6.45rem;
+}
+.w585 {
+	width: 5.85rem;
+}
+.w454 {
+	width: 4.54rem;
+}
+.w321 {
+	width: 3.21rem;
+}
+.w596 {
+	width: 5.96rem;
+}
+.w467 {
+	width: 4.67rem;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/qb.css b/public/static/index/mobile/css/topic_laptop/qb.css
new file mode 100644
index 00000000..1d2e74b5
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/qb.css
@@ -0,0 +1,25 @@
+/* .qb {
+    position: absolute;
+    top:3rem;
+    left: 50%;
+    transform: translateX(-50%);
+} */
+.qb-t {
+	width: 100%;
+	font-size: 0.48rem;
+	color: #fff;
+	text-align: center;
+	padding-top: 1.5rem;
+}
+.qb-p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	text-align: center;
+	padding-top: 0.37rem;
+	padding-bottom: 0.34rem;
+	font-family: 'HarmonyOS-Light';
+	line-height: 1.5;
+}
+.qb-bg-img1 {
+	width: 6.9rem;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/rgb.css b/public/static/index/mobile/css/topic_laptop/rgb.css
new file mode 100644
index 00000000..a6c98a92
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/rgb.css
@@ -0,0 +1,28 @@
+.rgb-t {
+	font-size: 0.48rem;
+	color: #fff;
+	width: 100%;
+	text-align: center;
+	margin-top: 4.84rem;
+	margin-bottom: 0.37rem;
+	line-height: 1.5;
+}
+.rgb-bg {
+	aspect-ratio: 750/582;
+}
+.rgb-p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+	text-align: center;
+}
+.rgb-imgs {
+	display: flex;
+	gap: 0.1rem;
+	margin-top: 0.28rem;
+	justify-content: center;
+}
+.rgb-imgs img {
+	width: 2.17rem;
+	display: block;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/swiper.css b/public/static/index/mobile/css/topic_laptop/swiper.css
new file mode 100644
index 00000000..58a505c8
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/swiper.css
@@ -0,0 +1,86 @@
+/* 轮播容器 - 核心：基于视口高度自适应 */
+.auto-swiper-container {
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
+/* 轮播项 - 填充容器高度 */
+.auto-swiper-slide {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 图片自适应核心：填充屏幕比例高度，保持比例 */
+.auto-swiper-slide img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover; /* 优先填充容器，裁剪超出部分（无拉伸） */
+	/* object-fit: contain; 可选：完整显示图片，不裁剪（可能留黑边） */
+	display: block;
+}
+.swiper-container-texts {
+	position: absolute;
+	left: 50%;
+	top: 1.2rem;
+	transform: translateX(-50%);
+	z-index: 10;
+	width: 100%;
+}
+
+.swiper-container-texts-t {
+	font-size: 0.48rem;
+	text-align: center;
+	width: 100%;
+	line-height: 1;
+}
+.swiper-container-texts-p {
+	padding-top: 0.54rem;
+	font-size: 0.16rem;
+	/* text-align: center; */
+	width: 100%;
+	display: flex;
+	align-items: center;
+	/* letter-spacing: px; */
+	justify-content: center;
+}
+.swiper-container-texts-p div {
+	font-family: 'HarmonyOS-Light';
+}
+.swiper-container-texts-line {
+	width: 1px;
+	height: 0.16rem;
+	background: #fff;
+	margin: 0 12px;
+}
+.swiper-container-texts-img {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	padding-top: 0.54rem;
+	cursor: pointer;
+}
+.swiper-container-texts-img a {
+	width: 100%;
+	max-width: 1.18rem;
+}
+.swiper-container-texts-img img {
+	width: 100%;
+	max-width: 1.18rem;
+}
+.swiper-slide-t {
+    padding-top: 0.3rem;
+	font-size: 0.2rem;
+	text-align: center;
+	color: #fff;
+}
+.swiper-slide-p {
+	font-size: 0.16rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 0.18rem;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/tabs.css b/public/static/index/mobile/css/topic_laptop/tabs.css
new file mode 100644
index 00000000..ed9f9213
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/tabs.css
@@ -0,0 +1,105 @@
+.tabs-container {
+	width: 6.03rem;
+	margin: 0 auto;
+}
+.tabs-header-box {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 0.48rem;
+}
+.tabs-header {
+	display: inline-flex;
+	/* 改为inline-flex，宽度由子元素决定 */
+	position: relative;
+	border-bottom: 1px solid #909399;
+	margin: 0 auto;
+	width: 1.75rem;
+	display: flex;
+}
+
+.tab-item {
+	/* padding: 12px 24px; */
+	font-size: 0.18rem;
+	cursor: pointer;
+	transition: color 0.2s ease;
+	white-space: nowrap;
+	color: #cbcfd8;
+	flex: 1;
+	text-align: center;
+}
+
+.tab-item {
+	margin-bottom: 0.08rem;
+}
+
+.tab-indicator {
+	position: absolute;
+	bottom: 0;
+	height:1px;
+	background-color: #fff;
+	transform: translateX(0);
+	width: auto;
+	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
+		width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+	will-change: transform, width;
+	backface-visibility: hidden;
+	perspective: 1000px;
+}
+
+.tab-content {
+	width: 6.03rem;
+	width: 6.03rem;
+	/* min-width: 1280px; */
+	margin: 0 auto;
+}
+
+.content-video {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+.tabs-p {
+	width: 100%;
+	font-size: 0.18rem;
+	color: #cbcfd8;
+	text-align: center;
+	margin-top: 0.48rem;
+	display: none;
+}
+.tabs-p.active {
+	display: block;
+}
+.tab-panel {
+	display: none;
+}
+.tab-panel-img {
+	background: #1c1c1e;
+	width: 5.77rem;
+	overflow: hidden;
+	display: flex;
+	justify-content: flex-end;
+	border-radius: 0.16rem;
+}
+.tab-panel-img img {
+	width: 5.77rem;
+}
+.tab-panel.active {
+	display: block;
+}
+.tab-t {
+	font-size: 0.48rem;
+	color: #cbcfd8;
+	width: 100%;
+	text-align: center;
+	margin-top: 1.5rem;
+	margin-bottom: 0.7rem;
+	display: none;
+}
+.tab-t.active {
+	display: block;
+}
+/* .tab-ts {
+    margin-top: 2.97rem;
+	margin-bottom: 1rem;
+} */
diff --git a/public/static/index/mobile/css/topic_laptop/wift.css b/public/static/index/mobile/css/topic_laptop/wift.css
new file mode 100644
index 00000000..7ceed630
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/wift.css
@@ -0,0 +1,37 @@
+.wifi {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 750/595;
+	margin-top: 3.45rem;
+}
+.wifi-texts {
+	position: absolute;
+	top: -2.3rem;
+	left: 0.42rem;
+	width: 100%;
+}
+.wifi-t {
+	width: 100%;
+	font-size: 0.48rem;
+	color: #fff;
+	line-height: 1.5;
+}
+.wifi-p {
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	padding-top: 0.37rem;
+	line-height: 1.4;
+	font-family: 'HarmonyOS-Light';
+}
+.wifi-img {
+	width: 100%;
+	position: absolute;
+	bottom: -0.22rem;
+	display: flex;
+	justify-content: center;
+	gap: 0.1rem;
+}
+.wifi-img img {
+	width: 3.35rem;
+	display: block;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/window.css b/public/static/index/mobile/css/topic_laptop/window.css
new file mode 100644
index 00000000..d843f6de
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/window.css
@@ -0,0 +1,9 @@
+.window {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 1.5rem;
+}
+.window img {
+	width: 6.8rem;
+}
diff --git a/public/static/index/mobile/css/topic_laptop/xn.css b/public/static/index/mobile/css/topic_laptop/xn.css
new file mode 100644
index 00000000..b033071f
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/xn.css
@@ -0,0 +1,64 @@
+.xn-container {
+	width: 6.8rem;
+	margin: 0 auto;
+	box-sizing: border-box;
+}
+
+/* 图片容器样式（核心） */
+.xn-image-section {
+	overflow: hidden;
+	border-radius: 0.16rem;
+	background: #0d0c10;
+	border: 1px solid #3f3f45;
+	width: 6.8rem;
+}
+
+.zoom-image {
+	width: 100%;
+	height: auto;
+	display: block;
+	/* 调整transform过渡时间为2s，opacity为1.5s，可按需修改 */
+	transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s ease;
+	transform: scale(0.8);
+	/* 初始缩放比例 */
+	opacity: 0.9;
+	/* 初始透明度（略暗，放大后变亮） */
+}
+
+/* 滚动触发后的放大状态 */
+.zoom-image.active {
+	transform: scale(1.1);
+	/* 放大5%（官网常用比例，不夸张） */
+	opacity: 1;
+}
+.xn-t {
+	font-size: 0.48rem;
+	color: #fff;
+	text-align: center;
+	margin-top: 1.5rem;
+	margin-bottom: 0.6rem;
+    
+}
+.xn-p {
+	padding-top: 0.6rem;
+	font-size: 0.16rem;
+    margin-left: 0.47rem;
+}
+.xn-p p {
+    width: 5.84rem;
+	color: #cbcfd8;
+	line-height: 1.5;
+    /* 核心：左内边距控制第二行缩进量 */
+    padding-left: 0.8rem;
+    /* 首行向左偏移，抵消左内边距，实现第二行缩进 */
+    text-indent: -0.8rem;
+    /* 确保p标签是块级，且换行正常 */
+    display: block;
+    word-wrap: break-word;
+    white-space: nowrap;
+    /* 2. 超出元素宽度的内容隐藏 */
+    overflow: hidden;
+    /* 3. 将超出的文本替换为省略号... */
+    text-overflow: ellipsis;
+    /* 可选：给元素设置一个固定宽度（确保省略效果生效） */
+}
\ No newline at end of file
diff --git a/public/static/index/mobile/css/topic_laptop/zoom.css b/public/static/index/mobile/css/topic_laptop/zoom.css
new file mode 100644
index 00000000..a41814f3
--- /dev/null
+++ b/public/static/index/mobile/css/topic_laptop/zoom.css
@@ -0,0 +1,122 @@
+/* 图片容器：100vw宽，最小宽度1440px，按图片原始比例（2560:1857）定高 */
+.zoom-container {
+	width: 7.5rem;
+	height: 6.05rem;
+	position: relative;
+}
+
+/* 图片包裹层：与容器同尺寸，定位参考系，承接缩放变换 */
+.img-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	/* z-index: -10; */
+}
+
+/* 图片：按原始比例填充包裹层，不裁切，初始放大+过渡动画 */
+.bg-img {
+	width: 7.5rem;
+	height: 6.05rem;
+	display: block;
+	transform: scale(1.5);
+	transition: transform 1.8s ease;
+	transform-origin: center center;
+}
+
+/* 图片缩小后的状态 */
+.bg-img.zoom-out {
+	transform: scale(1);
+}
+
+/* 标注样式：关键修正 - 基于容器绝对定位，百分比参考图片原始比例 */
+.annotation {
+	position: absolute;
+	color: #fff;
+	font-size: calc(12px + 0.3vw);
+	opacity: 0;
+	transform: translateY(calc(10px + 0.5vw));
+	transition: opacity 0.8s ease, transform 0.8s ease;
+	pointer-events: none;
+	z-index: 10;
+	white-space: nowrap;
+	/* 关键：标注的定位参考系是容器（与图片同比例），而非缩放后的图片 */
+	top: 0;
+	left: 0;
+	/* 重置默认值，依赖内联style的百分比定位 */
+}
+
+/* 标注显示状态 */
+.annotation.anno-show {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.annotation span {
+	position: relative;
+	display: inline-block;
+	/* 确保文字居中对齐 */
+	text-align: center;
+}
+
+/* 标注线条样式：基于文字定位，适配缩放 */
+.annotation span::before {
+	content: '';
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 0.01rem;
+	height: 0;
+	bottom: calc(100% + 6px);
+	background-color: #fff;
+	transition: height 0.8s ease;
+	transform-origin: bottom center;
+}
+/* 向上延伸的标注线条（给需要向上的.annotation加anno-up类） */
+.annotation.anno-up span::before {
+	/* 把线条位置从文字下方，改成文字上方 */
+	bottom: auto;
+	top: 0.3rem; /* 定位到文字顶部外 */
+	/* 线条方向改为向上延伸 */
+	transform-origin: top center;
+}
+.annotation.anno-up1 span::before {
+	/* 把线条位置从文字下方，改成文字上方 */
+	bottom: auto;
+	top: 0.5rem; /* 定位到文字顶部外 */
+	/* 线条方向改为向上延伸 */
+	transform-origin: top center;
+}
+/* 标注显示时，设置线条最终高度 */
+.annotation.anno-show span::before {
+	height: 0.57rem;
+}
+
+.zoom-t {
+	width: 100%;
+	text-align: center;
+	font-size: 0.48rem;
+	color: #fff;
+	padding-top: 1.5rem;
+}
+.zoom-p {
+	width: 100%;
+	text-align: center;
+	font-size: 0.20rem;
+	color: #cbcfd8;
+	position: absolute;
+	top: 0.37rem;
+	z-index: 10;
+	line-height: 1.5;
+	font-family: 'HarmonyOS-Light';
+}
+
+/* 标注延迟类 */
+.anno-delay-1 {
+	transition-delay: 0.8s;
+}
+.anno-delay-1 span::before {
+	transition-delay: 0.8s;
+}
diff --git a/public/static/index/mobile/images/topic_laptop/zoom-img-1.png b/public/static/index/mobile/images/topic_laptop/zoom-img-1.png
new file mode 100644
index 00000000..5fbae73b
Binary files /dev/null and b/public/static/index/mobile/images/topic_laptop/zoom-img-1.png differ
diff --git a/public/static/index/pc/css/topic_laptop/fs.css b/public/static/index/pc/css/topic_laptop/fs.css
index 60c04e64..3abe7376 100644
--- a/public/static/index/pc/css/topic_laptop/fs.css
+++ b/public/static/index/pc/css/topic_laptop/fs.css
@@ -54,4 +54,23 @@
     text-align: center;
     color:#cbcfd8;
     padding:0.4rem 0;
-}
\ No newline at end of file
+}.dl {
+	width: 100%;
+	padding-top: 0.71rem;
+}
+.dl-t {
+	color: #fff;
+	font-size: 0.63rem;
+	width: 100%;
+	text-align: center;
+}
+.dl-p {
+	color: #cbcfd8;
+	font-size: clamp(16px, 1vw, 0.22rem);
+	width: 100%;
+	text-align: center;
+	padding-top: 0.43rem;
+	/* padding-bottom: 0.37rem; */
+    line-height: 1.8;
+    font-family: "HarmonyOS-Light";
+}