audi/app/pages/models/rsrange.vue

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

      <TitleVisual
        title="RS 모델"
        description="아우디 RS 브랜드는 각각 Racing을 의미하는 독일어 Renn Sport의 약자로, 레이싱 DNA를 간직한 초고성능 모델 라인입니다."
        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/R_RS_1920X1080.jpg");
  // 링크 데이터 배열
  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/rsrange1.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/rsrange2.avif",
      imageAlt: "RS 3",
      title: "RS 3",
      description:
        "아우디 RS 3는 일상에 전율을 선사합니다. 뛰어난 주행 역동성과 생동감 넘치는 디자인이 심장을 더 빨리 뛰게 합니다.",
      linkUrl: "/",
      linkText: "아우디 RS 3 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/rsrange3.avif",
      imageAlt: "RS 6 Avant performance",
      title: "RS 6 Avant performance",
      description:
        "Performance is an attitude. 아우디 RS 6 비즈니스 회의, 가족 모임 등 어느 경우든 아우디 RS 6 아반트는 여러분과 함께합니다. 이 고성능 스포츠카는 타협하지 않는 퍼포먼스를 바탕으로 일상에서 다양한 용도로 사용할 수 있습니다.",
      linkUrl: "/",
      linkText: "아우디 RS 6 Avant performance 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/rsrange4.avif",
      imageAlt: "RS 7 performance",
      title: "RS 7 performance",
      description:
        "혁신적인 기술을 직관적이고 역동적인 설계와 결합했습니다. 더 이상 타협이 필요 없는 매력적인 드라이브를 즐겨보세요. 성능은 곧 관점에서 출발합니다.",
      linkUrl: "/",
      linkText: "아우디 RS 7 performance 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/rsrange5.avif",
      imageAlt: "RS Q8 performance",
      title: "RS Q8 performance",
      description: "시선은 사로잡고, 심장을 뒤흔든다",
      linkUrl: "/",
      linkText: "아우디 RS Q8 performance 더 알아보기",
      linkTarget: "_self",
    },
  ]);
</script>