audi/app/pages/models/etron.vue

<template>
  <main>
    <div class="detail--container--full pb--120">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="아우디 전기차"
        textLocation="bottom"
        type="cover"
        :height="800"
      />

      <TitleVisual
        title="아우디 전기차"
        description="아우디 최초의 순수 전기차 아우디 e-tron은 아우디 브랜드 역사의 완전한 새로운 장을 열었습니다. 아우디 e-tron은 순수 전기 모터로 구동되며 급속 충전 편의성, 주행 중 첨단 에너지 회수 기능을 보유하고 있습니다. 지속적으로 확장되는 아우디 e-tron 제품군은 전력으로 구동되며, 정교한 차량 디자인과 역동적인 성능 및 핸들링을 제공합니다."
        textAlign="center"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <!-- 링크 리스트 컴포넌트 -->
      <LinkList class="mt--20" :links="reservationLinks" />

      <modelList id="" :items="etronLineup" />
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import TitleVisual from "~/components/block/TitleVisual.vue";
  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
  import LinkList from "~/components/block/LinkList.vue";
  import modelList from "~/components/block/modelList.vue";

  const bannerImagePath = ref("/img/models/SQ6_SB_2023_6443.avif");
  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "재고 확인하기",
      url: "/",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
    {
      text: "월 납입금 계산",
      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
    {
      text: "상담신청",
      url: "/",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
    {
      text: "전시장/AS센터",
      url: "/",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
  ]);
  const etronLineup = ref([
    {
      imagePath: "/img/models/etron1.avif",
      imageAlt: "S e-tron GT",
      title: "S e-tron GT",
      description:
        "가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다.",
      linkUrl: "/",
      linkText: "아우디 S e-tron GT 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron2.avif",
      imageAlt: "RS e-tron GT performance",
      title: "RS e-tron GT performance",
      description:
        "최초의 순수 전기차 RS performance 모델인 동시에, 지금까지 생산된 아우디 양산차 중 가장 강력한 성능을 가장 아름다운 그란 투리스모 디자인에 담아 냈습니다.",
      linkUrl: "/",
      linkText: "아우디 RS e-tron GT performance 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron3.avif",
      imageAlt: "A6 e-tron",
      title: "A6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 A6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 A6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron4.avif",
      imageAlt: "S6 e-tron",
      title: "S6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 S6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron5.avif",
      imageAlt: "Q4 e-tron",
      title: "Q4 e-tron",
      description:
        "아우디의 컴팩트 순수 전기 SUV. 아우디 Q4 e-tron 아우디 Q4 e-tron은 명확한 디자인 컨셉으로 전기 모빌리티의 미래 비전을 제시합니다.",
      linkUrl: "/",
      linkText: "아우디 Q4 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron6.avif",
      imageAlt: "Q4 Sportback e-tron",
      title: "Q4 Sportback e-tron",
      description:
        "아우디의 쿠페형 컴팩트 SUV. 순수전기차 아우디 Q4 스포트백 e-tron 아우디 Q4 스포트백 e-tron의 스포티한 디자인은 진보를 통해 완성된 전기 모빌리티의 미래를 담고 있습니다.",
      linkUrl: "/",
      linkText: "아우디 Q4 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron7.avif",
      imageAlt: "Q6 e-tron",
      title: "Q6 e-tron",
      description:
        "이제, e-tron의 새로운 차원이 열립니다. 아우디 Q6 e-tron. 미래를 향한 새로운 디자인과 더욱 스마트해진 기술, 지금껏 볼 수 없었던 e-tron의 놀라운 혁신을 만나보세요.",
      linkUrl: "/",
      linkText: "아우디 Q6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron8.avif",
      imageAlt: "SQ6 e-tron",
      title: "SQ6 e-tron",
      description:
        "이제, e-tron의 새로운 차원이 열립니다. 아우디 SQ6 e-tron. 혁신에 퍼포먼스를 더한 새로운 전기의 시작. 새로운 PPE 플랫폼이 선사하는 다이나믹한 드라이빙을 경험해보세요.",
      linkUrl: "/",
      linkText: "아우디 SQ6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron9.avif",
      imageAlt: "Q8 e-tron",
      title: "Q8 e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 e-tron.",
      linkUrl: "/",
      linkText: "아우디 Q8 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron10.avif",
      imageAlt: "Q8 Sportback e-tron",
      title: "Q8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 Q8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/etron11.avif",
      imageAlt: "SQ8 Sportback e-tron",
      title: "SQ8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
  ]);
</script>