audi/app/pages/models/sportback.vue

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

      <TitleVisual
        title="아우디 스포트백"
        description="5 도어 해치백의 실용성과 수용력, 쿠페에서 영감을받은 스타일링이 아우디 스포트백 모델의 특징입니다. 아우디의 다양한 스포트 백 모델들을 만나보세요."
        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/1920x1080_sportback.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/sportback1.avif",
      imageAlt: "A6 e-tron",
      title: "A6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 A6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 A6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/sportback2.avif",
      imageAlt: "S6 e-tron",
      title: "S6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 S6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/sportback3.avif",
      imageAlt: "A7 Sportback",
      title: "A7 Sportback",
      description:
        "아우디 A7은 넘치는 개성으로 한눈에 알아볼 수 있습니다. 고유한 라이트 시그니처가 포함된 날카로운 라이트에서, 싱글 프레임이 널찍하게 자리잡은 곧은 앞모습, 그리고 쿠페를 닮은 실루엣과 잘 조각된 뒷모습까지, 혁신적인 디자인 언어를 대표하는 더 뉴 아우디 A7 스포트백은 클래식 콰트로의 유전자를 물려 받았습니다. 재창조를 거쳐도 진정한 정체성은 유지될 수 있다는 사실을 입증해줍니다.",
      linkUrl: "/",
      linkText: "아우디 A7 Sportback 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/sportback4.avif",
      imageAlt: "A7 Sportback TFSI e",
      title: "A7 Sportback TFSI e",
      description: "",
      linkUrl: "/",
      linkText: "아우디 A7 Sportback TFSI e 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/sportback5.avif",
      imageAlt: "Q3 Sportback",
      title: "Q3 Sportback",
      description:
        "아우디 Q3 스포트백은 쿠페의 아름다운 디자인과 SUV의 성능과 기능성을 모두 갖췄습니다. 다양한 편의 사양과 디지털 기술로 연결된 인포테인먼트 시스템은 드라이빙을 더욱 즐겁게 만듭니다.",
      linkUrl: "/",
      linkText: "아우디 Q3 Sportback 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/sportback6.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/sportback7.avif",
      imageAlt: "Q5 Sportback",
      title: "Q5 Sportback",
      description: "달리는 순간, 모든 시선이 머문다",
      linkUrl: "/",
      linkText: "아우디 Q5 Sportback 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/sportback8.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/sportback9.avif",
      imageAlt: "SQ8 Sportback e-tron",
      title: "SQ8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
  ]);
</script>