xtu_mall/templates/xtu/cms/list_product.html

{include file="header" /}
<link rel="stylesheet" href="/assets/xtu/vendor/swiper-bundle.min.css">
<link rel="stylesheet" href="/assets/xtu/page-compare.css?v=20260422-1749">
<link rel="stylesheet" href="/assets/xtu/product-list.css?v=20260625-hero-isb">

<main class="product-channel-page product-list-page">
  <section class="product-list-top-products" aria-label="{:cms_t('product_quick_nav','产品快捷导航')}">
    <div class="product-list-top-products-inner">
      <div class="product-list-top-products-row">
        {yzn module="cms" action="lists" catid="$catid" cache="3600" order="listorder desc,id desc" num="12" return="topProducts" moreinfo="1"}
        {volist name="topProducts" id="topProduct"}
        <a class="product-list-top-product" href="{$topProduct.url}" title="{$topProduct.title}">
          <span class="product-list-top-product-media">
            <img src="{if !empty($topProduct.thumb)}{$topProduct.thumb}{elseif !empty($topProduct.thumb2) /}{$topProduct.thumb2}{/if}" alt="{$topProduct.title}">
          </span>
          <span class="product-list-top-product-title">{$topProduct.title}</span>
          {if !empty($topProduct.title1)}<span class="product-list-top-product-tag">{$topProduct.title1}</span>{/if}
        </a>
        {/volist}
        {/yzn}
        <a class="product-list-top-product product-list-top-product-utility" href="{:getCategory(41,'url')}" title="{:cms_t('product_compare','产品对比')}">
          <span class="product-list-top-product-media"><i class="bi bi-columns-gap"></i></span>
          <span class="product-list-top-product-title">{:cms_t('product_compare','产品对比')}</span>
        </a>
        {if !empty($currentRegionShopUrl)}
        <a class="product-list-top-product product-list-top-product-utility" href="{$currentRegionShopUrl}" target="_blank" rel="noopener noreferrer" title="{:cms_t('buy_now','立即购买')}">
          <span class="product-list-top-product-media"><i class="bi bi-bag"></i></span>
          <span class="product-list-top-product-title">{:cms_t('buy_now','立即购买')}</span>
        </a>
        {/if}
      </div>
    </div>
  </section>

  <section class="product-channel-hero">
    <div class="content-1300-wrap text-center">
      <h1>{if getCategory($catid,'catname')}{:getCategory($catid,'catname')}{else /}{$category.catname|default=''}{/if}</h1>
      <p>{if getCategory($catid,'description')}{:getCategory($catid,'description')}{elseif !empty($category.description) /}{$category.description}{else /}{:cms_t('product_channel_default_desc','探索适合你的产品，了解核心亮点、适用场景与支持服务。')}{/if}</p>
    </div>
  </section>

  {yzn module="cms" action="lists" catid="$catid" flag="6" cache="3600" order="listorder desc,id desc" num="6" return="bannerData" moreinfo="1"}
  {if !empty($bannerData)}
  <section class="product-recommend-banner-section">
      <div class="swiper product-list-hero-swiper" id="productRecommendSwiper">
        <div class="swiper-wrapper">
          {volist name="bannerData" id="vo"}
          {if !empty($vo.thumb1)}
          <div class="swiper-slide product-list-hero-slide" data-is-b="{$vo.is_b|default='1'}">
            <div class="product-list-hero-media">
              <img src="{$vo.thumb1}" alt="{$vo.title}">
            </div>
            <div class="product-list-hero-overlay"></div>
            <div class="content-1300-wrap product-list-hero-inner">
              <div class="product-list-hero-copy">
                {if !empty($vo.title1)}<span class="product-list-hero-subtitle">{$vo.title1}</span>{/if}
                <h2 class="product-list-hero-title">{$vo.title}</h2>
                {if !empty($vo.title2)}
                <p class="product-list-hero-slogan">{$vo.title2}</p>
                {elseif !empty($vo.description) /}
                <p class="product-list-hero-slogan">{$vo.description|strip_tags|mb_substr=0,120,'utf-8'}</p>
                {/if}
                <div class="product-list-hero-actions">
                  <a href="{$vo.url}" class="product-list-hero-btn">
                    {:cms_t('learn_more','了解更多')}
                    <i class="bi bi-chevron-right"></i>
                  </a>
                  {if !empty($vo.shopurl)}
                  <a href="{$vo.shopurl}" class="product-list-hero-btn" target="_blank">
                    {:cms_t('buy_now','立即购买')}
                    <i class="bi bi-chevron-right"></i>
                  </a>
                  {/if}
                </div>
              </div>
            </div>
          </div>
          {/if}
          {/volist}
        </div>
        <button class="product-list-hero-arrow product-list-hero-prev" type="button">‹</button>
        <button class="product-list-hero-arrow product-list-hero-next" type="button">›</button>
        <div class="product-list-hero-controls">
          <div class="swiper-pagination product-list-hero-pagination"></div>
        </div>
      </div>
  </section>
  {/if}
  {/yzn}

  <section class="section-space image-grid-full hero-next-section-tight product-grid-unified product-list-home-grid">
    <div class="container-fluid px-3 product-grid-shell">
      <div class="row g-2 g-lg-3 product-grid-row">
        {yzn module="cms" action="lists" catid="$catid" flag="4"  order="listorder DESC,id DESC" num="20" return="recommendList" moreinfo="1"}
        {volist name="recommendList" id="vo"}
        <div class="col-12 col-lg-6">
          <article class="overlay-card flat-card grid-card tall-card">
            <img src="{if !empty($vo.thumb2)}{$vo.thumb2}{elseif !empty($vo.thumb) /}{$vo.thumb}{else /}/uploads/20260409/15d257a4faf1bc9aadd0095112b6b7f7.png{/if}" alt="{$vo.title}">
            <div class="overlay-copy top-copy product-tile-copy">
              {if !empty($vo.title1)}
              <span class="product-subtitle">{$vo.title1}</span>
              {/if}
              <h3>{$vo.title}</h3>
              <p>{if !empty($vo.title2)}{$vo.title2}{elseif !empty($vo.description) /}{$vo.description|strip_tags|mb_substr=0,80,'utf-8'}{/if}</p>
              <div class="product-links">
                <a href="{$vo.url}">{:cms_t('learn_more','了解更多')} ></a>
                {if !empty($vo.shopurl)}<a href="{$vo.shopurl}" target="_blank">{:cms_t('buy_now','立即购买')} ></a>{/if}
              </div>
            </div>
          </article>
        </div>
        {/volist}
        {/yzn}
      </div>
    </div>
  </section>

  <section class="product-compare-lite-section compare-page">
    <div class="compare-shell">
      <div class="product-channel-hero product-compare-heading">
        <div class="content-1300-wrap text-center">
          <h1>{:cms_t('product_compare_and_recommend','哪款设备适合你')}</h1>
        </div>
      </div>

      {yzn module="cms" action="lists" catid="$catid" order="listorder desc" num="4" return="compareList" moreinfo="1"}
      {if !empty($compareList)}
      <div class="compare-products compare-products-4up compare-products-detail-grid">
        {volist name="compareList" id="cp"}
        <article class="compare-product-card compare-product-card-detailed">
          <div class="compare-product-media">
            <img src="{$cp.thumb}" alt="{$cp.title}">
          </div>
          <h3 class="compare-product-title">{$cp.title}</h3>
          <p class="compare-product-subtitle">{if !empty($cp.title2)}{$cp.title2}{elseif !empty($cp.title1) /}{$cp.title1}{/if}</p>
          <div class="compare-product-actions">
            {if !empty($cp.shopurl)}<a class="compare-buy-btn" href="{$cp.shopurl}" target="_blank">{:cms_t('buy_now','立即购买')}</a>{/if}
            <a class="compare-more-link" href="{$cp.url}">{:cms_t('learn_more','了解更多')}</a>
          </div>
          <div class="compare-product-specs">
             <?php
             $where = "project_id=".$cp['id'];
             ?>
            {yzn module="cms" action="lists" catid="10" where="$where" order="listorder asc,id desc" num="1" return="paramList" moreinfo="1"}
            {volist name="paramList" id="param"}
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_size','尺寸')}</span>
              <div class="compare-product-spec-value">{$param.size|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_weight','重量')}</span>
              <div class="compare-product-spec-value">{$param.weight|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_waterproof','防水')}</span>
              <div class="compare-product-spec-value">{$param.waterproof|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_image_sensor','影像传感器')}</span>
              <div class="compare-product-spec-value">{$param.image_sensor|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_normal_video','普通录影')}</span>
              <div class="compare-product-spec-value">{$param.normal_video|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_stabilization','防抖')}</span>
              <div class="compare-product-spec-value">{$param.stabilization|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_battery_life','续航时间')}</span>
              <div class="compare-product-spec-value">{$param.battery_life|default='-'}</div>
            </div>
            <div class="compare-product-spec-item">
              <span class="compare-product-spec-label">{:cms_t('compare_label_charge_time','充电时间')}</span>
              <div class="compare-product-spec-value">{$param.charge_time|default='-'}</div>
            </div>
            {/volist}
            {/yzn}
          </div>
        </article>
        {/volist}
      </div>
      <div class="compare-all-entry-wrap">
        <a class="compare-all-entry" href="{:getCategory(41,'url')}">{:cms_t('product_compare_all_cameras','对比所有相机')} <i class="bi bi-chevron-right"></i></a>
      </div>
      {/if}
      {/yzn}
    </div>
  </section>

  <section class="product-support-links-section">
    <div class="content-1300-wrap">
      <div class="product-channel-hero product-support-heading">
        <div class="content-1300-wrap text-center">
          <h1>{:cms_t('product_support_title','产品支持')}</h1>
        </div>
      </div>
      <div class="product-support-links-grid">
        <a class="product-support-link-card" href="{:getCategory(24,'url')}">
          <div class="product-support-link-media">
            <img src="/assets/xtu/vendor/img/support-service-card.jpg" alt="{:getCategory(24,'catname')}">
          </div>
          <div class="product-support-link-copy">
            <h3>{:getCategory(24,'catname')}</h3>
            <p>{if getCategory(24,'description')}{:getCategory(24,'description')}{/if}</p>
            <span class="product-support-link-action">{:cms_t('learn_more','了解更多')} <i class="bi bi-chevron-right"></i></span>
          </div>
        </a>
        <a class="product-support-link-card" href="{:getCategory(56,'url')}">
          <div class="product-support-link-media">
            <img src="/assets/xtu/vendor/img/support-download-card.jpg" alt="{:getCategory(56,'catname')}">
          </div>
          <div class="product-support-link-copy">
            <h3>{:getCategory(56,'catname')}</h3>
            <p>{if getCategory(56,'description')}{:getCategory(56,'description')}{/if}</p>
            <span class="product-support-link-action">{:cms_t('learn_more','了解更多')} <i class="bi bi-chevron-right"></i></span>
          </div>
        </a>
      </div>
    </div>
  </section>

  <section class="section-space industry-strip-section industry-strip-clean">
    <div class="content-1300-wrap">
      {yzn module="cms" action="lists" catid="13" order="listorder DESC" num="1" return="data" moreinfo="1"}
      {volist name="data" id="vo"}
      <div class="row align-items-center g-3 g-lg-4 industry-clean-row">
        <div class="col-12 col-lg-5">
          <div class="industry-copy industry-copy-clean text-center text-lg-start">
            <span class="industry-eyebrow">
              {$vo.title}
            </span>
            <h2>
              {$vo.title1}
            </h2>
            <a href="{:getCategory(55,'url')}" class="ui-btn ui-btn-primary">
              {:cms_t('learn_more','了解更多')}
            </a>
          </div>
        </div>
        <div class="col-12 col-lg-7">
          <div class="industry-image-clean">
            <img src="{$vo.thumb}" alt="industry visual">
          </div>
        </div>
      </div>
      {/volist}
      {/yzn}
    </div>
  </section>

  {include file="footer-links" /}
</main>

<script src="/assets/xtu/vendor/swiper-bundle.min.js"></script>
<script>
  (function () {
    var el = document.getElementById('productRecommendSwiper');
    if (!el || typeof Swiper === 'undefined') return;
    new Swiper(el, {
      loop: true,
      speed: 700,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false
      },
      pagination: {
        el: '#productRecommendSwiper .product-list-hero-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '#productRecommendSwiper .product-list-hero-next',
        prevEl: '#productRecommendSwiper .product-list-hero-prev'
      }
    });
  })();
</script>

{include file="footer" /}