colexiu-project/src/views/student-info/components/item/index.tsx

import { ElImage } from 'element-plus'
import { defineComponent } from 'vue'
import pan from '../../images/pan.png'
import start from '../../images/start.png'
import hold from '../../images/hold.png'

export default defineComponent({
  name: 'item',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  render() {
    const item = this.item
    return (
      <div class="rounded-sm w-[168px] cursor-pointer overflow-hidden relative transition-all">
        <ElImage
          class="w-full h-[168px] align-middle"
          fit="cover"
          src={item.albumCoverUrl || hold}
        />

        <div class="text-lg text-black whitespace-nowrap text-ellipsis overflow-hidden py-1">
          {item.albumName}
        </div>

        <div class="flex justify-between text-sm text-[#999]">
          <div class="flex items-center">
            <img src={pan} class="w-[18px] h-[18px] mr-1" />
            <span>{item.musicSheetCount}首</span>
          </div>
          <div class="flex items-center ">
            <img src={start} class="w-[18px] h-[18px] mr-1" />
            <span>{item.albumFavoriteCount}收藏</span>
          </div>
        </div>
      </div>
    )
  }
})