<template>
  <div class="flex flex-col items-center pt-15">
    <div class="text-xl font-bold text-black-3">逍遥游包车</div>
    <div class="mt-15 grid grid-cols-3 gap-8">
      <div
        v-for="(item, index) in data"
        class="relative cursor-pointer overflow-hidden transition-all"
        :class="{ 'col-span-2': index === 0 }"
      >
        <img
          :src="item.image"
          class="h-98 w-full object-fill"
          :class="[index === 0 ? 'aspect-[221/96]' : 'aspect-[105/96]']"
        />
        <div
          class="absolute bottom-0 left-0 right-0 top-0 bg-gradient-to-r from-[#57A6E1FF] to-[#ffffff00] pl-10 pt-10 text-2xl font-bold text-white"
        >
          <div class="text-base">{{ item.title }}</div>
          <div class="text-sm opacity-60">{{ item.subTitle }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import car_home_card_1 from "~/assets/img/car/car_home_card_1.png";
import car_home_card_2 from "~/assets/img/car/car_home_card_2.png";
import car_home_card_3 from "~/assets/img/car/car_home_card_3.png";
import car_home_card_4 from "~/assets/img/car/car_home_card_4.png";
import car_home_card_5 from "~/assets/img/car/car_home_card_5.png";

const data = [
  {
    image: car_home_card_1,
    title: "专车服务",
    subTitle: "专车服务绝不拼车套车",
  },
  {
    image: car_home_card_2,
    title: "车型任选",
    subTitle: "以最全车型满足所有用车需求。",
  },
  {
    image: car_home_card_3,
    title: "一价全包",
    subTitle: "无其他费用",
  },
  {
    image: car_home_card_4,
    title: "旅游包车",
    subTitle: "尊享全天候VIP服务",
  },
  {
    image: car_home_card_5,
    title: "专属跟单",
    subTitle: "正规资质车辆证件齐全",
  },
];
</script>

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