| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="flex bg-[var(--el-bg-color-overlay)] p-12px mb-12px rounded-1"> |
| 3 | <div class="relative" @click="playSong"> | |
| 4 | <el-image :src="songInfo.imageUrl" class="flex-none w-80px"/> | |
| 5 | <div class="bg-black bg-op-40 absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer"> | |
| 6 | <Icon :icon="currentSong.id === songInfo.id ? 'solar:pause-circle-bold':'mdi:arrow-right-drop-circle'" :size="30" /> | |
| 7 | </div> | |
| 8 | </div> | |
| 9 | <div class="ml-8px"> | |
| 10 | <div>{{ songInfo.title }}</div> | |
| 11 | <div class="mt-8px text-12px text-[var(--el-text-color-secondary)] line-clamp-2"> | |
| 12 | {{ songInfo.desc }} | |
| 13 | </div> | |
| 14 | </div> | |
| 15 | </div> | |
| 16 | </template> | |
| 17 | ||
| 18 | <script lang="ts" setup> | |
| 19 | ||
| 20 | defineOptions({ name: 'Index' }) | |
| 21 | ||
| 22 | defineProps({ | |
| 23 | songInfo: { | |
| 24 | type: Object, | |
| 25 | default: () => ({}) | |
| 26 | } | |
| 27 | }) | |
| 28 | ||
| 29 | const emits = defineEmits(['play']) | |
| 30 | ||
| 31 | const currentSong = inject('currentSong', {}) | |
| 32 | ||
| 33 | function playSong () { | |
| 34 | emits('play') | |
| 35 | } | |
| 36 | </script> | |
