1
0

2 Коммитууд af1556b91e ... e0294e50fe

Эзэн SHA1 Мессеж Огноо
  DESKTOP-T61HUSC\user e0294e50fe Merge remote-tracking branch 'origin/master' 1 сар өмнө
  DESKTOP-T61HUSC\user 2e821430e4 q8 작업진행중 1 сар өмнө

+ 470 - 0
app/pages/models/detail/q8-suv-2025.vue

@@ -0,0 +1,470 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <!-- 풀사이즈 배너 텍스트 1줄용 -->
+      <fullSizeBannerText1
+        :height="856"
+        :imagePath="bannerVideoPath"
+        class="video"
+        textLocation="bottomleft"
+        type="cover"
+        altText="The new Audi S e-tron GT"
+        btnText="상담신청"
+        btnLink="/"
+        btnTarget="_blank"
+        btnText2="내 차량 만들기"
+        btnLink2="/"
+        btnTarget2="_blank"
+        cautionText="전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급"
+      />
+
+      <TrimInfoColumn :items="trimInfoItems" />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="Adrenaline, Fully<br/> Charged"
+        description=""
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <!-- 
+      타이틀 비주얼 컴포넌트
+
+      type : middle 타이틀 중간사이즈면 좌우 여백없음
+             middle2 : 타이틀 중간사이즈면서 좌우 여백있음
+      -->
+      <TitleVisual
+        title="순수한 에너지 체험"
+        description="아우디 S e-tron GT: 가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다."
+        textAlign="left"
+        theme="dark"
+        type="middle2"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 
+        Swiper 배너 (30% + 70% 레이아웃)
+        type="vertical", 
+        type="horizental"
+      -->
+      <SwiperBanner
+        :slides="bannerSlides"
+        title=""
+        subtitle=""
+        smalldesc=""
+        notice=""
+        type="vertical"
+        :autoplay="{ delay: 0 }"
+        :loop="false"
+      />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="충전 중에도 우수한 성능"
+        description="충전하는 동안에도 짜릿한 성능을 만끽하세요. 낮은 온도에서도 최대 320kW의 충전 용량을 이용할 수 있으며, 안정적인 충전 곡선 덕분에 고속 충전의 진가를 느낄 수 있습니다."
+        textAlign="left"
+        theme="dark"
+        type="middle2"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides2"
+        notice=""
+        type="vertical"
+        :autoplay="{ delay: 0 }"
+        :loop="false"
+      />
+
+      <TrimInfoColumn :items="trimInfoItems2" class="mt--180" />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="코너링의 즐거움"
+        description="콰트로 사륜구동과 에어 서스펜션이 스포츠카 특유의 숨막히는 역동성을 제공합니다. 전기 토크 벡터링이 필요에 따라 후방 구동 휠에 다양한 수준의 토크를 배분하며, 이로써 코너링 시 우수한 후방 민첩성이 보장됩니다."
+        textAlign="left"
+        theme="dark"
+        type="middle2"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <SwiperBanner :slides="bannerSlides3" :autoplay="false" :loop="false" type="" />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="에너지로 충만한 아름다움"
+        description="아우디 S e-tron GT는 낮고 유려한 실루엣, 긴 휠베이스, 그리고 눈길을 사로잡는 S 디자인 요소를 갖추고 있습니다. 플로렛 실버 메탈릭 색상의 마감 도색이 그란 투리스모 특유의 강력한 비율과 역동적인 형태감을 강조합니다."
+        textAlign="left"
+        type="middle2"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides4"
+        :autoplay="false"
+        :loop="false"
+        type="vertical"
+      />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="디테일에 숨겨진 스포티한 매력"
+        description="운전자 중심의 콕핏 레이아웃, 스포티한 윤곽의 스티어링 휠, 그리고 앞쪽에 S자 조명 엠블럼이 달린 스포츠 시트 플러스가 실내에서도 스포츠카만의 분위기를 조성합니다."
+        textAlign="left"
+        type="middle2"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+        class="mt--100"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides5"
+        :autoplay="false"
+        :loop="false"
+        class="mt--80"
+        type="vertical"
+      />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="눈에 띄는 특별함 – 아우디 익스클루시브"
+        description="내가 특별한 만큼, 내 아우디도 특별해야 합니다. 아우디 S e-tron GT에 나만의 독창적인 매력을 더해 보세요."
+        textAlign="left"
+        type="middle2"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+        class="mt--100"
+      />
+
+      <ProductCard
+        data-type="square"
+        image="/img/models/e-tron-gt/SeGT_2024_6505-S-L.webp"
+        title="아우디 S e-tron GT가 마음에 드시나요?"
+        subtitle="지금 바로 고품질의 기본 구성부터 시작해보세요."
+        buttonText="차량 구성하기"
+        buttonUrl="https://www.audi.co.kr/ko/models/e-tron-gt/s-e-tron-gt-master-2025/konfigurator/?ulid=1762753594174&pr=F8PR9D0_2025%7CL5L5%7CFO#configurator"
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <CareProgramItem data-type-row="3" :items="careProgramItems" />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        data-type="square"
+        image="/img/etronms/3_730X730.webp"
+        title="Audi
+      Warranty 아우디 보증 프로그램"
+        smallTitle="아우디 보증 프로그램"
+        subtitle="더 오래,
+      더 안전한 드라이빙을 위한 아우디 5년 보증 프로그램으로 아우디와 함께 어디든 안심하고
+      떠나세요.<br /><br />
+      › 대상차량 : 아우디코리아에서 공식 딜러사를 통해 판매하는 모든 21년식 모델부터
+      적용<br /><br />
+      › 보증 기간 : 5년 보증 또는 최종 주행거리 150,000km 까지 (선도래조건)<br /><br />
+      › 대상 부품 : 제조사 보증과 동일<br /><br />
+      › 차량당 총 보상한도(누적) : 신차 권장소비자가격(VAT포함)<br /><br />
+      * 자세한 내용은 차량과 함께 제공되는 아우디 보증서를 확인하세요."
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <ProductCard
+        data-type="square"
+        image="/img/models/e-tron-gt/2_730X730.webp"
+        title="Car Service Plus"
+        smallTitle="카 서비스 플러스"
+        subtitle="카 서비스 플러스 프로그램은 아우디 공식 서비스센터에서 제공하는 차량 유지관리 서비스 입니다.<br/><br/>
+아우디 공식 서비스센터를 통해 제공되는 전문적이고 체계적인 유지관리는 추가 비용 부담없이 고객님 차량의 가치를 더욱 높여줄 것입니다."
+        buttonText="카 서비스 플러스 확인하기"
+        buttonUrl="/service/program/carserviceplus"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <ProductCard
+        data-type="square"
+        image="/img/etronms/e-tron_1920x1920.webp"
+        title="아우디 전기차
+"
+        smallTitle="카 서비스 플러스"
+        subtitle="아우디 최초의 순수 전기차 아우디 e-tron은 아우디 브랜드 역사의 완전한 새로운 장을 열었습니다.<br/>
+아우디 e-tron은 순수 전기 모터로 구동되며 급속 충전 편의성, 주행 중 첨단 에너지 회수 기능을 보유하고 있습니다.<br/>
+지속적으로 확장되는 아우디 e-tron 제품군은 전력으로 구동되며, 정교한 차량 디자인과 역동적인 성능 및 핸들링을 제공합니다."
+        buttonText="카 서비스 플러스 확인하기"
+        buttonUrl="/models/etron"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <CautionText />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import fullSizeBannerVideo from "~/components/block/fullSizeBannerVideo.vue";
+  import ParallaxBanner from "~/components/block/parallaxBanner.vue";
+  import SwiperBanner from "~/components/block/SwiperBanner.vue";
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+  import CautionText from "~/components/block/cautionText3.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import TrimInfoColumn from "~/components/block/TrimInfoColumn.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+
+  // Runtime Config 가져오기
+  const config = useRuntimeConfig();
+
+  const bannerVideoPath = ref("/img/models/q8/q8/main1.jpg");
+
+  // Trim 정보 데이터
+  const trimInfoItems = ref([
+    {
+      title: "최대 주행 가능 거리 (복합 기준)",
+      value: "420",
+      unit: "km",
+      subText: "10분내",
+    },
+    {
+      title: "재충전 주행 가능 거리 (유럽 WLTP 기준)",
+      value: "280",
+      unit: "km",
+      subText: "10분내",
+    },
+    {
+      title: "충전 용량 10%에서 80%까지 소요 시간 (유럽 WLTP 기준)",
+      value: "18",
+      unit: "분",
+      subText: "최고 320kW의 최대 DC 전력 충전 시",
+    },
+  ]);
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "내 차량 만들기",
+      url:
+        "https://www.audi.co.kr/ko/models/e-tron-gt/s-e-tron-gt-master-2025/konfigurator/?ulid=1762749286140&pr=F8PR9D0_2025%7CL5L5%7CFO#configurator",
+      target: "_blank",
+      showIcon: true,
+    },
+    {
+      text: "차량 상담",
+      url: config.public.testdrive,
+      target: "_blank",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/company/serviceCenter",
+      target: "_blank",
+      showIcon: true,
+    },
+    {
+      text: "카탈로그 다운로드",
+      url: "https://indd.adobe.com/view/8aee0a52-9278-4af3-9dea-e7e0fc354ff6",
+      target: "_blank",
+      showIcon: true,
+    },
+    {
+      text: "디지털 카탈로그",
+      url:
+        "https://www.audikoreaevent.co.kr/aca/ecatalog/download/Audi_SETGT25_&_RSETGTPFM25_catalog.pdf",
+      target: "_blank",
+      showIcon: true,
+    },
+  ]);
+
+  // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
+  const bannerSlides = ref([
+    {
+      video: "/img/models/e-tron-gt/s-e-tron-gt-walkaround-L.mp4",
+      alt: "",
+      title: "",
+      subtitle: "",
+      smalldesc: "",
+    },
+  ]);
+
+  const bannerSlides2 = ref([
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6504_Cast-L.avif",
+      alt: "고출력 충전",
+      title: "고출력 충전",
+      subtitle:
+        "약 18분 안에 10%에서 80%까지 충전됩니다. 또 10분이면 280km를 주행하기에 충분한 전력을 보충할 수 있습니다. 고전압 배터리를 탑재한 덕분에 HPC 충전소에서 이렇게 빠른 대용량 충전(충전 용량 최대 320kW)이 가능합니다.",
+      cautiondesc:
+        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급<br/>유럽 WLTP 기준",
+    },
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6505-L.avif",
+      alt: "내 생애 가장 오래 이어지는 아드레날린 킥",
+      title: "내 생애 가장 오래 이어지는 아드레날린 킥",
+      subtitle:
+        "기대하세요. 무려 420km(복합 기준)에 달하는 아우디 그란 투리스모 전기차의 기나긴 주행 가능 거리 덕분에 역동적인 주행 경험이 오래도록 지속됩니다.",
+      cautiondesc:
+        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
+    },
+    {
+      image: "/img/models/e-tron-gt/RRA0356-L-1.jpg",
+      alt: "효율성을 위한 방향 전환",
+      title: "효율성을 위한 방향 전환",
+      subtitle:
+        "아우디 e-tron GT를 위해 특별히 개발된 21인치 타이어는 기존 타이어 대비 최적화된 구름 저항으로 효율성이 우수하며, 따라서 주행 가능 거리를 늘리는 데 유리합니다. 이 타이어는 평균 55%의 재생 원료와 재활용 원료를 사용해 제조됩니다.",
+      cautiondesc: "참고: 사진의 모델은 아우디 RS e-tron GT 입니다.",
+    },
+  ]);
+
+  // Trim 정보 데이터
+  const trimInfoItems2 = ref([
+    {
+      title: "합산 출력",
+      value: "435",
+      unit: "kW",
+      subText: "",
+    },
+    {
+      title: "가속 (0-100km/h)",
+      value: "3.6",
+      unit: "초",
+      subText: "(Launch Control 모드: 3.4초)",
+    },
+    {
+      title: "배터리 용량 (Gross)",
+      value: "105",
+      unit: "kWh",
+      subText: "",
+    },
+  ]);
+
+  const bannerSlides3 = ref([
+    {
+      video:
+        "/img/models/e-tron-gt/EN-240430_Audi_GT_LAUNCH_CONTROL_29s_v11_1x1_CLEAN.mp4",
+      alt: "처음부터 압도적인 성능",
+      title: "처음부터 압도적인 성능",
+      subtitle:
+        "아드레날린이 솟구치는 짜릿한 경험이 매 순간 반복됩니다. 아우디 S e-tron GT 모델은 최대 435kW의 강력한 출력을 바탕으로 런치 컨트롤 모드에서 극한의 가속을 선사합니다(전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급). 정지 상태에서 3.6초(Launch Control 모드: 3.4초)면 100km/h에 도달합니다. 또한 아우디 S e-tron GT 모델의 e-tron 스포츠 사운드 덕분에 감동적인 주행 경험을 귀로도 느낄 수 있습니다. 절제, 균형, 스포티 등 원하는 사운드 프로필 옵션을 선택하세요.",
+      smalldesc: "",
+      cautiondesc: "참고: 사진의 모델은 아우디 RS e-tron GT performance 입니다.",
+    },
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6505-S-L.avif",
+      alt: "노면과 하나 되는 감각",
+      title: "노면과 하나 되는 감각",
+      subtitle:
+        "정밀하게 조향되며 조향 각도는 감소했습니다. 더 직접적인 조향 비율의 전륜 스포츠 스티어링은 특히 굽은 도로에서 운전하는 재미를 더욱 높여주며, 사륜 스티어링은 아우디 S e-tron GT의 민첩성을 한층 더 향상시킵니다.",
+      smalldesc: "",
+      cautiondesc:
+        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
+    },
+  ]);
+
+  const bannerSlides4 = ref([
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6511-L.avif",
+      alt: "모두가 주목하는 스포티한 감각",
+      title: "모두가 주목하는 스포티한 감각",
+      subtitle:
+        "넓은 전면부와 독특한 공기 흡입구, 눈에 띄는 범퍼가 스포츠카만의 인상적인 존재감을 드러냅니다. 싱글프레임의 반전 매력이 느껴지는 그릴은 특유의 3D 엠보싱으로 이러한 인상을 더욱 강화합니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6509-L.avif",
+      alt: "다이내믹한 마감",
+      title: "다이내믹한 마감",
+      subtitle:
+        "강력한 후방 디퓨저는 공기역학적 효율성과 명료한 시각적 아름다움을 결합한 결과물입니다. 수직 슬랫을 통해 난류를 줄이는 한편, 디퓨저 위에 차체 색상의 인레이를 넣어 S 모델 특유의 디자인 감각을 강조했습니다.",
+      smalldesc: "",
+      cautiondesc:
+        "전력 소비량: 3.7 km/kWh (복합), CO2&nbsp;배출량&nbsp;(복합): 0g/km,&nbsp;배출 등급: 4등급",
+    },
+    {
+      video: "/img/models/e-tron-gt/s-e-tron-gt-chlh-lights-animation-L.mp4",
+      alt: "혁신적인 조명 디자인",
+      title: "혁신적인 조명 디자인",
+      subtitle:
+        "커밍 홈/리빙 홈 기능의 다이내믹한 라이트 시퀀스가 혁신적인 느낌을 선사합니다. 후면 전체를 가로지르는 조명 스트립은 특히 강렬한 인상을 남깁니다.",
+      cautiondesc:
+        "전력 소비량: 3.7 km/kWh (복합), CO2&nbsp;배출량&nbsp;(복합): 0g/km,&nbsp;배출 등급: 4등급",
+    },
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6511-L-2.avif",
+      alt: "빛으로 완성되는 존재감",
+      title: "빛으로 완성되는 존재감",
+      subtitle:
+        "매트릭스 LED 헤드라이트와 아우디 레이저 라이트는 아우디의 진보적 디자인을 대표하는 핵심 요소입니다. 아우디 레이저 라이트의 파란색 포인트가 돋보이는 독창적인 조명 시그니처는 이 자동차의 스포티한 개성을 더욱 강조합니다.",
+      smalldesc: "",
+    },
+  ]);
+
+  const bannerSlides5 = ref([
+    {
+      image: "/img/models/e-tron-gt/SeGT_2024_6529_EN-L.avif",
+      alt: "한눈에 들어오는 디지털 정보",
+      title: "한눈에 들어오는 디지털 정보",
+      subtitle:
+        "아우디 버추얼 콕핏 플러스의 12.3인치 디스플레이는 속도 및 내비게이션 안내뿐만 아니라 배터리 온도 및 현재 차량의 최대 허용 충전 용량 등 충전 프로세스 관련 정보도 표시해 줍니다.",
+      smalldesc: "",
+    },
+    {
+      video: "/img/models/e-tron-gt/Audi_GT-Post-GlassRoof-S_1920x1080.mp4",
+      alt: "새로운 차원의 개방감",
+      title: "새로운 차원의 개방감",
+      subtitle:
+        "블라인드처럼 간편하게 조작할 수 있으면서도, 훨씬 더 다양하게 활용 가능합니다. 파노라마 글래스 루프를 구성하는 9개의 세그먼트는 각각 투명 또는 불투명으로 전환할 수 있습니다. 원하는 곳으로 햇살이 들어오도록 MMI 터치 디스플레이에서 선택하면 됩니다.",
+      smalldesc: "",
+    },
+    {
+      video: "/img/models/e-tron-gt/Frunk_S_Etron_GT-L.mp4",
+      alt: "더 넉넉한 공간",
+      title: "더 넉넉한 공간",
+      subtitle:
+        "긴 보닛 아래에 추가 수납 공간이 마련되어, 수납 용량이 77리터나 더 늘어났습니다.",
+      smalldesc: "",
+      cautiondesc: "유럽인증기준",
+    },
+  ]);
+
+  const careProgramItems = ref([
+    {
+      imagePath: "/img/models/e-tron-gt/RSeGTp_2024_6631-L.avif",
+      title: "RS e-tron GT performance",
+      description: "아우디 공식 서비스센터에서 제공되는 차량 유지관리 서비스입니다.",
+      linkUrl: "/models/detail/rs-e-tron-gt-performance-master-2025",
+      linkText: "지금 알아보기",
+      linkTarget: "_self",
+      smallText:
+        "전력 소비량: 3.4 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
+      captionText: "",
+    },
+    {
+      imagePath: "/img/models/e-tron-gt/Q6_2023_5202-cast_1-v2-L.avif",
+      title: "아우디 사고 수리 지원 프로그램",
+      description: "고객님의 안전한 이동과 차량의 완벽한 수리를 약속 드립니다.",
+      linkUrl: "/models/detail/q6-suv-e-tron-2025",
+      linkText: "지금 알아보기",
+      linkTarget: "_self",
+      smallText:
+        "전력 소비량(복합): 19.8-16.1kWh/100km, CO₂ 배출량(복합): 0g/km, CO₂ 등급: A",
+    },
+  ]);
+</script>

