Browse Source

gridbanner 주의 텍스트 추가

송용우 1 month ago
parent
commit
ca8c4b213c

+ 76 - 0
app/assets/scss/admin.scss

@@ -1569,9 +1569,85 @@ html {
           line-height: 24px;
           font-stretch: 105%;
         }
+
+        h4{
+          margin: var(--spacing-relative-md) 0 0 0;
+          color: rgba(252, 252, 253, 0.7);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 12px;
+          line-height: 24px;
+          font-stretch: 105%;
+        }
       }
     }
   }
+
+
+
+  &[data-type="asymmetry"]{
+    >ul{  
+      @media (min-width: 1024px) {          
+        flex-direction: row;          
+      }
+
+      
+      gap:0px;
+      display: flex;
+      flex-direction: row;
+      
+      >li{
+        &:nth-of-type(1){
+          flex: 1 1 0px;
+          height: auto;
+          max-width:570px;
+        }
+        &:nth-of-type(2){
+          flex: 2 1 0px;
+          height: auto;
+          margin-left: var(--spacing-relative-md);
+        }        
+        width:100%;        
+        .thumb{
+          height:100%;
+          max-height:720px;
+        }
+        img{
+          height:100%;
+        }
+      }
+    }
+  }
+
+  &[data-type="symmetry"]{
+    >ul{        
+      
+      gap:20px;
+      display: flex;      
+      
+      >li{        
+        width:calc( (100% - 20px) / 2 );
+        flex: 1 1 0px;        
+        display: flex;
+        flex-direction: column;
+
+        .thumb{
+          height:100%;       
+          max-height:100vh;   
+          img{
+            height:100%;
+          }
+        }
+        .desc--wrapper{
+          height:auto;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+  }
+
 }
 
 

+ 3 - 3
app/components/block/GridBanner.vue

@@ -8,13 +8,14 @@
         <div class="desc--wrapper">
           <h2 v-if="item.title">{{ item.title }}</h2>
           <h3 v-if="item.subtitle">{{ item.subtitle }}</h3>
+          <h4 v-if="item.cautionText" v-html="item.cautionText"></h4>
           <NuxtLink
             v-if="item.linkUrl"
             class="more--detail--href mt--20 ft--16"
             :to="item.linkUrl"
             :target="item.linkTarget || '_self'"
           >
-            {{ item.linkText || '자세히 보기' }} <i class="ico"></i>
+            {{ item.linkText || "자세히 보기" }} <i class="ico"></i>
           </NuxtLink>
         </div>
       </li>
@@ -30,8 +31,7 @@
       required: true,
       validator: (value) => {
         return value.every(
-          (item) =>
-            item.hasOwnProperty("image") && item.hasOwnProperty("title")
+          (item) => item.hasOwnProperty("image") && item.hasOwnProperty("title")
         );
       },
     },

+ 38 - 0
app/components/block/GridBanner2.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="grid--banner--type2">
+    <ul>
+      <li v-for="(item, index) in items" :key="index">
+        <div class="thumb">
+          <img :src="item.image" :alt="item.title || '배너 이미지'" loading="lazy" />
+        </div>
+        <div class="desc--wrapper">
+          <h2 v-if="item.title">{{ item.title }}</h2>
+          <h3 v-if="item.subtitle">{{ item.subtitle }}</h3>
+          <NuxtLink
+            v-if="item.linkUrl"
+            class="more--detail--href mt--20 ft--16"
+            :to="item.linkUrl"
+            :target="item.linkTarget || '_self'"
+          >
+            {{ item.linkText || "자세히 보기" }} <i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    items: {
+      type: Array,
+      required: true,
+      validator: (value) => {
+        return value.every(
+          (item) => item.hasOwnProperty("image") && item.hasOwnProperty("title")
+        );
+      },
+    },
+  });
+</script>

+ 111 - 59
app/pages/models/detail/a6-etron.vue

@@ -63,6 +63,16 @@
 
       <CareProgramItem data-type-row="3" :items="careProgramItems2" />
 
