piratezon_new/app/pages/ford/owner/warranty.vue

<template>
  <div>
    <breadCrumbs
      :main-menu="breadcrumbData.mainMenu"
      :current-sub-menu="breadcrumbData.currentSubMenu"
      :sub-menu-items="breadcrumbData.subMenuItems"
    />
    <div class="ovwner--wrapper type--2 pb--0">
      <div class="inner--wrap">
        <div class="title--visual">
          <h2>보증 및 서비스</h2>
          <div class="desc mt--40">
            고객께 최적의 서비스를 제공해야 하기에 포드는 업계 최고수준의 서비스를 제공합니다.<br />포드에서 제공하는 보증과 소모성 부품 무상교환 서비스(ESP)로 마음까지 편안하게 해드립니다.
          </div>
        </div>
        <div class="thums--wrap mt--70">
          <img src="/img/owner/warranty--visual.png" alt="" />
        </div>
      </div>

      <div class="consumable--parts--wrap">
        <div class="inner--wrap">
          <div class="prm--service pt--120">
            <h2>소모성 부품 무상교환 서비스 (ESP)</h2>
            <div class="sub--title">
              포드 고객께서는 무상 보증서비스 혜택과 함께 차량 구입 시 제공되는 소모성 부품 무상교환 서비스(ESP)로 차량 유지관리비를 대폭 절감하실 수 있습니다.
            </div>
            <ul class="sub--list">
              <li>3년/6만km 이내 소모성 부품 유지 프로그램(기본형, EMP) 제공(차량관리에 필요한 기본정기점검 포함)</li>
              <li>소정의 비용을 지불하여 업그레이드 시, 서비스 기간을 5년/10만km로 연장하고 제공 서비스를 기본형에서 고급형(PMP Upgrade)으로 확대 제공</li>
            </ul>
            <div class="btn--wrap mb--160">
              <NuxtLink class="btn--sky" to="/ford/owner/consumableParts">자세히 보기<i class="ico"></i></NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav--dis--wrap" :class="{ active: isDisOpen }">
      <div class="dis--btn" @click="isDisOpen = !isDisOpen">disclosures <i class="ico"></i></div>
      <div class="dis--cont">
        <div class="container">
          <p>
            [1] 자세한 사항은 가까운 전시장 및 서비스센터에 문의하세요.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";

  // disclosures 토글 (기본 열림)
  const isDisOpen = ref(true);

  // 탭 관련
  const activeTab = ref(0);
  const tabItems = ["공인 서비스", "차량관리 서비스", "서비스 센터에서의 관리"];

  const setActiveTab = (index) => {
    activeTab.value = index;
  };

  // 샘플 데이터
  const breadcrumbData = {
    mainMenu: "OWNER",
    currentSubMenu: "보증 및 서비스",
    subMenuItems: [
      { label: "보증 및 서비스", to: "/", active: false },
    ],
  };
</script>