piratezon_new/app/pages/ford/shopping/brochure.vue

<template>
  <div>
    <breadCrumbs
      :main-menu="breadcrumbData.mainMenu"
      :current-sub-menu="breadcrumbData.currentSubMenu"
      :sub-menu-items="breadcrumbData.subMenuItems"
    />
    <div class="container">
      <div>
        <div class="title--wrap">
          <h2 class="">{{ pageTitle }}</h2>
          <p v-if="!isAfterLaunch">{{ pageDescription }}</p>
        </div>
        <div class="brochure--wrap">
          <a :href="isAfterLaunch == false ? '/brochure/25-Explorer-kr.pdf' : '/brochure/26-Explorer-kr.pdf'" download class="brochure">
            <img :src="isAfterLaunch == false ? '/img/models/explorer.png' :  '/img/models/explorer2026.png'" alt="explorer" />            
            <span>EXPLORER</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
          <a href="/brochure/24-expedition-catalog.pdf" download class="brochure">
            <img src="/img/img--expedition.png" alt="explorer" />
            <span>expedition</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
          <a href="/brochure/bronco-25.pdf" download class="brochure">
            <img src="/img/img--bronco.png" alt="explorer" />
            <span>bronco</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
          <!-- 2026-04-15 08:00:00 이후(차량 순서 변경) -->
          <a v-if="isAfterLaunch" href="/brochure/25my_mustang.pdf" download class="brochure">
            <img src="/img/img--mustang.png" alt="mustang" />
            <span>mustang</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
          <a v-if="isAfterLaunch" href="/brochure/next-gen-ranger-kr-brochure.pdf" download class="brochure">
            <img src="/img/img--ranger.png" alt="explorer" />
            <span>ranger</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
          <!-- 2026-04-15 08:00:00 이전(차량 순서 변경) -->
          <a v-if="!isAfterLaunch" href="/brochure/next-gen-ranger-kr-brochure.pdf" download class="brochure">
            <img src="/img/img--ranger.png" alt="explorer" />
            <span>ranger</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
          <a v-if="!isAfterLaunch" href="/brochure/25my_mustang.pdf" download class="brochure">
            <img src="/img/img--mustang.png" alt="mustang" />
            <span>mustang</span>
            <div>다운로드 <i class="ico"></i></div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const isAfterLaunch = useTimeSwitch('2026-04-15T08:00:00+09:00');
  const pageTitle = "브로슈어 다운로드";
  const pageDescription = "포드에서 전하는 최신 정보와 특별한 이야기를 만나보세요.";

  // 샘플 데이터
  const breadcrumbData = {
    mainMenu: "SHOPPING",
    currentSubMenu: "브로슈어 다운로드",
    subMenuItems: [
      { label: "브로슈어 다운로드", to: "/ford/shopping/brochure", active: true },
      { label: "타이어 에너지 소비 효율", to: "/ford/shopping/tire", active: false },
      // { label: "신청하기", to: "/ford/shopping/apply", active: false },
    ],
  };
</script>