Explorar el Código

+ 자세히보기 예외처리

송용우 hace 1 mes
padre
commit
5ece55e599

+ 18 - 1
app/components/block/SwiperBanner.vue

@@ -58,7 +58,8 @@
                 v-if="getSlideMorelink(index)"
                 class="more--detail--href mt--20"
                 :to="getSlideMorelink(index)"
-                >자세히 보기 <i class="ico"></i
+                :target="getSlideTarget(index)"
+                >{{ getSlideMorelinktitle(index) }} <i class="ico"></i
               ></NuxtLink>
             </div>
           </div>
@@ -136,6 +137,14 @@
       type: String,
       default: "",
     },
+    morelinktitle: {
+      type: String,
+      default: "자세히 보기",
+    },
+    morelinktarget: {
+      type: String,
+      default: "_self",
+    },
     notice: {
       type: String,
       default: "",
@@ -183,6 +192,14 @@
     return props.slides[index]?.morelink || props.morelink;
   };
 
+  const getSlideMorelinktitle = (index) => {
+    return props.slides[index]?.morelinktitle || props.morelinktitle;
+  };
+
+  const getSlideTarget = (index) => {
+    return props.slides[index]?.morelinktarget || props.morelinktarget;
+  };
+
   onMounted(() => {
     // Swiper 인스턴스 초기화
     swiperInstance = new Swiper(swiperContainer.value, {

+ 75 - 6
app/pages/exclusive/exclusive-order.vue

@@ -94,7 +94,28 @@
         :slides="bannerSlides5"
         :autoplay="false"
         :loop="false"
-        class="mt--50"
+        class="mt--80"
+        type="vertical"
+      />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="인테리어에도 특별함을 더하다"
+        description="다양한 가죽 트림 옵션, 컬러 장식 스티칭 등의 장식으로 모든 인테리어를 마감하고 특별한 개성을 드러낼 수 있습니다."
+        textAlign="left"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+        class="mt--100"
+      />
+
+      <SwiperBanner :slides="bannerSlides6" :autoplay="false" :loop="false" type="" />
+
+      <SwiperBanner
+        :slides="bannerSlides7"
+        :autoplay="false"
+        :loop="false"
+        class="mt--80"
         type="vertical"
       />
     </div>
@@ -239,32 +260,80 @@
 
   const bannerSlides5 = ref([
     {
-      image: "/img/exclusive/metallic.jpg",
+      image: "/img/exclusive/metallic-shiny-L.jpg",
       alt: "",
       title: "Metallic 페인트 마감:",
       subtitle: "은은하게 반짝이는 우아함.",
       smalldesc: "",
     },
     {
-      image: "/img/exclusive/pearleffect.jpg",
+      image: "/img/exclusive/metallic-L.jpg",
+      alt: "",
+      title: "Metallic 페인트 마감:",
+      subtitle: "은은하게 반짝이는 우아함.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/pearl-effect-L.jpg",
       alt: "",
       title: "Pearl effect 페인트 마감:",
       subtitle: "빛나는 광채.",
       smalldesc: "",
     },
     {
-      image: "/img/exclusive/uni.jpg",
+      image: "/img/exclusive/uni-color-L.jpg",
       alt: "",
       title: "단일 페인트 마감: ",
-      subtitle: "심플한 아름다움.",
+      subtitle: "심플한 아름다움. ",
       smalldesc: "",
     },
     {
-      image: "/img/exclusive/crystal.jpg",
+      image: "/img/exclusive/crystal-effect-L.jpg",
       alt: "",
       title: "Crystall effect 페인트 마감: ",
       subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
       smalldesc: "",
     },
   ]);
+
+  const bannerSlides6 = ref([
+    {
+      image: "/img/exclusive/AQUA_171047_1_51L_rgb-L.jpg",
+      alt: "",
+      title: "가죽의 제작 과정",
+      subtitle:
+        "30가지 이상의 다양한 테스트를 실시한 후 적합한 가죽을 선택합니다. 이러한 테스트는 내마모성, 내광성, 수축 거동, 굽힘 강도 그리고 인장력, 방출 및 가연성에 대한 저항성과 같은 요소를 확인하도록 설계되었습니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/19_AL090111_large-S-L.jpg",
+      alt: "",
+      title: "신중하게 처리되는 공정",
+      subtitle:
+        "가죽의 진성을 유지하기 위해 식물성 염료를 포함한 물질로 부드럽게 정제합니다. 그 결과 내구성이 강하고 오래 지속되며 매우 감성적인 재료가 만들어집니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/needle.jpg",
+      alt: "",
+      title: "타임리스 스티칭",
+      subtitle: "맞춤형 스티칭은 Audi 전용 차량에 완벽함 마무리 터치를 더합니다.",
+      smalldesc: "",
+    },
+  ]);
+
+  const bannerSlides7 = ref([
+    {
+      image: "/img/exclusive/27_rs6_ae_2020_2427_1_55902-L.jpg",
+      alt: "",
+      title: "",
+      subtitle:
+        "아우디 RS 6 Avant의 인테리어에는 Diamond silver black 색상의 발코나 Audi exclusive 가죽 커버와 이에 대비되는 Diamond silver 스티칭을 사용했습니다.",
+      smalldesc: "",
+      morelink:
+        "https://www.audi.co.kr/ko/models/a6/rs-6-avant-performance-2024/configurator/",
+      morelinktitle: "아우디 RS 6 내 차량 만들기",
+      morelinktarget: "_blank",
+    },
+  ]);
 </script>

BIN
public/img/exclusive/19_AL090111_large-S-L.jpg


BIN
public/img/exclusive/27_rs6_ae_2020_2427_1_55902-L.jpg


BIN
public/img/exclusive/AQUA_171047_1_51L_rgb-L.jpg


BIN
public/img/exclusive/crystal-effect-L.jpg


BIN
public/img/exclusive/metallic-L.jpg


BIN
public/img/exclusive/metallic-shiny-L.jpg


BIN
public/img/exclusive/needle.jpg


BIN
public/img/exclusive/pearl-effect-L.jpg


BIN
public/img/exclusive/uni-color-L.jpg