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

<script setup>
import HomeFoodIcon from '@/assets/img/home_food.png'
import HomeTravleIcon from '@/assets/img/home_travel.png'
import HomeLabourIcon from '@/assets/img/home_Labour.png'

const menuData = [
  {
    icon: HomeFoodIcon,
    title: '境外美食',
    to: '/food'
  },
  {
    icon: HomeTravleIcon,
    title: '境外旅游',
    to: '/travel'
  },
  {
    icon: HomeLabourIcon,
    title: '出国劳务',
    to: '/labour'
  }
]
</script>

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