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

<template>
  <div>
    <breadCrumbs
      width="220"
      :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">
            포드코리아 리콜 안내입니다. 아래 링크를 통해서 자신이 소유한 차량의 리콜
            대상여부를 확인할 수 있습니다.
          </div> -->
        </div>
        <div class="thums--wrap mt--70">
          <img src="/img/owner/recall-visual.jpg" alt="" />
        </div>
      </div>

      <div class="consumable--parts--wrap">
        <div class="inner--wrap">
          <div class="prm--service pt--120">
            <h2>리콜 제도란?</h2>
            <div class="sub--title">
              리콜 제도는 제품의 결함으로 인해 소비자의 신체 또는 재산상의 위해를 끼치거나
              끼칠 우려가 있는 제품에<br />
              대하여 제품을 제조, 수입 또는 유통시킨 자가 제품의 문제점에 대해 소비자에게
              통지하고 관련 제품을 신속하게 수리 교환 등의 적절한<br />
              조치를 취함으로써 안전과 관련된 사고와 소비자 피해를 사전에 예방하고 재발을
              방지하는 제도입니다.<br />
              리콜제도는 제작자의 자발적인 리콜과 강제적인 리콜로 나눌 수 있으며, 리콜
              제도가 활발하게 이루어지고 있는 미국의 경우 리콜 중<br />
              95%가 자발적인 리콜로 이루어지고 있을 정도로 강제적인 리콜보다는 제작자
              스스로가 시행하는 자발적 리콜이 대부분을 차지하고 있습니다.
            </div>
            <div class="btn--wrap mt--70 mb--160">
              <NuxtLink
                style="width: 230px"
                class="btn--sky"
                to="https://www.car.go.kr/ri/recall/list.do"
                target="_blank"
                >리콜 대상 확인하기<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: "/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>