refactor: 专题 - 电力品线mobile端

app/index/view/mobile/topic_power_prodline/index.html

@@ -1,4 +1,4 @@
-{extend name="public/nas_base" /}
+{extend name="public/base" /}
 {block name="style"}
 <link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css">
 <link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper.css">
@@ -73,6 +73,7 @@
     </div>
     <div class="product-container" >
         {assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
+        {notempty name="tc_first_section_lf"}
         <a class="product-left" href="{$tc_first_section_lf.link}">
             <img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同 -->
@@ -80,13 +81,16 @@
                 <img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
             </div>
         </a>
+        {/notempty}
         {assign name="tc_first_section_lr" value=":array_shift($data.travel_charger)" /}
+        {notempty name="tc_first_section_lr"}
         <div class="product-right">
             <img src="{$tc_first_section_lr.image}" alt="{$tc_first_section_lr.title}" class="right-content right-img">
             <video src="{$tc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
         </div>
+        {/notempty}
     </div>
     {assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
     {notempty name="tc_second_section"}
@@ -208,150 +212,136 @@
         </div>
         {/notempty}
     </div>
+    {assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
+    {notempty name="dc_second_section"}
     <div class="product-card-box">
         <div class="product-card-container2">
-            <a class="product-card2" href="#">
+            {volist name="dc_second_section" id="dcs"}
+            <a class="product-card2" href="{$dcs.link}">
                 <div class="product-text2">
                     <!-- 新增内部容器，确保所有内容左对齐一致性 -->
                     <div class="product-text-content2">
-                        <div class="product-card-title2">安全 精准掌控 超长标题测试示例内容</div> <!-- 测试超出一行省略 -->
-                        <div class="product-card-desc2">12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸</div> <!-- 测试超出2行省略 -->
+                        <div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
+                        <div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
                         <div class="product-card-link2">
-                            <img src="./img/ljgd.png" alt="了解更多">
+                            <img src="__IMAGES__/ljgd.png" alt="了解更多">
                         </div>
                     </div>
                 </div>
                 <div class="product-card-img2">
-                    <img src="./img/zm-2.png" alt="10口合1双向取电插排">
-                </div>
-            </a>
-            <a class="product-card2" href="#">
-                <div class="product-text2">
-                    <!-- 新增内部容器，确保所有内容左对齐一致性 -->
-                    <div class="product-text-content2">
-                        <div class="product-card-title2">安全 精准掌控 超长标题测试示例内容</div> <!-- 测试超出一行省略 -->
-                        <div class="product-card-desc2">12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸</div> <!-- 测试超出2行省略 -->
-                        <div class="product-card-link2">
-                            <img src="./img/ljgd.png" alt="了解更多">
-                        </div>
-                    </div>
-                </div>
-                <div class="product-card-img2">
-                    <img src="./img/zm-2.png" alt="10口合1双向取电插排">
+                    <img src="{$dcs.image}" alt="{$dcs.title}">
                 </div>
             </a>
+            {/volist}
         </div>
     </div>
-    <a href="#" class="more">
+    {/notempty}
+    {assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
+    {notempty name="dc_three_section"}
+    <a href="{$dc_three_section.link}" class="more">
         <div class="more-img">
             查看更多
         </div>
     </a>
+    {/notempty}
 </div>
-
 <!-- 墙插 -->
+{notempty name="data.wall_charger"}
 <div class="product-box">
     <div class="product-title">
         <h2 class="product-title-h2">墙插</h2>
         <p class="product-title-p">1转多</p>
     </div>
     <div class="product-container">
-        <a class="product-left" href="{$tc_first_section_lf.link}">
-            <img src="./img/jjbj.png" alt="65W快充插座" class="product-img">
+        {assign name="wc_first_section_lf" value=":array_shift($data.wall_charger)" /}
+        {notempty name="wc_first_section_lf"}
+        <a class="product-left" href="{$wc_first_section_lf.link}">
+            <img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同 -->
             <div class="product-img-hover product-img-1">
-                <img src="./img/jj-4.png" alt="产品细节图">
+                <img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
             </div>
         </a>
+        {/notempty}
+        {assign name="wc_first_section_lr" value=":array_shift($data.wall_charger)" /}
+        {notempty name="wc_first_section_lr"}
         <div class="product-right">
-            <img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
-                alt="使用场景" class="right-content right-img">
-            <video
-                src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
-                class="right-content right-video" muted loop playsinline controls>
+            <img src="{$wc_first_section_lr.image}" alt="{$wc_first_section_lr.title}" class="right-content right-img">
+            <video src="{$wc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
         </div>
+        {/notempty}
     </div>
-    <a href="#" class="more">
+    {assign name="wc_more_section" value=":array_shift($data.wall_charger)" /}
+    {notempty name="wc_more_section"}
+    <a href="{$wc_more_section.link}" class="more">
         <div class="more-img">
             查看更多
         </div>
     </a>
-
+    {/notempty}
 </div>
+{/notempty}
+{notempty name="data.converter"}
 <!-- 转换器 -->
 <div class="product-box">
     <div class="product-title">
         <h2 class="product-title-h2">转换器</h2>
         <p class="product-title-p">随你看世界</p>
     </div>
+    {assign name="ct_more_section" value=":array_pop($data.converter)" /}
+    {assign name="ct_chunk_section" value=":array_chunk($data.converter, 2)" /}
+    {assign name="ct_chunk_section_len" value=":count($ct_chunk_section)" /}
+    {volist name="ct_chunk_section" id="cts" key="k"}
     <div class="product-container">
-        <a class="product-left" href="{$tc_first_section_lf.link}">
-            <img src="./img/jjbj.png" alt="65W快充插座" class="product-img">
+        {assign name="cts_lf" value=":array_shift($cts)" /}
+        {notempty name="cts_lf"}
+        <a class="product-left" href="{$cts_lf.link}">
+            <img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同 -->
             <div class="product-img-hover product-img-1">
-                <img src="./img/jj-4.png" alt="产品细节图">
+                <img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
             </div>
         </a>
+        {/notempty}
+        {assign name="cts_lr" value=":array_shift($cts)" /}
+        {notempty name="cts_lr"}
         <div class="product-right">
-            <img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
-                alt="使用场景" class="right-content right-img">
-            <video
-                src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
-                class="right-content right-video" muted loop playsinline controls>
+            <img src="{$cts_lr.image}" alt="{$cts_lr.title}" class="right-content right-img">
+            <video src="{$cts_lr.video}" class="right-content right-video" muted loop playsinline controls>
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
         </div>
+        {/notempty}
     </div>
+    {neq name="k" value="$ct_chunk_section_len"}
     <div class="line"></div>
-    <div class="product-container">
-        <a class="product-left" href="{$tc_first_section_lf.link}">
-            <img src="./img/jjbj.png" alt="65W快充插座" class="product-img">
-            <!-- 公共类+定位类：尺寸统一，定位不同 -->
-            <div class="product-img-hover product-img-1">
-                <img src="./img/jj-4.png" alt="产品细节图">
-            </div>
-        </a>
-        <div class="product-right">
-            <img src="https://www.orico.com.cn/storage/images/product/20250512/f54b4ac2ac53e6df8bf411e0d2d2947d.jpg"
-                alt="使用场景" class="right-content right-img">
-            <video
-                src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
-                class="right-content right-video" muted loop playsinline controls>
-                您的浏览器不支持HTML5视频播放，请升级浏览器
-            </video>
-        </div>
-    </div>
-    <a href="#" class="more">
+    {/neq}
+    {/volist}
+    {notempty name="ct_more_section"}
+    <a href="{$ct_more_section.link}" class="more">
         <div class="more-img">
             查看更多
         </div>
     </a>
+    {/notempty}
 </div>
+{/notempty}
+{notempty name="data.footer_info"}
 <!-- 底部 -->
 <div class="footer">
     <div class="footer-img">
-        <img src="./img/footer.png" alt="">
+        <img src="{$data.footer_info.0.image}" alt="">
     </div>
-
 </div>
-
-   <!-- 蒙版 -->
-     <div class="mask" id="mask">
-    
-        <div class="mask-content" >
-            <span class="close-btn">&times;</span>
-          
-        </div>
-
-    </div> 
-
-
-
-{/block}
-{block name="footer"}
-<!-- 重置footer头为空 -->
+{/notempty}
+<!-- 蒙版 -->
+<div class="mask" id="mask">
+    <div class="mask-content" >
+        <span class="close-btn">&times;</span>
+    </div>
+</div> 
 {/block}
 {block name="script"}
 <script type="text/javascript">
@@ -368,16 +358,16 @@
             closeBtnHtml.remove();
         }
 
-            // 创建关闭按钮元素
-            closeBtnHtml = document.createElement('span');
-            closeBtnHtml.className = 'close-btn';
-            closeBtnHtml.innerHTML = '&times;'; // 关闭符号（×）
+        // 创建关闭按钮元素
+        closeBtnHtml = document.createElement('span');
+        closeBtnHtml.className = 'close-btn';
+        closeBtnHtml.innerHTML = '&times;'; // 关闭符号（×）
 
-            // 绑定关闭事件
-            closeBtnHtml.addEventListener('click', hideMask);
+        // 绑定关闭事件
+        closeBtnHtml.addEventListener('click', hideMask);
 
-            // 添加到maskScrollContent（作为第一个子元素）
-            maskContent.prepend(closeBtnHtml);
+        // 添加到maskScrollContent（作为第一个子元素）
+        maskContent.prepend(closeBtnHtml);
     }
 
     function showMask(contentHtml) {
@@ -453,9 +443,6 @@
     	{ passive: false }
     ); // passive: false 必须，否则 preventDefault 无效
         
-    
-    
-    
     const allVideos = document.querySelectorAll('.right-video');
     // 停止所有视频播放
     function stopAllVideos() {