audi/app/pages/models/srange.vue

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

      <TitleVisual
        title="S 모델"
        description="최고 성능 (Sovereign Performance)이라는 의미를 담고 있는 아우디 S 모델은 아우디의 레이싱 경험과 독보적인 기술을 기반으로 스포티하고 역동적인 주행 성능, 그리고 혁신적인 디자인이 구현한 모델입니다."
        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/S_1920X1080.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/srange1.avif",
      imageAlt: "S e-tron GT",
      title: "S e-tron GT",
      description:
        "가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다.",
      linkUrl: "/",
      linkText: "아우디 S e-tron GT 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/srange2.avif",
      imageAlt: "S6 e-tron",
      title: "S6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 S6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/srange3.avif",
      imageAlt: "S5",
      title: "S5",
      description:
        "오랜 시간 동안 사랑받고 있는 Audi의 베스트셀러 모델, Audi A4 시리즈가 10세대를 맞이하며 Audi A5라는 이름으로 새롭게 태어났습니다. 신형 Audi S5는 감성을 자극하는 디자인에 근육질 형태의 차체 비율, S 전용 요소, 고성능 TFSI 엔진이 조화롭게 결합되어 있습니다.",
      linkUrl: "/",
      linkText: "아우디 S5 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/srange4.avif",
      imageAlt: "S8 L",
      title: "S8 L",
      description:
        "비교 불가능한 럭셔리 스포츠 세단, 아우디 S8 L의 목표는 단 한가지 입니다. 목적지에 빠르고 편안하게 도착하는 것입니다. 넉넉한 실내 공간과 안락한 시트, 혁신적인 조작 컨셉, 다양한 인포테인먼트 및 연결 옵션 그리고 강력한 V8 가솔린 직분사 터보차저 (TFSI) 엔진으로 마스터클래스의 드라이빙을 경험하세요.",
      linkUrl: "/",
      linkText: "아우디 S8 L 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/srange5.avif",
      imageAlt: "SQ7",
      title: "SQ7",
      description: "더욱 다이내믹하게. 고성능 프리미엄 SUV 아우디 SQ7",
      linkUrl: "/",
      linkText: "아우디 SQ7 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/srange6.avif",
      imageAlt: "SQ6 e-tron",
      title: "SQ6 e-tron",
      description: "",
      linkUrl: "/",
      linkText: "아우디 SQ6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/srange7.avif",
      imageAlt: "SQ8 Sportback e-tron",
      title: "SQ8 Sportback e-tron",
      description: "",
      linkUrl: "/",
      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
  ]);
</script>