<template>
  <NuxtLink
    :to="`/yj/${itemData.id}`"
    target="_blank"
    class="relative cursor-pointer rounded-xl bg-white p-10"
  >
    <div
      class="absolute -top-20 left-20 flex h-30 w-30 items-center justify-center rounded-xl bg-white"
    >
      <img
        src="@/assets/img/home/home_travel_note_leaf.png"
        class="h-25 w-25 object-cover"
      />
    </div>
    <van-image
      :src="formatImgSrc(itemData.homeHotPicturesAfterConvert)"
      radius="10px"
      fit="cover"
      class="w-full aspect-[230/172] object-cover"
    />
    <div class="text-base font-bold flex items-center text-primary mt-5">
      <img
        v-if="itemData.isOriginal === 1"
        src="~/assets/img/home/original_label.png"
        class="inline-block h-20 object-cover"
      />
      <span class="truncate">{{ itemData.projectTitle }}</span>
    </div>
  </NuxtLink>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({}),
  },
});
</script>

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