+      <TitleVisual
+        title="100% 아우디 A6. 100% 전기차"
+        description="완전히 새로워진 순수 전기차, A6 e-tron performance"
+        textAlign="left"
+        theme="dark"
+        type="middle2"
+        :animation="true"
+        :animationDelay="300"
+      />
+
       <!-- 
         Swiper 배너 (30% + 70% 레이아웃)
         type="vertical", 
@@ -74,15 +84,15 @@
         subtitle=""
         smalldesc=""
         notice=""
-        type="vertical"
+        type=""
         :autoplay="{ delay: 0 }"
         :loop="false"
       />
 
       <!-- 타이틀 비주얼 컴포넌트 -->
       <TitleVisual
-        title="충전 중에도 우수한 성능"
-        description="충전하는 동안에도 짜릿한 성능을 만끽하세요. 낮은 온도에서도 최대 320kW의 충전 용량을 이용할 수 있으며, 안정적인 충전 곡선 덕분에 고속 충전의 진가를 느낄 수 있습니다."
+        title="전율을 일으키는 퍼포먼스"
+        description="차체 하부에 플랫한 형태로 내장되어 있는 800V 리튬 이온 배터리는 이 차량의 심장부입니다. 이 파워풀한 배터리가 충전 및 주행 시에 놀라운 성능을 발휘합니다. 효율적인 고속 충전과 최대 270kW 출력을 누려보세요[전력 소비량 (km/kWh): 4.5 (복합), 4.7 (도심), 4.2 (고속도로) / 에너지 소비 효율 등급: 3등급]."
         textAlign="left"
         theme="dark"
         type="middle2"
@@ -98,19 +108,22 @@
         :loop="false"
       />
 
-      <TrimInfoColumn :items="trimInfoItems2" class="mt--180" />
-
       <!-- 타이틀 비주얼 컴포넌트 -->
       <TitleVisual
-        title="코너링의 즐거움"
-        description="콰트로 사륜구동과 에어 서스펜션이 스포츠카 특유의 숨막히는 역동성을 제공합니다. 전기 토크 벡터링이 필요에 따라 후방 구동 휠에 다양한 수준의 토크를 배분하며, 이로써 코너링 시 우수한 후방 민첩성이 보장됩니다."
+        title="새로운 형태의 디자인"
+        description="아우디 A6 e-tron performance는 아우디의 새로운 전기차 디자인 언어를 담고 있습니다. 유려한 쿠페형 루프 아래로 큼직한 휠, 짧은 오버행, 플랫한 캐빈이 스포티한 비율을 부각시킵니다."
         textAlign="left"
         theme="dark"
         type="middle2"
+        class="mt--80"
         :animation="true"
         :animationDelay="300"
       />
 
+      <GridBanner2 data-type="asymmetry" :items="bannerItems" class="mt--45" />
+
+      <GridBanner data-type="symmetry" :items="bannerItems2" class="mt--45" />
+
       <SwiperBanner :slides="bannerSlides3" :autoplay="false" :loop="false" type="" />
 
       <!-- 타이틀 비주얼 컴포넌트 -->
@@ -241,6 +254,8 @@
   import LinkList from "~/components/block/LinkList.vue";
   import TrimInfoColumn from "~/components/block/TrimInfoColumn.vue";
   import CareProgramItem from "~/components/block/CareProgramItem.vue";
+  import GridBanner2 from "~/components/block/GridBanner2.vue";
+  import GridBanner from "~/components/block/GridBanner.vue";
 
   // Runtime Config 가져오기
   const config = useRuntimeConfig();
