piratezon_new/app/pages/ford/vehicle/ranger.vue

<template>
  <main>
    <SwiperBanner
      class="sticky--banner"
      :slides="bannerSlides"
      :autoplay="false"
      :loop="false"
      type=""
    />
    <div class="outer--wrapper">
      <div class="trim--spec--wrap">
        <ul>
          <li>
            <span>소비자 가격</span>
            <div>
              63,500,000<em>원 부터<i>*</i></em>
            </div>
          </li>
          <li>
            <span>엔진</span>
            <div>Bi-Turbo Diesel 2.0L</div>
          </li>
          <li>
            <span>승차 정원(명)</span>
            <div>5</div>
          </li>
        </ul>
      </div>

      <div class="title--visual">
        <h2>OUR MOST VERSATILE RANGER EVER</h2>
        <div class="sub--title">
          지금까지 출시된 FORD RANGER 중 가장 스마트하고 다재다능한 RANGER를 만나보십시오.<br />
          오랫동안 전 세계적인 명성을 유지해 온 FORD RANGER는 단순히 일차원적인 픽업
          트럭이 아니라 고객들이 원하는 바를 모두 제공해드리기 위해 설계된 다목적
          차량입니다.<br />
          이제, 어떤 상황에서도 퍼포먼스를 발휘하는 파워풀한 엔진과 운전자의 안전을 위한
          첨단 기능이 탑재된 FORD RANGER와 함께 하십시오.
        </div>
      </div>

      <div class="models--visual--01 type--3 mt--80">
        <div class="thumb--wrap">
          <img src="/img/models/ranger/visual-01.jpg" />
        </div>
      </div>

      <div class="car--price--small--pic--wrap mt--120">
        <div>
          <h2>RANGER Models</h2>
          <div class="car--list--wrap">
            <ul>
              <li>
                <div class="thumb">
                  <img src="/img/models/ranger/ranger01.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">Wildtrak Standard</h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>63,500,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/ranger/ranger02.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">Raptor Standard</h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>79,900,000 원 부터<i>*</i></em> 
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>TOUGHER. SMARTER. MORE CAPABLE.</h2>
        <div class="sub--title">
          지금까지 출시된 포드 레인저 중 가장 스마트하고 다재다능한 레인저를
          만나보십시오.<br />
          오랫동안 세계적인 명성을 유지해 온 레인저는 단순한 픽업 트럭이 아니라 고객들이
          원하는 바를 모두 제공하기 위해 설계된 다재다능한 차량입니다. <br />
          이제, 어떤 상황에서도 흔들림 없는 퍼포먼스를 발휘하는 파워풀한 엔진과 운전자의
          안전을 위한 첨단 기능이 탑재된 포드 레인저를 경험해 보십시오.
        </div>
      </div>
      <div class="models--visual--grid mt--80 type--2">
        <ul>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/ranger/grid-01.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>FORD RANGER PICK-UP</h2>
              <div class="captions">
                포드 레인저 와일드트랙의 넉넉한 카고 스페이스는<br />
                업무용, 레저용으로 사용하기에 충분합니다.
              </div>
            </div>
          </li>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/ranger/grid-02.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>SELECTABLE DRIVE MODE</h2>
              <div class="captions">
                Ford Ranger Raptor는 간단한 작동만으로<br />
                지형 및 도로 상황에 맞는 퍼포먼스를 발휘할 수 있도록<br />
                설계된 Selectable Drive Mode가 포함되어<br />
                있습니다. 여러가지 모드 중 주행 상황에 가장 적합한<br />
                모드를 선택하십시오.
              </div>
            </div>
          </li>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/ranger/grid-03.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>DRIVER ASSISTANCE</h2>
              <div class="captions">
                넥스트 제너레이션 레인저에는 일반도로는 물론,<br />
                오프로드까지 다양한 주행환경에 최적화된<br />
                드라이브 모드를 제공합니다.
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- <SwiperBanner3
        class="mt--100"
        :slides="bannerSlides2"
        :autoplay="false"
        :loop="false"
        mtitle="design"
        stitle="검은색 FORD 그릴이 한눈에 들어오는 Ford Ranger Raptor는 강렬한 첫인상을 선사합니다.<br/>
  고강도 프레임을 바탕으로 제작된 Ford Ranger Raptor는 2.0L Bi-turbo 디젤 엔진과 10단 자동변속기가<br/>
  차체에 즉각적으로 파워를 전달하여 거친 오프로드 환경에서도 운전자의 의도대로 주행할 수 있도록 도와드립니다."
        type=""
      />

      <SwiperBanner3
        :slides="bannerSlides3"
        :autoplay="false"
        :loop="false"
        type=""
        mtitle="technology"
        stitle="포드 레인저의 2.0L 디젤 엔진은 강력한 파워를 바라는 운전자의 기대를 충족시켜드립니다.<br/>
  흙먼지가 날리는 비포장도로에서도, 무거운 짐을 싣고 달리는 오르막길에서도 레인저는 운전자에게 주행 안정감을 제공합니다."
      /> -->

      <div class="title--visual mt--150">
        <h2>gallery</h2>
        <!-- <div class="sub--title">
          여전히 많은 이들이 Raptor 라는 이름만 들어도 가슴이 설레이실 것입니다. 바로
          퍼포먼스의 모든 것, 포드 레인저 랩터 입니다.
        </div> -->
      </div>
      <div class="gallery--wrap mt--80">
        <div class="thumb--wrap">
          <SwiperBanner2
            :slides="gallery1"
            :autoplay="false"
            :loop="false"
            type=""
          />
        </div>
        <!-- <div class="thumb--wrap">
          <SwiperBanner2
            :slides="gallery2"
            :autoplay="false"
            :loop="false"
            type="interior"
          />
        </div> -->
      </div>
      <div class="nav--dis--wrap model mt--150" :class="{ active: isDisOpen }">
        <div class="dis--btn" @click="isDisOpen = !isDisOpen">disclosures <i class="ico"></i></div>
        <div class="dis--cont">
          <div class="container">
            <p>
            *본 웹사이트에 공지된 가격정보는 부가세(VAT)를 포함하고 있습니다. 본 가격은 개별소비세 인하에 관한 정부시책을 반영한 것이며 가격정보는 예고없이 변동될 수 있습니다. 
             가격정보는 고객님의 차량 구입에 도움을 드리고자 함이며 법적 구속력은 없습니다. <br/><br/>
             사이트에서 제공하는 차량에 대한 모든 이미지 또는 사양은 실제 판매 모델과 다를 수 있습니다. 정확한 정보는 가까운 공식 딜러를 통해 확인하시기 바랍니다.
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
  // disclosures 토글 (기본 열림)
  const isDisOpen = ref(true);

  const bannerSlides = ref([
    {
      image: "/img/models/ranger/ranger_banner01.jpg",
      moImage: "/img/models/ranger/ranger_banner01_mo.jpg",
      alt: "RANGER RAPTOR",
      title: "RANGER<br/>RAPTOR",
      subtitle:
        "흔들림 없는 퍼포먼스를 발휘하는 파워풀한 엔진과 운전자의 안전을 위한 첨단 기능",
      smalldesc: "",
      morelink: "/ford/network",
      morelinktitle: "시승 신청",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/ranger/design-01-1.png",
      alt: "Bold New Design",
      title: "Bold New Design",
      smalldesc:
        "보는 이의 눈길을 사로잡는 차별화된 디자인의 Wildtrak은 기대 이상의 성능을 발휘합니다.",
    },
    {
      image: "/img/models/ranger/design-01-2.png",
      alt: "Your Space. Roomy and Comfortable.",
      title: "Your Space. Roomy and Comfortable.",
      smalldesc:
        "포드 레인저 와일드트랙의 실내는 일반 주행뿐만 아니라, 장거리 및 아웃도어 주행 상황에서도 운전자의 편의를 생각하는 각종 편의 장치들이 마련되어 있습니다.<br/>레인저의 파워시트를 이용하여 탑승자의 체형에 맞게 시트 포지션을 조절해 보십시오. 또한 와일드트랙의 아이덴티티를 보여주는 독특한 컬러가 포함된 장식들은<br/>실내 인테리어 이미지와 잘 조화를 이루어 탑승자의 눈을 즐겁게 합니다.",
    },
    {
      image: "/img/models/ranger/design-01-3.png",
      alt: "Selectable Drive Mode",
      title: "Selectable Drive Mode",
      smalldesc:
        "Ford Ranger Raptor는 간단한 작동만으로 지형 및 도로 상황에 맞는 퍼포먼스를 발휘할 수 있도록 설계된 Selectable Drive Mode가 포함되어 있습니다.<br/>여러가지 모드 중 주행 상황에 가장 적합한 모드를 선택하십시오.",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image: "/img/models/ranger/design-02-1.png",
      alt: "10-Speed Transmissions",
      title: "10-Speed Transmissions",
      smalldesc:
        "Ford Ranger에 장착된 10단 자동 변속기는 일반 주행은 물론 오프로드 상황에서도 최적의 타이밍에 기어를 변경하여 차량의 성능을 최대로 발휘할 수 있도록 도와줍니다.",
    },
    {
      image: "/img/models/ranger/design-02-2.png",
      alt: "Fun on Demand",
      title: "Fun on Demand",
      smalldesc:
        "2.0L Bi-TurBo DieseL engine 포드 레인저의 2.0L 디젤 엔진은 강력한 파워를 바라는 운전자의 기대를 충족시켜드립니다.<br/>흙먼지가 날리는 비포장도로에서도, 무거운 짐을 싣고 달리는 오르막길에서도 레인저는 운전자에게 주행 안정감을 제공합니다.",
    },
    {
      image: "/img/models/ranger/design-02-3.png",
      alt: "Driver Assistance",
      title: "Driver Assistance",
      smalldesc:
        "넥스트 제너레이션 레인저에는 일반도로는 물론, 오프로드까지 다양한 주행환경에 최적화된 드라이브 모드를 제공합니다.<br/>각 모드는 주행 환경에 최적화된 세팅을 통해 기대 이상의 퍼포먼스를 발휘합니다.<br/>또한 레인저에 탑재된 다양한 편의 기능을 통해 어떤 환경에서든 안전하고 편안한 드라이빙을 경험할 수 있습니다.<br/>* 와일드트랙과 랩터에서 제공되는 드라이브 모드는 상이할 수 있으며 각종 편의 기능은 운행에 보조적인 수단으로 안전운행에 대한 주의 책임은 운전자 본인에게 있습니다.",
    },
    {
      image: "/img/models/ranger/design-02-4.png",
      alt: "Adaptive Cruise Control with Stop & Go, and Lane Centering",
      title: "Adaptive Cruise Control with Stop & Go, and Lane Centering",
      smalldesc:
        "장시간의 고속도로 주행 시 어댑티브 크루즈 컨트롤 기능을 사용해 운전의 피로감을 줄일 수 있습니다. 레인저의 전방에 다른 차량 진입을 감지해 차량 속도를 줄이거나 세팅된 속도로<br/>자동 되돌리며, 레인 센터링 기능으로 차량이 차선 중앙에서 안정적으로 주행할 수 있도록 지원합니다.",
    },
    {
      image: "/img/models/ranger/design-02-5.png",
      alt: "360-Degree Camera",
      title: "360-Degree Camera",
      smalldesc:
        "좁은 주차장이나 사람과 차들로 붐비는 공간에서 차량 운행 시 360도 카메라를 활용해 주변의 상황을 쉽게 식별해 안전한 운행과 주차를 할 수 있습니다.",
    },
  ]);

  const gallery1 = ref([
    { image: "/img/models/ranger/gallery_1_1.avif" },
    { image: "/img/models/ranger/gallery_1_2.jpg" },
    { image: "/img/models/ranger/gallery_1_3.avif" },
    { image: "/img/models/ranger/gallery_1_4.avif" },
    { image: "/img/models/ranger/gallery_1_5.avif" },
    { image: "/img/models/ranger/gallery_1_6.webp" },
    { image: "/img/models/ranger/gallery_1_7.avif" },
    { image: "/img/models/ranger/gallery_1_8.jpg" },
    { image: "/img/models/ranger/gallery_1_9.avif" },
    { image: "/img/models/ranger/gallery_1_10.jpg" },
    { image: "/img/models/ranger/gallery_1_11.avif" },
    { image: "/img/models/ranger/gallery_1_12.avif" },
    { image: "/img/models/ranger/gallery_1_13.avif" },
    { image: "/img/models/ranger/gallery_1_14.avif" },
    { image: "/img/models/ranger/gallery_1_15.avif" },
    { image: "/img/models/ranger/gallery_1_16.avif" },
    { image: "/img/models/ranger/gallery_1_17.jpg" },
    { image: "/img/models/ranger/gallery_1_18.jpg" },
    { image: "/img/models/ranger/gallery_1_19.avif" },
    { image: "/img/models/ranger/gallery_1_20.webp" },
    { image: "/img/models/ranger/gallery_1_21.avif" },
    { image: "/img/models/ranger/gallery_1_22.avif" },
    { image: "/img/models/ranger/gallery_1_23.avif" },
    { image: "/img/models/ranger/gallery_1_24.avif" },
    { image: "/img/models/ranger/gallery_1_25.avif" },
    { image: "/img/models/ranger/gallery_1_26.webp" },
    { image: "/img/models/ranger/gallery_1_27.avif" },
    { image: "/img/models/ranger/gallery_1_28.avif" },
    { image: "/img/models/ranger/gallery_1_29.avif" },
    { image: "/img/models/ranger/gallery_1_30.avif" },
    { image: "/img/models/ranger/gallery_1_31.avif" },
    { image: "/img/models/ranger/gallery_2_1.jpg" },
    { image: "/img/models/ranger/gallery_2_2.avif" },
    { image: "/img/models/ranger/gallery_2_3.avif" },
    { image: "/img/models/ranger/gallery_2_4.avif" },
    { image: "/img/models/ranger/gallery_2_5.avif" },
    { image: "/img/models/ranger/gallery_2_6.avif" },
    { image: "/img/models/ranger/gallery_2_7.webp" },
    { image: "/img/models/ranger/gallery_2_8.avif" },
    { image: "/img/models/ranger/gallery_2_9.webp" },
    { image: "/img/models/ranger/gallery_2_10.webp" },
    { image: "/img/models/ranger/gallery_2_11.avif" },
    { image: "/img/models/ranger/gallery_2_12.webp" },
    { image: "/img/models/ranger/gallery_2_13.webp" },
    { image: "/img/models/ranger/gallery_2_14.avif" },
    { image: "/img/models/ranger/gallery_2_15.webp" },
  ]);

  const gallery2 = ref([
    { image: "/img/models/ranger/gallery_2_1.jpg" },
    { image: "/img/models/ranger/gallery_2_2.avif" },
    { image: "/img/models/ranger/gallery_2_3.avif" },
    { image: "/img/models/ranger/gallery_2_4.avif" },
    { image: "/img/models/ranger/gallery_2_5.avif" },
    { image: "/img/models/ranger/gallery_2_6.avif" },
    { image: "/img/models/ranger/gallery_2_7.webp" },
    { image: "/img/models/ranger/gallery_2_8.avif" },
    { image: "/img/models/ranger/gallery_2_9.webp" },
    { image: "/img/models/ranger/gallery_2_10.webp" },
    { image: "/img/models/ranger/gallery_2_11.avif" },
    { image: "/img/models/ranger/gallery_2_12.webp" },
    { image: "/img/models/ranger/gallery_2_13.webp" },
    { image: "/img/models/ranger/gallery_2_14.avif" },
    { image: "/img/models/ranger/gallery_2_15.webp" },
  ]);
</script>