xyy-m/src/components/Profile/Notes/Published/Item.vue

<template>
  <van-swipe-cell>
    <div class="relative group flex border-box p-10 transition-all mb-10 bg-[#fff] rounded-xl">
      <div class="aspect-[4/3] h-109 border-box">
        <van-image
          width="100%"
          height="100%"
          fit="contain"
          :src="formatImgSrc(data?.tourismUrlsAfterConvert) || noteDraftCoverBg"
        />
      </div>

      <div class="flex-1 ml-15">
        <div class="min-h-70">
          <NuxtLink
            :to="`/yj/${data?.id}`"
            class="cursor-pointer truncate break-all text-base font-bold text-black-3 transition-all text-bold"
          >
            {{ data?.projectTitle }}
          </NuxtLink>
          <div class="line-clamp-3 text-sm leading-[17px] break-all text-black-6">
            {{ data?.remarks }}
          </div>
        </div>
        <div class="flex space-x-4 text-sm text-[#FD9A00]">
          <div class="flex items-center space-x-2">
            <span class="iconfont icon-eye-fill text-[#FD9A00]" style="font-size: 15px"></span>
            <div>{{ data?.pageViewCount ?? 0 }}</div>
          </div>
          <div class="pl-20 flex items-center space-x-2">
            <van-icon @click="$emit('onShare')" name="share-o" color="#FD9A00" />
          </div>
          <!-- <div v-if="data?.endPlaceDictMap" class="flex items-center space-x-2">
            <span class="iconfont icon-location-fill text-black-9" style="font-size: 15px"></span>
            <div>{{ data?.endPlaceDictMap?.name }}</div>
          </div> -->
        </div>
      </div>

      <div class="absolute top-1/2 right-0 -translate-y-1/2 z-1 w-11 h-10">
        <img class="w-full h-full" :src="left_arrow" alt="" />
      </div>
    </div>
    <template #right>
      <van-button
        square
        text="下架"
        @click="$emit('onNoteDown')"
        type="danger"
        class="delete-button"
      />
    </template>
  </van-swipe-cell>
</template>

<script setup>
import noteDraftCoverBg from '~/assets/img/note-create/note_draft_cover_bg.jpg'
import left_arrow from '~/assets/img/note-create/left.svg'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

defineEmits(['onNoteDown', 'onShare'])
//
</script>

<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
</style>