brochure.vue 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div>
  3. <breadCrumbs
  4. :main-menu="breadcrumbData.mainMenu"
  5. :current-sub-menu="breadcrumbData.currentSubMenu"
  6. :sub-menu-items="breadcrumbData.subMenuItems"
  7. />
  8. <div class="container">
  9. <div>
  10. <div class="title--wrap">
  11. <h2 class="">{{ pageTitle }}</h2>
  12. <p v-if="!isAfterLaunch">{{ pageDescription }}</p>
  13. </div>
  14. <div class="brochure--wrap">
  15. <a :href="isAfterLaunch == false ? '/brochure/25-Explorer-kr.pdf' : '/brochure/26-Explorer-kr.pdf'" download class="brochure">
  16. <img :src="isAfterLaunch == false ? '/img/models/explorer.png' : '/img/models/explorer2026.png'" alt="explorer" />
  17. <span>EXPLORER</span>
  18. <div>다운로드 <i class="ico"></i></div>
  19. </a>
  20. <a href="/brochure/24-expedition-catalog.pdf" download class="brochure">
  21. <img src="/img/img--expedition.png" alt="explorer" />
  22. <span>expedition</span>
  23. <div>다운로드 <i class="ico"></i></div>
  24. </a>
  25. <a href="/brochure/bronco-25.pdf" download class="brochure">
  26. <img src="/img/img--bronco.png" alt="explorer" />
  27. <span>bronco</span>
  28. <div>다운로드 <i class="ico"></i></div>
  29. </a>
  30. <!-- 2026-04-15 08:00:00 이후(차량 순서 변경) -->
  31. <a v-if="isAfterLaunch" href="/brochure/25my_mustang.pdf" download class="brochure">
  32. <img src="/img/img--mustang.png" alt="mustang" />
  33. <span>mustang</span>
  34. <div>다운로드 <i class="ico"></i></div>
  35. </a>
  36. <a v-if="isAfterLaunch" href="/brochure/next-gen-ranger-kr-brochure.pdf" download class="brochure">
  37. <img src="/img/img--ranger.png" alt="explorer" />
  38. <span>ranger</span>
  39. <div>다운로드 <i class="ico"></i></div>
  40. </a>
  41. <!-- 2026-04-15 08:00:00 이전(차량 순서 변경) -->
  42. <a v-if="!isAfterLaunch" href="/brochure/next-gen-ranger-kr-brochure.pdf" download class="brochure">
  43. <img src="/img/img--ranger.png" alt="explorer" />
  44. <span>ranger</span>
  45. <div>다운로드 <i class="ico"></i></div>
  46. </a>
  47. <a v-if="!isAfterLaunch" href="/brochure/25my_mustang.pdf" download class="brochure">
  48. <img src="/img/img--mustang.png" alt="mustang" />
  49. <span>mustang</span>
  50. <div>다운로드 <i class="ico"></i></div>
  51. </a>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </template>
  57. <script setup>
  58. const isAfterLaunch = useTimeSwitch('2026-04-15T08:00:00+09:00');
  59. const pageTitle = "브로슈어 다운로드";
  60. const pageDescription = "포드에서 전하는 최신 정보와 특별한 이야기를 만나보세요.";
  61. // 샘플 데이터
  62. const breadcrumbData = {
  63. mainMenu: "SHOPPING",
  64. currentSubMenu: "브로슈어 다운로드",
  65. subMenuItems: [
  66. { label: "브로슈어 다운로드", to: "/ford/shopping/brochure", active: true },
  67. { label: "타이어 에너지 소비 효율", to: "/ford/shopping/tire", active: false },
  68. // { label: "신청하기", to: "/ford/shopping/apply", active: false },
  69. ],
  70. };
  71. </script>