@@ -322,62 +337,91 @@
   // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
   const bannerSlides = ref([
     {
-      video: "/img/models/e-tron-gt/s-e-tron-gt-walkaround-L.mp4",
+      video: "/img/models/a6-etron/audi_a6_sb_e-tron_product_S-L.mp4",
       alt: "",
-      title: "",
-      subtitle: "",
+      title: "빠른 충전, 긴 주행 거리",
+      subtitle:
+        "효율적인 구동 시스템과 정교한 공기역학 설계를 갖춘 더 뉴 아우디 A6 e-tron performance는 최대 469km의 주행 가능 거리와 최대 270kW(DC)의 고속 충전을 지원합니다. 커피 한 잔을 마실 시간이면 충전이 완료됩니다.",
       smalldesc: "",
     },
-  ]);
-
-  const bannerSlides2 = ref([
     {
-      image: "/img/models/e-tron-gt/SeGT_2024_6504_Cast-L.avif",
-      alt: "고출력 충전",
-      title: "고출력 충전",
+      video:
+        "/img/models/a6-etron/Walkaround_2024_A6_e-tron_NF_Sportback_AU51X_1920x1920_1.mp4",
+      alt: "",
+      title: "강렬한 Sportback 디자인",
       subtitle:
-        "약 18분 안에 10%에서 80%까지 충전됩니다. 또 10분이면 280km를 주행하기에 충분한 전력을 보충할 수 있습니다. 고전압 배터리를 탑재한 덕분에 HPC 충전소에서 이렇게 빠른 대용량 충전(충전 용량 최대 320kW)이 가능합니다.",
-      cautiondesc:
-        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급<br/>유럽 WLTP 기준",
+        "더 뉴 아우디 A6 e-tron performance는 e-tron 디자인 언어의 새로운 지평을 엽니다. 플랫한 캐빈, 쿠페 스타일의 유려한 루프 라인, 넓은 휠베이스로 완성된 스포티한 비율이 마음을 사로잡습니다.",
+      smalldesc: "",
     },
     {
-      image: "/img/models/e-tron-gt/SeGT_2024_6505-L.avif",
-      alt: "내 생애 가장 오래 이어지는 아드레날린 킥",
-      title: "내 생애 가장 오래 이어지는 아드레날린 킥",
+      video:
+        "/img/models/a6-etron/InteriorWalkaround_A6_e-tron_NF_Sportback_AU51X_1920x1920_1.mp4",
+      alt: "",
+      title: "시각적으로 명확한 디자인과 편안함",
       subtitle:
-        "기대하세요. 무려 420km(복합 기준)에 달하는 아우디 그란 투리스모 전기차의 기나긴 주행 가능 거리 덕분에 역동적인 주행 경험이 오래도록 지속됩니다.",
+        "모든 요소가 운전자에게 집중되어 있습니다. 부드러운 곡면과 고급 소재는 기분 좋은 촉감을 선사하며 차량의 고급스러움을 강조합니다. 소프트랩 구조는 도어 트림에서부터 계기판을 지나 센터 콘솔과 센터 암레스트를 시각적으로 연결합니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/models/a6-etron/A6e_2023_5944_EN-S-L.avif",
+      alt: "",
+      title: "디지털, 스마트, 편의성",
+      subtitle:
+        "MMI 파노라믹 디스플레이, 증강현실(AR) 헤드업 디스플레이, 아우디 어시스턴트, 다이내믹 인터렉션 라이트, 헤드레스트 스피커가 장착된 B&O 3D 프리미엄 사운드 시스템 등 첨단 기능을 갖춘 새로운 디지털 실내 공간을 경험해보세요.",
+      smalldesc: "",
       cautiondesc:
-        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
+        "증강현실 헤드업 디스플레이와 다이내믹 인터랙션 라이트는 Advanced 트림에서 미적용되며, 헤드레스트 스피커가 장착된 B&O 3D 프리미엄 사운드 시스템은 S-line Black Edition 트림에서 적용됩니다.",
+    },
+  ]);
+
+  const bannerSlides2 = ref([
+    {
+      image: "/img/models/a6-etron/A6e_2023_5920-L.avif",
+      alt: "긴 여정을 위한 완벽한 준비",
+      title: "긴 여정을 위한 완벽한 준비",
+      subtitle:
+        "놀라운 주행 가능 거리와 e-tron 경로 플래너가 포함된 지능형 내비게이션 덕분에 장거리 주행을 여유롭게 즐기실 수 있습니다. e-tron 경로 플래너는 충전 지점을 계획하고 급속 충전을 위해 배터리를 사전 조절하는 등 다양한 기능을 제공합니다.",
+      cautiondesc: "",
     },
     {
-      image: "/img/models/e-tron-gt/RRA0356-L-1.jpg",
-      alt: "효율성을 위한 방향 전환",
-      title: "효율성을 위한 방향 전환",
+      image: "/img/models/a6-etron/A6e_2023_5962_EN-L.avif",
+      alt: "회생 제동 시스템을 통한 에너지 회수",
+      title: "회생 제동 시스템을 통한 에너지 회수",
       subtitle:
-        "아우디 e-tron GT를 위해 특별히 개발된 21인치 타이어는 기존 타이어 대비 최적화된 구름 저항으로 효율성이 우수하며, 따라서 주행 가능 거리를 늘리는 데 유리합니다. 이 타이어는 평균 55%의 재생 원료와 재활용 원료를 사용해 제조됩니다.",
-      cautiondesc: "참고: 사진의 모델은 아우디 RS e-tron GT 입니다.",
+        "회생 제동 시스템을 통해 관성 주행 시는 물론이고 제동 중에도 에너지를 회수할 수 있습니다. 관성 주행 동안 에너지 회수는 운전자가 가속 페달에서 발을 뗄 때 활성화됩니다. 회수 수준은 스티어링 휠 페들을 통해 자동 또는 수동으로 선택할 수 있으며, 세 단계로 조절이 가능합니다.",
+      cautiondesc: "",
     },
   ]);
 
