piratezon_new/app/pages/ford/owner/tfService.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>24시간 긴급 출동 서비스</h2>
          <div class="desc mt--40">
            <!-- 운전 중 예상치 못한 긴급한 상황이 발생하더라도, 귀하의 곁에 저희 포드가 -->
            <!-- 언제든지 달려가 도움을 드립니다.<br /> -->
            <!-- 저희 포드코리아가 수입한 차량을 구매하신 고객께는 다양한 항목의 포드 긴급출동
            서비스가 365일, 24시간 제공됩니다. -->
          </div>
        </div>
        <div class="dbl--info--cont pt--70">
          <ul>
            <li>
              <div class="thumb">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="40"
                  height="40"
                  viewBox="0 0 40 40"
                  fill="none"
                >
                  <path
                    d="M12.0508 2.40039H27.6059"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-miterlimit="10"
                    stroke-linecap="round"
                  />
                  <path
                    d="M15.8143 2.40039L1.27588 23.0572"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-miterlimit="10"
                    stroke-linecap="round"
                  />
                  <path
                    d="M23.6367 2.40039L38.1751 23.0572"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-miterlimit="10"
                    stroke-linecap="round"
                  />
                  <path
                    d="M38.101 33.6719H1.89859C1.29175 33.6719 0.799805 34.167 0.799805 34.7778V36.4943C0.799805 37.1051 1.29175 37.6002 1.89859 37.6002H38.101C38.7079 37.6002 39.1998 37.1051 39.1998 36.4943V34.7778C39.1998 34.167 38.7079 33.6719 38.101 33.6719Z"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M11.3614 32.4977C12.806 32.4977 13.9771 31.319 13.9771 29.8651C13.9771 28.4111 12.806 27.2324 11.3614 27.2324C9.91672 27.2324 8.74561 28.4111 8.74561 29.8651C8.74561 31.319 9.91672 32.4977 11.3614 32.4977Z"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M27.3023 32.4977C28.7469 32.4977 29.918 31.319 29.918 29.8651C29.918 28.4111 28.7469 27.2324 27.3023 27.2324C25.8576 27.2324 24.6865 28.4111 24.6865 29.8651C24.6865 31.319 25.8576 32.4977 27.3023 32.4977Z"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M24.6856 29.8652H13.9766"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M8.75392 29.8672H6.43336C6.43336 29.8672 3.875 30.1891 3.875 26.9787C3.875 24.3131 5.62157 22.3654 7.36815 21.8702C9.11472 21.3751 9.87731 21.4989 12.3865 19.1716C12.3865 19.1716 16.8554 14.748 23.7023 14.748C30.5492 14.748 33.4191 20.0299 34.0013 21.4246C34.5835 22.8193 35.2149 24.9898 35.2149 27.2346C35.2149 29.4793 34.3211 29.859 33.0173 29.8672C31.7136 29.8755 29.9178 29.8672 29.9178 29.8672"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M11.6729 22.3164H31.4017"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M20.1934 22.3164V29.876"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M5.61337 23.2148C5.61337 23.2148 7.43374 24.4775 6.61376 26.0951C5.79377 27.7126 4.47359 27.1679 3.875 27.234"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M17.1426 19.641C17.1426 19.641 19.2499 17.1074 23.4893 17.1074C27.7286 17.1074 28.6224 19.8226 28.6224 19.8226"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M23.4814 17.0996V19.3444"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <div class="desc">
                <h2>전시장 및 서비스센터 찾기</h2>
                <NuxtLink class="location--btn" to="/ford/network">
                  바로가기
                  <i>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                    >
                      <path
                        d="M3.33301 8H12.6663"
                        stroke="#3B3B3B"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M8 3.33398L12.6667 8.00065L8 12.6673"
                        stroke="#3B3B3B"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </i>
                </NuxtLink>
              </div>
            </li>
            <li>
              <div class="thumb">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="40"
                  height="40"
                  viewBox="0 0 40 40"
                  fill="none"
                >
                  <path
                    d="M20 3C29.3732 3 37.0001 10.6269 37.0001 20.0001"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M20 8.45312C26.3642 8.45312 31.5473 13.6311 31.5473 20.0004"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M20 14.5332C23.0141 14.5332 25.4681 16.9872 25.4681 20.0013"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M31.318 31.7402C31.262 32.1831 31.0532 32.6261 30.7732 32.9061L28.7112 34.9732C21.6851 40.8537 12.765 32.0915 12.6733 32.0049L8.00962 27.3361C7.92306 27.2445 -0.844298 18.3295 5.01079 11.3237L7.10844 9.22607C7.38338 8.95113 7.83142 8.74239 8.26928 8.68129C8.35583 8.67111 8.43729 8.66602 8.51875 8.66602C8.8446 8.66602 9.10935 8.75257 9.2621 8.90531L13.6203 13.9356C14.1447 14.46 14.1447 15.3052 13.6203 15.8296L12.0318 17.4232C11.6398 17.8458 11.3648 18.2429 11.1866 18.6451C10.8404 19.5972 10.2855 22.0869 12.6784 24.6631L15.3565 27.3463C17.9174 29.724 20.4071 29.169 21.3898 28.8126C21.7563 28.6497 22.1586 28.3697 22.5913 27.9674L24.1697 26.3891C24.6737 25.8851 25.5291 25.8545 26.0891 26.4146L31.0736 30.7321C31.2823 30.951 31.3689 31.3176 31.3129 31.7402H31.318Z"
                    stroke="white"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <div class="desc">
                <h2>24시간 긴급 출동 서비스 콜센터</h2>
                <div class="phone">080-300-3673</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="thums--wrap mt--70">
          <img src="/img/owner/tfs-visual01.jpg" alt="" />
        </div>
      </div>
      <div class="tfs--drop--menus pt--90 pb--150">
        <ul>
          <li :class="{ open: dropMenuOpen[0] }">
            <div class="title" @click="toggleDropMenu(0)">제공 서비스</div>
            <div class="drop--contents">
              <h2>긴급 견인 서비스</h2>
              <div>
                차량의 이상으로 인해 운행이 불가한 경우, 발생지점으로부터 50 km 범위 내
                가장 가까운 포드 공식서비스센터로의 무상 견인서비스를 제공해 드립니다. 단,
                사고로 인한 견인 서비스는 유상입니다.
              </div>
              <h2>배터리 충전 서비스</h2>
              <div>
                배터리 방전으로 운행이 불가한 경우, 임시 배터리 충전서비스(월 2회 한함)를
                제공해 드립니다.
              </div>
              <h2>타이어 교체 서비스</h2>
              <div>
                타이어 파손으로 교체가 필요한 경우, 고객 차량에 장착된 예비타이어로 교체해
                드립니다.
              </div>
              <h2>비상 연료 또는 요소수액 보충 서비스</h2>
              <div style="text-transform: uppercase">
                연료 또는 요소수액 소진에 따른 운행이 불가한 경우, 비상연료 또는 요소수액
                보충 서비스(월 1회 한함)를 제공해 드립니다. 다만, 제공되는 보충량은 최대
                10L이나, 사정에 따라 제공량은 변동될 수 있습니다. 아울러, 요소수액
                보충서비스는 경유차량에 한합니다.
              </div>
              <p>
                제공되는 서비스 범위 및 내용은 당사 서비스정책에 따라 별도의 사전고지없이
                변경될 수 있습니다.
              </p>
            </div>
          </li>
          <li :class="{ open: dropMenuOpen[1] }">
            <div class="title" @click="toggleDropMenu(1)">서비스 제공 시간</div>
            <div class="drop--contents">
              <div class="solo">
                차량 소유권 변동에 관계없이 주행거리 6만km 이내이면, 해당 서비스를
                이용하실 수 있습니다.
              </div>
            </div>
          </li>
          <li :class="{ open: dropMenuOpen[2] }">
            <div class="title" @click="toggleDropMenu(2)">서비스 제공 조건</div>
            <div class="drop--contents">
              <h3>
                24시간 긴급출동 서비스 이용을 위해서는 다음의 사항이 준수되어야 합니다.
              </h3>
              <ul>
                <li>
                  24시간 긴급출동 서비스 콜센터에 요청하시는 서비스 및 서비스 제공을 위한
                  관련 정보를 제공하십시오.
                </li>
                <li>
                  24시간 긴급출동 서비스를 위한 콜센터의 안내사항을 반드시 준수하십시오.
                </li>
              </ul>
            </div>
          </li>
          <li :class="{ open: dropMenuOpen[3] }">
            <div class="title" @click="toggleDropMenu(3)">긴급출동 서비스 이용 방법</div>
            <div class="drop--contents">
              <h3>
                24시간 긴급출동 서비스를 이용하고자 하실 때에는 다음 정보를 준비 및
                제공하여 주십시오.
              </h3>
              <ul>
                <li>서비스 대상 차량정보 (차량번호 및 VIN(차대번호*))</li>
                <li>
                  서비스 대상 차량의 정확한 위치(주소) 및 출동인원과 즉시 연락가능한
                  전화번호
                </li>
              </ul>
              <p class="mt--50">
                참고: 차대번호는 17자리의 숫자 및 문자로 구성되어 있으며, 이는
                차량등록증에 기재되어 있습니다.<br />
                또한 운전석 측 대시보드의 앞 유리창 부근 및 운전석 측 도어 기둥에도 해당
                정보를 확인하실 수 있습니다.
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

  // 드롭메뉴 관련 (기본 모두 열림)
  const dropMenuOpen = ref([true, 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>