{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">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product.css">
<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头为空 -->
{/block}
{block name="main"}
<a class="header" href="/">
    <div class="header-img">
        <img src="__IMAGES__/logo.png" alt="">
    </div>
</a>
<!-- 轮播核心容器 -->
<div class="swiper-container auto-swiper-container" >
    {notempty name="data.focus_image"}
    <div class="swiper-wrapper">
        {volist name="data.focus_image" id="fo"}
        <a class="swiper-slide auto-swiper-slide" href="{$fo.link}">
            <img src="{$fo.image}" alt="{$fo.title}"  />
        </a>
        {/volist}
    </div>
    <div class="swiper-pagination"></div>
    {/notempty}
</div>
<!-- 分类 -->
{notempty name="data.category"}
<div class="nav-box">
    {volist name="data.category" id="ca"}
    <a class="nav-item" href="{$ca.link}">
        <img src="{$ca.image}" alt="{$ca.title}">
        <p {:style(['color'=>$ca.title_txt_color])}>{$ca.title}</p>
    </a>
    {/volist}
</div>
{/notempty}
<!-- 500万 -->
{notempty name="data.why_choose"}
<div class="advantage-section">
    {assign name="why_choose_title" value=":array_shift($data.why_choose)" /}
    <h2 class="advantage-section__title">{$why_choose_title.title|default=''}</h2>
    <div class="advantage-section__list">
        {volist name="data.why_choose" id="ch"}
        
        <div class="advantage-card-wrap">
            <div class="advantage-card" data-target="design">
                <img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
                <div class="advantage-card__content">
                    <!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
                    <div class="advantage-card__heading-wrap">
                        <div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
                        <img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
                    </div>
                    <div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
                    <div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
                </div>
            </div>
         </div>
        {/volist}
    </div>
</div>
{/notempty}
<!-- 产品差旅充 -->
{notempty name="data.travel_charger"}
<div class="product-box">
    {assign name="tc_title" value=":array_shift($data.travel_charger)" /}
    <div class="product-title">
        <h2 class="product-title-h2">{$tc_title.title|default=''}</h2>
        <p class="product-title-p">{$tc_title.short_title|default=''}</p>
    </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">
            <!-- 公共类+定位类：尺寸统一，定位不同 -->
            <div class="product-img-hover product-img-1">
                <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>
                您的浏览器不支持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>
    {assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
    {notempty name="tc_second_section"}
    <div class="product-card-box">
        <div class="product-card-container">
            {volist name="tc_second_section" id="tss"}
            <a class="product-card-wrap" href="{$tss.link}">
                <div class="product-card" >
                    <div class="product-card-img">
                        <img src="{$tss.image}" alt="{$tss.title}">
                    </div>
                    <div class="product-card-text">
                        <div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
                        <div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
                    </div>
                    <div class="product-card-link">
                        <img src="__IMAGES__/ljgd.png" alt="查看更多">
                    </div>
                </div>
            </a>
            {/volist}
        </div>
    </div>
    {assign name="tc_three_section" value=":array_shift($data.travel_charger)" /}
    {notempty name="tc_three_section"}
    <a href="{$tc_three_section.link}" class="more">
        <div class="more-img">
            查看更多
        </div>
    </a>
    {/notempty}
    {/notempty}
</div>
{/notempty}
<!-- 产品 家居充-->
{notempty name="data.home_charger"}
<div class="product-box">
    {assign name="hc_title" value=":array_shift($data.home_charger)" /}
    <div class="product-title">
        <h2 class="product-title-h2">{$hc_title.title|default=''}</h2>
        <p class="product-title-p">{$hc_title.short_title|default=''}</p>
    </div>
    <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="{$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">
                <img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
            </div>
        </a>
        {/notempty}
        {assign name="hc_first_section_lr" value=":array_shift($data.home_charger)" /}
        {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 >
                您的浏览器不支持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>
    {assign name="hc_second_section" value=":array_splice($data.home_charger, 0, 4)" /}
    {notempty name="hc_second_section"}
    <div class="product-card-box">
        <div class="product-card-container">
            {volist name="hc_second_section" id="hcs"}
            <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}">
                    </div>
                    <div class="product-card-text">
                        <div class="product-card-title">{$hcs.title}</div>
                        <div class="product-card-desc">{$hcs.short_title}</div>
                    </div>
                    <div class="product-card-link">
                        <img src="__IMAGES__/ljgd.png" alt="查看更多">
                    </div>
                </div>
            </a>
            {/volist}
        </div>
    </div>
    {/notempty}
    {assign name="hc_three_section" value=":array_shift($data.home_charger)" /}
    {notempty name="hc_three_section"}
    <a href="{$hc_three_section.link}" class="more">
        <div class="more-img">
            查看更多
        </div>
    </a>
    {/notempty}
</div>
{/notempty}
<!-- 产品 桌面充（悬浮图上右超出）底部列表样式不一样(左文右图) -->
<div class="product-box">
    {assign name="dc_title" value=":array_shift($data.desktop_charger)" /}
    <div class="product-title">
        <h2 class="product-title-h2">{$dc_title.title|default=''}</h2>
        <p class="product-title-p">{$dc_title.short_title|default=''}</p>
    </div>
    <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="{$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" >
                <img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
            </div>
        </a>
        {/notempty}
        {assign name="dc_first_section_lr" value=":array_shift($data.desktop_charger)" /}
        {notempty name="dc_first_section_lr"}
        <div class="product-right">
            <img src="{$dc_first_section_lr.image}"
                alt="使用场景" class="right-content right-img">
                <!--muted loop playsinline controls-->
            <video
                src="{$dc_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>
    {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">
            {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">{$dcs.title}</div> <!-- 测试超出一行省略 -->
                        <div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
                        <div class="product-card-link2">
                            <img src="__IMAGES__/ljgd.png" alt="了解更多">
                        </div>
                    </div>
                </div>
                <div class="product-card-img2">
                    <img src="{$dcs.image}" alt="{$dcs.title}">
                </div>
            </a>
            {/volist}
        </div>
    </div>
    {/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">
    {assign name="wc_title" value=":array_shift($data.wall_charger)" /}
    <div class="product-title">
        <h2 class="product-title-h2">{$wc_title.title|default=''}</h2>
        <p class="product-title-p">{$wc_title.short_title|default=''}</p>
    </div>
    <div class="product-container">
        {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="{$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="{$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>
                您的浏览器不支持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>
    {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">
    {assign name="ct_title" value=":array_shift($data.converter)" /}
    <div class="product-title">
        <h2 class="product-title-h2">{$ct_title.title|default=''}</h2>
        <p class="product-title-p">{$ct_title.short_title|default=''}</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">
        {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">
            <!-- 公共类+定位类：尺寸统一，定位不同  -->
            <!--style="display:flex;justify-content: center;"-->
            <div class="product-img-hover product-img-1" >
                <!-- style="width:70%"-->
                <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="{$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>
                您的浏览器不支持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>
    {neq name="k" value="$ct_chunk_section_len"}
    <div class="line"></div>
    {/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="{$data.footer_info.0.image}" alt="">
    </div>
</div>
{/notempty}
<!-- 蒙版 -->
<div class="mask" id="mask">
    <div class="mask-content" >
        <span class="close-btn">&times;</span>
        <div class="mask-scroll-content"></div>
    </div>
</div> 
{/block}
{block name="script"}
<script type="text/javascript">

    let swiper=null;
    const advantageItems = document.querySelectorAll('.advantage-card');
    let scrollTop = 0; // 保存页面滚动位置
    let closeBtnHtml = null; // 关闭按钮元素（全局变量，避免重复创建）
    const mask = document.getElementById('mask');
    const maskContent = document.querySelector('.mask-content');
    const maskScrollContent = document.querySelector('.mask-scroll-content'); // 滚动容器（关键！）
    const closeBtn = document.querySelector('.close-btn')
    // 初始化：确保 maskScrollContent 存在于 maskContent 中（避免被清空）
    if (!maskScrollContent) {
        // 如果页面没有 mask-scroll-content，动态创建（确保结构稳定）
        const scrollContent = document.createElement('div');
        scrollContent.className = 'mask-scroll-content';
        maskContent.appendChild(scrollContent);
    }

    function createCloseBtn() {
        if (closeBtnHtml) {
            closeBtnHtml.remove();
        }
    
        closeBtnHtml = document.createElement('span');
        closeBtnHtml.className = 'close-btn';
        closeBtnHtml.innerHTML = '&times;';
    
        closeBtnHtml.addEventListener('click', hideMask);
    
        // 挂载到 maskContent（而非 scrollContent），避免被滚动影响位置
        maskContent.prepend(closeBtnHtml);
    }

    function showMask(contentHtml) {
        // 保存页面滚动位置
        scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        
        // 关键：将内容填充到 scrollContent 中（而非直接替换 maskContent）
        maskScrollContent.innerHTML = contentHtml; 
        createCloseBtn();
        
        // 显示蒙版
        mask.style.display = 'flex';
        
        // 禁止滚动（复用你的逻辑）
        document.documentElement.classList.add('no-scroll');
        document.body.classList.add('no-scroll');
        document.body.style.top = `-${scrollTop}px`;
        
        // 额外：打开蒙版时就重置滚动位置（避免残留上次滚动状态）
        maskScrollContent.scrollTop = 0;
    }

    function hideMask() {
        // 关键步骤 1：先重置 scrollContent 的滚动位置（此时元素还未被销毁）
        maskScrollContent.scrollTop = 0;
        
        // 关键步骤 2：清空 scrollContent 的内容（而非 maskContent）
        maskScrollContent.innerHTML = ""; 
        
        // 隐藏蒙版
        mask.style.display = 'none';
        
        // 恢复滚动（复用你的逻辑）
        document.documentElement.classList.remove('no-scroll');
        document.body.classList.remove('no-scroll');
        document.body.style.top = '';
        
        // 还原页面滚动位置
        window.scrollTo(0, scrollTop);
        
        // 移除关闭按钮（可选，避免残留）
        if (closeBtnHtml) {
            closeBtnHtml.remove();
            closeBtnHtml = null;
        }
    }
        // 点击卡片显示详情
    advantageItems.forEach((item) => {
        item.addEventListener('click', (e) => {
            // 获取当前点击卡片内的.mack-conten-text元素
            const currentMackContent = e.currentTarget.querySelector('.mack-conten-text');
            if (currentMackContent) {
                // 关键修改：获取该元素的子内容（innerHTML 本身就是内部HTML，不含当前元素标签）
                // 若想更彻底，可遍历子节点拼接内容（兼容特殊场景）
                let contentHtml = '';
                Array.from(currentMackContent.childNodes).forEach(child => {
                    // 只保留元素节点和文本节点（过滤空节点）
                    if (child.nodeType === 1 || child.nodeType === 3) {
                        contentHtml += child.outerHTML || child.textContent;
                    }
                });
                // 显示蒙版并传入纯净的子内容
                showMask(contentHtml);
            } 
         });
    });
    // 关闭按钮事件
    closeBtn.addEventListener('click', hideMask);
    // 点击蒙版背景关闭（可选）
    mask.addEventListener('click', (e) => {
    	if (e.target === mask) hideMask();
    });

    // ESC 键关闭（可选）
    document.addEventListener('keydown', (e) => {
    	if (e.key === 'Escape' && mask.style.display === 'flex') hideMask();
    });
    
    // 关键：拦截蒙版的 touchmove 事件，阻止滚动穿透（移动端核心）
    mask.addEventListener(
    	'touchmove',
    	(e) => {
    		// 只有点击蒙版背景（不是内容区域）才阻止滚动
    		if (e.target === mask) {
    			e.preventDefault(); // 阻止默认触摸滚动行为
    			e.stopPropagation(); // 阻止事件冒泡
    		}
    	},
    	{ passive: false }
    ); // passive: false 必须，否则 preventDefault 无效
    document.addEventListener('DOMContentLoaded', () => {
            // 初始化所有视频容器
            function initVideoContainers() {
                const productRights = document.querySelectorAll('.product-right');
                // 支持的视频格式
                const supportedVideoFormats = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.flv', '.wmv'];
                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()
                    console.log(videoSrc,'=videoSrc=')
                    // 修复：正确检测有效视频地址
                    // 排除空字符串、null、undefined
                    const hasValidVideo = !!videoSrc && videoSrc.trim() !== '' && videoSrc !== 'undefined' && videoSrc !== 'null';

                    // 验证视频格式是否有效
                    const isValidFormat = supportedVideoFormats.some(format => 
                        videoSrc.toLowerCase().endsWith(format) || 
                        (videoSrc.includes('?') && videoSrc.toLowerCase().split('?')[0].endsWith(format))
                    );

                    // 初始化状态：无视频或格式无效则保持图片显示，永不切换
                    if (!hasValidVideo || !isValidFormat) {
                        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();
                    });

                    // 视频事件监听
                    ['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();
                });
            }

            // 滚动监听 - 优化版
            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加载失败，请刷新页面重试');
    		return;
    	}
    
    	swiper = new Swiper('.auto-swiper-container', {
            autoplay: {
                delay: 3000, // 3秒切换
                disableOnInteraction: false,
            },
            loop: false,
            slidesPerView: 1,
            spaceBetween: 0,
            // 启用分页指示标（核心配置）
            pagination: {
                el: '.swiper-pagination', // 对应 HTML 中的指示标容器
                clickable: true, // 允许点击指示标切换
               // dynamicBullets: true, // 动态指示标（当前激活放大）
                //dynamicMainBullets: 3, // 动态模式显示3个核心指示标
            },
            navigation: false,
            scrollbar: false,
            on: {
                resize: function () {
                    this.update();
                },
            },
        });
    
    	window.addEventListener('resize', function () {
    		swiper.update();
    	});
    
    	// 初始化时触发滚动事件，确保状态正确
    	window.dispatchEvent(new Event('scroll'));
    };

    
    
</script>
{/block}