xyy-m/src/components/Profile/News/AllMessage.vue

<template>
  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
    <!-- <template #icon> -->
    <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
      <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
        <img
          v-if="itemData?.headImageUrl"
          class="w-full h-full object-cover"
          :src="itemData?.headImageUrl"
          alt=""
        />
        <img
          v-else
          class="w-full h-full object-cover"
          src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
          alt=""
        />
      </div>
      <!-- </template> -->
      <!-- <template #title> -->
      <div>
        <div class="-mt-5">
          <span class="text-sm text-black-6 pr-4">{{ itemData.name }} 暖阳</span>
          <div :class="`inline-block box-border px-6 text-sm text-[#FF9300] bg-[#FF9300]/[0.08]`">
            {{ state(itemData?.fansState)?.text ? '' : '粉丝' }}
          </div>
        </div>
        <h1 class="font-semibold text-black-3 text-base">赞了你的游记</h1>
        <p class="text-black-9 text-sm">2024-12-24 15:47</p>
      </div>
    </div>

    <!-- </template> -->

    <!-- <template #value> -->
    <div class="w-71 h-47 shrink-0 rounded-[4px] overflow-hidden">
      <img
        v-if="itemData?.travelNoteUrl"
        class="w-full h-full object-cover"
        :src="itemData?.travelNoteUrl"
        alt=""
      />
      <img
        v-else
        class="w-full h-full object-cover"
        src="~/assets/img/comment/H5_default.png"
        alt=""
      />
    </div>
    <!-- </template> -->
  </div>
</template>
<script setup>
const listColor = [
  {
    text: '粉丝',
    color: '#FF9300'
  },
  {
    text: '互关',
    color: '#3369E7'
  }
]

defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})

const state = (parmas) => {
  return listColor[parmas]
}
</script>

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