BIN
public/img/models/q8/q8/main1.jpg


BIN
public/img/models/q8/q8/main2.jpg


BIN
public/img/models/q8/q8/main3.mp4


BIN
public/img/models/q8/q8/slide1-1.mp4


BIN
public/img/models/q8/q8/slide1-2.mp4


BIN
public/img/models/q8/q8/slide1-3.jpg


BIN
public/img/models/q8/q8/slide2-1.jpg


BIN
public/img/models/q8/q8/slide2-2.jpg


BIN
public/img/models/q8/q8/slide2-3.jpg


BIN
public/img/models/q8/q8/slide2-4.jpg


BIN
public/img/models/q8/q8/slide3-1.mp4


BIN
public/img/models/q8/q8/slide3-2.mp4


BIN
public/img/models/q8/q8/slide4-1.jpg


BIN
public/img/models/q8/q8/slide4-2.jpg


BIN
public/img/models/q8/q8/slide4-3.jpg


BIN
public/img/models/q8/q8/slide5-1.jpg


BIN
public/img/models/q8/q8/slide5-2.jpg


+ 1 - 1
public/models.json

@@ -458,7 +458,7 @@
       "priceText": "가격 문의",
       "description": "플래그십 쿠페 SUV",
       "image": "/img/models/thumb/q8.webp",
-      "link": "/models/q8",
+      "link": "/models/detail/q8-suv-2025",
       "stock": 8,
       "isNew": false,
       "fuelType": "gas-diesel",