-  // Trim 정보 데이터
-  const trimInfoItems2 = ref([
+  const bannerItems = ref([
     {
-      title: "합산 출력",
-      value: "435",
-      unit: "kW",
-      subText: "",
+      image: "/img/models/a6-etron/A6e_2023_5915-L.jpg",
+      title: "",
+      subtitle:
+        "차원이 다른 존재감과 스포티한 개성: 차체 컬러의 인버티드 싱글프레임이 강렬한 존재감을 완성합니다. 날렵한 주간 주행등으로 넓고 낮은 전면 디자인이 한층 더 강조됩니다.",
     },
     {
-      title: "가속 (0-100km/h)",
-      value: "3.6",
-      unit: "초",
-      subText: "(Launch Control 모드: 3.4초)",
+      image: "/img/models/a6-etron/A6e_2023_5913-L.avif",
+      title: "",
+      subtitle:
+        "플랫한 실루엣: 넓은 휠 아치와 21인치 대형 휠, 플랫한 쿠페형 실루엣이 스포티한 외관을 연출합니다. 사이드 실 위의 블랙 인레이는 e-tron 디자인의 특징으로, 차량의 심장인 배터리를 상징합니다.",
     },
+  ]);
+
+  const bannerItems2 = ref([
     {
-      title: "배터리 용량 (Gross)",
-      value: "105",
-      unit: "kWh",
-      subText: "",
+      image: "/img/models/a6-etron/A6e_2023_5916-S.jpg",
+      title: "",
+      subtitle:
+        "공기역학적 후면부: 강렬한 후면부 디자인은 길게 이어지는 라이트 스트립과 그 위의 일루미네이티드 아우디 링으로 완성됩니다. 개성 있는 리어 디퓨저 덕분에 파워풀하고 스포티한 비율이 한층 돋보입니다.",
+    },
+    {
+      image: "/img/models/a6-etron/A6e_2023_6036-S.avif",
+      title: "",
+      subtitle:
+        "버추얼 사이드 미러: 옵션 사양인 버추얼 사이드 미러의 카메라는 후방 뷰를 고해상도 OLED 디스플레이에 투사하며, 인체공학적 설계 덕분에 운전자의 시야 안에 자연스럽게 표시됩니다. 또한 차량의 공기역학을 개선하며 전동식으로 접을 수 있습니다.",
+      cautionText:
+        "* 아우디 A6 Avant e-tron performance 이미지입니다.<br/>* 버추얼 사이드 미러의 경우, S-line Black Edition만 기본 사양이며 Advanced 및 S-line 에는 추가금이 발생하는 옵션입니다.",
     },
   ]);
 
@@ -508,30 +552,38 @@
       title: "A6 e-tron performance Advanced",
       description:
         "94,590,000원* 부터<br/><br/>- 구동전동기의 최고출력: 270 kW<br/>- 1회 충전 주행 거리: 469 km (복합)",
-      linkUrl: "/service/program/dealersearch",
-      linkText: "전시장 바로가기",
-      linkTarget: "_self",
-      smallText: "",
+      linkUrl:
+        "https://www.audi.co.kr/ko/models/a-6-e-tron/a6-e-tron-performance-2025/configurator/?ulid=1762761928471&pr=GHAAC80_2025%7CG5G5%7CII#configurator",
+      linkText: "A6 e-tron performance Advanced 차량 만들기",
+      linkTarget: "_blank",
+      smallText:
+        "* 위 권장소비자가격은 3.5%의 한시적 개별소비세 인하분이 적용된 가격이며, 환경친화적자동차 등재 기준입니다.",
       captionText: "",
     },
     {
       imagePath: "/img/models/a6-etron/A6-e-tron-performance-S-line_1920x1080_new.avif",
-      title: "",
-      description: "",
-      linkUrl: "/service/careprogram/",
-      linkText: "아우디 e-tron 케어 프로그램 바로가기",
-      linkTarget: "_self",
-      smallText: "",
+      title: "A6 e-tron performance S-line",
+      description:
+        "102,100,000원* 부터<br/><br/>- 구동전동기의 최고출력: 270 kW<br/>- 1회 충전 주행 거리: 469 km (복합)",
+      linkUrl:
+        "https://www.audi.co.kr/ko/models/a-6-e-tron/a6-e-tron-performance-2025/configurator/?ulid=1762762063887&pr=GHAAC80_2025%7CG5G5%7CII#configurator",
+      linkText: "A6 e-tron performance S-line 차량 만들기",
+      linkTarget: "_blank",
+      smallText:
+        "* 위 권장소비자가격은 3.5%의 한시적 개별소비세 인하분이 적용된 가격이며, 환경친화적자동차 등재 기준입니다.",
     },
     {
       imagePath:
         "/img/models/a6-etron/A6-e-tron-performance-Black-Edition_1920x1080_new.avif",
-      title: "",
-      description: "",
-      linkUrl: "/service/program/carserviceplus",
-      linkText: "카 서비스 플러스 바로가기",
-      linkTarget: "_self",
-      smallText: "",
+      title: "A6 e-tron performance Black Edition",
+      description:
+        "105,860,000원* 부터<br/><br/>- 구동전동기의 최고출력: 270 kW<br/>- 1회 충전 주행 거리: 469 km (복합)",
+      linkUrl:
+        "https://www.audi.co.kr/ko/models/a-6-e-tron/a6-e-tron-performance-2025/configurator/?ulid=1762762064251&pr=GHAAC80_2025%7CG5G5%7CII#configurator",
+      linkText: "A6 e-tron performance Black Edition 차량 만들기",
+      linkTarget: "_blank",
+      smallText:
+        "* 위 권장소비자가격은 3.5%의 한시적 개별소비세 인하분이 적용된 가격이며, 환경친화적자동차 등재 기준입니다.",
     },
   ]);
 </script>

BIN
public/img/models/a6-etron/A6e_2023_5913-L.avif


BIN
public/img/models/a6-etron/A6e_2023_5913-L.jpg


BIN
public/img/models/a6-etron/A6e_2023_5915-L.jpg


BIN
public/img/models/a6-etron/A6e_2023_5916-S.jpg


BIN
public/img/models/a6-etron/A6e_2023_5920-L.avif


BIN
public/img/models/a6-etron/A6e_2023_5944_EN-S-L.avif


BIN
public/img/models/a6-etron/A6e_2023_5962_EN-L.avif


BIN
public/img/models/a6-etron/A6e_2023_6036-S.avif


BIN
public/img/models/a6-etron/InteriorWalkaround_A6_e-tron_NF_Sportback_AU51X_1920x1920_1.mp4


BIN
public/img/models/a6-etron/Walkaround_2024_A6_e-tron_NF_Sportback_AU51X_1920x1920_1.mp4


BIN
public/img/models/a6-etron/audi_a6_sb_e-tron_product_S-L.mp4