index.html 40 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>
  7. XTU骁途官网
  8. </title>
  9. <link rel="stylesheet" href="./vendor/bootstrap.min.css">
  10. <link rel="stylesheet" href="./vendor/bootstrap-icons.min.css">
  11. <link rel="stylesheet" href="./vendor/swiper-bundle.min.css">
  12. <link rel="stylesheet" href="./shared.css">
  13. <link rel="stylesheet" href="./styles.css">
  14. </head>
  15. <body>
  16. <header class="site-header fixed-top" id="siteHeader">
  17. <div class="nav-inner-wrap">
  18. <nav class="navbar navbar-expand-lg py-3">
  19. <div class="container-fluid px-0 align-items-center nav-shell">
  20. <a class="navbar-brand logo me-0" href="#">
  21. </a>
  22. <div class="collapse navbar-collapse ms-lg-4" id="mainNavbar">
  23. <ul class="navbar-nav gap-lg-2 gap-xl-3 align-items-lg-center">
  24. <li class="nav-item">
  25. <a class="nav-link" href="#">
  26. 经典运动相机
  27. </a>
  28. </li>
  29. <li class="nav-item">
  30. <a class="nav-link" href="#">
  31. 拇指运动相机
  32. </a>
  33. </li>
  34. <li class="nav-item">
  35. <a class="nav-link" href="#">
  36. 方块运动相机
  37. </a>
  38. </li>
  39. <li class="nav-item">
  40. <a class="nav-link" href="#">
  41. 服务与支持
  42. </a>
  43. </li>
  44. <li class="nav-item">
  45. <a class="nav-link" href="#">
  46. 精彩XTU
  47. </a>
  48. </li>
  49. <li class="nav-item dropdown">
  50. <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
  51. 关于我们
  52. </a>
  53. <ul class="dropdown-menu border-0 shadow-lg rounded-0">
  54. <li>
  55. <a class="dropdown-item" href="#">
  56. 公司简介
  57. </a>
  58. </li>
  59. <li>
  60. <a class="dropdown-item" href="#">
  61. 文化理念
  62. </a>
  63. </li>
  64. <li>
  65. <a class="dropdown-item" href="#">
  66. 企业社会责任
  67. </a>
  68. </li>
  69. <li>
  70. <a class="dropdown-item" href="#">
  71. 创始人寄语
  72. </a>
  73. </li>
  74. <li>
  75. <a class="dropdown-item" href="#">
  76. 企业发展历程
  77. </a>
  78. </li>
  79. </ul>
  80. </li>
  81. </ul>
  82. <div class="nav-mobile-extras d-lg-none">
  83. <div class="nav-mobile-premium-grid">
  84. <button class="nav-glass-btn nav-mobile-premium-btn" id="openSearchModalMobile" aria-label="搜索">
  85. <span class="nav-glass-icon">
  86. ⌕
  87. </span>
  88. <span class="nav-glass-text">
  89. 搜索
  90. </span>
  91. </button>
  92. <button class="nav-glass-btn nav-mobile-premium-btn" id="openLanguageModalMobile" aria-label="切换地区">
  93. <span class="nav-glass-icon">
  94. ◍
  95. </span>
  96. <span class="nav-glass-text">
  97. 中国大陆
  98. </span>
  99. </button>
  100. <a href="#" class="nav-glass-btn nav-glass-btn-shop nav-mobile-premium-btn nav-mobile-premium-wide">
  101. <span class="nav-glass-icon">
  102. 🛍
  103. </span>
  104. <span class="nav-glass-text">
  105. 进入商城
  106. </span>
  107. </a>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="nav-right d-flex align-items-center gap-2 ms-auto">
  112. <button class="nav-glass-btn d-none d-lg-inline-flex" id="openSearchModal" aria-label="搜索">
  113. <span class="nav-glass-icon">
  114. <i class="bi bi-search">
  115. </i>
  116. </span>
  117. <span class="nav-glass-text">
  118. 搜索
  119. </span>
  120. </button>
  121. <button class="nav-glass-btn nav-glass-btn-wide d-none d-lg-inline-flex" id="openLanguageModal" aria-label="切换地区">
  122. <span class="nav-glass-icon">
  123. <i class="bi bi-globe2">
  124. </i>
  125. </span>
  126. <span class="nav-glass-text">
  127. 中国大陆
  128. </span>
  129. </button>
  130. <a href="#" class="nav-glass-btn nav-glass-btn-shop d-none d-lg-inline-flex">
  131. <span class="nav-glass-icon">
  132. <i class="bi bi-bag">
  133. </i>
  134. </span>
  135. <span class="nav-glass-text">
  136. 商城
  137. </span>
  138. </a>
  139. <button class="navbar-toggler border-0 shadow-none px-0 ms-1" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="切换导航">
  140. <span class="navbar-toggler-icon">
  141. </span>
  142. </button>
  143. </div>
  144. </div>
  145. </nav>
  146. </div>
  147. </header>
  148. <main>
  149. <section class="hero-section">
  150. <div class="swiper hero-swiper" id="heroSwiper">
  151. <div class="swiper-wrapper">
  152. <div class="swiper-slide hero-slide minimal-hero-slide">
  153. <div class="slide-media-layer">
  154. <img class="slide-poster" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80" alt="poster">
  155. <video class="slide-video" playsinline preload="none" muted data-video-group="hero">
  156. </video>
  157. </div>
  158. <div class="container-fluid px-3 px-lg-4 px-xxl-5 h-100">
  159. <div class="hero-slide-inner h-100 d-flex align-items-center justify-content-center text-center">
  160. <div class="hero-copy hero-copy-minimal">
  161. <span class="hero-subtitle">
  162. 三摄影像旗舰飞行平台
  163. </span>
  164. <h1>
  165. AERO MAVIC 4
  166. <span>
  167. PRO
  168. </span>
  169. </h1>
  170. <p class="hero-slogan">
  171. 天地为你所动
  172. </p>
  173. <div class="hero-actions d-flex justify-content-center flex-wrap gap-3">
  174. <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
  175. 了解更多
  176. <i class="bi bi-chevron-right">
  177. </i>
  178. </a>
  179. <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
  180. 立即购买
  181. <i class="bi bi-chevron-right">
  182. </i>
  183. </a>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. <div class="swiper-slide hero-slide minimal-hero-slide alt-hero-slide hero-slide-two">
  190. <div class="container-fluid px-3 px-lg-4 px-xxl-5 h-100">
  191. <div class="hero-slide-inner h-100 d-flex align-items-center justify-content-center text-center">
  192. <div class="hero-copy hero-copy-minimal">
  193. <span class="hero-subtitle">
  194. 旗舰手持影像系统
  195. </span>
  196. <h1>
  197. AERO OSMO
  198. <span>
  199. PRO
  200. </span>
  201. </h1>
  202. <p class="hero-slogan">
  203. 稳定,自然,灵动呈现
  204. </p>
  205. <div class="hero-actions d-flex justify-content-center flex-wrap gap-3">
  206. <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
  207. 了解更多
  208. <i class="bi bi-chevron-right"></i>
  209. </a>
  210. <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
  211. 立即购买
  212. <i class="bi bi-chevron-right"></i>
  213. </a>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. <div class="swiper-slide hero-slide minimal-hero-slide alt-hero-slide hero-slide-three">
  220. <div class="container-fluid px-3 px-lg-4 px-xxl-5 h-100">
  221. <div class="hero-slide-inner h-100 d-flex align-items-center justify-content-center text-center">
  222. <div class="hero-copy hero-copy-minimal">
  223. <span class="hero-subtitle">
  224. 专业创作影像套装
  225. </span>
  226. <h1>
  227. AERO CINEMA
  228. <span>
  229. AIR
  230. </span>
  231. </h1>
  232. <p class="hero-slogan">
  233. 灵感升空,画面落定
  234. </p>
  235. <div class="hero-actions d-flex justify-content-center flex-wrap gap-3">
  236. <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
  237. 了解更多
  238. <i class="bi bi-chevron-right">
  239. </i>
  240. </a>
  241. <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2">
  242. 立即购买
  243. <i class="bi bi-chevron-right">
  244. </i>
  245. </a>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <button class="hero-arrow hero-prev hero-side-arrow">
  253. ‹
  254. </button>
  255. <button class="hero-arrow hero-next hero-side-arrow">
  256. ›
  257. </button>
  258. <div class="hero-swiper-controls">
  259. <div class="swiper-pagination hero-pagination">
  260. </div>
  261. </div>
  262. </div>
  263. </section>
  264. <section class="section-space image-grid-full">
  265. <div class="container-fluid px-3 px-lg-4 px-xxl-5">
  266. <div class="row g-2 g-lg-3">
  267. <div class="col-12 col-lg-6">
  268. <article class="overlay-card flat-card grid-card tall-card">
  269. <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?auto=format&fit=crop&w=1600&q=80" alt="card">
  270. <div class="overlay-copy top-copy product-tile-copy">
  271. <span class="product-subtitle">
  272. 8K 超旗舰画质全景相机
  273. </span>
  274. <h3>
  275. OSMO 360
  276. </h3>
  277. <p>
  278. 一寸见乾坤
  279. </p>
  280. <div class="product-links">
  281. <a href="#">
  282. 了解更多 >
  283. </a>
  284. <a href="#">
  285. 立即购买 >
  286. </a>
  287. </div>
  288. </div>
  289. </article>
  290. </div>
  291. <div class="col-12 col-lg-6">
  292. <article class="overlay-card flat-card grid-card small-card">
  293. <img src="https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1600&q=80" alt="card">
  294. <div class="overlay-copy top-copy product-tile-copy">
  295. <span class="product-subtitle">
  296. 轻量级城市影像拍摄方案
  297. </span>
  298. <h3>
  299. AERO MINI
  300. </h3>
  301. <p>
  302. 随行轻装,灵感就位
  303. </p>
  304. <div class="product-links">
  305. <a href="#">
  306. 了解更多 >
  307. </a>
  308. <a href="#">
  309. 立即购买 >
  310. </a>
  311. </div>
  312. </div>
  313. </article>
  314. </div>
  315. <div class="col-12 col-lg-6">
  316. <article class="overlay-card flat-card grid-card small-card">
  317. <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1600&q=80" alt="card">
  318. <div class="overlay-copy top-copy product-tile-copy">
  319. <span class="product-subtitle">
  320. 专业级稳定系统与协同控制
  321. </span>
  322. <h3>
  323. RONIN AIR
  324. </h3>
  325. <p>
  326. 稳定输出,镜头更自由
  327. </p>
  328. <div class="product-links">
  329. <a href="#">
  330. 了解更多 >
  331. </a>
  332. <a href="#">
  333. 立即购买 >
  334. </a>
  335. </div>
  336. </div>
  337. </article>
  338. </div>
  339. <div class="col-12 col-lg-6">
  340. <article class="overlay-card flat-card grid-card tall-card">
  341. <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1600&q=80" alt="card">
  342. <div class="overlay-copy top-copy product-tile-copy">
  343. <span class="product-subtitle">
  344. 专业创作影像套装一体协同
  345. </span>
  346. <h3>
  347. CINEMA AIR
  348. </h3>
  349. <p>
  350. 故事起飞,画面抵达
  351. </p>
  352. <div class="product-links">
  353. <a href="#">
  354. 了解更多 >
  355. </a>
  356. <a href="#">
  357. 立即购买 >
  358. </a>
  359. </div>
  360. </div>
  361. </article>
  362. </div>
  363. </div>
  364. </div>
  365. </section>
  366. <section class="section-space guide-cards-section">
  367. <div class="content-1300-wrap">
  368. <div class="row g-3 g-lg-4">
  369. <div class="col-12 col-lg-6">
  370. <article class="guide-card image-bg-card">
  371. <img class="guide-bg" src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1400&q=80" alt="guide visual">
  372. <div class="guide-copy">
  373. <span class="guide-eyebrow">
  374. 选购指南
  375. </span>
  376. <h3>
  377. 产品对比和推荐
  378. </h3>
  379. <div class="guide-actions">
  380. <a href="#" class="ui-pill-btn ui-pill-btn-dark">
  381. 产品对比
  382. </a>
  383. <a href="#" class="guide-link">
  384. 帮我选择
  385. </a>
  386. </div>
  387. </div>
  388. </article>
  389. </div>
  390. <div class="col-12 col-lg-6">
  391. <article class="guide-card image-bg-card">
  392. <img class="guide-bg" src="https://images.unsplash.com/photo-1498049794561-7780e7231661?auto=format&fit=crop&w=1400&q=80" alt="guide visual">
  393. <div class="guide-copy">
  394. <span class="guide-eyebrow">
  395. 精选配件
  396. </span>
  397. <h3>
  398. 官方正品装备,
  399. <br>
  400. 让创作更出彩。
  401. </h3>
  402. <div class="guide-actions">
  403. <a href="#" class="ui-pill-btn ui-pill-btn-dark">
  404. 立即购买
  405. </a>
  406. </div>
  407. </div>
  408. </article>
  409. </div>
  410. </div>
  411. </div>
  412. </section>
  413. <section class="section-space cloud-banner-section">
  414. <div class="content-1300-wrap">
  415. <article class="cloud-banner-card">
  416. <div class="row align-items-center g-3 g-lg-4 h-100">
  417. <div class="col-12 col-lg-4">
  418. <div class="cloud-copy text-center text-lg-start">
  419. <div class="cloud-logo">
  420. Aero360+
  421. </div>
  422. <div class="cloud-subtitle">
  423. 你的全景云相册
  424. </div>
  425. <span class="cloud-mini-tag">
  426. 云服务
  427. </span>
  428. <div class="cloud-actions">
  429. <a href="#" class="ui-pill-btn ui-pill-btn-dark">
  430. 了解更多
  431. </a>
  432. </div>
  433. </div>
  434. </div>
  435. <div class="col-12 col-lg-8">
  436. <div class="cloud-media-wrap single-device-wrap">
  437. <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">
  438. </div>
  439. </div>
  440. </div>
  441. </article>
  442. </div>
  443. </section>
  444. <section class="section-space showcase-slider">
  445. <div class="container-fluid px-3 px-lg-4 px-xxl-5">
  446. <div class="section-head text-center mb-4">
  447. <span class="tag dark">
  448. 精选展示
  449. </span>
  450. <h2>
  451. 三屏同页展示模式
  452. </h2>
  453. </div>
  454. <div class="swiper showcase-swiper" id="showcaseSwiper">
  455. <div class="swiper-wrapper">
  456. <div class="swiper-slide showcase-card equal-card">
  457. <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80" alt="side">
  458. <div class="showcase-copy text-center text-white">
  459. <span>
  460. 拍摄设备
  461. </span>
  462. <h3>
  463. AERO MAVIC 4 PRO
  464. </h3>
  465. <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
  466. <a href="#">
  467. 了解更多
  468. </a>
  469. </div>
  470. </div>
  471. </div>
  472. <div class="swiper-slide showcase-card equal-card">
  473. <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80" alt="showcase">
  474. <div class="showcase-copy text-center text-white">
  475. <span>
  476. 探索场景
  477. </span>
  478. <h3>
  479. LANDSCAPE VISION
  480. </h3>
  481. <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
  482. <a href="#">
  483. 查看影像
  484. </a>
  485. <a href="#">
  486. 探索更多
  487. </a>
  488. </div>
  489. </div>
  490. </div>
  491. <div class="swiper-slide showcase-card equal-card">
  492. <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1200&q=80" alt="side">
  493. <div class="showcase-copy text-center text-white">
  494. <span>
  495. 影像表达
  496. </span>
  497. <h3>
  498. CINEMA AERIAL
  499. </h3>
  500. <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
  501. <a href="#">
  502. 立即了解
  503. </a>
  504. </div>
  505. </div>
  506. </div>
  507. <div class="swiper-slide showcase-card equal-card">
  508. <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1200&q=80" alt="side">
  509. <div class="showcase-copy text-center text-white">
  510. <span>
  511. 旅行创作
  512. </span>
  513. <h3>
  514. ALPINE VIEW
  515. </h3>
  516. <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
  517. <a href="#">
  518. 查看详情
  519. </a>
  520. </div>
  521. </div>
  522. </div>
  523. <div class="swiper-slide showcase-card equal-card">
  524. <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1600&q=80" alt="showcase">
  525. <div class="showcase-copy text-center text-white">
  526. <span>
  527. 内容创作
  528. </span>
  529. <h3>
  530. CINEMA AERIAL SET
  531. </h3>
  532. <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
  533. <a href="#">
  534. 立即了解
  535. </a>
  536. <a href="#">
  537. 进入专题
  538. </a>
  539. </div>
  540. </div>
  541. </div>
  542. <div class="swiper-slide showcase-card equal-card">
  543. <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1200&q=80" alt="side">
  544. <div class="showcase-copy text-center text-white">
  545. <span>
  546. 旗舰设备
  547. </span>
  548. <h3>
  549. PRO SERIES
  550. </h3>
  551. <div class="showcase-links d-flex justify-content-center gap-4 flex-wrap">
  552. <a href="#">
  553. 立即购买
  554. </a>
  555. </div>
  556. </div>
  557. </div>
  558. </div>
  559. <button class="showcase-arrow showcase-prev">
  560. ‹
  561. </button>
  562. <button class="showcase-arrow showcase-next">
  563. ›
  564. </button>
  565. <div class="swiper-pagination showcase-pagination">
  566. </div>
  567. </div>
  568. </div>
  569. </section>
  570. <section class="section-space industry-strip-section">
  571. <div class="content-1300-wrap">
  572. <article class="industry-strip-card">
  573. <div class="row align-items-center g-3 g-lg-4">
  574. <div class="col-12 col-lg-4">
  575. <div class="industry-copy text-center text-lg-start">
  576. <span class="industry-eyebrow">
  577. 行业应用
  578. </span>
  579. <h2>
  580. 相机创造商机
  581. </h2>
  582. <a href="#" class="ui-btn ui-btn-primary">
  583. 了解更多
  584. </a>
  585. </div>
  586. </div>
  587. <div class="col-12 col-lg-8">
  588. <div class="industry-gallery">
  589. <div class="industry-main">
  590. <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80" alt="industry visual">
  591. </div>
  592. <div class="industry-side-grid">
  593. <div class="industry-side large">
  594. <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80" alt="industry visual">
  595. </div>
  596. <div class="industry-side">
  597. <img src="https://images.unsplash.com/photo-1581092918484-8313a64fda0c?auto=format&fit=crop&w=900&q=80" alt="industry visual">
  598. </div>
  599. <div class="industry-side">
  600. <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=900&q=80" alt="industry visual">
  601. </div>
  602. </div>
  603. </div>
  604. </div>
  605. </div>
  606. </article>
  607. </div>
  608. </section>
  609. <section class="section-space support-links-section">
  610. <div class="content-1300-wrap">
  611. <div class="row g-3 g-lg-4">
  612. <div class="col-6 col-lg-3">
  613. <a href="#" class="support-link-card">
  614. <img class="support-icon" src="./vendor/icon-consult.svg" alt="产品专家帮您选购">
  615. <div class="support-text">
  616. 产品专家帮您选购
  617. </div>
  618. </a>
  619. </div>
  620. <div class="col-6 col-lg-3">
  621. <a href="#" class="support-link-card">
  622. <img class="support-icon" src="./vendor/icon-help.svg" alt="使用帮助">
  623. <div class="support-text">
  624. 使用帮助
  625. </div>
  626. </a>
  627. </div>
  628. <div class="col-6 col-lg-3">
  629. <a href="#" class="support-link-card">
  630. <span class="support-icon support-bi">
  631. <i class="bi bi-download">
  632. </i>
  633. </span>
  634. <div class="support-text">
  635. 下载
  636. </div>
  637. </a>
  638. </div>
  639. <div class="col-6 col-lg-3">
  640. <a href="#" class="support-link-card">
  641. <span class="support-icon support-bi">
  642. <i class="bi bi-headset">
  643. </i>
  644. </span>
  645. <div class="support-text">
  646. 售后服务
  647. </div>
  648. </a>
  649. </div>
  650. </div>
  651. </div>
  652. </section>
  653. <section class="section-space zoom-section business-entry-section">
  654. <div class="content-1200-wrap">
  655. <div class="section-head text-center business-head">
  656. <h2>
  657. 创新业务入口
  658. </h2>
  659. </div>
  660. <div class="row g-2 g-lg-3 business-row-tight">
  661. <div class="col-12 col-lg-4">
  662. <article class="zoom-card business-card h-100">
  663. <div class="zoom-media">
  664. <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=80" alt="module">
  665. </div>
  666. <div class="business-copy text-center three-line-copy">
  667. <h3>
  668. 企业业务展示
  669. </h3>
  670. <p>
  671. 适合放企业介绍、主营方向与服务能力概览。
  672. </p>
  673. <a href="#">
  674. 了解更多 >
  675. </a>
  676. </div>
  677. </article>
  678. </div>
  679. <div class="col-12 col-lg-4">
  680. <article class="zoom-card business-card h-100">
  681. <div class="zoom-media">
  682. <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=80" alt="module">
  683. </div>
  684. <div class="business-copy text-center three-line-copy">
  685. <h3>
  686. 服务能力说明
  687. </h3>
  688. <p>
  689. 突出服务流程、交付能力与项目执行优势。
  690. </p>
  691. <a href="#">
  692. 了解更多 >
  693. </a>
  694. </div>
  695. </article>
  696. </div>
  697. <div class="col-12 col-lg-4">
  698. <article class="zoom-card business-card h-100">
  699. <div class="zoom-media">
  700. <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80" alt="module">
  701. </div>
  702. <div class="business-copy text-center three-line-copy">
  703. <h3>
  704. 合作与生态
  705. </h3>
  706. <p>
  707. 这一组更适合放合作伙伴、渠道生态或业务入口。
  708. </p>
  709. <a href="#">
  710. 了解更多 >
  711. </a>
  712. </div>
  713. </article>
  714. </div>
  715. </div>
  716. </div>
  717. </section>
  718. <section class="section-space footer-links-section footer-dual-section">
  719. <div class="content-1300-wrap">
  720. <div class="footer-dual-layout">
  721. <div class="footer-left-panel">
  722. <div class="footer-nav-grid">
  723. <div class="footer-nav-col">
  724. <h3>
  725. 热门产品分类
  726. </h3>
  727. <a href="#">
  728. 运动相机
  729. </a>
  730. <a href="#">
  731. 拇指相机
  732. </a>
  733. </div>
  734. <div class="footer-nav-col">
  735. <h3>
  736. 线上商城
  737. </h3>
  738. <a href="#">
  739. 官方商城
  740. </a>
  741. <a href="#">
  742. 平台官方渠道
  743. </a>
  744. </div>
  745. <div class="footer-nav-col">
  746. <h3>
  747. 服务与支持
  748. </h3>
  749. <a href="#">
  750. 使用帮助
  751. </a>
  752. <a href="#">
  753. 维修服务
  754. </a>
  755. <a href="#">
  756. 售后服务
  757. </a>
  758. <a href="#">
  759. 软件下载
  760. </a>
  761. <a href="#">
  762. 固件更新
  763. </a>
  764. </div>
  765. <div class="footer-nav-col">
  766. <h3>
  767. 申请合作
  768. </h3>
  769. <a href="#">
  770. 联系我们
  771. </a>
  772. <a href="#">
  773. 成为推广大使
  774. </a>
  775. <a href="#">
  776. 成为经销商
  777. </a>
  778. <a href="#">
  779. 行业应用
  780. </a>
  781. </div>
  782. <div class="footer-nav-col">
  783. <h3>
  784. 关于我们
  785. </h3>
  786. <a href="#">
  787. 公司简介
  788. </a>
  789. <a href="#">
  790. 品牌新闻
  791. </a>
  792. <a href="#">
  793. 投稿活动
  794. </a>
  795. <a href="#">
  796. 加入我们
  797. </a>
  798. <a href="#">
  799. 社区论坛
  800. </a>
  801. </div>
  802. </div>
  803. </div>
  804. <aside class="footer-right-panel">
  805. <div class="footer-side-card footer-subscribe-card premium-subscribe-card compact-subscribe-card">
  806. <div class="premium-subscribe-top compact-subscribe-top">
  807. <span class="footer-side-tag footer-side-tag-light premium-side-tag">
  808. 订阅我们
  809. </span>
  810. <h3>
  811. 获取新品发布与品牌动态
  812. </h3>
  813. </div>
  814. <div class="footer-form-box footer-form-dark premium-form-box compact-form-box">
  815. <div class="footer-input-wrap premium-input-wrap compact-input-wrap">
  816. <input type="email" class="footer-email-input footer-email-dark premium-email-input" placeholder="请输入邮箱地址">
  817. <button class="footer-mail-btn premium-mail-btn" aria-label="提交">
  818. 订阅
  819. </button>
  820. </div>
  821. </div>
  822. <div class="footer-social-block compact-social-block">
  823. <div class="footer-social-title">
  824. 关注我们
  825. </div>
  826. <div class="footer-social-row premium-social-row compact-social-row">
  827. <div class="footer-social-item premium-social-item">
  828. <span class="social-dot premium-social-dot">
  829. 微
  830. </span>
  831. <div class="footer-qr-pop premium-qr-pop">
  832. <img src="./vendor/qr-placeholder.svg" alt="微信公众号二维码">
  833. <span>
  834. 微信公众号
  835. </span>
  836. </div>
  837. </div>
  838. <div class="footer-social-item premium-social-item">
  839. <span class="social-dot premium-social-dot">
  840. 信
  841. </span>
  842. <div class="footer-qr-pop premium-qr-pop">
  843. <img src="./vendor/qr-placeholder.svg" alt="微信客服二维码">
  844. <span>
  845. 微信客服
  846. </span>
  847. </div>
  848. </div>
  849. <div class="footer-social-item premium-social-item">
  850. <span class="social-dot premium-social-dot">
  851. 博
  852. </span>
  853. <div class="footer-qr-pop premium-qr-pop">
  854. <img src="./vendor/qr-placeholder.svg" alt="微博二维码">
  855. <span>
  856. 官方微博
  857. </span>
  858. </div>
  859. </div>
  860. <div class="footer-social-item premium-social-item">
  861. <span class="social-dot premium-social-dot">
  862. 抖
  863. </span>
  864. <div class="footer-qr-pop premium-qr-pop">
  865. <img src="./vendor/qr-placeholder.svg" alt="抖音二维码">
  866. <span>
  867. 官方抖音
  868. </span>
  869. </div>
  870. </div>
  871. </div>
  872. </div>
  873. </div>
  874. </aside>
  875. </div>
  876. </div>
  877. </section>
  878. </main>
  879. <div class="custom-modal" id="searchModal" aria-hidden="true">
  880. <div class="custom-modal-dialog custom-modal-dialog-search">
  881. <div class="custom-modal-box search-modal-box">
  882. <div class="custom-modal-head search-modal-head">
  883. <div>
  884. <div class="modal-kicker">
  885. Quick Search
  886. </div>
  887. <h2 class="modal-title">
  888. 搜索你感兴趣的内容
  889. </h2>
  890. </div>
  891. <button class="custom-modal-close" data-close-modal="searchModal" aria-label="关闭">
  892. ×
  893. </button>
  894. </div>
  895. <div class="custom-modal-body">
  896. <p class="search-modal-desc">
  897. 从产品、解决方案、服务支持到品牌资讯,快速找到你想看的页面。
  898. </p>
  899. <form class="search-modal-form" action="#" method="get">
  900. <div class="search-input-shell">
  901. <span class="search-input-icon">
  902. ⌕
  903. </span>
  904. <input type="search" class="search-modal-input" placeholder="搜索产品 / 方案 / 帮助文档">
  905. </div>
  906. <button type="submit" class="search-submit-btn">
  907. 开始搜索
  908. </button>
  909. </form>
  910. <div class="search-hot-words">
  911. <span>
  912. 热门搜索
  913. </span>
  914. <a href="#">
  915. 旗舰飞行器
  916. </a>
  917. <a href="#">
  918. 手持影像
  919. </a>
  920. <a href="#">
  921. 行业方案
  922. </a>
  923. <a href="#">
  924. 售后服务
  925. </a>
  926. </div>
  927. </div>
  928. </div>
  929. </div>
  930. </div>
  931. <div class="custom-modal" id="languageModal" aria-hidden="true">
  932. <div class="custom-modal-dialog custom-modal-dialog-language">
  933. <div class="custom-modal-box language-modal-box">
  934. <div class="custom-modal-head language-modal-head">
  935. <div>
  936. <div class="modal-kicker">
  937. Region
  938. &
  939. Language
  940. </div>
  941. <h2 class="modal-title">
  942. 选择语言与地区
  943. </h2>
  944. </div>
  945. <button class="custom-modal-close" data-close-modal="languageModal" aria-label="关闭">
  946. ×
  947. </button>
  948. </div>
  949. <div class="custom-modal-body">
  950. <div class="language-list premium-language-list">
  951. <button class="language-option premium-language-option active" type="button">
  952. <div>
  953. <strong>
  954. 简体中文
  955. </strong>
  956. <span>
  957. 中国大陆
  958. </span>
  959. </div>
  960. <em>
  961. 当前
  962. </em>
  963. </button>
  964. <button class="language-option premium-language-option" type="button">
  965. <div>
  966. <strong>
  967. English
  968. </strong>
  969. <span>
  970. Global / International
  971. </span>
  972. </div>
  973. <em>
  974. EN
  975. </em>
  976. </button>
  977. <button class="language-option premium-language-option" type="button">
  978. <div>
  979. <strong>
  980. 繁體中文
  981. </strong>
  982. <span>
  983. 中國香港 / 中國台灣
  984. </span>
  985. </div>
  986. <em>
  987. 繁
  988. </em>
  989. </button>
  990. <button class="language-option premium-language-option" type="button">
  991. <div>
  992. <strong>
  993. 日本語
  994. </strong>
  995. <span>
  996. 日本
  997. </span>
  998. </div>
  999. <em>
  1000. JP
  1001. </em>
  1002. </button>
  1003. <button class="language-option premium-language-option" type="button">
  1004. <div>
  1005. <strong>
  1006. 한국어
  1007. </strong>
  1008. <span>
  1009. 대한민국
  1010. </span>
  1011. </div>
  1012. <em>
  1013. KR
  1014. </em>
  1015. </button>
  1016. </div>
  1017. </div>
  1018. </div>
  1019. </div>
  1020. </div>
  1021. <footer class="site-footer">
  1022. <div class="content-1200-wrap">
  1023. <div class="footer-wrap d-flex flex-column flex-md-row justify-content-between gap-3">
  1024. <div>
  1025. © 2026 Aero Vision. All Rights Reserved.
  1026. </div>
  1027. <div class="footer-links d-flex flex-wrap gap-4">
  1028. <a href="#">
  1029. 隐私政策
  1030. </a>
  1031. <a href="#">
  1032. 服务条款
  1033. </a>
  1034. <a href="#">
  1035. 网站地图
  1036. </a>
  1037. </div>
  1038. </div>
  1039. </div>
  1040. </footer>
  1041. <script src="./vendor/bootstrap.bundle.min.js">
  1042. </script>
  1043. <script src="./vendor/swiper-bundle.min.js">
  1044. </script>
  1045. <script src="./script.js">
  1046. </script>
  1047. </body>
  1048. </html>
  1049. html>>html>html>>>