piratezon_new/app/pages/ford/owner/index.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/owner-visual.jpg" 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/owner-visual02.jpg" />
          </div>
          <div class="desc--wrapper">
            <h2 class="mt--60">공인 서비스</h2>
            <div class="captions">
              귀하의 차량에 관한 문제라면 무엇이든 포드 공식 서비스센터로 맡겨
              주십시오.<br />
              정기적인 오일 교환이나 좀 더 복잡한 엔진 수리라도 포드 공식 서비스센터에서는
              귀하께서 차량을 처음 구매하신 날부터 재구매를 위해 다시 찾아오시는
              날까지,<br />
              차량에 필요한 모든 사항을 관리 해 드립니다.<br /><br /><br />
              아래 항목을 포함하는 모든 서비스를 완벽하게 제공합니다.
              <ul>
                <li>엔진 오일 및 필터 교환</li>
                <li>차량 정기 점검</li>
                <li>타이어 교체 및 정비</li>
                <li>브레이크 패드 및 라이닝 교체</li>
                <li>에어컨</li>
                <li>엔진 점검</li>
                <li>차량 종합 검사</li>
                <li>4륜 구동 시스템</li>
                <li>자동 변속기</li>
                <li>엔진 냉각 계통</li>
                <li>충전, 시동 또는 배터리 정비</li>
                <li>휠 얼라인먼트</li>
                <li>ABS 브레이크 시스템</li>
                <li>기타 정비 및 점검</li>
              </ul>

              <div class="add--text">
                다양한 서비스 제공을 위하여 전문적인 교육을 이수한 포드 테크니션이 언제나
                귀하의 차량을 책임지기 위하여 노력하고 있습니다.
              </div>
            </div>
          </div>
        </div>
        <div :class="{ show: activeTab === 1, hidden: activeTab !== 1 }">
          <div class="thumb">
            <img src="/img/owner/owner-visual03.jpg" />
          </div>
          <div class="desc--wrapper">
            <h2 class="mt--60">차량관리 서비스</h2>
            <div class="captions">
              귀하의 차량을 최적의 상태로 유지하기 위해 어떤 서비스가 필요한지 확인하고자
              방문하시면, 포드 공식 서비스센터에서 차량 종합 검사를 받아 보실 수 있습니다.
              이 서비스의 목적은 귀하의 서비스에<br />
              관한 이해를 돕는 한편 차량의 핵심 부품이 최적의 상태로 유지되도록
              도와드립니다.<br /><br /><br />

              포드 공식 서비스 센터에 도착하시면, 귀하의 차량은 포드 전문가에게
              맡겨집니다. 귀하의 차량을 위해 포드 서비스 직원들은 아래 항목을 포함하는
              모든 주요 부분을 검사하고 평가합니다.
              <ul>
                <li>오일류 레벨 확인</li>
                <li>엔진 오일</li>
                <li>변속기 오일</li>
                <li>워셔액 탱크</li>
                <li>브레이크 액</li>
                <li>냉각수</li>
                <li>누유/누수</li>
                <li>타이어 트레드 잔존량 및 마모 패턴</li>
                <li>배터리</li>
                <li>휠</li>
                <li>브레이크(마모도 측정/점검)</li>
                <li>쇼크 업소버</li>
                <li>배기계통</li>
                <li>등속 조인트</li>
                <li>드라이브 샤프트</li>
                <li>U 조인트</li>
                <li>벨트 및 호스 점검</li>
                <li>엔진 필터(엔진)</li>
              </ul>

              <div class="add--text">
                검사 항목의 평가는 아래와 같은 색상 구분이 되어 있어 쉽게 이해하실 수
                있습니다.<br />
                - 녹색: 점검 결과 현재 양호한 상태입니다.<br />
                - 황색: 앞으로 상태를 지켜보거나 다시 점검해야 합니다.<br />
                - 적색: 즉시 조치해야 합니다.
              </div>
            </div>
          </div>
        </div>
        <div :class="{ show: activeTab === 2, hidden: activeTab !== 2 }">
          <div class="thumb">
            <img src="/img/owner/owner-visual04.jpg" />
          </div>
          <div class="desc--wrapper">
            <h2 class="mt--60">서비스 센터에서의 관리</h2>
            <div class="captions">
              포드의 정기점검 서비스를 통해 차량을 위한 지출계획을 가장 합리적으로 준비
              하실 수 있습니다. 포드가 권장하는 정비 서비스 주기는 필요한 시기에 귀하의
              차량이 최적의 운행 상태를 유지하도록 마련 되어 있습니다.
              <h3 class="mt--60">
                귀하의 차량 정기점검 서비스 안내에서 다음의 안내 사항을 확인하십시오.
              </h3>
              <ul class="pt--20">
                <li>정기점검의 필요성</li>
                <li>주행거리 주기 및 시기</li>
              </ul>

              <h3 class="mt--60">
                지정된 권장 정비 주기를 따르면 아래와 같은 점이 좋습니다.
              </h3>
              <ul class="pt--20">
                <li>최적의 작동, 신뢰성, 안전성이 보장됩니다.</li>
                <li>차량의 수명이 연장됩니다.</li>
                <li>예상치 못한 고장이 예방됩니다.</li>
                <li>연료소비 효율이 극대화됩니다.</li>
              </ul>

              <h3 class="mt--60">
                중고차 거래 시 가치가 높아집니다.아래와 같은 현상이 하나 이상 나타나면
                즉시 서비스 예약을 하시기 바랍니다.
              </h3>
              <ul class="pt--20">
                <li>시동을 건 후 ‘Service Engine Soon’ 경고등이 꺼지지 않을 때</li>
                <li>엔진에서 오일류가 누유될 때</li>
                <li>하나 이상의 엔진 부품에 뚜렷한 손상이 있을 때</li>
                <li>엔진에서 큰 소음이 날 때</li>
                <li>보닛 아래에서 연기가 날 때</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

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

  // 샘플 데이터
  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>