头部底部

app/index/view/mobile/topic_laptop/index.html

@@ -1,6 +1,7 @@
 {extend name="public/base" /}
 {block name="style"}
-<link rel="stylesheet" href="__CSS__/topic_laptop/index.css">
+    <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">
@@ -41,501 +42,515 @@
         })(document, window);
     </script>
 {/block}
-{block name="header"}
-<!-- 重置header头为空 -->
-{/block}
+
 {block name="main"}
-    <!-- 顶部轮播 -->
-    <div class="swiper-container auto-swiper-container" style="margin-top:60px;">
-        <div class="swiper-wrapper">
-            <div class="swiper-slide auto-swiper-slide">
-                <div class="swiper-container-texts" style="color:#fff">
-                    <div class="swiper-container-texts-t">轻启强大 跃级体验</div>
-                    <div class="swiper-container-texts-p">
-                        <div>锐龙R7 7735HS标压处理器</div>
-                        <div style="width: 1px; height: 0.16rem;background: #fff;margin: 0 0.15rem;"></div>
-                        <div>IPS柔光舒适屏</div>
-                        <div style="width: 1px; height: 0.16rem;background: #fff;margin: 0 0.15rem;"></div>
-                        <div>轻至1.45kg</div>
-                    </div>
-                    <div class="swiper-container-texts-img">
-                        <a href="">
-                            <img src="__IMAGES__/topic_laptop/ljgd.png" alt="">
-                        </a>
-                    </div>
+{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>
-                <img src="__IMAGES__/topic_laptop/banner.png" alt="" />
             </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-box">
-        <div class="amd-img-header">
-            <img src="__IMAGES__/topic_laptop/amd1.png" alt="" loading="lazy">
+    <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">
+            <div class="cpu-texts-t">{$cpu_first_section.title|default=''}</div>
+            <p class="cpu-texts-p">{$cpu_first_section.short_title|default=''}</p>
         </div>
-        <div class="amd-img-main " data-order="2" data-name="">
-            <div class="amd-img-main-left">
-                <img src="__IMAGES__/topic_laptop/amd-l-1-1.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/amd-l-1-2.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/amd-l-1-3.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/amd-l-1-4.png" alt="" loading="lazy">
+        <div 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="amd-img-main-right">
-                <img src="__IMAGES__/topic_laptop/amd-r-1-1.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/amd-r-1-2.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/amd-r-1-3.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/amd-r-1-4.png" alt="" loading="lazy">
-            </div>
-        </div>
-        <div class="amd-img-footer">
-            <img src="__IMAGES__/topic_laptop/amd10.png" alt="" loading="lazy">
+            <div class="cpu-footer-desc">{$cpu_first_section.desc|default=''|raw}</div>
         </div>
     </div>
-    <!-- 超能引擎 -->
-    <div class="cpu">
-        <div class="cpu-main" style="background: url('__IMAGES__/topic_laptop/cpu.png');background-size:100% auto">
-            <div class="cpu-texts">
-                <div class="cpu-texts-t">超能引擎 性能拉满</div>
-                <p class="cpu-texts-p">强悍「芯」实力 定义性能新标杆</p>
+</div>
+{/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="cpu-footer">
-                <div class="cpu-footer-img">
-                    <img src="__IMAGES__/topic_laptop/cpu-1.png" alt="" loading="lazy">
-                    <img src="__IMAGES__/topic_laptop/cpu-2.png" alt="" loading="lazy">
-                    <img src="__IMAGES__/topic_laptop/cpu-3.png" alt="" loading="lazy">
-                </div>
-                <div class="cpu-footer-desc">
-                    搭载高性能CPU与GPU，多任务并行流畅不卡顿
-                </div>
+            <div class="label ">
+                <span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
+                <span class="value m4-max colorLinearGradient font20">13766</span>
             </div>
         </div>
-
-    </div>
-    <!-- 进度条 -->
-    <div class="progress">
-        <div class="progress-title">CineBench R23 多核跑分</div>
-        <div class="progress-section">
-            <div class="progress-item">
-                <div class="progress-bar-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill m4-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label ">
-                    <span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
-                    <span class="value m4-max colorLinearGradient font20">13766</span>
+        <div 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="progress-item w645">
-                <div class="progress-bar-container ">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name colorCBCFD8 font18">Ryzen5 7640HS:</span>
-                    <span class="value colorCBCFD8 font18">12950</span>
-                </div>
-            </div>
-            <div class="progress-item w585">
-                <div class="progress-bar-container ">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name font18 colorCBCFD8 font18">锐龙9 6900HX:</span>
-                    <span class="value font18 colorCBCFD8 font18">13183</span>
-                </div>
-            </div>
-            <div class="progress-item w454">
-                <div class="progress-bar-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name font18 colorCBCFD8">酷睿i5-12450H:</span>
-                    <span class="value font18 colorCBCFD8">10200</span>
-                </div>
-            </div>
-            <div class="progress-item w321">
-                <div class="progress-bar-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name m2-max font18 colorCBCFD8">Ryzen5 6600H:</span>
-                    <span class="value font18 colorCBCFD8">10297</span>
-                </div>
+            <div class="label">
+                <span class="device-name colorCBCFD8 font18">Ryzen5 7640HS:</span>
+                <span class="value colorCBCFD8 font18">12950</span>
             </div>
         </div>
-        <div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
-    </div>
-    <!-- 显卡 GPU -->
-    <div class="gpu">
-        <div class="gpu-texts">
-            <div class="gpu-texts-t">
-                Radeon 680M</br>
-                独显级显卡 低延迟 全能创作力
+        <div 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="gpu-texts-p">
-                搭配高效架构与先进制程，在低功耗下实现游戏创作场景的</br>
-                逼真光影渲染与流畅性能输出
+            <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="gpu-main-img"
-            style="background: url('__IMAGES__/topic_laptop/gpu-main.png');background-size:100% auto">
-            <div class="gpu-amd-img">
-                <img src="__IMAGES__/topic_laptop/gpu-amd.png" alt="" loading="lazy">
+        <div 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="gpu-footer-imgs">
-                <img src="__IMAGES__/topic_laptop/gpu-imgs-1.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/gpu-imgs-2.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/gpu-imgs-3.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/gpu-imgs-4.png" alt="" loading="lazy">
+            <div class="label">
+                <span class="device-name font18 colorCBCFD8">{:lang_i18n('酷睿i5-12450H')}:</span>
+                <span class="value font18 colorCBCFD8">10200</span>
             </div>
         </div>
-
-    </div>
-    <!-- 进度条 -->
-    <div class="progress">
-        <div class="progress-title">3DMARK Time Spy显卡得分</div>
-        <div class="progress-section">
-            <div class="progress-item">
-                <div class="progress-bar-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill m4-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label ">
-                    <span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
-                    <span class="value m4-max colorLinearGradient font20">1700</span>
+        <div 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="progress-item w596">
-                <div class="progress-bar-container ">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name colorCBCFD8 font18">NVIDIA GTX 750:</span>
-                    <span class="value colorCBCFD8 font18">1000</span>
-                </div>
-            </div>
-            <div class="progress-item w596">
-                <div class="progress-bar-container ">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name font18 colorCBCFD8 font18">i7-13620H:</span>
-                    <span class="value font18 colorCBCFD8 font18">1000</span>
-                </div>
-            </div>
-            <div class="progress-item w467">
-                <div class="progress-bar-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill m2-max" data-value="100"></div>
-                    </div>
-                </div>
-                <div class="label">
-                    <span class="device-name font18 colorCBCFD8">Ryzen5 6600H:</span>
-                    <span class="value font18 colorCBCFD8">950</span>
-                </div>
-            </div>
-        </div>
-        <div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
-    </div>
-    <!-- 内存 memory-->
-    <div class="memory">
-        <div class="memory-t">
-            6400MT/s</br>高频狂飙 超大带宽，游戏创作飞快
-        </div>
-        <div class="memory-img"
-            style="background: url('__IMAGES__/topic_laptop/memory-1.png'); background-size:100% auto">
-            <div class="memory-p">
-                搭载新一代DDR5架构，性能频率跃升至6400MHz，
-                </br>16GB/32GB运行内存，双通道高带宽设计叠加低延迟优化，大型软件秒加</br>载;多任务多窗口同步并行也能流程无卡顿,尽情释放你的创作潜能。
-            </div>
-            <div class="memory-footer-img">
-                <img src="__IMAGES__/topic_laptop/memory-2.png">
+            <div class="label">
+                <span class="device-name m2-max font18 colorCBCFD8">Ryzen5 6600H:</span>
+                <span class="value font18 colorCBCFD8">10297</span>
             </div>
         </div>
     </div>
-    <!-- ssd -->
-    <div class="m2">
-        <div class="m2-bg" style="background: url('__IMAGES__/topic_laptop/ssd-img-1.png');background-size:100% auto">
-            <div class="m2-bg-t1">
-                支持PCle 4.0 M.2 扩容</br>释放存储潜能
+    <div 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">
+        <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>
+    </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="m2-img-box">
-                <img src="__IMAGES__/topic_laptop/ssd-img-2.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/ssd-img-3.png" alt="" loading="lazy">
-                <img src="__IMAGES__/topic_laptop/ssd-img-4.png" alt="" loading="lazy">
-
+            <div 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>
-    <!-- fs -->
-    <div class="fs">
-        <div class="dl">
-            <div class="dl-t">
-                静享 45W强悍性能</br>
-                “飓冷”轻音散热系统
-            </div>
-            <p class="dl-p">
-                牛角形双热管架构搭配定制高性能涡轮风扇，超强的散热能力，长时</br>间运行不降频；在创作、游戏等高负载场景，性能拉满 全程高能
-            </p>
+    <div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
+</div>
+{notempty name="data.ram"}
+<!-- 内存 memory-->
+<div class="memory">
+    <div class="memory-t">{$data.ram.title|raw}</div>
+    <div class="memory-img" style="background: url('{$data.ram.image|default=\'\'}'); background-size:100% auto">
+        <div class="memory-p">{$data.ram.short_title|raw}</div>
+        <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">
+        <div class="m2-bg-t1">{$ssd_first_section.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 class="fs-box">
+    </div>
+</div>
+{/notempty}
+{notempty name="data.cooling_system"}
+<!-- fs -->
+<div class="fs">
+    {notempty name="data.cooling_system.0"}
+    <div class="dl">
+        <div class="dl-t">{$data.cooling_system.0.title|raw}</div>
+        <p class="dl-p">{$data.cooling_system.0.short_title|raw}</p>
+    </div>
+    {/notempty}
+    <div class="fs-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">
+    <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">
+        </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)"/}
+    <div class="ips-t">{$ips_fisrt_section.title|default=''|raw}</div>
+    <div class="ips-bg" style="background: url('{$ips_fisrt_section.image|default=\'\'}');background-size:100% auto">
+        <p>{$ips_fisrt_section.short_title|default=''|raw}</p>
+    </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)"/}
+    <div class="rgb-t">{$gamut_first_section.title|default=''|raw}</div>
+    <div class="rgb-bg" style="background: url('{$gamut_first_section.image|default=\'\'}');background-size:100% auto">
+        <p class="rgb-p">{$gamut_first_section.short_title|default=''|raw}</p>
+    </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">
+        <div class="bly-t">{$glare_first_section.title|default=''|raw}</div>
+        <div class="bly-p">{$glare_first_section.short_title|default=''|raw}</div>
+    </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)"/}
+        <div class="qb-t">{$texture_first_section.title|default=''|raw}</div>
+        <div class="qb-p">{$texture_first_section.short_title|default=''|raw}</div>
+        <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">
+        <div class="wifi-t">{$wifi_first_section.title|default=''|raw}</div>
+        <div class="wifi-p">{$wifi_first_section.short_title|default=''|raw}</div>
+    </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">
+        <div class="endurance-t">{$battery_first_section.title|default=''|raw}</div>
+        <div class="endurance-p">{$battery_first_section.short_title|default=''|raw}</div>
+    </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}
+<!-- 接口大满贯 -->
+<div class="zoom-t">{:lang_i18n('接口大满贯')}</div>
+<div class="zoom-container" id="zoomContainer">
+    <div class="img-wrapper">
+        <p class="zoom-p">{:lang_i18n('标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定')}</p>
+        <img src="__IMAGES__/topic_laptop/zoom-img-1.png" alt="接口图" class="bg-img" id="bgImg" loading="lazy">
+    </div>
+    <!-- 左边 -->
+    <div class="annotation anno-delay-1" style="top:60%; left: 37.5%;">
+        <span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('肯辛通锁孔')}</span>
+    </div>
+    <div class="annotation anno-delay-1 anno-up" style="top: 31.5%; left: 32%;">
+        <span style="text-align: center; font-size: 0.18rem;">{: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.18rem;">{:lang_i18n('USB-A<br />(480Mbps)')}</span>
+    </div>
+    <div class="annotation anno-delay-1" style="top: 73%; left: 14.5%;">
+        <span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('3.5mm<br />耳麦合一')}</span>
+    </div>
+    <div class="annotation anno-delay-1 anno-up" style="top: 43%; left: 9%;">
+        <span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('TF口3.0')}</span>
+    </div>
+    <!-- 右边 -->
+    <div class="annotation anno-delay-1" style="top: 64%; left: 58%;">
+        <span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('全功能<br />USB-C')}</span>
+    </div>
+    <div class="annotation anno-up anno-delay-1" style="top: 34%; left: 65%;">
+        <span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('HDMI')}</span>
+    </div>
+    <div class="annotation anno-delay-1" style="top: 70.5%; left: 70.5%;">
+        <span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('USB-A<br />(5Gbps)')}</span>
+    </div>
+    <div class="annotation anno-up1 anno-delay-1" style="top:38.5%; left: 77%;">
+        <span style="text-align: center; font-size: 0.18rem;">{: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">
+    {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}
+    <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="https://ow.static.f2b211.com/storage/videos/banner/20251219/584940a4e2f48d0c08345ce84b93826a_dmlkZW9fcWluaXU=.mp4"
-                class="fs-video" muted loop playsinline autoplay
-                poster="https://dev.ow.f2b211.com/storage/images/banner/20251220/bd1f918627eecb7ff2898229e275729c.png"
-                preload="auto" style="width: 100%;">
+                src="{$security.video}"
+                id="securityVideo" class="content-video" muted loop playsinline autoplay
+                style="width: 100%;margin:0 auto;">
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
-            <div class="fs-ts">*散热图仅为示意，具体以实物为准</div>
-            <div class="fs-box-img">
-                <div class="fs-h-img">
-                    <img src="__IMAGES__/topic_laptop/fs-img-1.png" alt="">
-                    <img src="__IMAGES__/topic_laptop/fs-img-2.png" alt="">
-                </div>
-                <div class="fs-b-img" style="min-height: 20px;">
-                    <img src="__IMAGES__/topic_laptop/fs-img-3.png" alt="">
-                </div>
-            </div>
+        </div>
+        {/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>
-    <!-- 性能大拿 -->
-    <div class="xn">
-        <div class="xn-t">性能大跃级 拿捏多场景</div>
-        <div class="xn-container">
-            <div class="xn-image-section">
-                <img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/60cac336860c8b69e34bb7de81cc9c17.png"
-                    alt="" class="zoom-image first-image">
-            </div>
-        </div>
-        <div class="xn-p">
-            <p>游戏软件: ELDÀ、逆水寒、DIABLO、AION、无悔华夏、E- sports Game、原神</p>
-            <p>设计/编程: python、C语言、CAD、mysql、PS、Pr、DW、3Dmax、C4D、Ai、Au、Ae、Fw、En</p>
-            <p> 办公/娱乐: 钉钉、WPS、XMind、有道云笔记、爱奇艺、音乐软件、同花顺</p>
-        </div>
-    </div>
-    <!-- IPS -->
-    <div class="ips">
-        <div class="ips-t">
-            14寸IPS 柔光舒适屏</br>
-            细腻 真实 沉浸
-        </div>
-        <div class="ips-bg" style="background: url('__IMAGES__/topic_laptop/ips-img-1.png');background-size:100% auto">
-            <p>超清IPS屏，专业级色彩表现，画面显示生动细腻。 </br>办公、学习、创作、游戏、观影，长时间专注眼部依然舒适</p>
-        </div>
-        <div class="ips-imgs">
-            <img src="__IMAGES__/topic_laptop/ips-img-2.png" alt="">
-            <img src="__IMAGES__/topic_laptop/ips-img-3.png" alt="">
-            <img src="__IMAGES__/topic_laptop/ips-img-4.png" alt="">
-            <img src="__IMAGES__/topic_laptop/ips-img-5.png" alt="">
-        </div>
-    </div>
-    <!-- 色彩RGB -->
-    <div class="rgb">
-        <div class="rgb-t">100%sRGB超广色域</br>斑斓色彩跃然眼前</div>
-        <div class="rgb-bg" style="background: url('__IMAGES__/topic_laptop/rgb-img-1.png');background-size:100% auto">
-            <p class="rgb-p">色彩丰富真实、细节生动逼真，还原万物本色， </br>画面更出彩。每台电脑出厂前专业调校，算法硬件助力，色彩精准度高。</p>
-        </div>
-        <div class="rgb-imgs">
-            <img src="__IMAGES__/topic_laptop/rgb-img-2.png" alt="">
-            <img src="__IMAGES__/topic_laptop/rgb-img-3.png" alt="">
-            <img src="__IMAGES__/topic_laptop/rgb-img-4.png" alt="">
-        </div>
-    </div>
-    <!-- 对比图 -->
-    <div class="bly">
-        <div class="bly-texts">
-            <div class="bly-t">舒适不累眼</div>
-            <div class="bly-p">有效防眩光，显示清晰不刺眼，强光下依然表现出色</br>搭配类自然光护眼科技，呵护双眼，久看不累</div>
-        </div>
-        <div class="beforeafter ba-slider">
-
-            <img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/70f84be28ec96250a7c44ae51ffecdf0.webp"
-                loading="lazy">
-            <div class="resize">
-
-                <img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/09d2f45344a3f28db4e5f767888a845d.webp"
-                    loading="lazy">
-            </div>
-            <span class="handle"></span>
-        </div>
-    </div>
-    <!-- 轮播图 -->
-    <div class="qb">
-        <div class="qb-text">
-            <div class="qb-t">轻薄有型 便捷随行</div>
-            <div class="qb-p">外观优雅简约 ，黄金比例机身，棱角分明，</br>
-                诠释利落风格。表面精密喷砂，复刻Mac级出众质感</div>
-            <div class="swiper-container auto-swiper-container">
-                <div class="swiper-wrapper">
-                    <a class="swiper-slide auto-swiper-slide">
-                        <img src="__IMAGES__/topic_laptop/qb-img-1.png" alt="" loading="lazy">
-                    </a>
-
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- wift -->
-    <div class="wifi" style="background: url('__IMAGES__/topic_laptop/wifi-img-1.png');background-size:100% auto">
-        <div class="wifi-texts">
-            <div class="wifi-t">网速时刻在线 跃级流畅 </br>千兆有线网+WiFi6</div>
-            <div class="wifi-p">折叠式千兆有线网口和Wi-Fi6无线超能网卡，速度快、抗干扰、低延时，满</br>足多种学习和办公场合需要，带来前所未有的畅连体验，学习,办公流畅不</br>卡顿,拒绝掉线尴尬
-            </div>
-        </div>
-        <div class="wifi-img">
-
-            <img src="__IMAGES__/topic_laptop/wifi-img-2.png" alt="" loading="lazy">
-            <img src="__IMAGES__/topic_laptop/wifi-img-3.png" alt="" loading="lazy">
-
-        </div>
-    </div>
-    <!-- 长久续航 -->
-    <div class="endurance"
-        style="background: url('__IMAGES__/topic_laptop/endurance-img-3.png');background-size:100% auto">
-
-        <div class="endurance-texts">
-            <div class="endurance-t">
-                <span>11.4h</span>
-                <span>长久续航 电量满满</span>
-            </div>
-            <div class="endurance-p">配备57.5Wh大电池，续航长达11.4h，搭配100W闪充充电器，充一次，用一天</div>
-        </div>
-        <div class="endurance-img">
-
-            <img src="__IMAGES__/topic_laptop/endurance-img-1.png" alt="" loading="lazy">
-            <img src="__IMAGES__/topic_laptop/endurance-img-2.png" alt="" loading="lazy">
-        </div>
-        <div class="endurance-footer-p">*此数据为ORICO实验室测定所得，请以实际使用为准；</div>
-    </div>
-
-    <!-- 接口大满贯 -->
-    <div class="zoom-t">接口大满贯</div>
-    <div class="zoom-container" id="zoomContainer">
-        <div class="img-wrapper">
-            <p class="zoom-p">标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定</p>
-            <img src="__IMAGES__/topic_laptop/zoom-img-1.png" alt="接口图" class="bg-img" id="bgImg" loading="lazy">
-        </div>
-        <!-- 左边 -->
-        <div class="annotation anno-delay-1" style="top:60%; left: 37.5%;">
-            <span style="text-align: center; font-size: 0.18rem;">肯辛通锁孔</span>
-        </div>
-        <div class="annotation anno-delay-1 anno-up" style="top: 31.5%; left: 32%;"><span
-                style="text-align: center; font-size: 0.18rem;">千兆网口</span>
-        </div>
-        <div class="annotation anno-delay-1" style="top: 68%; left: 26%;"><span
-                style="text-align: center; font-size: 0.16rem;">USB-A<br />(5Gbps)</span></div>
-        <div class="annotation anno-delay-1 anno-up1" style="top:35.5%; left:18%;"><span
-                style="text-align: center; font-size: 0.18rem;">USB-A<br />(480Mbps)</span></div>
-        <div class="annotation anno-delay-1" style="top: 73%; left: 14.5%;"><span
-                style="text-align: center; font-size: 0.18rem;">3.5mm<br />耳麦合一</span></div>
-        <div class="annotation anno-delay-1 anno-up" style="top: 43%; left: 9%;"><span
-                style="text-align: center; font-size: 0.18rem;">TF口3.0</span></div>
-        <!-- 右边 -->
-        <div class="annotation anno-delay-1" style="top: 64%; left: 58%;"><span
-                style="text-align: center; font-size: 0.18rem;">全功能<br />USB-C</span></div>
-        <div class="annotation anno-up anno-delay-1" style="top: 34%; left: 65%;"><span
-                style="text-align: center; font-size: 0.18rem;">HDMI</span></div>
-        <div class="annotation anno-delay-1" style="top: 70.5%; left: 70.5%;"><span
-                style="text-align: center; font-size: 0.18rem;">USB-A<br />(5Gbps)</span></div>
-        <div class="annotation anno-up1 anno-delay-1" style="top:38.5%; left: 77%;"><span
-                style="text-align: center; font-size: 0.18rem;">USB-C<br />(5Gbps)</span></div>
-    </div>
-    <!-- 滑块 -->
-    <div class="swiper swiper-container-1" style="width: 6.82rem;margin: 0 auto;">
-        <div class="swiper-wrapper">
-            <!-- 滑块1 -->
-            <div class="swiper-slide" style="width: 4.5rem;">
-                <img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="" style="width: 4.5rem;">
-                <div>
-                    <div class="swiper-slide-t">高效 时刻在线</div>
-                    <div class="swiper-slide-p">长续航, 随时随地自在办公
-                    </div>
-                </div>
-            </div>
-            <!-- 滑块2 -->
-            <div class="swiper-slide" style="width: 4.5rem;">
-                <img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="图片2" style="width: 4.5rem;">
-                <div>
-                    <div class="swiper-slide-t">高效 时刻在线</div>
-                    <div class="swiper-slide-p">长续航, 随时随地自在办公
-                    </div>
-                </div>
-            </div>
-            <!-- 滑块3 -->
-            <div class="swiper-slide" style="width: 4.5rem;">
-                <img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="" style="width: 4.5rem;">
-                <div>
-                    <div class="swiper-slide-t">高效 时刻在线</div>
-                    <div class="swiper-slide-p">长续航, 随时随地自在办公
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- tabs -->
-    <div class="tabs-container">
-        <div class="tab-t active" data-index="0">清晰通话 尽兴畅聊</div>
-        <div class="tab-t" data-index="1">更安全 更私密</div>
-        <div class="tab-content">
-
-            <div class="tab-panel active">
-                <div class="tab-panel-img">
-                    <img src="__IMAGES__/topic_laptop/tabs-img-1.png" alt="" class="content-image" loading="lazy">
-                </div>
-            </div>
-
-            <div class="tab-panel">
-                <video
-                    src="https://ow.static.f2b211.com/storage/videos/banner/20251215/f3223da3e06367fd417dd983a5382912_dmlkZW9fcWluaXU=.mp4"
-                    id="securityVideo" class="content-video" muted loop playsinline autoplay
-                    style="width: 100%;margin:0 auto;">
-                    您的浏览器不支持HTML5视频播放，请升级浏览器
-                </video>
-            </div>
-        </div>
-        <div class="tabs-header-box">
-            <div class="tabs-header">
-                <div class="tab-item active" data-index="0">清晰通话</div>
-                <div class="tab-item" data-index="1">安护密收</div>
-                <div class="tab-indicator"></div>
-            </div>
-        </div>
-
-        <div class="tabs-p active" data-index="0">配置1080p前置高清摄像头, 矩阵式降噪麦克风, 噪音环境亦享受清晰通话</div>
-        <div class="tabs-p" data-index="1">物理防窥拨片，防止软件恶意开启摄像头</div>
-    </div>
-    <!-- windows11-->
-    <div class="window">
-        <img src="__IMAGES__/topic_laptop/windows-1.png" alt="">
-    </div>
-    <!-- 六宫格 -->
-    <div class="footer-imgs">
-        <img src="__IMAGES__/topic_laptop/footer-img-1.png">
-        <img src="__IMAGES__/topic_laptop/footer-img-2.png">
-        <img src="__IMAGES__/topic_laptop/footer-img-3.png">
-        <img src="__IMAGES__/topic_laptop/footer-img-4.png">
-        <img src="__IMAGES__/topic_laptop/footer-img-5.png">
-        <img src="__IMAGES__/topic_laptop/footer-img-6.png">
-    </div>
-    <!-- 底部文字 -->
-    <div class="footer-texts">
-
-    </div>
+    {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"}
+<!-- 底部文字 -->
+<div class="footer-texts">
+    {$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}
+</div>
+{/notempty}
 {/block}
 {block name="script"}
 <script src="__JS__/before-after.min.js" type="text/javascript"></script>
@@ -1127,4 +1142,4 @@
         window.dispatchEvent(new Event('scroll'));
     });
 </script>
-{/block}
+{/block}