xtu_mall/templates/xtu/cms/show_product.html

{include file="header" /}
{if $m_style==1}
<link rel="stylesheet" href="/assets/xtu/show-product.css?v=202608304-mobilefix6">
{else}
<link rel="stylesheet" href="/assets/xtu/show-product-bai.css?v=202620804-mobilefix6">
{/if}


<main class="show-product-page">
  <section class="show-product-hero">
    <div class="show-product-hero-media">
      <img src="{$thumb3}" alt="{$title}">
    </div>
    <div class="show-product-hero-overlay"></div>
    <div class="show-product-hero-content">
      <div class="show-product-hero-copy">
        {if !empty($title1)}
        <div class="show-product-hero-subtitle">{$title1}</div>
        {/if}
        <h1>{$title}</h1>
        {if !empty($title2)}
        <div class="show-product-hero-tagline">{$title2}</div>
        {/if}
        <div class="show-product-hero-actions">
          {if !empty($shopurl)}
          <a class="show-product-hero-btn show-product-hero-btn-light" href="{$shopurl}" target="_blank">{:cms_t('buy_now','立即购买')}</a>
          {/if}
          {if !empty($video)}
          <button class="show-product-hero-btn show-product-hero-btn-dark js-product-video-open" type="button" data-video="{$video}">
            {:cms_t('watch_video','观看视频')}
            <i class="bi bi-play-fill"></i>
          </button>
          {/if}
        </div>
      </div>
    </div>
  </section>

  <div class="show-product-video-modal" id="showProductVideoModal" hidden>
    <div class="show-product-video-modal__backdrop" data-product-modal-close></div>
    <div class="show-product-video-modal__dialog" role="dialog" aria-modal="true" aria-label="{:cms_t('watch_video','观看视频')}">
      <button class="show-product-video-modal__close" type="button" aria-label="{:cms_t('close','关闭')}" data-product-modal-close>×</button>
      <div class="show-product-video-modal__body">
        <video class="show-product-video-modal__player" controls playsinline preload="metadata"></video>
      </div>
    </div>
  </div>
  <?php $where = "project_id=".$id; ?>
  {yzn module="cms" action="lists" catid="9" where="$where" order="listorder asc,id desc" num="1" return="productBlocks" moreinfo="1"}
  {volist name="productBlocks" id="block"}
  <section class="show-product-story-section">
    <div class="content-1300-wrap">
      <div class="show-product-story-copy text-center">
        {if !empty($block.title_2_1)}
        <h2 class="spx-reveal">{$block.title_2_1}</h2>
        {/if}
      </div>
      <div class="show-product-story-media">
        {if !empty($block.thumb_2_pc)}
        <img class="show-product-story-image is-pc" src="{$block.thumb_2_pc}" alt="{$title}">
        {/if}
        {if !empty($block.thumb_2_wap)}
        <img class="show-product-story-image is-wap" src="{$block.thumb_2_wap}" alt="{$title}">
        {/if}
      </div>
      <div class="show-product-story-copy show-product-story-copy-bottom text-center">
        {if !empty($block.title_2_2)}
        <p class="spx-reveal spx-reveal--delay-1">{$block.title_2_2}</p>
        {/if}
        {if !empty($shopurl)}
        <div class="show-product-story-action">
          <a href="{$shopurl}" target="_blank" class="show-product-story-link">{:cms_t('learn_more','了解更多')}</a>
        </div>
        {/if}
      </div>
    </div>
  </section>


  <section class="spx-stage-three js-spx-stage-three">
    <div class="content-1300-wrap">
      <div class="spx-stage-three-copy">
        <div class="spx-stage-three-copy-switch">
          {if !empty($block.title_3_1)}
          <div class="spx-stage-three-title-layer js-spx-stage-three-title-layer">
            <h2 class="spx-stage-three-title">{$block.title_3_1|nl2br=###|raw}</h2>
          </div>
          {/if}

          <div class="spx-stage-three-texts js-spx-stage-three-texts">
            {if !empty($block.title_3_2)}
            <h3 class="spx-stage-three-subtitle">{$block.title_3_2|nl2br=###|raw}</h3>
            {/if}
            {if !empty($block.title_3_3)}
            <p class="spx-stage-three-text">{$block.title_3_3|nl2br=###|raw}</p>
            {/if}
          </div>
        </div>

        {if !empty($block.thumb_3_pc)}
        <div class="spx-stage-three-media">
          <img class="spx-stage-three-image" src="{$block.thumb_3_pc}" alt="{$title}">
        </div>
        {/if}
      </div>
    </div>
  </section>

  <section class="spx-stage-four js-spx-stage-four">
    <div class="content-1300-wrap">
      <div class="spx-stage-four-head">
        <div class="spx-stage-four-head-left">
          {if !empty($block.title_4_3)}
          <div class="spx-stage-kicker spx-reveal">{$block.title_4_3|nl2br=###|raw}</div>
          {/if}
          {if !empty($block.title_4_1)}
          <h2 class="spx-stage-four-title spx-reveal spx-reveal--delay-1">{$block.title_4_1|nl2br=###|raw}</h2>
          {/if}
        </div>
        <div class="spx-stage-four-head-right">
          {if !empty($block.title_4_2)}
          <div class="spx-stage-four-desc spx-reveal spx-reveal--delay-2">{$block.title_4_2|nl2br=###|raw}</div>
          {/if}
        </div>
      </div>

      <?php
        $stageFourMedia = !empty($block['thumb_4']) ? $block['thumb_4'] : (!empty($block['video_4']) ? $block['video_4'] : (!empty($block['thumb_4_wap']) ? $block['thumb_4_wap'] : (!empty($block['thumb_4_pc']) ? $block['thumb_4_pc'] : '')));
        $stageFourMediaExt = $stageFourMedia ? strtolower(pathinfo(parse_url($stageFourMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
        $stageFourMediaIsVideo = in_array($stageFourMediaExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
      ?>
      <div class="spx-stage-four-compare spx-stage-four-compare-single">
        <div class="spx-stage-four-card spx-stage-four-card-single">
          <div class="spx-stage-four-card-media">
            {if !empty($stageFourMedia)}
              {if $stageFourMediaIsVideo}
            <video class="spx-stage-four-video" src="<?php echo $stageFourMedia; ?>" autoplay muted loop playsinline preload="metadata"></video>
              {else /}
            <img class="spx-stage-four-image" src="<?php echo $stageFourMedia; ?>" alt="{$title}">
              {/if}
            {/if}
          </div>
        </div>
      </div>
    </div>
  </section>

  <?php
    $stageFiveMedia = !empty($block['thumb_5']) ? $block['thumb_5'] : '';
    $stageFiveMediaExt = $stageFiveMedia ? strtolower(pathinfo(parse_url($stageFiveMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageFiveMediaIsVideo = in_array($stageFiveMediaExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  <section class="spx-stage-five js-spx-stage-five">
    <div class="content-1300-wrap">
      <div class="spx-stage-five-copy text-center">
        {if !empty($block.title_5_3)}
        <div class="spx-stage-kicker spx-stage-five-kicker spx-reveal">{$block.title_5_3|nl2br=###|raw}</div>
        {/if}
        {if !empty($block.title_5_1)}
        <h2 class="spx-stage-five-title spx-reveal spx-reveal--delay-1">{$block.title_5_1|nl2br=###|raw}</h2>
        {/if}
        {if !empty($block.title_5_2)}
        <div class="spx-stage-five-desc spx-reveal spx-reveal--delay-2">{$block.title_5_2|nl2br=###|raw}</div>
        {/if}
      </div>
      {if !empty($stageFiveMedia)}
      <div class="spx-stage-five-media">
        {if $stageFiveMediaIsVideo}
        <video class="spx-stage-five-video" src="<?php echo $stageFiveMedia; ?>" autoplay muted loop playsinline preload="metadata"></video>
        {else /}
        <img class="spx-stage-five-image" src="<?php echo $stageFiveMedia; ?>" alt="{$title}">
        {/if}
      </div>
      {/if}
    </div>
  </section>

  <?php
    $stageSixRaw = $block['thumb_6'] ?? [];
    $stageSixSlides = [];

    if (is_array($stageSixRaw)) {
      $iterator = new RecursiveIteratorIterator(new RecursiveArrayIterator($stageSixRaw));
      foreach ($iterator as $item) {
        if (is_string($item)) {
          $item = trim($item);
          if ($item !== '') {
            $stageSixSlides[] = $item;
          }
        }
      }
    } else {
      $stageSixRaw = trim((string)$stageSixRaw);
      if ($stageSixRaw !== '') {
        $stageSixSlides = preg_split('/[\r\n,|]+/', $stageSixRaw);
        $stageSixSlides = array_values(array_filter(array_map('trim', $stageSixSlides)));
      }
    }
  ?>
  <section class="spx-stage-six js-spx-stage-six">
    <div class="content-1300-wrap">
      <div class="spx-stage-six-head">
        <div class="spx-stage-six-head-left">
          {if !empty($block.title_6_1)}
          <h2 class="spx-stage-six-title spx-reveal">{$block.title_6_1|nl2br=###|raw}</h2>
          {/if}
        </div>
        <div class="spx-stage-six-head-right">
          {if !empty($block.title_6_2)}
          <div class="spx-stage-six-desc spx-reveal spx-reveal--delay-1">{$block.title_6_2|nl2br=###|raw}</div>
          {/if}
        </div>
      </div>

      {if !empty($stageSixSlides)}
      <div class="spx-stage-six-slider js-stage-six-slider">
        <div class="spx-stage-six-track">
          {volist name="stageSixSlides" id="slide" key="slideIndex"}
          <div class="spx-stage-six-slide{if $slideIndex == 1} is-active{/if}">
            <img class="spx-stage-six-image" src="{$slide}" alt="{$title}">
          </div>
          {/volist}

          {if count($stageSixSlides) > 1}
          <button class="spx-stage-six-arrow spx-stage-six-arrow-prev" type="button" data-stage-six-prev aria-label="上一张">
            <i class="bi bi-chevron-left" aria-hidden="true"></i>
          </button>
          <button class="spx-stage-six-arrow spx-stage-six-arrow-next" type="button" data-stage-six-next aria-label="下一张">
            <i class="bi bi-chevron-right" aria-hidden="true"></i>
          </button>

          <div class="spx-stage-six-dots spx-stage-six-dots-inside">
            {volist name="stageSixSlides" id="slide" key="slideIndex"}
            <button class="spx-stage-six-dot{if $slideIndex == 1} is-active{/if}" type="button" data-stage-six-dot="{$slideIndex - 1}" aria-label="Slide {$slideIndex}"></button>
            {/volist}
          </div>
          {/if}
        </div>
      </div>
      {/if}
    </div>
  </section>

  <?php
    $stageSevenMedia = !empty($block['thumb_7']) ? $block['thumb_7'] : '';
    $stageSevenMediaExt = $stageSevenMedia ? strtolower(pathinfo(parse_url($stageSevenMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageSevenMediaIsVideo = in_array($stageSevenMediaExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  <section class="spx-stage-seven js-spx-stage-seven">
    <div class="content-1300-wrap">
      <div class="spx-stage-seven-copy text-center">
        {if !empty($block.title_7_1)}
        <h2 class="spx-stage-seven-title spx-reveal">{$block.title_7_1|nl2br=###|raw}</h2>
        {/if}
        {if !empty($block.title_7_2)}
        <div class="spx-stage-seven-desc spx-reveal spx-reveal--delay-1">{$block.title_7_2|nl2br=###|raw}</div>
        {/if}
      </div>
      {if !empty($stageSevenMedia)}
      <div class="spx-stage-seven-media">
        {if $stageSevenMediaIsVideo}
        <video class="spx-stage-seven-video" src="<?php echo $stageSevenMedia; ?>" autoplay muted loop playsinline preload="metadata"></video>
        {else /}
        <img class="spx-stage-seven-image" src="<?php echo $stageSevenMedia; ?>" alt="{$title}">
        {/if}
      </div>
      {/if}
    </div>
  </section>

  <?php
    $stageEightMediaRaw = $block['thumb_8'] ?? [];
    $stageEightLabelRaw = $block['tag_8'] ?? [];
    $stageEightContentRaw = $block['title_8_2'] ?? [];

    $spxFlatten = function ($value) {
      $result = [];
      if (is_array($value)) {
        $iterator = new RecursiveIteratorIterator(new RecursiveArrayIterator($value));
        foreach ($iterator as $item) {
          if (is_string($item)) {
            $item = trim($item);
            if ($item !== '') {
              $result[] = $item;
            }
          }
        }
      } else {
        $value = trim((string)$value);
        if ($value !== '') {
          $result = preg_split('/[\r\n|]+/', $value);
          $result = array_values(array_filter(array_map('trim', $result)));
        }
      }
      return $result;
    };

    $stageEightMediaList = $spxFlatten($stageEightMediaRaw);
    $stageEightLabelList = $spxFlatten($stageEightLabelRaw);
    $stageEightContentList = $spxFlatten($stageEightContentRaw);
    $stageEightItems = [];
    $stageEightCount = max(count($stageEightMediaList), count($stageEightLabelList), count($stageEightContentList));

    for ($i = 0; $i < $stageEightCount; $i++) {
      $media = $stageEightMediaList[$i] ?? '';
      $label = $stageEightLabelList[$i] ?? '';
      $content = $stageEightContentList[$i] ?? '';
      if ($media === '' && $label === '' && $content === '') {
        continue;
      }
      $ext = $media ? strtolower(pathinfo(parse_url($media, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
      $stageEightItems[] = [
        'media' => $media,
        'label' => $label,
        'content' => $content,
        'is_video' => in_array($ext, ['mp4', 'webm', 'ogg', 'mov', 'm4v']),
      ];
    }
  ?>
  <section class="spx-stage-eight js-stage-eight">
    <div class="content-1300-wrap">
      <div class="spx-stage-eight-copy text-center">
        {if !empty($block.title_8_1)}
        <h2 class="spx-stage-eight-title spx-reveal">{$block.title_8_1|nl2br=###|raw}</h2>
        {/if}
      </div>

      {if !empty($stageEightItems)}
      <div class="spx-stage-eight-tabs js-stage-eight-tabs">
        <div class="spx-stage-eight-media-wrap">
          {volist name="stageEightItems" id="item" key="itemIndex"}
          <div class="spx-stage-eight-panel{if $itemIndex == 1} is-active{/if}" data-stage-eight-panel="{$itemIndex - 1}">
            {if !empty($item.media)}
              {if $item.is_video}
            <video class="spx-stage-eight-video" src="{$item.media}" autoplay muted loop playsinline preload="metadata"></video>
              {else /}
            <img class="spx-stage-eight-image" src="{$item.media}" alt="{$title}">
              {/if}
            {/if}
          </div>
          {/volist}
        </div>

        <div class="spx-stage-eight-nav" role="tablist" aria-label="第八屏切换标签">
          {volist name="stageEightItems" id="item" key="itemIndex"}
          <button class="spx-stage-eight-tab{if $itemIndex == 1} is-active{/if}" type="button" data-stage-eight-tab="{$itemIndex - 1}" role="tab" aria-selected="{if $itemIndex == 1}true{else /}false{/if}">
            {$item.label|default='标签'}
          </button>
          {/volist}
        </div>

        <div class="spx-stage-eight-content-wrap">
          {volist name="stageEightItems" id="item" key="itemIndex"}
          <div class="spx-stage-eight-content{if $itemIndex == 1} is-active{/if}" data-stage-eight-content="{$itemIndex - 1}">
            {$item.content|default=''}
          </div>
          {/volist}
        </div>
      </div>
      {/if}
    </div>
  </section>

  <?php
    $stageNineMedia = !empty($block['thumb_9']) ? (is_string($block['thumb_9']) ? $block['thumb_9'] : '') : '';
    $stageNineMediaExt = $stageNineMedia ? strtolower(pathinfo(parse_url($stageNineMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageNineMediaIsVideo = in_array($stageNineMediaExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  <section class="spx-stage-nine js-stage-nine">
    <div class="spx-stage-nine-sticky">
      <div class="content-1300-wrap">
        <div class="spx-stage-nine-title-layer">
          {if !empty($block.title_9)}
          <h2 class="spx-stage-nine-title spx-reveal">{$block.title_9|nl2br=###|raw}</h2>
          {/if}
        </div>

        {if !empty($stageNineMedia)}
        <div class="spx-stage-nine-media">
          {if $stageNineMediaIsVideo}
          <video class="spx-stage-nine-video" src="<?php echo $stageNineMedia; ?>" preload="metadata" muted></video>
          {else /}
          <img class="spx-stage-nine-image" src="<?php echo $stageNineMedia; ?>" alt="{$title}">
          {/if}
        </div>
        {/if}

        <div class="spx-stage-nine-overlay-copy">
          {if !empty($block.title_10_1)}
          <h3 class="spx-stage-nine-subtitle spx-reveal spx-reveal--delay-1">{$block.title_10_1|nl2br=###|raw}</h3>
          {/if}
          {if !empty($block.title_10_2)}
          <div class="spx-stage-nine-desc spx-reveal spx-reveal--delay-2">{$block.title_10_2|nl2br=###|raw}</div>
          {/if}
           {if !empty($block.thumb_10)}
          <div class="spx-stage-nine-media">
        
          <img class="spx-stage-nine-image" src="{$block.thumb_10}">
     
            </div>
              {/if}
        </div>

      </div>
    </div>
  </section>

  <?php
    $stageTenMediaRaw = $block['thumb_11'] ?? [];
    $stageTenTitle = !empty($block['title_11_1']) ? $block['title_11_1'] : '';
    $stageTenLabelsRaw = $block['title_11_2'] ?? [];

    $stageTenMediaList = $spxFlatten($stageTenMediaRaw);
    $stageTenLabelList = $spxFlatten($stageTenLabelsRaw);
    $stageTenItems = [];
    $stageTenCount = max(count($stageTenMediaList), count($stageTenLabelList));

    for ($i = 0; $i < $stageTenCount; $i++) {
      $media = $stageTenMediaList[$i] ?? '';
      $label = $stageTenLabelList[$i] ?? '';
      if ($media === '' && $label === '') {
        continue;
      }
      $ext = $media ? strtolower(pathinfo(parse_url($media, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
      $stageTenItems[] = [
        'media' => $media,
        'label' => $label,
        'is_video' => in_array($ext, ['mp4', 'webm', 'ogg', 'mov', 'm4v']),
      ];
    }
  ?>
  {if !empty($stageTenItems) || !empty($stageTenTitle)}
  <section class="spx-stage-ten js-stage-ten">
    <div class="content-1300-wrap">
      <div class="spx-stage-ten-container">
        <div class="spx-stage-ten-media">
          <div class="spx-stage-ten-media-container">
            {volist name="stageTenItems" id="item" key="itemIndex"}
            <div class="spx-stage-ten-panel{if $itemIndex == 1} is-active{/if}" data-stage-ten-panel="{$itemIndex - 1}">
              {if !empty($item.media)}
                {if $item.is_video}
              <video class="spx-stage-ten-video" src="{$item.media}" muted playsinline preload="metadata" loop></video>
              <button class="spx-stage-ten-sound-toggle" type="button" data-stage-ten-sound aria-label="切换声音">
                <i class="bi bi-volume-mute-fill" aria-hidden="true"></i>
              </button>
                {else /}
              <img class="spx-stage-ten-image" src="{$item.media}" alt="{$title}">
                {/if}
              {/if}
            </div>
            {/volist}
          </div>
        </div>

        <div class="spx-stage-ten-content">
          {if !empty($stageTenTitle)}
          <h2 class="spx-stage-ten-title spx-reveal">{$stageTenTitle|nl2br=###|raw}</h2>
          {/if}

          {if !empty($stageTenItems)}
          <div class="spx-stage-ten-tabs" role="tablist" aria-label="第十屏切换标签">
            {volist name="stageTenItems" id="item" key="itemIndex"}
            <button class="spx-stage-ten-tab{if $itemIndex == 1} is-active{/if}" type="button" data-stage-ten-tab="{$itemIndex - 1}" role="tab" aria-selected="{if $itemIndex == 1}true{else /}false{/if}">
              {$item.label|default='选项'|trim}
            </button>
            {/volist}
          </div>
          {/if}
        </div>
      </div>
    </div>
  </section>
  {/if}

  <?php
    $stageElevenItems = [];
    $stageElevenSourceMap = [
      [
        'title' => trim((string)($block['title_12_1'] ?? '')),
        'content' => trim((string)($block['title_12_2'] ?? '')),
        'media' => trim((string)($block['thumb_12_1'] ?? '')),
      ],
      [
        'title' => trim((string)($block['title_12_3'] ?? '')),
        'content' => trim((string)($block['title_12_4'] ?? '')),
        'media' => trim((string)($block['thumb_12_2'] ?? '')),
      ],
    ];

    foreach ($stageElevenSourceMap as $stageElevenItem) {
      if ($stageElevenItem['title'] === '' && $stageElevenItem['content'] === '' && $stageElevenItem['media'] === '') {
        continue;
      }
      $ext = $stageElevenItem['media'] ? strtolower(pathinfo(parse_url($stageElevenItem['media'], PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
      $stageElevenItem['is_video'] = in_array($ext, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
      $stageElevenItems[] = $stageElevenItem;
    }
  ?>
  {if !empty($stageElevenItems)}
  <section class="spx-stage-eleven js-stage-eleven">
    <div class="spx-stage-eleven-media-shell">
      {volist name="stageElevenItems" id="item" key="itemIndex"}
      <div class="spx-stage-eleven-panel{if $itemIndex == 1} is-active{/if}" data-stage-eleven-panel="{$itemIndex - 1}">
        {if !empty($item.media)}
          {if $item.is_video}
        <video class="spx-stage-eleven-video" src="{$item.media}" muted playsinline preload="metadata" loop></video>
          {else /}
        <img class="spx-stage-eleven-image" src="{$item.media}" alt="{$item.title|default=$title}">
          {/if}
        {/if}
      </div>
      {/volist}
      <div class="spx-stage-eleven-overlay"></div>
    </div>

    <div class="spx-stage-eleven-content-wrap">
      <div class="spx-stage-eleven-content">
        <div class="spx-stage-eleven-tabs" role="tablist" aria-label="第十一屏切换选项">
          {volist name="stageElevenItems" id="item" key="itemIndex"}
          <button class="spx-stage-eleven-tab{if $itemIndex == 1} is-active{/if}" type="button" data-stage-eleven-tab="{$itemIndex - 1}" role="tab" aria-selected="{if $itemIndex == 1}true{else /}false{/if}">
            <span class="spx-stage-eleven-tab-line" aria-hidden="true"></span>
            <span class="spx-stage-eleven-tab-body">
              <span class="spx-stage-eleven-tab-title spx-reveal">{$item.title|default='选项'|trim}</span>
              <span class="spx-stage-eleven-tab-content spx-reveal spx-reveal--delay-1">{$item.content|trim|nl2br=###|raw}</span>
            </span>
          </button>
          {/volist}
        </div>
      </div>
    </div>
  </section>
  {/if}

  <?php
    $stageTwelveTitle = trim((string)($block['title_13_1'] ?? ''));
    $stageTwelveDesc = trim((string)($block['title_13_2'] ?? ''));
    $stageTwelveMedia = trim((string)($block['thumb_13'] ?? ''));
    $stageTwelveExt = $stageTwelveMedia ? strtolower(pathinfo(parse_url($stageTwelveMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageTwelveIsVideo = in_array($stageTwelveExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  {if $stageTwelveTitle !== '' || $stageTwelveDesc !== '' || $stageTwelveMedia !== ''}
  <section class="spx-stage-twelve">
    <div class="content-1300-wrap spx-stage-twelve-wrap">
      <div class="spx-stage-twelve-copy">
        {if $stageTwelveTitle !== ''}
        <h2 class="spx-stage-twelve-title spx-reveal">{$stageTwelveTitle|trim}</h2>
        {/if}
        {if $stageTwelveDesc !== ''}
        <div class="spx-stage-twelve-desc spx-reveal spx-reveal--delay-1">{$stageTwelveDesc|trim|nl2br=###|raw}</div>
        {/if}
      </div>

      {if $stageTwelveMedia !== ''}
      <div class="spx-stage-twelve-media">
        <div class="spx-stage-twelve-media-shell">
          {if $stageTwelveIsVideo}
          <video class="spx-stage-twelve-video" src="{$stageTwelveMedia}" autoplay muted playsinline preload="metadata" loop></video>
          {else /}
          <img class="spx-stage-twelve-image" src="{$stageTwelveMedia}" alt="{$stageTwelveTitle|default=$title}">
          {/if}
        </div>
      </div>
      {/if}
    </div>
  </section>
  {/if}

  <?php
    $stageThirteenTitle = trim((string)($block['title_14_1'] ?? ''));
    $stageThirteenMedia = trim((string)($block['thumb_14'] ?? ''));
    $stageThirteenDesc = trim((string)($block['title_14_2'] ?? ''));
    $stageThirteenExt = $stageThirteenMedia ? strtolower(pathinfo(parse_url($stageThirteenMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageThirteenIsVideo = in_array($stageThirteenExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  {if $stageThirteenTitle !== '' || $stageThirteenMedia !== '' || $stageThirteenDesc !== ''}
  <section class="spx-stage-thirteen">
    <div class="content-1300-wrap spx-stage-thirteen-wrap">
      <div class="spx-stage-thirteen-copy spx-stage-thirteen-copy-top">
        {if $stageThirteenTitle !== ''}
        <h2 class="spx-stage-thirteen-title spx-reveal">{$stageThirteenTitle|trim}</h2>
        {/if}
      </div>

      {if $stageThirteenMedia !== ''}
      <div class="spx-stage-thirteen-media">
        <div class="spx-stage-thirteen-media-shell">
          {if $stageThirteenIsVideo}
          <video class="spx-stage-thirteen-video" src="{$stageThirteenMedia}" autoplay muted playsinline preload="metadata" loop></video>
          {else /}
          <img class="spx-stage-thirteen-image" src="{$stageThirteenMedia}" alt="{$stageThirteenTitle|default=$title}">
          {/if}
        </div>
      </div>
      {/if}

      {if $stageThirteenDesc !== ''}
      <div class="spx-stage-thirteen-copy spx-stage-thirteen-copy-bottom">
        <div class="spx-stage-thirteen-desc spx-reveal spx-reveal--delay-1">{$stageThirteenDesc|trim|nl2br=###|raw}</div>
      </div>
      {/if}
    </div>
  </section>
  {/if}

  <?php
    $stageFourteenTitle = trim((string)($block['title_15_1'] ?? ''));
    $stageFourteenDesc = trim((string)($block['title_15_2'] ?? ''));
    $stageFourteenMedia = trim((string)($block['thumb_15'] ?? ''));
    $stageFourteenExt = $stageFourteenMedia ? strtolower(pathinfo(parse_url($stageFourteenMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageFourteenIsVideo = in_array($stageFourteenExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  {if $stageFourteenTitle !== '' || $stageFourteenDesc !== '' || $stageFourteenMedia !== ''}
  <section class="spx-stage-fourteen">
    <div class="spx-stage-fourteen-media-shell">
      {if $stageFourteenMedia !== ''}
        {if $stageFourteenIsVideo}
      <video class="spx-stage-fourteen-video" src="{$stageFourteenMedia}" autoplay muted playsinline preload="metadata" loop></video>
        {else /}
      <img class="spx-stage-fourteen-image" src="{$stageFourteenMedia}" alt="{$stageFourteenTitle|default=$title}">
        {/if}
      {/if}
      <div class="spx-stage-fourteen-overlay"></div>
    </div>

    <div class="spx-stage-fourteen-content-wrap">
      <div class="spx-stage-fourteen-content">
        {if $stageFourteenTitle !== ''}
        <h2 class="spx-stage-fourteen-title spx-reveal">{$stageFourteenTitle|trim}</h2>
        {/if}
        {if $stageFourteenDesc !== ''}
        <div class="spx-stage-fourteen-desc spx-reveal spx-reveal--delay-1">{$stageFourteenDesc|trim|nl2br=###|raw}</div>
        {/if}
      </div>
    </div>
  </section>
  {/if}

  <?php
    $stageFifteenTitle = trim((string)($block['title_16_1'] ?? ''));
    $stageFifteenEyebrow = trim((string)($block['title_16_3'] ?? ''));
    if ($stageFifteenEyebrow === '') {
      $stageFifteenEyebrow = trim((string)($block['title_5_3'] ?? ''));
    }
    $stageFifteenDesc = trim((string)($block['title_16_2'] ?? ''));
    $stageFifteenMedia = trim((string)($block['thumb_16'] ?? ''));
    $stageFifteenExt = $stageFifteenMedia ? strtolower(pathinfo(parse_url($stageFifteenMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageFifteenIsVideo = in_array($stageFifteenExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  {if $stageFifteenTitle !== '' || $stageFifteenEyebrow !== '' || $stageFifteenDesc !== '' || $stageFifteenMedia !== ''}
  <section class="spx-stage-fifteen">
    <div class="content-1300-wrap spx-stage-fifteen-wrap">
      <div class="spx-stage-fifteen-head">
        <div class="spx-stage-fifteen-head-left">
          {if $stageFifteenEyebrow !== ''}
          <div class="spx-stage-fifteen-eyebrow spx-reveal">{$stageFifteenEyebrow|trim}</div>
          {/if}
          {if $stageFifteenTitle !== ''}
          <h2 class="spx-stage-fifteen-title spx-reveal spx-reveal--delay-1">{$stageFifteenTitle|trim}</h2>
          {/if}
        </div>
        {if $stageFifteenDesc !== ''}
        <div class="spx-stage-fifteen-desc spx-reveal spx-reveal--delay-2">{$stageFifteenDesc|trim|nl2br=###|raw}</div>
        {/if}
      </div>

      {if $stageFifteenMedia !== ''}
      <div class="spx-stage-fifteen-media">
        <div class="spx-stage-fifteen-media-shell">
          {if $stageFifteenIsVideo}
          <video class="spx-stage-fifteen-video" src="{$stageFifteenMedia}" autoplay muted playsinline preload="metadata" loop></video>
          {else /}
          <img class="spx-stage-fifteen-image" src="{$stageFifteenMedia}" alt="{$stageFifteenTitle|default=$title}">
          {/if}
        </div>
      </div>
      {/if}
    </div>
  </section>
  {/if}

  <?php
    $stageSixteenTitle = trim((string)($block['title_17_1'] ?? ''));
    $stageSixteenMedia = trim((string)($block['thumb_17'] ?? ''));
    $stageSixteenDesc = trim((string)($block['title_17_2'] ?? ''));
    $stageSixteenExt = $stageSixteenMedia ? strtolower(pathinfo(parse_url($stageSixteenMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageSixteenIsVideo = in_array($stageSixteenExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  {if $stageSixteenTitle !== '' || $stageSixteenMedia !== '' || $stageSixteenDesc !== ''}
  <section class="spx-stage-sixteen">
    <div class="content-1300-wrap spx-stage-sixteen-wrap">
      <div class="spx-stage-sixteen-copy spx-stage-sixteen-copy-top">
        {if $stageSixteenTitle !== ''}
        <h2 class="spx-stage-sixteen-title spx-reveal">{$stageSixteenTitle|trim}</h2>
        {/if}
      </div>

      {if $stageSixteenMedia !== ''}
      <div class="spx-stage-sixteen-media">
        <div class="spx-stage-sixteen-media-shell">
          {if $stageSixteenIsVideo}
          <video class="spx-stage-sixteen-video" src="{$stageSixteenMedia}" autoplay muted playsinline preload="metadata" loop></video>
          {else /}
          <img class="spx-stage-sixteen-image" src="{$stageSixteenMedia}" alt="{$stageSixteenTitle|default=$title}">
          {/if}
        </div>
      </div>
      {/if}

      {if $stageSixteenDesc !== ''}
      <div class="spx-stage-sixteen-copy spx-stage-sixteen-copy-bottom">
        <div class="spx-stage-sixteen-desc spx-reveal spx-reveal--delay-1">{$stageSixteenDesc|trim|nl2br=###|raw}</div>
      </div>
      {/if}
    </div>
  </section>
  {/if}

  <?php
    $stageSeventeenTitle = trim((string)($block['title_18_1'] ?? ''));
    $stageSeventeenDesc = trim((string)($block['title_18_2'] ?? ''));
    $stageSeventeenMedia = trim((string)($block['thumb_18'] ?? ''));
    $stageSeventeenNote = trim((string)($block['title_18_3'] ?? ''));
    $stageSeventeenExt = $stageSeventeenMedia ? strtolower(pathinfo(parse_url($stageSeventeenMedia, PHP_URL_PATH), PATHINFO_EXTENSION)) : '';
    $stageSeventeenIsVideo = in_array($stageSeventeenExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
  ?>
  {if $stageSeventeenTitle !== '' || $stageSeventeenDesc !== '' || $stageSeventeenMedia !== '' || $stageSeventeenNote !== ''}
  <section class="spx-stage-seventeen">
    <div class="content-1300-wrap spx-stage-seventeen-wrap">
      <div class="spx-stage-seventeen-copy spx-stage-seventeen-copy-top">
        {if $stageSeventeenTitle !== ''}
        <h2 class="spx-stage-seventeen-title spx-reveal">{$stageSeventeenTitle|trim}</h2>
        {/if}
        {if $stageSeventeenDesc !== ''}
        <div class="spx-stage-seventeen-desc spx-reveal spx-reveal--delay-1">{$stageSeventeenDesc|trim|nl2br=###|raw}</div>
        {/if}
      </div>

      {if $stageSeventeenMedia !== ''}
      <div class="spx-stage-seventeen-media">
        <div class="spx-stage-seventeen-media-shell">
          {if $stageSeventeenIsVideo}
          <video class="spx-stage-seventeen-video" src="{$stageSeventeenMedia}" autoplay muted playsinline preload="metadata" loop></video>
          {else /}
          <img class="spx-stage-seventeen-image" src="{$stageSeventeenMedia}" alt="{$stageSeventeenTitle|default=$title}">
          {/if}
        </div>
      </div>
      {/if}

      {if $stageSeventeenNote !== ''}
      <div class="spx-stage-seventeen-copy spx-stage-seventeen-copy-bottom">
        <div class="spx-stage-seventeen-note spx-reveal spx-reveal--delay-2">{$stageSeventeenNote|trim|nl2br=###|raw}</div>
      </div>
      {/if}
    </div>
  </section>
  {/if}
  {/volist}
  {/yzn}

  {yzn module="cms" action="lists" catid="46" where="$where" order="listorder asc,id desc" num="5" return="stageEighteenCards" moreinfo="1"}
  {if !empty($stageEighteenCards)}
  <section class="spx-stage-eighteen">
    <div class="content-1300-wrap spx-stage-eighteen-wrap">
      <div class="spx-stage-eighteen-grid">
        {volist name="stageEighteenCards" id="card" key="cardIndex"}
        <button class="spx-stage-eighteen-card spx-stage-eighteen-card-{$cardIndex}" type="button" aria-label="{$card.title|default='查看详情'|trim}" data-stage-eighteen-trigger="{$card.id}">
          <span class="spx-stage-eighteen-card-media">
            {if !empty($card.thumb)}
            <img class="spx-stage-eighteen-card-image" src="{$card.thumb}" alt="{$card.title|default=$title}">
            {else /}
            <span class="spx-stage-eighteen-card-placeholder"></span>
            {/if}
            <span class="spx-stage-eighteen-card-overlay"></span>
          </span>
          <span class="spx-stage-eighteen-card-title">{$card.title|default='Untitled'|trim}</span>
          <span class="spx-stage-eighteen-card-plus" aria-hidden="true"><i class="bi bi-plus-lg"></i></span>
        </button>
        {/volist}
      </div>
    </div>
  </section>

  <div class="spx-stage-eighteen-modal" id="stageEighteenModal" hidden>
    <div class="spx-stage-eighteen-modal__backdrop" data-stage-eighteen-close></div>
    <div class="spx-stage-eighteen-modal__dialog" role="dialog" aria-modal="true" aria-label="{:cms_t('combo_detail','组合详情')}">
      <button class="spx-stage-eighteen-modal__close" type="button" aria-label="{:cms_t('close','关闭')}" data-stage-eighteen-close>
        <i class="bi bi-x-lg"></i>
      </button>
      <div class="spx-stage-eighteen-modal__body">
        {volist name="stageEighteenCards" id="card" key="cardIndex"}
        <?php
          $normalizeStageEighteenList = function ($value) {
            if (is_array($value)) {
              $result = [];
              foreach ($value as $item) {
                $text = trim((string)$item);
                if ($text !== '') $result[] = $text;
              }
              return $result;
            }

            $text = trim((string)$value);
            if ($text === '') return [];

            $json = json_decode($text, true);
            if (is_array($json)) {
              $result = [];
              foreach ($json as $item) {
                $itemText = trim((string)$item);
                if ($itemText !== '') $result[] = $itemText;
              }
              return $result;
            }

            $unserialized = @unserialize($text);
            if (is_array($unserialized)) {
              $result = [];
              foreach ($unserialized as $item) {
                $itemText = trim((string)$item);
                if ($itemText !== '') $result[] = $itemText;
              }
              return $result;
            }

            $parts = preg_split('/\r\n|\r|\n|\|\|\||\|/', $text);
            $result = [];
            if (is_array($parts)) {
              foreach ($parts as $item) {
                $itemText = trim((string)$item);
                if ($itemText !== '') $result[] = $itemText;
              }
            }
            return $result;
          };

          $cardTitles = $normalizeStageEighteenList($card['titles'] ?? []);
          $cardContents = $normalizeStageEighteenList($card['contents'] ?? []);
          $cardThumbs = $normalizeStageEighteenList($card['thumbs'] ?? []);
          $cardFeatureCount = max(count($cardTitles), count($cardContents), count($cardThumbs));
        ?>
        <div class="spx-stage-eighteen-modal-panel{if $cardIndex == 1} is-active{/if}" data-stage-eighteen-panel="{$card.id}">
          <div class="spx-stage-eighteen-modal-hero">
            <div class="spx-stage-eighteen-modal-media">
              {if !empty($card.thumb)}
              <img class="spx-stage-eighteen-modal-image" src="{$card.thumb}" alt="{$card.title|default=$title}">
              {else /}
              <span class="spx-stage-eighteen-modal-image spx-stage-eighteen-modal-image--placeholder"></span>
              {/if}
              <span class="spx-stage-eighteen-modal-hero-overlay"></span>
              <div class="spx-stage-eighteen-modal-copy">
                <h3 class="spx-stage-eighteen-modal-title">{$card.title|default='Untitled'|trim}</h3>
              </div>
            </div>
          </div>

          <?php if ($cardFeatureCount > 0): ?>
          <div class="spx-stage-eighteen-modal-features">
            <?php for ($featureIndex = 0; $featureIndex < $cardFeatureCount; $featureIndex++): ?>
            <?php
              $featureTitle = trim((string)($cardTitles[$featureIndex] ?? ''));
              $featureContent = trim((string)($cardContents[$featureIndex] ?? ''));
              $featureThumb = trim((string)($cardThumbs[$featureIndex] ?? ''));
              $hasFeature = $featureTitle !== '' || $featureContent !== '' || $featureThumb !== '';
            ?>
            <?php if ($hasFeature): ?>
            <?php
              $featureExt = strtolower(pathinfo(parse_url($featureThumb, PHP_URL_PATH) ?: $featureThumb, PATHINFO_EXTENSION));
              $featureIsVideo = in_array($featureExt, ['mp4', 'webm', 'ogg', 'mov', 'm4v']);
            ?>
            <div class="spx-stage-eighteen-feature<?php echo $featureIndex % 2 === 1 ? ' is-reverse' : ''; ?>">
              <div class="spx-stage-eighteen-feature-copy">
                <?php if ($featureTitle !== ''): ?>
                <h4 class="spx-stage-eighteen-feature-title"><?php echo htmlspecialchars($featureTitle, ENT_QUOTES, 'UTF-8'); ?></h4>
                <?php endif; ?>
                <?php if ($featureContent !== ''): ?>
                <div class="spx-stage-eighteen-feature-desc"><?php echo nl2br(htmlspecialchars($featureContent, ENT_QUOTES, 'UTF-8')); ?></div>
                <?php endif; ?>
              </div>
              <div class="spx-stage-eighteen-feature-media<?php echo $featureThumb === '' ? ' is-empty' : ''; ?>">
                <?php if ($featureThumb !== ''): ?>
                  <?php if ($featureIsVideo): ?>
                  <video class="spx-stage-eighteen-feature-video" src="<?php echo htmlspecialchars($featureThumb, ENT_QUOTES, 'UTF-8'); ?>" autoplay muted loop playsinline preload="metadata"></video>
                  <?php else: ?>
                  <img class="spx-stage-eighteen-feature-image" src="<?php echo htmlspecialchars($featureThumb, ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($featureTitle !== '' ? $featureTitle : trim((string)$card['title']), ENT_QUOTES, 'UTF-8'); ?>">
                  <?php endif; ?>
                <?php endif; ?>
              </div>
            </div>
            <?php endif; ?>
            <?php endfor; ?>
          </div>
          <?php endif; ?>
        </div>
        {/volist}
      </div>
    </div>
  </div>
  {/if}
  {/yzn}

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

<script src="/assets/xtu/show-product.js?v=20260427-1848"></script>
{include file="footer" /}