<template>
  <div class="flex items-center justify-around bg-white">
    <NuxtLink
      :to="`/${item.to}`"
      v-for="item in menuData"
      :key="item.title"
      class="flex flex-col items-center space-y-5"
    >
      <img :src="item.icon" class="w-24 h-24" alt="" srcset="" />
      <span class="text-base text-black-3">{{ item.title }}</span>
    </NuxtLink>
  </div>
</template>

<script setup>
import home_menu_car from "~/assets/img/home/home_menu_car.png";
import home_menu_house from "~/assets/img/home/home_menu_house.png";
import home_menu_visa from "~/assets/img/home/home_menu_visa.png";
import home_menu_note from "~/assets/img/home/home_menu_note.png";

const menuData = [
  {
    title: "全球包车",
    to: "car",
    icon: home_menu_car,
  },
  {
    title: "签证居留",
    to: "visa",
    icon: home_menu_house,
  },
  {
    title: "房屋租售",
    to: "house",
    icon: home_menu_visa,
  },
  {
    title: "写游记",
    to: "note-create",
    icon: home_menu_note,
  },
];
</script>

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