<template>
  <div
    class="bg-[#FFFBF7] py-20 px-20 pb-30 flex flex-col items-center text-black-6 text-sm"
  >
    <div class="pb-15 flex flex-col items-center">
      <div class="text-black-3 text-xl font-semibold">我们足迹踏过的地区</div>
      <div class="w-24 h-3 my-5 bg-primary"></div>
      <div class="flex flex-wrap gap-20 mt-10">
        <NuxtLink
          :to="`/travel-projects?area=${item.parentId}&country=${item.id}`"
          v-for="item in hotCountryData"
          class="text-sm text-black-6"
        >
          {{ item.menuName }}
        </NuxtLink>
      </div>
    </div>
    <van-divider />
    <div class="py-15 flex flex-col items-center">
      <div class="text-black-3 text-xl font-semibold">逍遥游旅游网</div>
      <div class="w-24 h-3 my-5 bg-primary"></div>
      <div
        class="text-sm text-black-6 flex flex-col items-center mt-10 leading-[26px]"
      >
        <div>因为年轻，所以旅行。</div>
        <div>一个与您共同成长的旅行游记网站。</div>
      </div>
    </div>
    <van-divider />
    <div class="py-15 flex flex-col items-center">
      <div class="text-black-3 text-xl font-semibold">关于我们</div>
      <div class="w-24 h-3 my-5 bg-primary"></div>
      <div class="flex items-center text-sm text-black-6 mt-10 space-x-30">
        <div>隐私政策</div>
        <div>用户协议</div>
      </div>
    </div>
    <div class="bg-[#E0E8F6] opacity-30 h-1 w-full mt-10"></div>
    <van-divider />
    <div class="flex items-center py-15 text-black-6 space-x-30">
      <div class="flex flex-col items-center space-y-10">
        <img
          src="~/assets/img/home/contract_travel_qrcode.png"
          class="h-70 w-70 object-contain"
          alt=""
        />
        <span>旅游顾问(扫码添加)</span>
      </div>
      <div class="flex flex-col items-center space-y-10">
        <img
          src="~/assets/img/kefu_qrcode.png"
          class="h-70 w-70 object-contain"
        />
        <span>公司客服(扫码添加)</span>
      </div>
    </div>
    <div class="text-black-9 text-sm mt-15">
      <span>©2024 xiaoyaotravel.com All Rights Reserved</span>
      <NuxtLink to="https://beian.miit.gov.cn/" target="_blank"
        >鲁ICP备2024119076号-1</NuxtLink
      >
      <NuxtLink to="https://www.12377.cn/" target="_blank"
        >违法和不良信息举报</NuxtLink
      >
    </div>
  </div>
</template>

<script setup>
const { data } = await useMyFetch(`website/basic/directoryList?isHotspot=1`);
const hotCountryData = computed(() => data.value?.dataList ?? []);
</script>

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