vue简介实例

先看样式

再看代码

<div v-else class="relative mt-4 h-44 cursor-pointer overflow-hidden rounded-xl">
  <div
    class="absolute flex h-44 w-full blur-lg"
    :style="{ backgroundImage: `url(${currentSongList.list[0]?.coverImgUrl})` }"
  />
  <div class="absolute z-50 box-border flex h-44 w-full bg-black/30 p-4">
    <load-img
      loading-height="144px "
      class-name="w-36 h-36 rounded-md"
      :src="currentSongList.list[0]?.coverImgUrl"
    />
    <div class="ml-4 flex-1">
      <n-tag type="success">
        {{ selectValue }}
      </n-tag>
      <p class="py-2 text-white">
        {{ currentSongList.list[0]?.name }}
      </p>
      <n-ellipsis :line-clamp="5" :tooltip="false" class="text-xs text-white opacity-80">
        {{ currentSongList.list[0]?.description }}
      </n-ellipsis>
    </div>
  </div>
</div>