<template>
  <div class="flex items-center justify-around">
    <NuxtLink
      :to="`/${item.to}`"
      v-for="item in menuData"
      :key="item.title"
      class="flex items-center space-x-5"
    >
      <img :src="item.icon" class="w-20 h-20" alt="" srcset="" />
      <span class="text-sm text-black-6">{{ 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";

const menuData = [
  {
    title: "全球包车",
    to: "car",
    icon: home_menu_car,
  },
  {
    title: "签证居留",
    to: "visa",
    icon: home_menu_house,
  },
  {
    title: "买房卖房",
    to: "house",
    icon: home_menu_visa,
  },
];
</script>

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