<template>
  <div class="w-full">
    <div class="relative mx-auto w-wrap">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-5">
          <img src="~/assets/img/home/home_plane.png" class="h-25 w-25" />
          <div>
            <div class="text-sm font-bold text-black-3">热门项目</div>
            <div class="h-2 w-50 bg-primary"></div>
            <div class="text-sm text-primary">Popular projectss</div>
          </div>
        </div>
        <div class="flex items-center space-x-10">
          <NuxtLink
            to="/travel-projects"
            class="flex h-30 px-15 cursor-pointer items-center justify-center space-x-5 rounded-full bg-primary"
          >
            <span class="text-sm font-bold text-white">了解更多</span>
            <span
              class="iconfont icon-arrow_right text-white"
              style="font-size: 14px"
            ></span>
          </NuxtLink>
        </div>
      </div>
      <div class="mt-15 grid grid-cols-2 gap-x-10 gap-y-20">
        <HomeHotTravelProjectsItem
          v-for="item in travelProjectList"
          :key="item"
          :item-data="item"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const { data } = await useMyFetch(
  `website/tourism/project/list?isHotspot=1&pageNum=1&pageSize=4`
);
const travelProjectList = computed(() => data.value?.dataList ?? []);
</script>

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