<template>
  <div
    class="grid grid-cols-3 gap-y-15 py-15 bg-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05);]"
  >
    <HomeTravelMenuItem
      v-for="item in menuData"
      :key="item.title"
      :item-data="item"
    />
  </div>
</template>

<script setup>
import HomeMenuOuzhouyouIcon from "~/assets/img/home/home_menu_ouzhouyou.png";
import HomeMenuYazhouyouIcon from "~/assets/img/home/home_menu_yazhouyou.png";
import HomeMenuAozhouyouIcon from "~/assets/img/home/home_menu_aozhouyou.png";
import HomeMenuZhongdongyouIcon from "~/assets/img/home/home_menu_zhongdongyou.png";
import HomeMenuFeizhouyouIcon from "~/assets/img/home/home_menu_feizhouyou.png";
import HomeMenuMeizhouyouIcon from "~/assets/img/home/home_menu_meizhouyou.png";

const menuData = ref([
  {
    title: "欧洲游",
    subTitle: "旅行,更自在",
    color: "#fd9a00",
    icon: HomeMenuOuzhouyouIcon,
    to: "/travel-notes?area=11",
  },
  {
    title: "亚洲游",
    subTitle: "别等,就现在",
    color: "#e42928",
    icon: HomeMenuYazhouyouIcon,
    to: "/travel-notes?area=12",
  },
  {
    title: "澳洲游",
    subTitle: "自由,在远方",
    color: "#61c8ee",
    icon: HomeMenuAozhouyouIcon,
    to: "/travel-notes?area=15",
  },
  {
    title: "中东游",
    subTitle: "人生,入逆旅",
    color: "#fd9a00",
    icon: HomeMenuZhongdongyouIcon,
    to: "/travel-notes?area=17",
  },
  {
    title: "非洲游",
    subTitle: "远行,遇见美",
    color: "#3cc873",
    icon: HomeMenuFeizhouyouIcon,
    to: "/travel-notes?area=13",
  },
  {
    title: "美洲游",
    subTitle: "暂游,桃源里",
    color: "#fa8446",
    icon: HomeMenuMeizhouyouIcon,
    to: "/travel-notes?area=14",
  },
]);
</script>

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