expedition.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <main>
  3. <SwiperBanner
  4. class="sticky--banner"
  5. :slides="bannerSlides"
  6. :autoplay="false"
  7. :loop="false"
  8. type=""
  9. />
  10. <div class="outer--wrapper">
  11. <div class="trim--spec--wrap">
  12. <ul>
  13. <li>
  14. <span>소비자 가격</span>
  15. <div>
  16. 111,100,000<em>원 부터<i>*</i></em>
  17. </div>
  18. </li>
  19. <li>
  20. <span>엔진</span>
  21. <div>Platinum 3.5L EcoBoost V6</div>
  22. </li>
  23. <li>
  24. <span>승차 정원(명)</span>
  25. <div>7 ~ 8</div>
  26. </li>
  27. </ul>
  28. </div>
  29. <div class="title--visual">
  30. <h2>The Road To adventure is often unpaved</h2>
  31. <div class="sub--title">
  32. Ford Expedition®은 대형 SUV 중에서 확실한 존재감을 보여주고 있습니다.<br />
  33. 사람들의 시선을 압도하는 큰 차체와 차량 내에 설치된 각종 편의 사양들은 다른
  34. SUV와는 확실한 차별점을 느끼실 수 있게 해드립니다.<br />
  35. Ford Expedition® Platinum 시리즈를 경험해 보십시오.
  36. </div>
  37. </div>
  38. <div class="models--visual--01 mt--80">
  39. <div class="thumb--wrap">
  40. <img src="/img/models/expedition/visual-01.jpg" />
  41. </div>
  42. </div>
  43. <div class="car--price--small--pic--wrap mt--120">
  44. <div>
  45. <h2>EXPEDITION Models</h2>
  46. <div class="car--list--wrap">
  47. <ul>
  48. <li>
  49. <div class="thumb">
  50. <img src="/img/models/expedition/expd-plt7.png" alt="" />
  51. </div>
  52. <div class="desc--wrap">
  53. <h2 class="trim--name">platinum 7 seater standard</h2>
  54. <div class="price--wrap">
  55. 소비자 가격 : <em>111,100,000 원 부터 <i>*</i></em>
  56. </div>
  57. </div>
  58. </li>
  59. <!-- <li>
  60. <div class="thumb">
  61. <img src="/img/models/expedition/expd-plt8.png" alt="" />
  62. </div>
  63. <div class="desc--wrap">
  64. <h2 class="trim--name">platinum 8 seater standard</h2>
  65. <div class="price--wrap">
  66. 소비자 가격 : <em>111,100,000 원 부터<i>*</i></em>
  67. </div>
  68. </div>
  69. </li> -->
  70. </ul>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="title--visual mt--150">
  75. <h2>편안하고 더 넓은 SUV</h2>
  76. <div class="sub--title">
  77. 최대 8명이 탑승할 수 있는 편안한 좌석은 물론, Ford CO-PILOT360TM 시스템이
  78. 안전하고 편안한 주행을 지원합니다.<br />
  79. 또한 3.5리터 가솔린 엔진이 뿜어내는 강력한 파워는 익스페디션 만의 퍼포먼스
  80. 주행을 실현합니다.
  81. </div>
  82. </div>
  83. <div class="models--visual--grid mt--80 type--2">
  84. <ul>
  85. <li>
  86. <div class="thumb--wrap">
  87. <img src="/img/models/expedition/grid-01.jpg" />
  88. </div>
  89. <div class="desc--wrap">
  90. <h2>3.5L 가솔린 엔진</h2>
  91. <div class="captions">
  92. 포드 익스페디션은 3.5리터 가솔린 엔진과 10단<br />
  93. 자동 변속기가 장착되어 원하시는 곳이 어디든지<br />
  94. 편안하게 모셔드립니다.
  95. </div>
  96. </div>
  97. </li>
  98. <li>
  99. <div class="thumb--wrap">
  100. <img src="/img/models/expedition/grid-02.jpg" />
  101. </div>
  102. <div class="desc--wrap">
  103. <h2>10단 자동 변속기</h2>
  104. <div class="captions">
  105. 10단 자동 변속기는 최적화된 변속 타이밍을 제공합니다.<br />
  106. 또한, 견인/끌기 모드는 가파른 오르막 경사에서<br />
  107. 원치 않는 빈번한 기어 변속을 억제합니다.
  108. </div>
  109. </div>
  110. </li>
  111. <li>
  112. <div class="thumb--wrap">
  113. <img src="/img/models/expedition/grid-03.jpg" />
  114. </div>
  115. <div class="desc--wrap">
  116. <h2>60/40 리클라이닝 파워 폴드 시트</h2>
  117. <div class="captions">
  118. 포드 익스페디션의 좌석은 1열 파워 운전석, 캡틴 시트<br />
  119. 또는 벤치 시트로 구성된 2열 좌석, 60/40으로<br />
  120. 분할된 리클라이닝 파워폴드 시트로 구성된 3열<br />
  121. 좌석으로 구성되었습니다. 최대 8명이 가능한<br />
  122. 익스페디션의 넓은 공간은 모든 탑승객에<br />
  123. 만족감과 편안함을 선사합니다.
  124. </div>
  125. </div>
  126. </li>
  127. </ul>
  128. </div>
  129. <!-- <SwiperBanner3
  130. class="mt--100"
  131. :slides="bannerSlides2"
  132. :autoplay="false"
  133. :loop="false"
  134. mtitle="design"
  135. stitle="오랜 시간 동안 포드는 가족들의 편안함을 위한 더 크고, 더 나은 suV를 만들기 위해 고민해왔습니다.<br/>이제, 익스페디션은 바로 그 해답들 중 하나입니다."
  136. type=""
  137. />
  138. <SwiperBanner3
  139. :slides="bannerSlides3"
  140. :autoplay="false"
  141. :loop="false"
  142. type=""
  143. mtitle="technology"
  144. stitle="때로는 사소한 것들이 우리의 삶을 지탱할 수 있게 해줍니다.<br/>익스페디션에는 작지만 세심한 배려가 숨어 있습니다."
  145. /> -->
  146. <div class="title--visual mt--150">
  147. <h2>gallery</h2>
  148. <!-- <div class="sub--title">작지만 세심한 배려가 숨어 있는 디자인</div> -->
  149. </div>
  150. <div class="gallery--wrap mt--80">
  151. <div class="thumb--wrap">
  152. <!-- <SwiperBanner2
  153. :slides="gallery1"
  154. :autoplay="false"
  155. :loop="false"
  156. type="exterior"
  157. /> -->
  158. <SwiperBanner2
  159. :slides="gallery1"
  160. :autoplay="false"
  161. :loop="false"
  162. type=""
  163. />
  164. </div>
  165. <!-- <div class="thumb--wrap">
  166. <SwiperBanner2
  167. :slides="gallery2"
  168. :autoplay="false"
  169. :loop="false"
  170. type="interior"
  171. />
  172. </div> -->
  173. </div>
  174. <div class="nav--dis--wrap model mt--150" :class="{ active: isDisOpen }">
  175. <div class="dis--btn" @click="isDisOpen = !isDisOpen">disclosures <i class="ico"></i></div>
  176. <div class="dis--cont">
  177. <div class="container">
  178. <p>
  179. *본 웹사이트에 공지된 가격정보는 부가세(VAT)를 포함하고 있습니다. 본 가격은 개별소비세 인하에 관한 정부시책을 반영한 것이며 가격정보는 예고없이 변동될 수 있습니다.
  180. 가격정보는 고객님의 차량 구입에 도움을 드리고자 함이며 법적 구속력은 없습니다. <br/><br/>
  181. 사이트에서 제공하는 차량에 대한 모든 이미지 또는 사양은 실제 판매 모델과 다를 수 있습니다. 정확한 정보는 가까운 공식 딜러를 통해 확인하시기 바랍니다.
  182. </p>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </main>
  188. </template>
  189. <script setup>
  190. // disclosures 토글 (기본 열림)
  191. const isDisOpen = ref(true);
  192. const bannerSlides = ref([
  193. {
  194. image: "/img/models/expedition/expd_banner01.jpg",
  195. moImage: "/img/models/expedition/expd_banner01_mo.png",
  196. alt: "ford expedition",
  197. title: "ford expedition",
  198. subtitle: "사람들의 시선을 압도하는 큰 차체 다른 SUV와는 확실한 차별점",
  199. smalldesc: "",
  200. morelink: "/ford/network",
  201. morelinktitle: "시승 신청",
  202. morelinktarget: "",
  203. },
  204. ]);
  205. const bannerSlides2 = ref([
  206. {
  207. image: "/img/models/expedition/design-01-1.png",
  208. alt: "ford expedition",
  209. title: "LIVING LARGE",
  210. smalldesc:
  211. "3.5L 가솔린 engine과 22인치 알루미늄 휠, 그리고 파워 러닝 보드 등이 적용되어 있어 큰 차체 때문에 느낄 수 있는 운전 및 승하차의 불편함을 덜어 드립니다.<br/>또한 360도 카메라는 주차시 주변 장애물을 쉽게 인지할 수 있도록 도와드립니다.",
  212. },
  213. {
  214. image: "/img/models/expedition/design-01-2.png",
  215. alt: "LIVING COMFORT",
  216. title: "LIVING COMFORT",
  217. smalldesc:
  218. "열선 및 통풍 기능이 포함된 럭셔리 가죽시트는 운전자는 물론, 동승자에게도 편안함을 제공해드립니다. <br />뿐만 아니라, 인테리어 곳곳에서 익스페디션만의 특별함을 느끼실 수 있습니다.",
  219. },
  220. {
  221. image: "/img/models/expedition/design-01-3.png",
  222. alt: "LOOKS MEET COMFORT",
  223. title: "LOOKS MEET COMFORT",
  224. smalldesc:
  225. "익스페디션 실내에 적용된 독특한 우드 액센트, 가죽으로 마감처리된 인스트루먼트 패널 및 파노라믹 비스타 루프가 서로 조화를 이루어 익스페디션을 더욱 돋보이게 만듭니다.",
  226. },
  227. ]);
  228. const bannerSlides3 = ref([
  229. {
  230. image: "/img/models/expedition/design-02-1.png",
  231. alt: "STAY WELL-CONNECTED",
  232. title: "STAY WELL-CONNECTED",
  233. smalldesc:
  234. "포드 익스페디션에 제공되는 싱크4 (SYNC)® 시스템과 함께라면 운전 중에도 각종 기능들을 안전하게 이용하실 수 있습니다. <br />싱크4 (SYNC)®의 음성 명령 기능으로 차량을 컨트롤할 수 있음은 물론, 대형 터치스크린에서 간단한 조작만으로도 필요한 기능을 사용하실 수 있습니다. <br />싱크4 (SYNC)® 1로 애플 카플레이(Apple CarPlayTM)2와 안드로이드 오토(Android AutoTM) 의 다양한 기능을 즐길 수 있습니다.",
  235. },
  236. {
  237. image: "/img/models/expedition/design-02-2.png",
  238. alt: "THE POWER TO MOVE YOU",
  239. title: "THE POWER TO MOVE YOU",
  240. smalldesc:
  241. "포드 익스페디션은 3.5리터 가솔린 엔진과 10 단 자동 변속기가 장착되어 원하시는 곳이 어디든지 편안하게 모셔드립니다.<br/>간단한 조작만으로도 7개의 드라이브 모드*를 사용할 수 있도록 설계되어 있어, 도로 여건에 최적화된 드라이빙을 즐기실 수 있도록 도와드립니다.<br/>* 7개의 드라이브 모드 : NORMAL, SPORT, ECO, GRASS/GRAVEL/SNOW(4WD), TOW/HAUL, SAND, MUD/RUTS",
  242. },
  243. ]);
  244. const gallery1 = ref([
  245. { image: "/img/models/expedition/gallery_1_1.jpg" },
  246. { image: "/img/models/expedition/gallery_1_2.jpg" },
  247. { image: "/img/models/expedition/gallery_1_3.jpg" },
  248. { image: "/img/models/expedition/gallery_1_4.jpg" },
  249. { image: "/img/models/expedition/gallery_1_5.jpg" },
  250. { image: "/img/models/expedition/gallery_1_6.jpg" },
  251. { image: "/img/models/expedition/gallery_1_7.jpg" },
  252. { image: "/img/models/expedition/gallery_1_8.jpg" },
  253. { image: "/img/models/expedition/gallery_1_9.jpg" },
  254. { image: "/img/models/expedition/gallery_2_1.jpg" },
  255. { image: "/img/models/expedition/gallery_2_2.jpg" },
  256. { image: "/img/models/expedition/gallery_2_3.jpg" },
  257. { image: "/img/models/expedition/gallery_2_4.jpg" },
  258. { image: "/img/models/expedition/gallery_2_5.jpg" },
  259. { image: "/img/models/expedition/gallery_2_6.jpg" },
  260. { image: "/img/models/expedition/gallery_2_7.jpg" },
  261. { image: "/img/models/expedition/gallery_2_8.jpg" },
  262. { image: "/img/models/expedition/gallery_2_9.jpg" },
  263. { image: "/img/models/expedition/gallery_2_10.jpg" },
  264. { image: "/img/models/expedition/gallery_2_11.jpg" },
  265. { image: "/img/models/expedition/gallery_2_12.jpg" },
  266. { image: "/img/models/expedition/gallery_2_13.jpg" },
  267. { image: "/img/models/expedition/gallery_2_14.jpg" },
  268. { image: "/img/models/expedition/gallery_2_15.jpg" },
  269. { image: "/img/models/expedition/gallery_2_16.jpg" },
  270. { image: "/img/models/expedition/gallery_2_17.jpg" },
  271. { image: "/img/models/expedition/gallery_2_18.jpg" },
  272. { image: "/img/models/expedition/gallery_2_19.jpg" },
  273. { image: "/img/models/expedition/gallery_2_20.jpg" },
  274. ]);
  275. const gallery2 = ref([
  276. { image: "/img/models/expedition/gallery_2_1.jpg" },
  277. { image: "/img/models/expedition/gallery_2_2.jpg" },
  278. { image: "/img/models/expedition/gallery_2_3.jpg" },
  279. { image: "/img/models/expedition/gallery_2_4.jpg" },
  280. { image: "/img/models/expedition/gallery_2_5.jpg" },
  281. { image: "/img/models/expedition/gallery_2_6.jpg" },
  282. { image: "/img/models/expedition/gallery_2_7.jpg" },
  283. { image: "/img/models/expedition/gallery_2_8.jpg" },
  284. { image: "/img/models/expedition/gallery_2_9.jpg" },
  285. { image: "/img/models/expedition/gallery_2_10.jpg" },
  286. { image: "/img/models/expedition/gallery_2_11.jpg" },
  287. { image: "/img/models/expedition/gallery_2_12.jpg" },
  288. { image: "/img/models/expedition/gallery_2_13.jpg" },
  289. { image: "/img/models/expedition/gallery_2_14.jpg" },
  290. { image: "/img/models/expedition/gallery_2_15.jpg" },
  291. { image: "/img/models/expedition/gallery_2_16.jpg" },
  292. { image: "/img/models/expedition/gallery_2_17.jpg" },
  293. { image: "/img/models/expedition/gallery_2_18.jpg" },
  294. { image: "/img/models/expedition/gallery_2_19.jpg" },
  295. { image: "/img/models/expedition/gallery_2_20.jpg" },
  296. ]);
  297. </script>