audi/app/pages/service/acc/index.vue

<template>
  <main>
    <div class="detail--container--full">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="Audi Service"
        textLocation="top"
        type="cover"
        :height="800"
      />

      <TitleVisual
        title="아우디 순정 액세서리"
        description=""
        textAlign="left"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <CareProgramItem class="mt--40" :items="careProgramItems4" />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        data-type="square"
        image="/img/service/acc/myAudiworld QR_1080x1080_1.webp"
        title="myAudiworld App 다운로드하기"
        subtitle="QR코드를 스캔하여 편리하게 myAudiworld App을 다운로드하세요."
        buttonText="안드로이드 마켓 바로가기"
        buttonUrl="https://play.google.com/store/apps/details?id=com.audiapp"
        buttonTarget="_blank"
        buttonText2="아이폰 앱스토어 바로가기"
        buttonUrl2="https://apps.apple.com/kr/app/myaudiworld/id560016594"
        buttonTarget2="_blank"
        layout="horizontal"
        imagePosition="right"
      />
    </div>
  </main>
</template>

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

  const bannerImagePath = ref("/img/service/acc/2019_1400x438_topmain_15.avif");
  const careProgramItems4 = ref([
    {
      imagePath: "/img/service/acc/20220211_092635.avif",
      title: "Audi Genuine Accessories 차량용 액세서리",
      description:
        "아우디 순정 차량용 액세서리의 탁월한 디자인과 기능으로 고객님의 취향과 개성을 더욱 잘 표현할 수 있도록 기회를 제공해 드립니다.",
      // linkUrl:
      //   "https://audikoreaevent.co.kr/download/Audi_Parts_Self_Certification_User_Manual_201802.pdf",
      // linkText: "부품자기인증제 유저매뉴얼 다운로드",
      // linkTarget: "_blank",
    },
    {
      imagePath: "/img/service/acc/20220211_092608.avif",
      title: "Audi Collection 라이프스타일 액세서리",
      description:
        "여러분의 시그니쳐 스타일을 만들어보세요. 고객님의 아우디를 주차해도 아우디 네 개의 링에 대한 우리의 열정은 멈추지 않습니다. 이 열정은 우리의 일상 생활로 이어집니다.",
      // linkUrl: "https://www.audikoreaevent.co.kr/etc/component/index1.jsp",
      // linkText: "부품가격 조회하기",
      // linkTarget: "_blank",
    },
    {
      imagePath: "/img/service/acc/service_.avif",
      title: "아우디 순정 액세서리 카탈로그",
      description:
        "모바일 앱 카탈로그는 아우디 모델별 현재 제품의 포트폴리오로 차량의 내부 및 외부에 적합한 아우디 순정 액세서리를 선택하여 보실 수 있습니다.",
      linkUrl: "https://www.audikoreaevent.co.kr/lms/accessory/accList.do",
      linkText: "카달로그 보러가기",
      linkTarget: "_blank",
    },
  ]);
</script>