piratezon_new/app/pages/ford/vehicle/bronco.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>
              73,100,000<em>원 부터<i>*</i></em>
            </div>
          </li>
          <li>
            <span>엔진</span>
            <div>EcoBoost 2.3L</div>
          </li>
          <li>
            <span>승차 정원(명)</span>
            <div>5</div>
          </li>
        </ul>
      </div>

      <div class="title--visual">
        <h2>Bronco Outer Banks</h2>
        <div class="sub--title">
          오프로드 성능과 스타일리시한 디자인을 모두 갖춘 브롱코는<br />광활한 대자연을
          열망하고 모험을 추구하는 내면의 열정을 실현시켜줄 진정한 버디입니다.
        </div>
      </div>

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

      <div class="car--price--small--pic--wrap mt--120">
        <div>
          <h2>BRONCO Models</h2>
          <div class="car--list--wrap">
            <ul>
              <li>
                <div class="thumb">
                  <img src="/img/models/bronco/brc-car.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">Outer Banks 2.3L</h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>73,100,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>편안하고 더 넓은 SUV</h2>
        <div class="sub--title">
          오프로드 성능과 스타일리시한 디자인을 모두 갖춘 브롱코는<br />
          광활한 대자연을 열망하고 모험을 추구하는 내면의 열정을 실현시켜줄 진정한
          버디입니다.
        </div>
      </div>
      <div class="models--visual--grid mt--80 type--2">
        <ul>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/bronco/grid-01.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>탈착식 도어/루프</h2>
              <div class="captions">
                루프와 도어는 편리하게 탈부착이 가능합니다.<br />
                브롱코의 독특한 디자인과 함께 최고의 오픈-에어<br />
                경험을 즐길 수 있습니다.
              </div>
            </div>
          </li>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/bronco/grid-02.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>
                G.O.A.T (Goes Over Any Terrain)<br />
                지형 관리 시스템
              </h2>
              <div class="captions">
                G.O.A.T. MODESTM (Goes Over Any Type<br />
                of Terrain) 를 포함한 지형 관리 시스템(The Terrain<br />
                Management SystemTM)은 간단한 작동만으로도<br />
                지형, 날씨 또는 도로 상황에 맞는 퍼포먼스를 발휘할 수<br />
                있도록 설계되었습니다. 6가지 모드 중 주행 상황에<br />
                가장 적합한 모드를 선택하십시오. (NORMAL,<br />
                ECO, SLIPPERY, SAND, MUD/RUTS, SPORT)
              </div>
            </div>
          </li>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/bronco/grid-03.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>BRONCO ACCESSORIES</h2>
              <div class="captions">
                나의 라이프 스타일에 맞춰 다양한 액세서리를 장착할 수 있습니다.<br />
                개성을 표현하기 위해 외관을 업그레이드하거나<br />
                아웃도어 활동 시 편의를 위한 소품의 추가 장착도<br />
                가능합니다. 구매 가능 아이템에 대한 자세한 사항은<br />
                각 포드 딜러사 서비스 센터에서 확인하실 수 있습니다.
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- <SwiperBanner3
        class="mt--100"
        :slides="bannerSlides2"
        :autoplay="false"
        :loop="false"
        mtitle="design"
        stitle="브롱코 아우터 뱅크스와 함께 스타일리시한 아웃도어 라이프를 즐겨보십시오.<br/>
  아우터 뱅크스(Outer Banks) 모델은 LED 시그니처 라이팅 및 테일램프, 외장 컬러와 동일한 펜더 플레어,튜브 스텝 등이 포함되어 있어 오프로드를<br/>
  위한 성능은 물론 멋진 스타일도 놓치지 않았습니다. 12인치 LCD 스크린과 B&O® 사운드 시스템 등은 브롱코와 함께하는<br/>
  여정을 더욱 편리하고 즐겁게 만들어 드립니다."
        type=""
      />

      <SwiperBanner3
        :slides="bannerSlides3"
        :autoplay="false"
        :loop="false"
        type=""
        mtitle="technology"
        stitle="브롱코의 에코부스트 엔진은 일상적인 주행 상황에서 뿐만 아니라 오프로드, 트레일 라이딩에서도 뛰어난 성능을 발휘합니다.<br/>노면 상태에 따라 다양하게 4×4 모드변경을 통해 더욱 더 안정적인 주행에 도움을 받을 수 있습니다."
      /> -->

      <div class="title--visual mt--150">
        <h2>gallery</h2>
        <!-- <div class="sub--title">
          일상과 자유로운 아웃도어 라이프스타일을 향한 열망을 모두 충족시켜주는 브롱코의
          디자인은 1세대 브롱코를 현대적 감각으로 재해석
        </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/bronco/brc_banner01.jpg",
      moImage: "/img/models/bronco/brc_banner01_mo.jpg",
      alt: "THE BRONCO LEGEND FORGES AHEAD",
      title: "THE BRONCO<br/>LEGEND FORGES AHEAD",
      subtitle: "한 번도 인류의 발길이 닿지 않은 거대한 세계, 그곳으로 향하는 도전의 길",
      smalldesc: "",
      morelink: "/ford/network",
      morelinktitle: "시승 신청",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/bronco/design-01-1.png",
      alt: "Bronco Outer Banks",
      title: "Bronco Outer Banks",
      smalldesc:
        "국내 출시된 아우터 뱅크스 모델은 각진 브롱코 레터링 그릴, 전면의 둥근 헤드램프, 이목을 사로잡는 펜더 플레어로 둘러싸인 대형 타이어 등은 1세대 브롱코 디자인의<br/>특별하고도 독특한 아이텐티티를 잘 보여줍니다.",
    },
    {
      image: "/img/models/bronco/design-01-2.png",
      alt: "COMFORT MEETS DURABILITY",
      title: "COMFORT MEETS DURABILITY",
      smalldesc:
        "자유로우면서도 강인한 익스테리 감각적인 인테리어는 브롱코를 더욱 빛내주는 중요한 요소입니다.<br/>다양한 편의시설과 운전자의 체형에 따라 조절가능한 1열 파워시트, 넉넉한 레그룸을 갖춘 2열 공간은 브롱코를 더욱 매력적으로 만듭니다.",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image: "/img/models/bronco/design-02-1.png",
      alt: "10-Speed Transmissions",
      title: "10-Speed Transmissions",

      smalldesc:
        "브롱코 아우터뱅크스에 장착된 10단 자동 트랜스미션은 오프로드 상황에서도 엔진의 파워를 잘 유지시켜줄 수 있도록 설계되었으며 특히 저단 기어에서는 더욱 더 인상적인<br/>성능을 발휘합니다.",
    },
    {
      image: "/img/models/bronco/design-02-2.png",
      alt: "THE WHOLE HOSS",
      title: "THE WHOLE HOSS",

      smalldesc:
        "브롱코의 스릴 넘치는 오프로드 기량을 만들어 내는 다양한 핵심 기술 중인 HOSS (High-Performance, Off-Road, Stability, Suspension) 시스템 최신 기술을 바탕으로 설계된<br/>서스펜션은 오프로드 주행 시에는 다이내믹하면서도 안정적으로 운전의 즐거움을 만끽하도록 도와주며, 일반 도로 주행 시에는 부드럽고 편안한 주행 경험을 제공합니다.<br/>* 오프로드 주행전에는사용자 설명서를 참고하시고, 주행전 주변지형을 사전에 파악하신 후 안전을 위해 주행 환경에 적합한 기능을 사용하시기 바랍니다.",
    },
  ]);

  const gallery1 = ref([
    { image: "/img/models/bronco/gallery_1_1.avif" },
    { image: "/img/models/bronco/gallery_1_2.avif" },
    { image: "/img/models/bronco/gallery_1_3.avif" },
    { image: "/img/models/bronco/gallery_1_4.avif" },
    { image: "/img/models/bronco/gallery_1_5.avif" },
    { image: "/img/models/bronco/gallery_1_6.avif" },
    { image: "/img/models/bronco/gallery_1_7.avif" },
    { image: "/img/models/bronco/gallery_1_8.jpg" },
    { image: "/img/models/bronco/gallery_1_9.avif" },
    { image: "/img/models/bronco/gallery_1_10.avif" },
    { image: "/img/models/bronco/gallery_1_11.webp" },
    { image: "/img/models/bronco/gallery_1_12.avif" },
    { image: "/img/models/bronco/gallery_2_1.avif" },
    { image: "/img/models/bronco/gallery_2_2.avif" },
    { image: "/img/models/bronco/gallery_2_3.avif" },
    { image: "/img/models/bronco/gallery_2_4.avif" },
    { image: "/img/models/bronco/gallery_2_5.avif" },
    { image: "/img/models/bronco/gallery_2_6.avif" },
    { image: "/img/models/bronco/gallery_2_7.jpg" },
    { image: "/img/models/bronco/gallery_2_8.avif" },
    { image: "/img/models/bronco/gallery_2_9.webp" },
    { image: "/img/models/bronco/gallery_2_10.avif" },  
  ]);

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