尺寸调整

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

@@ -1,5 +1,8 @@
 {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">
 <link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.css">
@@ -9,6 +12,7 @@
 <link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.css">
 <link rel="stylesheet" href="__CSS__/topic_power_prodline/product_card.css">
 <link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
+
 {/block}
 {block name="header"}
 <!-- 重置header头为空 -->
@@ -92,9 +96,25 @@
         {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>
+            <video src="{$tc_first_section_lr.video}" class="right-content right-video" muted loop playsinline>
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
+            <button class="video-play-btn">
+                <span class="play-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <path d="M9 7L16 12L9 17V7Z" fill="white" />
+                    </svg>
+                </span>
+                <!-- 暂停图标（默认隐藏） -->
+                <span class="pause-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <rect x="8" y="7" width="3" height="10" fill="white" />
+                        <rect x="13" y="7" width="3" height="10" fill="white" />
+                    </svg>
+                </span>
+            </button>
         </div>
         {/notempty}
     </div>
@@ -142,7 +162,7 @@
     <div class="product-container">
         {assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
         {notempty name="hc_first_section_lf"}
-        <a class="product-left" href="{$tc_first_section_lf.link}">
+        <a class="product-left" href="{$hc_first_section_lf.link}">
             <img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同 -->
             <div class="product-img-hover product-img-1">
@@ -154,9 +174,25 @@
         {notempty name="hc_first_section_lr"}
         <div class="product-right">
             <img src="{$hc_first_section_lr.image}" alt="{$hc_first_section_lr.title}" class="right-content right-img">
-            <video src="{$hc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
+            <video src="{$hc_first_section_lr.video}" class="right-content right-video" muted loop playsinline >
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
+            <button class="video-play-btn">
+                <span class="play-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <path d="M9 7L16 12L9 17V7Z" fill="white" />
+                    </svg>
+                </span>
+                <!-- 暂停图标（默认隐藏） -->
+                <span class="pause-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <rect x="8" y="7" width="3" height="10" fill="white" />
+                        <rect x="13" y="7" width="3" height="10" fill="white" />
+                    </svg>
+                </span>
+            </button>
         </div>
         {/notempty}
     </div>
@@ -165,7 +201,7 @@
     <div class="product-card-box">
         <div class="product-card-container">
             {volist name="hc_second_section" id="hcs"}
-            <a class="product-card-wrap" href="{$tss.link}">
+            <a class="product-card-wrap" href="{$hcs.link}">
                 <div class="product-card" href="#">
                     <div class="product-card-img">
                         <img src="{$hcs.image}" alt="{$hcs.short_title}">
@@ -203,7 +239,7 @@
     <div class="product-container">
         {assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
         {notempty name="dc_first_section_lf"}
-        <a class="product-left" href="{$tc_first_section_lf.link}">
+        <a class="product-left" href="{$dc_first_section_lf.link}">
             <img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
             <!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
             <div class="product-img-hover product-img-2" >
@@ -219,9 +255,25 @@
                 <!--muted loop playsinline controls-->
             <video
                 src="{$dc_first_section_lr.video}"
-                class="right-content right-video"  style="display: none;">
+                class="right-content right-video"  muted loop playsinline >
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
+            <button class="video-play-btn">
+                <span class="play-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <path d="M9 7L16 12L9 17V7Z" fill="white" />
+                    </svg>
+                </span>
+                <!-- 暂停图标（默认隐藏） -->
+                <span class="pause-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <rect x="8" y="7" width="3" height="10" fill="white" />
+                        <rect x="13" y="7" width="3" height="10" fill="white" />
+                    </svg>
+                </span>
+            </button>
         </div>
         {/notempty}
     </div>
@@ -281,9 +333,25 @@
         {notempty name="wc_first_section_lr"}
         <div class="product-right">
             <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>
+            <video src="{$wc_first_section_lr.video}" class="right-content right-video" muted loop playsinline>
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
+            <button class="video-play-btn">
+                <span class="play-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <path d="M9 7L16 12L9 17V7Z" fill="white" />
+                    </svg>
+                </span>
+                <!-- 暂停图标（默认隐藏） -->
+                <span class="pause-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <rect x="8" y="7" width="3" height="10" fill="white" />
+                        <rect x="13" y="7" width="3" height="10" fill="white" />
+                    </svg>
+                </span>
+            </button>
         </div>
         {/notempty}
     </div>
@@ -326,9 +394,26 @@
         {notempty name="cts_lr"}
         <div class="product-right">
             <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>
+            <video src="{$cts_lr.video}" class="right-content right-video" muted loop playsinline>
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
+              <!-- 播放图标 -->
+              <button class="video-play-btn">
+                <span class="play-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <path d="M9 7L16 12L9 17V7Z" fill="white" />
+                    </svg>
+                </span>
+                <!-- 暂停图标（默认隐藏） -->
+                <span class="pause-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
+                        <rect x="8" y="7" width="3" height="10" fill="white" />
+                        <rect x="13" y="7" width="3" height="10" fill="white" />
+                    </svg>
+                </span>
+            </button>
         </div>
         {/notempty}
     </div>
@@ -380,8 +465,7 @@
         maskContent.appendChild(scrollContent);
     }
 
-
-        function createCloseBtn() {
+    function createCloseBtn() {
         if (closeBtnHtml) {
             closeBtnHtml.remove();
         }
@@ -484,71 +568,136 @@
     	},
     	{ passive: false }
     ); // passive: false 必须，否则 preventDefault 无效
+
+    document.addEventListener('DOMContentLoaded', () => {
+    // 初始化所有视频容器
+    function initVideoContainers() {
+        const productRights = document.querySelectorAll('.product-right');
         
-    const allVideos = document.querySelectorAll('.right-video');
-    let scrollTimer = null; // 防抖定时器
-    // 停止所有视频播放
-    function stopAllVideos() {
-     	allVideos.forEach((video) => {
-      		video.pause();
-      		video.style.display = 'none';
-      		// 显示对应图片
-      		const img = video.parentElement.querySelector('.right-img');
-      		if (img) img.style.display = 'block';
-     	});
-    }
-    // 处理视频/图片切换的核心逻辑（抽离为独立函数）
-// 处理视频/图片切换的核心逻辑（抽离为独立函数）
-function handleVideoActive() {
-  const productRights = document.querySelectorAll('.product-right');
-  let activeVideo = null;
-  // 找出当前在视口中的视频容器
-    productRights.forEach((rightContainer) => {
-        const img = rightContainer.querySelector('.right-img');
-        const video = rightContainer.querySelector('.right-video');
-        const videoSrc = video.src.trim();
-        if (!img || !video || !videoSrc) return;
+        productRights.forEach((container, index) => {
+            const video = container.querySelector('.right-video');
+            const btn = container.querySelector('.video-play-btn');
+            const img = container.querySelector('.right-img');
+            if (!video || !btn || !img) return;
+            const videoSrc = video.src.trim()
+            // 修复：正确检测有效视频地址
+            // 排除空字符串、null、undefined
+            const hasValidVideo = !!videoSrc && videoSrc.trim() !== '' && videoSrc !== 'undefined' && videoSrc !== 'null';
 
-        const rect = rightContainer.getBoundingClientRect();
-        // 视口判断：容器进入视口50%以上视为活跃
-        const isInView =
-        rect.top < window.innerHeight * 0.7 &&
-        rect.bottom > window.innerHeight * 0.3;
-
-        if (isInView) {
-        activeVideo = video;
-        }
-    });
-
-  // 处理活跃视频
-  if (activeVideo) {
-        stopAllVideos(); // 先停止其他视频
-        const img = activeVideo.parentElement.querySelector('.right-img');
-        img.style.display = 'none';
-        activeVideo.style.display = 'block';
-
-        // 自动播放（兼容原生控制栏，用户手动暂停后不会强制播放）
-        if (activeVideo.paused) {
-            activeVideo.play().catch((err) => {
-                console.log('视频播放失败（浏览器限制）：', err);
-                // 播放失败时回退到图片
-                activeVideo.style.display = 'none';
+            // 初始化状态：无视频则保持图片显示，永不切换
+            if (!hasValidVideo) {
                 img.style.display = 'block';
+                video.style.display = 'none';
+                btn.style.display = 'none';
+                // 绑定空方法，防止调用报错
+                video.switchMedia = function() {};
+                console.log(`容器${index}：无有效视频(src="${videoSrc}")，保持图片显示`);
+                return;
+            }
+
+            // 有有效视频的情况
+            console.log(`容器${index}：有有效视频(src="${videoSrc}")，初始化播放逻辑`);
+            
+            // 初始状态
+            video.style.display = 'none';
+            video.pause();
+            img.style.display = 'block';
+            btn.style.display = 'none';
+            btn.style.opacity = '0';
+
+            // 同步状态函数
+            function syncMediaState() {
+                if (img.style.display === 'block') {
+                    btn.style.display = 'none';
+                    btn.style.opacity = '0';
+                } else {
+                    btn.style.display = 'block';
+                    btn.style.opacity = '1';
+                    btn.classList.toggle('paused', !video.paused && !video.ended);
+                }
+            }
+
+            // 按钮点击事件
+            btn.addEventListener('click', () => {
+                if (video.paused) {
+                    video.play().catch(() => syncMediaState());
+                } else {
+                    video.pause();
+                }
+                syncMediaState();
             });
-         }
-    } else {
-        stopAllVideos(); // 无活跃视频时停止所有播放
+
+            // 视频事件监听
+            ['play', 'pause', 'ended', 'playing', 'waiting'].forEach(event => {
+                video.addEventListener(event, syncMediaState);
+            });
+
+            // 滚动切换函数
+            video.switchMedia = function(showVideo) {
+                // 只处理有有效视频的情况
+                if (showVideo) {
+                    img.style.display = 'none';
+                    video.style.display = 'block';
+                    video.play().catch(() => {
+                        console.log(`容器${index}：自动播放失败，需要用户交互`);
+                        syncMediaState();
+                    });
+                } else {
+                    video.pause();
+                    img.style.display = 'block';
+                    video.style.display = 'none';
+                }
+                syncMediaState();
+            };
+
+            // 初始同步
+            syncMediaState();
+        });
     }
-}
-  // 滚动事件：添加防抖（移动端推荐100-200ms延迟）
-window.addEventListener('scroll', function () {
-  // 清除上一次的定时器
-  clearTimeout(scrollTimer);
-  // 滚动停止后150ms再执行核心逻辑
-  scrollTimer = setTimeout(handleVideoActive, 150);
-});
+
+    // 滚动监听 - 优化版
+    function setupScrollWatcher() {
+        let ticking = false;
+        
+        function updateVideoVisibility() {
+            const productRights = document.querySelectorAll('.product-right');
+            
+            productRights.forEach(container => {
+                const video = container.querySelector('.right-video');
+                if (!video || !video.switchMedia) return;
+
+                // 检查是否在视口中
+                const rect = container.getBoundingClientRect();
+                const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+                const isInView = rect.top < viewHeight * 0.7 && rect.bottom > viewHeight * 0.3;
+                
+                // 只对有有效视频的元素调用switchMedia
+                video.switchMedia(isInView);
+            });
+            
+            ticking = false;
+        }
+        
+        // 使用requestAnimationFrame优化性能
+        window.addEventListener('scroll', () => {
+            if (!ticking) {
+                requestAnimationFrame(updateVideoVisibility);
+                ticking = true;
+            }
+        });
+    }
+
+    // 初始化
+    initVideoContainers();
+    setupScrollWatcher();
     
-   
+    // 初始检查一次
+    setTimeout(() => {
+        const event = new Event('scroll');
+        window.dispatchEvent(event);
+    }, 300);
+});
+
     window.onload = function () {
     	if (typeof Swiper === 'undefined') {
     		console.error('Swiper加载失败，请刷新页面重试');

app/index/view/pc/topic_power_prodline/index.html

@@ -142,7 +142,7 @@
     <div class="product-container">
         {assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
         {notempty name="hc_first_section_lf"}
-        <a class="product-left" href="{$tc_first_section_lf.link}">
+        <a class="product-left" href="{$hc_first_section_lf.link}">
             <img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同 -->
             <div class="product-img-hover product-img-1">
@@ -165,7 +165,7 @@
     <div class="product-card-box">
         <div class="product-card-container">
             {volist name="hc_second_section" id="hcs"}
-            <a class="product-card-wrap" href="{$tss.link}">
+            <a class="product-card-wrap" href="{$hcs.link}">
                 <div class="product-card" href="#">
                     <div class="product-card-img">
                         <img src="{$hcs.image}" alt="{$hcs.short_title}">
@@ -203,7 +203,7 @@
     <div class="product-container">
         {assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
         {notempty name="dc_first_section_lf"}
-        <a class="product-left" href="{$tc_first_section_lf.link}">
+        <a class="product-left" href="{$dc_first_section_lf.link}">
             <img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
             <!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
             <div class="product-img-hover product-img-2" >