xtu_mall/templates/xtu/cms/index.html.bak-20260409-1047

{include file="header" /}
    <main>
      <section class="hero-section">
        <div class="swiper hero-swiper" id="heroSwiper">
          <div class="swiper-wrapper">
            {yzn module="cms" action="lists" catid="2" order="listorder DESC" num="5" return="data" moreinfo="1"}
            {volist name="data" id="vo"}  
            <div class="swiper-slide hero-slide minimal-hero-slide" data-bullet-title="{$vo.title}">
              <div class="slide-media-layer">
                <img class="slide-poster" src="{$vo.thumb}" alt="poster">
                <video class="slide-video" playsinline preload="none" muted data-video-group="hero">
                </video>
              </div>
              <div class="container-fluid px-3 px-lg-4 px-xxl-5 h-100">
                <div class="hero-slide-inner h-100 d-flex align-items-center justify-content-center text-center">
                  <div class="hero-copy hero-copy-minimal">
                    <span class="hero-subtitle">
                      {$vo.title1}
                    </span>
                    <h1>{$vo.title}</h1>
                    <p class="hero-slogan">
                      {$vo.title2}
                    </p>
                    <div class="hero-actions d-flex justify-content-center flex-wrap gap-3">
                      <a href="{$vo.url}" class="btn btn-outline-light rounded-pill px-4 py-2">
                        {:cms_t('learn_more','了解更多')}
                        <i class="bi bi-chevron-right">
                        </i>
                      </a>
                      <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
                        {:cms_t('buy_now','立即购买')}
                        <i class="bi bi-chevron-right">
                        </i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
             {/volist}
             {/yzn}
          </div>
          <button class="hero-arrow hero-prev hero-side-arrow">
            ‹
          </button>
          <button class="hero-arrow hero-next hero-side-arrow">
            ›
          </button>
          <div class="hero-swiper-controls">
            <div class="swiper-pagination hero-pagination">
            </div>
          </div>
        </div>
      </section>
      <section class="section-space image-grid-full">
        <div class="container-fluid px-3">
          <div class="row g-2 g-lg-3">
           {yzn module="cms" action="lists" catid="3" order="listorder DESC" num="10" return="data" moreinfo="1"}
            {volist name="data" id="vo"}  
            <div class="col-12 col-lg-6">
              <article class="overlay-card flat-card grid-card tall-card">
                <img src="{$vo.thumb}" alt="card">
                <div class="overlay-copy top-copy product-tile-copy">
                  <span class="product-subtitle">
                    {$vo.title1}
                  </span>
                  <h3>
                    {$vo.title}
                  </h3>
                  <p>
                    {$vo.title2}
                  </p>
                  <div class="product-links">
                    <a href="{$vo.url}">
                      {:cms_t('learn_more','了解更多')} >
                    </a>
                    <a href="#">
                      {:cms_t('buy_now','立即购买')} >
                    </a>
                  </div>
                </div>
              </article>
            </div>
            {/volist}
             {/yzn}
            
          </div>
        </div>
      </section>
      <section class="section-space guide-cards-section">
        <div class="content-1300-wrap">
          <div class="row g-3 g-lg-4">
            <div class="col-12 col-lg-6">
              <article class="guide-card image-bg-card">
                <img class="guide-bg" src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1400&q=80" alt="guide visual">
                <div class="guide-copy">
                  <span class="guide-eyebrow">
                    选购指南
                  </span>
                  <h3>
                    {:cms_t('product_compare_and_recommend','产品对比和推荐')}
                  </h3>
                  <div class="guide-actions">
                    <a href="#" class="ui-pill-btn ui-pill-btn-dark">
                      {:cms_t('product_compare','产品对比')}
                    </a>
                    <a href="#" class="guide-link">
                      {:cms_t('help_me_choose','帮我选择')}
                    </a>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-12 col-lg-6">
              <article class="guide-card image-bg-card">
                <img class="guide-bg" src="https://images.unsplash.com/photo-1498049794561-7780e7231661?auto=format&fit=crop&w=1400&q=80" alt="guide visual">
                <div class="guide-copy">
                  <span class="guide-eyebrow">
                    精选配件
                  </span>
                  <h3>
                    官方正品装备，
                    <br>
                    让创作更出彩。
                  </h3>
                  <div class="guide-actions">
                    <a href="#" class="ui-pill-btn ui-pill-btn-dark">
                      立即购买
                    </a>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
      <section class="section-space cloud-banner-section">
        <div class="content-1300-wrap">
            
            {yzn module="cms" action="lists" catid="4" order="listorder DESC" num="1" return="data" moreinfo="1"}
            {volist name="data" id="vo"}  
          <article class="cloud-banner-card">
            <div class="row align-items-center g-3 g-lg-4 h-100">
              <div class="col-12 col-lg-4">
                <div class="cloud-copy text-center text-lg-start">
                  <div class="cloud-logo">
                    {$vo.title}
                  </div>
                  <div class="cloud-subtitle">
                    {$vo.title1}
                  </div>
                  <span class="cloud-mini-tag">
                    {$vo.title2}
                  </span>
                  <div class="cloud-actions">
                    <a href="#" class="ui-pill-btn ui-pill-btn-dark">
                      了解更多
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-12 col-lg-8">
                <div class="cloud-media-wrap single-device-wrap">
                  <img class="cloud-device-laptop single-device-image" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80" alt="device preview">
                </div>
              </div>
            </div>
          </article>
           {/volist}
             {/yzn}
          
        </div>
      </section>
      <section class="section-space showcase-slider">
        <div class="container-fluid px-3 px-lg-4 px-xxl-5">
          <div class="section-head text-center mb-4">
            <h2>
              三屏同页展示模式
            </h2>
          </div>
          <div class="swiper showcase-swiper" id="showcaseSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide showcase-card equal-card">
                <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80" alt="side">
                <div class="showcase-copy text-center text-white">
                  <span>
                    拍摄设备
                  </span>
                  <h3>
                    AERO MAVIC 4 PRO
                  </h3>
                  <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
                    <a href="#">
                      了解更多
                    </a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide showcase-card equal-card">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80" alt="showcase">
                <div class="showcase-copy text-center text-white">
                  <span>
                    探索场景
                  </span>
                  <h3>
                    LANDSCAPE VISION
                  </h3>
                  <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
                    <a href="#">
                      查看影像
                    </a>
                    <a href="#">
                      探索更多
                    </a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide showcase-card equal-card">
                <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1200&q=80" alt="side">
                <div class="showcase-copy text-center text-white">
                  <span>
                    影像表达
                  </span>
                  <h3>
                    CINEMA AERIAL
                  </h3>
                  <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
                    <a href="#">
                      立即了解
                    </a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide showcase-card equal-card">
                <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1200&q=80" alt="side">
                <div class="showcase-copy text-center text-white">
                  <span>
                    旅行创作
                  </span>
                  <h3>
                    ALPINE VIEW
                  </h3>
                  <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
                    <a href="#">
                      查看详情
                    </a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide showcase-card equal-card">
                <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1600&q=80" alt="showcase">
                <div class="showcase-copy text-center text-white">
                  <span>
                    内容创作
                  </span>
                  <h3>
                    CINEMA AERIAL SET
                  </h3>
                  <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
                    <a href="#">
                      立即了解
                    </a>
                    <a href="#">
                      进入专题
                    </a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide showcase-card equal-card">
                <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1200&q=80" alt="side">
                <div class="showcase-copy text-center text-white">
                  <span>
                    旗舰设备
                  </span>
                  <h3>
                    PRO SERIES
                  </h3>
                  <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
                    <a href="#">
                      立即购买
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <button class="showcase-arrow showcase-prev">
              ‹
            </button>
            <button class="showcase-arrow showcase-next">
              ›
            </button>
            <div class="swiper-pagination showcase-pagination">
            </div>
          </div>
        </div>
      </section>
      <section class="section-space industry-strip-section">
        <div class="content-1300-wrap">
          <article class="industry-strip-card">
            <div class="row align-items-center g-3 g-lg-4">
              <div class="col-12 col-lg-4">
                <div class="industry-copy text-center text-lg-start">
                  <span class="industry-eyebrow">
                    行业应用
                  </span>
                  <h2>
                    相机创造商机
                  </h2>
                  <a href="#" class="ui-btn ui-btn-primary">
                    了解更多
                  </a>
                </div>
              </div>
              <div class="col-12 col-lg-8">
                <div class="industry-gallery">
                  <div class="industry-main">
                    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80" alt="industry visual">
                  </div>
                  <div class="industry-side-grid">
                    <div class="industry-side large">
                      <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80" alt="industry visual">
                    </div>
                    <div class="industry-side">
                      <img src="https://images.unsplash.com/photo-1581092918484-8313a64fda0c?auto=format&fit=crop&w=900&q=80" alt="industry visual">
                    </div>
                    <div class="industry-side">
                      <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=900&q=80" alt="industry visual">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </section>
      <section class="section-space support-links-section">
        <div class="content-1300-wrap">
          <div class="row g-3 g-lg-4">
            <div class="col-6 col-lg-3">
              <a href="#" class="support-link-card">
                <img class="support-icon" src="./vendor/icon-consult.svg" alt="产品专家帮您选购">
                <div class="support-text">
                  产品专家帮您选购
                </div>
              </a>
            </div>
            <div class="col-6 col-lg-3">
              <a href="#" class="support-link-card">
                <img class="support-icon" src="./vendor/icon-help.svg" alt="使用帮助">
                <div class="support-text">
                  使用帮助
                </div>
              </a>
            </div>
            <div class="col-6 col-lg-3">
              <a href="#" class="support-link-card">
                <span class="support-icon support-bi">
                  <i class="bi bi-download">
                  </i>
                </span>
                <div class="support-text">
                  下载
                </div>
              </a>
            </div>
            <div class="col-6 col-lg-3">
              <a href="#" class="support-link-card">
                <span class="support-icon support-bi">
                  <i class="bi bi-headset">
                  </i>
                </span>
                <div class="support-text">
                  售后服务
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section class="section-space zoom-section business-entry-section">
        <div class="content-1200-wrap">
          <div class="section-head text-center business-head">
            <h2>
              创新业务入口
            </h2>
          </div>
          <div class="row g-2 g-lg-3 business-row-tight">
            <div class="col-12 col-lg-4">
              <article class="zoom-card business-card h-100">
                <div class="zoom-media">
                  <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=80" alt="module">
                </div>
                <div class="business-copy text-center three-line-copy">
                  <h3>
                    企业业务展示
                  </h3>
                  <p>
                    适合放企业介绍、主营方向与服务能力概览。
                  </p>
                  <a href="#">
                    了解更多 >
                  </a>
                </div>
              </article>
            </div>
            <div class="col-12 col-lg-4">
              <article class="zoom-card business-card h-100">
                <div class="zoom-media">
                  <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=80" alt="module">
                </div>
                <div class="business-copy text-center three-line-copy">
                  <h3>
                    服务能力说明
                  </h3>
                  <p>
                    突出服务流程、交付能力与项目执行优势。
                  </p>
                  <a href="#">
                    了解更多 >
                  </a>
                </div>
              </article>
            </div>
            <div class="col-12 col-lg-4">
              <article class="zoom-card business-card h-100">
                <div class="zoom-media">
                  <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80" alt="module">
                </div>
                <div class="business-copy text-center three-line-copy">
                  <h3>
                    合作与生态
                  </h3>
                  <p>
                    这一组更适合放合作伙伴、渠道生态或业务入口。
                  </p>
                  <a href="#">
                    了解更多 >
                  </a>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
    {include file="footer-links" /}  
    </main>
{include file="footer" /}