index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. {include file="header" /}
  2. <main>
  3. <section class="hero-section">
  4. <div class="swiper hero-swiper" id="heroSwiper">
  5. <div class="swiper-wrapper">
  6. {yzn module="cms" action="lists" catid="2" order="listorder DESC" num="5" return="data" moreinfo="1"}
  7. {volist name="data" id="vo"}
  8. <div class="swiper-slide hero-slide minimal-hero-slide" data-bullet-title="{$vo.title}" data-is-b="{$vo.is_b|default='0'}">
  9. <div class="slide-media-layer">
  10. <img class="slide-poster" src="{$vo.thumb}" alt="poster">
  11. {if !empty($vo.video)}
  12. <video class="slide-video" playsinline preload="metadata" muted loop poster="{$vo.thumb}" data-video-group="hero">
  13. <source src="{$vo.video}" type="video/mp4">
  14. </video>
  15. {/if}
  16. </div>
  17. <div class="content-1300-wrap h-100 hero-stage-wrap">
  18. <div class="hero-slide-inner h-100 d-flex align-items-center justify-content-center hero-slide-layout">
  19. <div class="hero-copy hero-copy-minimal">
  20. <span class="hero-subtitle">
  21. {$vo.title1}
  22. </span>
  23. <h1>{$vo.title}</h1>
  24. <p class="hero-slogan">
  25. {$vo.title2}
  26. </p>
  27. <div class="hero-actions d-flex justify-content-center flex-wrap gap-3">
  28. <a href="{$vo.tourl}" class="btn {if !empty($vo.is_b)}btn-outline-dark{else /}btn-outline-light{/if} rounded-pill px-4 py-2">
  29. {:cms_t('learn_more','了解更多')}
  30. <i class="bi bi-chevron-right">
  31. </i>
  32. </a>
  33. {if !empty($vo.shopurl)}
  34. <a href="{$vo.shopurl}" class="btn {if !empty($vo.is_b)}btn-outline-dark{else /}btn-outline-light{/if} rounded-pill px-4 py-2" target="_blank" rel="noopener noreferrer">
  35. {:cms_t('buy_now','立即购买')}
  36. <i class="bi bi-chevron-right">
  37. </i>
  38. </a>
  39. {/if}
  40. </div>
  41. </div>
  42. <div class="hero-float-gallery">
  43. {if !empty($vo.thumb_1)}
  44. <div class="hero-float-card hero-float-card-1">
  45. <img src="{$vo.thumb_1}" alt="hero float 1">
  46. </div>
  47. {/if}
  48. {if !empty($vo.thumb_2)}
  49. <div class="hero-float-card hero-float-card-2">
  50. <img src="{$vo.thumb_2}" alt="hero float 2">
  51. </div>
  52. {/if}
  53. {if !empty($vo.thumb_3)}
  54. <div class="hero-float-card hero-float-card-3">
  55. <img src="{$vo.thumb_3}" alt="hero float 3">
  56. </div>
  57. {/if}
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. {/volist}
  63. {/yzn}
  64. </div>
  65. <button class="hero-arrow hero-prev hero-side-arrow">
  66. ‹
  67. </button>
  68. <button class="hero-arrow hero-next hero-side-arrow">
  69. ›
  70. </button>
  71. <div class="hero-swiper-controls">
  72. <div class="swiper-pagination hero-pagination">
  73. </div>
  74. </div>
  75. </div>
  76. </section>
  77. <section class="section-space image-grid-full hero-next-section-tight product-grid-unified">
  78. <div class="container-fluid px-3 product-grid-shell">
  79. <div class="row g-2 g-lg-3 product-grid-row">
  80. {yzn module="cms" action="lists" modelid="2" where="catid in(5,6,7)" flag="3" order="listorder DESC,id DESC" num="10" return="data" moreinfo="1"}
  81. {volist name="data" id="vo"}
  82. <div class="col-12 col-lg-6">
  83. <article class="overlay-card flat-card grid-card tall-card">
  84. <img src="{$vo.thumb2|default=$vo.thumb}" alt="card">
  85. <div class="overlay-copy top-copy product-tile-copy">
  86. <span class="product-subtitle">
  87. {$vo.title1}
  88. </span>
  89. <h3>
  90. {$vo.title}
  91. </h3>
  92. <p>
  93. {$vo.title2}
  94. </p>
  95. <div class="product-links">
  96. <a href="{$vo.url}">
  97. {:cms_t('learn_more','了解更多')} >
  98. </a>
  99. {if !empty($vo.shopurl)}
  100. <a href="{$vo.shopurl}" target="_blank" rel="noopener noreferrer">
  101. {:cms_t('buy_now','立即购买')} >
  102. </a>
  103. {/if}
  104. </div>
  105. </div>
  106. </article>
  107. </div>
  108. {/volist}
  109. {/yzn}
  110. </div>
  111. </div>
  112. </section>
  113. <section class="section-space guide-cards-section guide-section-unified">
  114. <div class="guide-section-shell">
  115. <div class="row guide-section-row">
  116. <div class="col-12">
  117. <article class="guide-card image-bg-card guide-card-full guide-card-edge">
  118. <img class="guide-bg" src="{:getCategory(41,'image')}" alt="{:getCategory(41,'catname')}">
  119. <div class="content-1300-wrap guide-content-wrap">
  120. <div class="guide-copy">
  121. <span class="guide-eyebrow">
  122. {:getCategory(41,'catname')}
  123. </span>
  124. <h3>
  125. {:getCategory(41,'description')}
  126. </h3>
  127. <div class="guide-actions">
  128. <a href="{:getCategory(41,'url')}" class="ui-pill-btn ui-pill-btn-dark">
  129. {:cms_t('product_compare','产品对比')}
  130. </a>
  131. <a href="{:getCategory(41,'url')}" class="guide-link">
  132. {:cms_t('help_me_choose','帮我选择')}
  133. </a>
  134. </div>
  135. </div>
  136. </div>
  137. </article>
  138. </div>
  139. </div>
  140. </div>
  141. </section>
  142. <section class="section-space cloud-banner-section cloud-banner-section-unified">
  143. <article class="cloud-banner-card cloud-banner-card-edge" style="background-image:url('/assets/xtu/vendor/img/appbanner.jpg');">
  144. <div class="content-1300-wrap cloud-banner-content-wrap h-100">
  145. <div class="cloud-banner-left-half">
  146. <div class="cloud-copy cloud-copy-centered text-center text-lg-start">
  147. <div class="cloud-logo-mark">
  148. <img src="/assets/xtu/vendor/img/xtugo.png" alt="{:getCategory(42,'catname')}">
  149. </div>
  150. <div class="cloud-actions">
  151. <a href=" {:getCategory(42,'url')}" class="ui-pill-btn ui-pill-btn-dark" target="_blank">
  152. {:cms_t('learn_more','了解更多')} >
  153. </a>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </article>
  159. </section>
  160. <section class="section-space showcase-slider">
  161. <div class="content-1300-wrap showcase-head-wrap">
  162. <div class="section-head showcase-section-head mb-4">
  163. <h2>
  164. 走进骁途
  165. </h2>
  166. </div>
  167. </div>
  168. <div class="container-fluid px-3 px-lg-4 px-xxl-5">
  169. <div class="swiper showcase-swiper" id="showcaseSwiper">
  170. <div class="swiper-wrapper">
  171. {yzn module="cms" action="lists" catid="12" order="listorder DESC" num="10" return="data" moreinfo="1"}
  172. {volist name="data" id="vo"}
  173. <a class="swiper-slide showcase-card equal-card" href="{$vo.tourl}">
  174. <img src="{$vo.thumb}" alt="side">
  175. <div class="showcase-copy text-center text-white">
  176. <span>
  177. {$vo.title}
  178. </span>
  179. <h3>
  180. {$vo.title1}
  181. </h3>
  182. </div>
  183. </a>
  184. {/volist}
  185. {/yzn}
  186. </div>
  187. <button class="showcase-arrow showcase-prev" aria-label="上一张">
  188. <i class="bi bi-chevron-left"></i>
  189. </button>
  190. <button class="showcase-arrow showcase-next" aria-label="下一张">
  191. <i class="bi bi-chevron-right"></i>
  192. </button>
  193. <div class="swiper-pagination showcase-pagination">
  194. </div>
  195. </div>
  196. </div>
  197. </section>
  198. <section class="section-space industry-strip-section industry-strip-clean">
  199. <div class="content-1300-wrap">
  200. {yzn module="cms" action="lists" catid="13" order="listorder DESC" num="1" return="data" moreinfo="1"}
  201. {volist name="data" id="vo"}
  202. <div class="row align-items-center g-3 g-lg-4 industry-clean-row">
  203. <div class="col-12 col-lg-5">
  204. <div class="industry-copy industry-copy-clean text-center text-lg-start">
  205. <span class="industry-eyebrow">
  206. {$vo.title}
  207. </span>
  208. <h2>
  209. {$vo.title1}
  210. </h2>
  211. <a href="{:getCategory(55,'url')}" class="ui-btn ui-btn-primary">
  212. {:cms_t('learn_more','了解更多')}
  213. </a>
  214. </div>
  215. </div>
  216. <div class="col-12 col-lg-7">
  217. <div class="industry-image-clean">
  218. <img src="{$vo.thumb}" alt="industry visual">
  219. </div>
  220. </div>
  221. </div>
  222. {/volist}
  223. {/yzn}
  224. </div>
  225. </section>
  226. <section class="section-space support-links-section">
  227. <div class="content-1300-wrap">
  228. <div class="support-quick-layout">
  229. {yzn module="cms" action="lists" catid="58" cache="3600" order="listorder DESC,id ASC" num="4" return="supportQuickServices" moreinfo="1"}
  230. <div class="support-quick-row support-quick-row-four">
  231. {volist name="supportQuickServices" id="vo" key="k"}
  232. {php}
  233. $supportQuickUrl = trim((string)($vo['tourl'] ?? ''));
  234. $supportQuickTag = ($supportQuickUrl === '') ? 'div' : 'a';
  235. {/php}
  236. <div class="support-quick-col">
  237. {if $supportQuickTag=='a'}
  238. <a href="{$supportQuickUrl}" class="support-link-card support-quick-card" target="{$vo.target|default='_self'}">
  239. {else /}
  240. <div class="support-link-card support-quick-card">
  241. {/if}
  242. {if !empty($vo.thumb)}<img class="support-icon" src="{$vo.thumb}" alt="{$vo.title}">{/if}
  243. <div class="support-text">{$vo.title}</div>
  244. {if !empty($vo.title1)}<div class="support-desc">{$vo.title1}</div>{/if}
  245. {if !empty($vo.title2)}<div class="support-desc support-desc-muted">{$vo.title2}</div>{/if}
  246. {if $supportQuickTag=='a'}
  247. </a>
  248. {else /}
  249. </div>
  250. {/if}
  251. </div>
  252. {/volist}
  253. </div>
  254. {/yzn}
  255. </div>
  256. </div>
  257. </section>
  258. {include file="footer-links" /}
  259. </main>
  260. {include file="footer" /}