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

<template>
  <div>
    <breadCrumbs
      :width="219"
      :main-menu="breadcrumbData.mainMenu"
      :current-sub-menu="breadcrumbData.currentSubMenu"
      :sub-menu-items="breadcrumbData.subMenuItems"
    />
    <div class="ovwner--wrapper pb--0">
      <div class="inner--wrap">
        <div class="title--visual">
          <h2>사고 수리를 위한 포드 서비스 부품</h2>
          <div class="desc mt--40">
            충돌사고를 겪고 싶은 사람은 아무도 없을 겁니다. <br />하지만 만에 하나 사고가
            발생할 경우, 포드의 노력은 귀하의 차량이 다시 주행 가능한 상태가 되도록
            도와드리는 데에서 그치지 않습니다. <br />포드는 철저한 설계의 ‘포드 서비스
            부품’을 사용해 귀하의 차량이 완벽하게 포드다운 성능을 발휘할 수 있도록 하고
            있습니다.
          </div>
        </div>
        <div class="thums--wrap mt--70">
          <img src="/img/owner/acc--visual1.png" alt="" />
        </div>
      </div>
      <div class="consumable--parts--wrap">
        <div class="inner--wrap">
          <div class="prm--service pt--120">
            <h2>올바른 부품</h2>
            <div class="sub--title">
              장기적인 차량 성능 및 운전자의 안심을 위해 올바른 부품 사용은 매우
              중요합니다.
            </div>
          </div>
        </div>
      </div>
      <div class="service--card--wrap mt--100">
        <div class="img--wrap">
          <img src="/img/owner/acc--visual2.png" alt="" />
        </div>
        <div class="desc--wrap">
          <h3>올바른 정비소 선택</h3>
          <p>
            사고 수리를 위해서 어느 서비스센터를 선택할지는 귀하가 결정하실 수 있습니다.
          </p>
          <ul>
            <li>
              보험사에서는 귀하에게 특정 서비스센터를 이용하도록 강요할 수 없습니다.
            </li>
            <li>귀하에게는 새 제품의 포드 서비스 부품을 선택할 권리가 있습니다.</li>
            <li>
              수리를 시작하기 전에 직접 수리 부품 및 작업 내용을 확인하고 수리에
              동의하셔야 합니다.
            </li>
            <li>
              포드 차량에 대한 교육 수료 및 자격을 인증 받은 전문기술자를 보유한 포드
              공식서비스센터를 선택하십시오.
            </li>
          </ul>
        </div>
      </div>
      <div class="owner--inner--content mt--120">
        <div class="desc--wrapper">
          <h2>차별화된 품질의 포드 서비스 부품</h2>
          <div class="captions">
            귀하의 차량에 장착된 포드 서비스 부품은 오랜 시간 믿고 사용할 수 있는 높은
            신뢰성을 제공합니다.
          </div>
        </div>
      </div>
      <div class="tfs--drop--menus pt--80 pb--60">
        <ul>
          <li :class="{ open: dropMenuOpen[0] }">
            <div class="title" @click="toggleDropMenu(0)">휠</div>
            <div class="drop--contents">
              <div class="drop--part--wrap">
                <div class="img--wrap">
                  <img src="/img/owner/img--accident1.png" alt="휠" />
                </div>
                <div class="desc--wrap">
                  <ul>
                    <li>
                      모든 새 부품은 철저한 시험을 거쳐 까다로운 안전 기준을 충족해야만
                      포드 차량에 장착될 수 있습니다. 이러한 부품 시험은 독립적으로
                      수행됩니다. <br />포드에서는 차량에 부품을 장착하고 제대로
                      작동하는지 시험합니다.
                    </li>
                    <li>
                      휠을 임의로 수리하면 금속의 강도가 약화되며 휠이나 타이어의 손상을
                      유발할 수 있습니다.<br />이는 향후 사고 발생의 원인이 될 수
                      있습니다.
                    </li>
                    <li>
                      휠은 차량의 중량을 지탱하는 역할을 합니다. 휠에 금이 가거나 휘는
                      경우, 차량 주행 중 발생하는 스트레스로 인해 이러한 손상의 정도가 더
                      커질 수도 있습니다.
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li :class="{ open: dropMenuOpen[1] }">
            <div class="title" @click="toggleDropMenu(1)">전면 유리</div>
            <div class="drop--contents">
              <div class="drop--part--wrap">
                <div class="img--wrap">
                  <img src="/img/owner/img--accident2.png" alt="전면 유리" />
                </div>
                <div class="desc--wrap">
                  <ul>
                    <li>
                      전면 유리는 차량의 구조적 구성요소에 해당합니다.<br />전면 유리가
                      완벽하게 조립되어야만 포드의 엔지니어들이 설계 시 의도한 대로의
                      성능을 발휘할 수 있습니다.
                    </li>
                    <li>
                      포드 서비스 부품의 전면 유리는 포드 차량에 정확하게 조립되도록
                      설계됩니다.
                    </li>
                    <li>
                      균열 또는 파손은 충돌사고에서 운전자와 탑승자를 보호하기 위한 전면
                      유리의 강도를 떨어뜨립니다.
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li :class="{ open: dropMenuOpen[2] }">
            <div class="title" @click="toggleDropMenu(2)">판금</div>
            <div class="drop--contents">
              <div class="drop--part--wrap">
                <div class="img--wrap">
                  <img src="/img/owner/img--accident3.png" alt="판금" />
                </div>
                <div class="desc--wrap">
                  <ul>
                    <li>
                      판금 손상은 단순히 미관상의 문제만 초래하는 것이 아닙니다.<br />판금은
                      문, 천장, 범퍼 등 차량 내부의 최첨단 부품과 시스템을 보호하는 역할을
                      합니다.
                    </li>
                    <li>
                      포드 서비스센터에서는 덴트 복원만으로 충분한지 확인하기 위해 판금
                      손상 정도를 검사합니다.
                    </li>
                    <li>
                      포드가 생산한 알루미늄 자재는 고강도의 알루미늄이며, 알루미늄 자재
                      수리가 가능한 포드 공식 서비스센터는 여기에서 확인하실 수 있습니다.
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

  // 드롭메뉴 관련 (기본 모두 열림)
  const dropMenuOpen = ref([true, true, true]);

  const toggleDropMenu = (index) => {
    dropMenuOpen.value[index] = !dropMenuOpen.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>