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

<template>
  <main>
    <SwiperBanner
      v-if="!isAfterLaunch"
      class="sticky--banner"
      :slides="bannerSlides"
      :autoplay="false"
      :loop="false"
      type=""
    />
    <SwiperBanner
      v-if="isAfterLaunch"
      class="sticky--banner"
      :slides="bannerSlides2"
      :autoplay="false"
      :loop="false"
      type=""
    />
    <div class="outer--wrapper" v-if="!isAfterLaunch">
      <div class="trim--spec--wrap">
        <ul>
          <li>
            <span>소비자 가격</span>
            <div>
              62,000,000<em>원 부터<i>*</i></em>
            </div>
          </li>
          <li>
            <span>엔진</span>
            <div>Ecoboost 2.3L<em></em></div>
          </li>
          <li>
            <span>승차 정원(명)</span>
            <div>6 ~ 7</div>
          </li>
        </ul>
      </div>

      <div class="title--visual">
        <h2>it’s all in the name, 포드 익스플로러</h2>
        <div class="sub--title">
          1990년 처음 미국에서 출시된 익스플로러는 대형 SUV라는 새로운 장르를 개척하며
          35년 넘는 시간 동안 성장과 진화를 거듭해 왔습니다.<br />가장 익스플로러 다운
          그리고 더욱 새로워진 더 뉴 익스플로러(The new Explorer)를 소개합니다
        </div>
      </div>

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

      <div class="car--price--small--pic--wrap mt--120">
        <div>
          <h2>Explorer Models</h2>
          <div class="car--list--wrap">
            <ul>
              <li>
                <div class="thumb">
                  <img src="/img/models/explorer/explorer-stl.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">ST-Line <span class="trim--desc">25MY</span></h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>62,000,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/explorer/explorer-plt.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">Platinum <span class="trim--desc">25MY</span></h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>68,000,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>New face of exploration</h2>
        <div class="sub--title">
          더 커진 그릴과 더 날렵해진 헤드 랩프는 익스플로러만의 유니크한 스타일링을
          완성해주었습니다.<br />
          익스플로러의 첫 인상을 만들어 내는 전면부 디자인은 전체적으로 무게 중심이 낮게
          보이도록 설계되어 시각적인 안정감을 제공합니다.
        </div>
      </div>
      <div class="models--visual--01 mt--80 type--2">
        <div class="thumb--wrap">
          <img src="/img/models/explorer/visual-02.png" />
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>ST-line</h2>
        <div class="sub--title">
          Stylish 대형 SUV라는 새로운 장르를 개척한 ST-Line은 도심 속에서 더욱 빛을
          발합니다.<br />
          하지만 도심을 벗어나 오프로드에 진입하는 순간에는 익스플로러라는 이름에 걸맞은
          4WD SUV 본연의 역할을 충실히 해냅니다.<br />
          다재다능한 The New Explorer ST-Line과 합께 하십시오.
        </div>
      </div>
      <div class="models--visual--01 mt--80 type--2">
        <div class="thumb--wrap">
          <img src="/img/models/explorer/visual-03.png" />
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>platinum</h2>
        <div class="sub--title">
          독특한 문양의 그릴이 돋보이는 Platinum 시리즈는 도심형 SUV의 진수를
          보여드립니다.<br />
          최대 7명까지 탑승 가능한 Platinum 시리즈는 많은 인원이 함께 여정을 함께하는
          순간에도 편안함을 제공하며 패밀리 SUV로서 명성을 충분히 수행합니다.
        </div>
      </div>
      <div class="models--visual--01 mt--80 type--2">
        <div class="thumb--wrap">
          <img src="/img/models/explorer/visual-04.png" />
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>gallery</h2>
        <!-- <div class="sub--title">
          가장 익스플로러 다운 그리고 더욱 새로워진 더 뉴 익스플로러 (The new explorer)를
          소개합니다.
        </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>
    <div class="outer--wrapper" v-if="isAfterLaunch">
      <div class="trim--spec--wrap">
        <ul>
          <li>
            <span>소비자 가격</span>
            <div>
              77,500,000<em>원 부터<i>*</i></em>
            </div>
          </li>
          <li>
            <span>엔진</span>
            <div>2.3L Ecoboost  I-4<br />3.0L Ecoboost V6</div>
          </li>
          <li>
            <span>승차 정원(명)</span>
            <div>6 ~ 7</div>
          </li>
        </ul>
      </div>

      <div class="title--visual">
        <h2>IT’S ALL IN THE NAME, FORD EXPLORER<br/>익스플로러 시작은 호기심과 확인</h2>
        <div class="sub--title">
          국내 대형 SUV를 개척해온 익스플로러는 오랜시간 동안 성장과 진화를 거듭해 왔습니다.<br/>가장 익스플로러다운 그리고 더욱 새로워진 뉴 익스플로러(The new Explorer)를 소개합니다.
        </div>
      </div>

      <div class="models--visual--01 type--5 mt--80">
        <div class="thumb--wrap">
          <ClientOnly>
           <video
              autoplay
              muted
              loop
              playsinline              
              poster="https://audi.interscope.co.kr/video/flak/flak_26my_web.mp4"
              preload="metadata"
            >
              <source src="https://audi.interscope.co.kr/video/flak/flak_26my_web.mp4" type="video/mp4" />
            </video>
            </ClientOnly>
        </div>
      </div>

      <div class="car--price--small--pic--wrap mt--120">
        <div>
          <h2>Models</h2>
          <div class="car--list--wrap">
            <ul>
              <li>
                <div class="thumb">
                  <img src="/img/models/explorer/n-explorer-tremor.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">Tremor</h2>
                  <div class="price--wrap flex--column">
                    <div>소비자 가격 : <em>88,500,000 원<i>*</i></em></div>
                    <div>엔진 : <em>3.0L Ecoboost V6</em></div>
                    <div>승차 정원 (명) : <em>6</em></div>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/explorer/n-explorer-stl.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">ST-Line</h2>
                  <div class="price--wrap flex--column">
                    <div>소비자 가격 : <em>77,500,000 원<i>*</i></em></div>
                    <div>엔진 : <em>2.3L Ecoboost I-4</em></div>
                    <div>승차 정원 (명) : <em>6</em></div>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/explorer/n-explorer-plt.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">Platinum</h2>
                  <div class="price--wrap flex--column">
                    <div>소비자 가격 : <em>84,500,000 원<i>*</i></em></div>
                    <div>엔진 : <em>2.3L Ecoboost I-4</em></div>
                    <div>승차 정원 (명) : <em>7</em></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="car--color--pick--wrap mt--120">
        <div>
          <div class="tab">
            <span
              :class="{ active: activeColorTab === 0 }"
              @click="activeColorTab = 0"
            >Tremor</span>
            <span
              :class="{ active: activeColorTab === 1 }"
              @click="activeColorTab = 1"
            >ST-Line</span>
            <span
              :class="{ active: activeColorTab === 2 }"
              @click="activeColorTab = 2"
            >Platinum</span>
          </div>

          <div v-show="activeColorTab === 0">
            <ColorPicker
              title="Tremor"
              :colors="colorpick3"
              titleOption
              class="mt--80"
            />
          </div>
          <div v-show="activeColorTab === 1">
            <ColorPicker
              title="st-line"
              :colors="colorpick2"
              titleOption
              class="mt--80"
            />
          </div>
          <div v-show="activeColorTab === 2">
            <ColorPicker
              title="platinum"
              titleOption
              :colors="colorpick"
              class="mt--80"
            />
          </div>
        </div>
      </div>

      <div class="models--visual--tab--type">
        <h3 class="title--interior">Interior Theme</h3>
        <div v-show="activeColorTab === 0" class="">
          <div class="thumb--wrap none--border">
            <img src="/img/models/explorer/2026/img--tremor2.jpg" alt="">
          </div>
        </div>
        <div v-show="activeColorTab === 1" class="">
          <div class="thumb--wrap none--border">
            <img src="/img/models/explorer/2026/img--stline2.jpg" alt="">
          </div>
        </div>
        <div v-show="activeColorTab === 2" class="">
          <div class="thumb--wrap none--border">
            <img src="/img/models/explorer/2026/img--platinum2.jpg" alt="">
          </div>
        </div>
      </div>

      <div class="models--visual--3view mt--100">
        <div class="thumb--wrap">
          <img src="/img/models/explorer/2026/img--tremor1.jpg" alt="Tremor">
        </div>
        <div class="thumb--wrap">
          <img src="/img/models/explorer/2026/img--stline1.jpg" alt="ST-Line">
        </div>
        <div class="thumb--wrap">
          <img src="/img/models/explorer/2026/img--platinum1.jpg" alt="Platinum">
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>gallery</h2>
        <!-- <div class="sub--title">
          가장 익스플로러 다운 그리고 더욱 새로워진 더 뉴 익스플로러 (The new explorer)를
          소개합니다.
        </div> -->
      </div>
      <div class="gallery--wrap mt--80">
        <div class="thumb--wrap">
          <SwiperBanner2
            :slides="gallery2"
            :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>
  const isAfterLaunch = useTimeSwitch('2026-04-15T08:00:00+09:00');

  // disclosures 토글 (기본 열림)
  const isDisOpen = ref(true);
  const activeColorTab = ref(0);
  const activeIntTab = ref(0);
  const bannerSlides = ref([
    {
      image: "/img/models/explorer/exp_banner01.png",
      moImage: "/img/models/explorer/exp_banner01_mo.jpg",
      alt: "the new ford explorer",
      title: "the new ford explorer",
      subtitle: "익스플로러 시작은 호기심과 확신",
      smalldesc: "",
      morelink: "/ford/network",
      morelinktitle: "시승 신청",
      morelinktarget: "",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/explorer/2026/banner.png",
      moImage: "/img/models/explorer/2026/banner_mo.jpg",
      alt: "",
      title: "",
      subtitle: "",
      smalldesc: "",
      // morelink: "/ford/network",
      // morelinktitle: "시승 신청",
      morelinktarget: "",
    },
  ]);

  const colorpick = ref([
    {
      image : "/img/models/explorer/exp_agate_black.png",
      alt : "",
      title : "Agate Black",
      colorValue : "#535353"
    },
    {
      image : "/img/models/explorer/exp_space_white.png",
      alt : "",
      title : "Space White",
      colorValue : "#939BA3"
    },
    {
      image : "/img/models/explorer/exp_carbonized_gray.png",
      alt : "",
      title : "Carbonized Gray",
      colorValue : "#58585B"
    },
    {
      image : "/img/models/explorer/exp_rapid_red.png",
      alt : "",
      title : "Rapid Red",
      colorValue : "#A21E26"
    },
    {
      image : "/img/models/explorer/exp_star_white.png",
      alt : "",
      title : "Star White",
      colorValue : "#CACBC5"
    }   
  ])
  const colorpick2 = ref([
    {
      image : "/img/models/explorer/exp_st_agate_black.png",
      alt : "",
      title : "Agate Black",
      colorValue : "#535353"
    },
    {
      image : "/img/models/explorer/exp_st_marsh_gray.png",
      alt : "",
      title : "Marsh Gray",
      colorValue : "#5B534D"
    },
    {
      image : "/img/models/explorer/exp_st_carbonized_gray.png",
      alt : "",
      title : "Carbonized Gray",
      colorValue : "#58585B"
    },
    {
      image : "/img/models/explorer/exp_st_vapor_blue.png",
      alt : "",
      title : "Vapor Blue",
      colorValue : "#384F64"
    },
    {
      image : "/img/models/explorer/exp_st_rapid_red.png",
      alt : "",
      title : "Rapid Red",
      colorValue : "#A21E26"
    },
    {
      image : "/img/models/explorer/exp_st_star_white.png",
      alt : "",
      title : "Star White",
      colorValue : "#CACBC5"
    }   
  ])
  const colorpick3 = ref([
    {
      image : "/img/models/explorer/exp_tremor_agate_black.png",
      alt : "",
      title : "Agate Black",
      colorValue : "#535353"
    },
    {
      image : "/img/models/explorer/exp_tremor_marsh_gray.png",
      alt : "",
      title : "Marsh Gray",
      colorValue : "#5B534D"
    },
    {
      image : "/img/models/explorer/exp_tremor_space_white.png",
      alt : "",
      title : "Space White",
      colorValue : "#A0A7B1"
    },   
    {
      image : "/img/models/explorer/exp_tremor_carbonized_gray.png",
      alt : "",
      title : "Carbonized Gray",
      colorValue : "#58585B"
    },
    {
      image : "/img/models/explorer/exp_tremor_vapor_blue.png",
      alt : "",
      title : "Vapor Blue",
      colorValue : "#384F64"
    },
    {
      image : "/img/models/explorer/exp_tremor_star_white.png",
      alt : "",
      title : "Star White",
      colorValue : "#CACBC5"
    },
    
  ])

  const gallery1 = ref([
    { image: "/img/models/explorer/gallery_1_1.jpg", },
    { image: "/img/models/explorer/gallery_1_2.jpg", },
    { image: "/img/models/explorer/gallery_1_3.jpg", },
    { image: "/img/models/explorer/gallery_1_4.avif", },
    { image: "/img/models/explorer/gallery_1_5.avif", },
    { image: "/img/models/explorer/gallery_1_6.avif", },
    { image: "/img/models/explorer/gallery_1_7.avif", },
    { image: "/img/models/explorer/gallery_1_8.avif", },
    { image: "/img/models/explorer/gallery_1_9.avif", },
    { image: "/img/models/explorer/gallery_1_10.avif", },
    { image: "/img/models/explorer/gallery_1_11.avif", },
    { image: "/img/models/explorer/gallery_1_12.avif", },
    { image: "/img/models/explorer/gallery_1_13.avif", },
    { image: "/img/models/explorer/gallery_1_14.avif", },
    { image: "/img/models/explorer/gallery_1_15.avif", },
    { image: "/img/models/explorer/gallery_1_16.jpg", },
    { image: "/img/models/explorer/gallery_1_17.jpg", },
    { image: "/img/models/explorer/gallery_1_18.avif", },
    { image: "/img/models/explorer/gallery_1_19.avif", },
    { image: "/img/models/explorer/gallery_1_20.avif", },
    { image: "/img/models/explorer/gallery_2_1.avif", },
    { image: "/img/models/explorer/gallery_2_2.avif", },
    { image: "/img/models/explorer/gallery_2_3.avif", },
    { image: "/img/models/explorer/gallery_2_4.avif", },
    { image: "/img/models/explorer/gallery_2_5.avif", },
    { image: "/img/models/explorer/gallery_2_6.avif", },
    { image: "/img/models/explorer/gallery_2_7.avif", },
    { image: "/img/models/explorer/gallery_2_8.avif", },
    { image: "/img/models/explorer/gallery_2_9.jpg", },
    { image: "/img/models/explorer/gallery_2_10.avif", },
    { image: "/img/models/explorer/gallery_2_11.avif", },
    { image: "/img/models/explorer/gallery_2_12.avif", },
    { image: "/img/models/explorer/gallery_2_13.avif", },
    { image: "/img/models/explorer/gallery_2_14.avif", },
    { image: "/img/models/explorer/gallery_2_15.avif", },
    { image: "/img/models/explorer/gallery_2_16.jpg", },
    { image: "/img/models/explorer/gallery_2_17.webp", },
    { image: "/img/models/explorer/gallery_2_18.webp", },
    { image: "/img/models/explorer/gallery_2_19.webp", },
    { image: "/img/models/explorer/gallery_2_20.webp", },
  ]);

  const gallery2 = ref([
    { image: "/img/models/explorer/2026/gallery1.jpg", },
    { image: "/img/models/explorer/2026/gallery2.jpg", },
    { image: "/img/models/explorer/2026/gallery3.jpg", },
    { image: "/img/models/explorer/2026/gallery4.jpg", },
    { image: "/img/models/explorer/2026/gallery5.jpg", },
    { image: "/img/models/explorer/2026/gallery6.jpg", },
    { image: "/img/models/explorer/2026/gallery7.jpg", },
    { image: "/img/models/explorer/2026/gallery8.jpg", },
    { image: "/img/models/explorer/2026/gallery9.jpg", },
    { image: "/img/models/explorer/2026/gallery10.jpg", },
    { image: "/img/models/explorer/2026/gallery11.jpg", },
    { image: "/img/models/explorer/2026/gallery12.jpg", },
    { image: "/img/models/explorer/2026/gallery13.jpg", },
    { image: "/img/models/explorer/2026/gallery14.jpg", },
    { image: "/img/models/explorer/2026/gallery15.jpg", },
    { image: "/img/models/explorer/2026/gallery16.jpg", },
    { image: "/img/models/explorer/2026/gallery17.jpg", },
    { image: "/img/models/explorer/2026/gallery18.jpg", },
    { image: "/img/models/explorer/2026/gallery19.jpg", },
    { image: "/img/models/explorer/2026/gallery20.jpg", },
    { image: "/img/models/explorer/2026/gallery21.jpg", },
    { image: "/img/models/explorer/2026/gallery22.jpg", },
    { image: "/img/models/explorer/2026/gallery23.jpg", },
    { image: "/img/models/explorer/2026/gallery24.jpg", },
  ]);
</script>