<template>
  <div class="grid grid-cols-2 gap-10">
    <div
      v-for="item in data"
      class="relative aspect-[160/99] rounded-5xl bg-cover bg-center bg-no-repeat"
      :style="{ backgroundImage: `url(${item.image})` }"
    >
      <div class="absolute left-10 top-10">
        <div class="text-xl font-bold text-black-3">{{ item.title }}</div>
        <div class="text-sm text-black-9">{{ item.subTitle }}</div>
        <div
          class="mt-5 flex h-18 w-48 text-sm items-center justify-center rounded-full bg-[#c9ddff] text-[#2B7BFF]"
        >
          逍遥游
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import car_home_intro_1 from "~/assets/img/car/car_home_intro_1.png";
import car_home_intro_2 from "~/assets/img/car/car_home_intro_2.png";
import car_home_intro_3 from "~/assets/img/car/car_home_intro_3.png";
import car_home_intro_4 from "~/assets/img/car/car_home_intro_4.png";

const data = [
  {
    image: car_home_intro_1,
    title: "24小时客服",
    subTitle: "在线售后服务，出行无忧",
  },
  {
    image: car_home_intro_2,
    title: "经验司机",
    subTitle: "6年以上老司机培训上岗",
  },
  {
    image: car_home_intro_3,
    title: "行程自由",
    subTitle: "随走随停行程自由随意!",
  },
  {
    image: car_home_intro_4,
    title: "航班追踪",
    subTitle: "追踪航班动态，航变无忧",
  },
];
</script>

<style lang="scss" scoped></style>
