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

<template>
  <div>
    <breadCrumbs
      :main-menu="breadcrumbData.mainMenu"
      :current-sub-menu="breadcrumbData.currentSubMenu"
      :sub-menu-items="breadcrumbData.subMenuItems"
    />
    <div class="ovwner--wrapper">
      <div class="title--visual">
        <h2>순정 부품</h2>
        <!-- <div class="desc mt--40">
          귀하의 차량에 사용된 부품은 주행할 때마다 기능을 발휘합니다.<br />자격을 갖춘
          숙련된 전문가가 귀하의 차량을 취급해야 하듯이 전문가가 수리에 사용하는 부품은
          귀하의 차량을 위해 특별히 설계, 제작, 추천되는 제품이어야 합니다.<br />포드 순정
          부품은 포드 모터 컴퍼니가 보증하며 포드 딜러 네트워크가 지원합니다.
        </div> -->
        <div class="thums--wrap mt--70">
          <img src="/img/owner/parts--visual1.png" alt="" />
        </div>
      </div>

      <div class="text--tab--layout mt--100">
        <ul>
          <li
            v-for="(tab, index) in tabItems"
            :key="index"
            :class="{ 'anch--location': index === 0, actv: activeTab === index }"
            @click="setActiveTab(index)"
          >
            <NuxtLink>{{ tab }}</NuxtLink>
          </li>
        </ul>
      </div>

      <div class="owner--inner--content mt--50">
        <div :class="{ show: activeTab === 0, hidden: activeTab !== 0 }">
          <div class="thumb">
            <img src="/img/owner/parts--visual2.png" />
          </div>
          <div class="desc--wrapper">
            <h2 class="mt--60">순정 부품의 장점</h2>
            <h3 class="mt--50">안전</h3>
            <div class="captions fz--17 pt--25">
              저희는 귀하의 포드 차량이 귀하와 동승자, 보행자를 보호할 수 있도록 세심하게
              고려했습니다. 이에 따라 포드 순정 부품은 법규 상의 안전 및 환경 기준을
              만족하고, 많은 부분에서 더 우수하도록 설계, 생산, 시험된 제품입니다.
            </div>
            <h3 class="mt--50">성능</h3>
            <div class="captions fz--17 pt--25">
              귀하의 포드 차량에 사용된 모든 부품은 함께 작동하여 최적의 성능, 완벽한
              쾌적함, 최상의 연비를 내도록 설계되었습니다. 출고 시 장착 부품과 같은 엄격한
              규격에 따라 생산된 포드 순정 부품 역시 마찬가지입니다.
            </div>
            <h3 class="mt--50">품질</h3>
            <div class="captions fz--17 pt--25">
              포드 순정 부품은 높은 기준에 따라 설계 및 생산되어 최상의 조립과 마무리,
              신뢰성과 성능을 보장합니다. 힘을 주지 않아도 빈틈 또는 비틀림 없이 완벽하게
              조립되도록 설계되어, 양산 부품과 같은 마무리를 보여줍니다.
            </div>
            <h3 class="mt--50">보증</h3>
            <div class="captions fz--17 pt--25">
              포드의 보증이 있다면 서비스, 수리, 차체, 액세서리와 관계없이 안심하실 수
              있습니다. 모든 수리 절차는 최상의 품질 기준으로 이루어집니다. 또한 귀하의
              포드를 매각할 때에는 보증이 승계되어 새 소유주에게 혜택이 더해집니다.
            </div>
            <h3 class="mt--50">정품</h3>
            <div class="captions fz--17 pt--25">
              포드 순정 부품은 로고를 통해 진품 여부를 쉽게 확인할 수 있습니다. 포드
              상표는 돋보이는 위치에 표시되어 있습니다.
            </div>
            <h3 class="mt--50">올바른 부품의 선택</h3>
            <div class="captions fz--17 pt--25">
              서비스 센터에서 정비하거나 직접 수리를 하더라도, 사용하는 부품의 차이가
              중요합니다. 귀하께서 직접 차량 수리작업을 하거나 다른 이가 귀하의 차를
              수리할 때에도, 항상 차량 출고 시에 장착된 것과 같은 성능을 내도록 특별히
              설계 및 제작된 부품인 포드 모터 컴퍼니 순정 부품과 모터크래프트 부품을
              사용하십시오. 수리 후에는 최적의 성능과 수명을 기대할 수 있습니다.
            </div>
          </div>
        </div>
        <div :class="{ show: activeTab === 1, hidden: activeTab !== 1 }">
          <div class="thumb">
            <img src="/img/owner/parts--visual3.png" />
          </div>
          <div class="desc--wrapper">
            <h2 class="mt--60">위조 부품</h2>
            <div class="captions">
              포드 모터 컴퍼니는 위조 부품을 매우 심각하게 여기고 있으며 시장에 유통되어
              귀하의 차량에 사용되지 않도록 예방조치를 취하고 있습니다. 위조품 생산은
              세계적인 현상이며 포드 모터 컴퍼니는 세계적인 차원에서 포드 브랜드와 저희의
              고객인 귀하를 보호하기 위해 노력을 기울이고 있습니다.
              <!-- <br /><br />귀하를
              보호하고자 하는 저희의 노력이 궁금하다면 아래 버튼을 클릭하십시오. -->
            </div>
            <div class="btn--wrap fl--start mt--50">
              <NuxtLink
                to="https://www.fordbrandprotection.com/"
                class="btn--go"
                target="_blank"
                ><strong>Fordbrandprotection </strong> Go To Site <i class="ico"></i
              ></NuxtLink>
            </div>
          </div>
        </div>
        <div :class="{ show: activeTab === 2, hidden: activeTab !== 2 }">
          <div class="thumb">
            <img src="/img/owner/parts--visual4.png" />
          </div>
          <div class="desc--wrapper">
            <h2 class="mt--60">순정부품 가격정보</h2>
            <div class="captions">
              순정 부품 가격은 아래 공식 딜러사 홈페이지에서 확인하실 수 있습니다. 배너를
              클릭하시면 각 딜러사의 부품 가격 정보 페이지로 이동합니다.
              <div class="btn--wrap fl--start mt--50">
                <NuxtLink
                  to="https://suninford.co.kr/_ford/service_center/part_price.html"
                  class="btn--go fw--500"
                  target="_blank"
                  ><strong class="color--blue">선인자동차 </strong> 부품 가격
                  <i class="ico"></i
                ></NuxtLink>
                <NuxtLink
                  to="https://www.premiermotors.co.kr/ford/center/parts_price.html?PHPSESSID=b5abb007710978e1dcf4d34acb8ffbaf"
                  class="btn--go fw--500"
                  target="_blank"
                  ><strong class="color--blue">프리미어 모터스 </strong> 부품 가격
                  <i class="ico"></i
                ></NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="owner--part--wrap">
        <div class="owner--part">
          <i class="ico"></i>
          <div class="part--content">
            <h3>출고 시 장착되는 순정 부품에 대하여</h3>
            <p>
              저희는 교체용 부품을 신차와 마찬가지로 높은 기준에 따라 생산하고
              있습니다.<br />저희는 100년 이상의 자동차 생산 경험을 통해 귀하의 포드
              차량을 완벽한 상태로 유지하는 것이 얼마나 중요한지 잘 알고 있기 때문입니다.
            </p>
          </div>
        </div>
        <div class="owner--part">
          <i class="ico"></i>
          <div class="part--content">
            <h3>출고 시 장착되는 순정 부품의 중요성</h3>
            <p>
              귀하의 차량에 알맞게 조립되고 설계된 부품은 더욱 뛰어난 성능을 발휘하도록
              해줄 뿐 아니라 수명도 깁니다.<Br />따라서 부품 교체 횟수와 주기가 길어지므로
              비용이 절감됩니다. <Br />포드 모터 컴퍼니 순정 부품,
              모터크래프트(Motorcraft®) 부품, 그리고 포드 및 모터 크래프트 재생 부품은
              성능, 수명, 가치에서 모두 탁월한 선택입니다. 또한 포드 모터 컴퍼니의 한정
              부품 보증을 받으므로 성능에 대해 안심하실 수 있습니다.<Br />귀하의 차량을
              위한 포드 및 모터크래프트의 재생 부품도 마련되어 있습니다.
            </p>
          </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";

  // 탭 관련
  const activeTab = ref(0);
  const tabItems = ["순정 부품의 장점", "위조 부품", "순정 부품 가격 정보"];

  const setActiveTab = (index) => {
    activeTab.value = index;
  };
  // disclosures 토글 (기본 열림)
  const isDisOpen = ref(true);

  // 샘플 데이터
  const breadcrumbData = {
    mainMenu: "OWNER",
    currentSubMenu: "서비스",
    subMenuItems: [
      { label: "공인 서비스", to: "/ford/owner", active: false },
      {
        label: "소모성 부품 무상 교환 서비스",
        to: "/ford/owner/consumableParts",
        active: true,
      },
      { label: "24시간 긴급 출동 서비스", to: "/ford/owner/tfService", active: false },
      { label: "순정 부품", to: "/ford/owner/genuine", active: false },
      { label: "리콜 안내", to: "/ford/owner/recall", active: false },
      {
        label: "사고 수리를 위한 포드 서비스 부품",
        to: "/ford/owner/accident",
        active: false,
      },
      { label: "내비게이션", to: "/ford/owner/navigation", active: false },
    ],
  };
</script>