mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-03 14:20:50 +08:00
✨ feat: 优化歌曲列表组件布局,添加底部间距以提升视觉效果
This commit is contained in:
@@ -109,14 +109,16 @@
|
||||
@scroll="handleVirtualScroll"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<div class="double-item">
|
||||
<song-item
|
||||
:index="index"
|
||||
:compact="isCompactLayout"
|
||||
:item="formatSong(item)"
|
||||
@play="handlePlay"
|
||||
:style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
|
||||
/>
|
||||
<div>
|
||||
<div class="double-item">
|
||||
<song-item
|
||||
:index="index"
|
||||
:compact="isCompactLayout"
|
||||
:item="formatSong(item)"
|
||||
@play="handlePlay"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="index === filteredSongs.length - 1" class="h-36"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
|
||||
@@ -168,19 +168,21 @@
|
||||
@scroll="handleVirtualScroll"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<div class="double-item">
|
||||
<song-item
|
||||
:index="index"
|
||||
:compact="isCompactLayout"
|
||||
:item="formatSong(item)"
|
||||
:can-remove="canRemove"
|
||||
:selectable="isSelecting"
|
||||
:selected="selectedSongs.includes(item.id as number)"
|
||||
@play="handlePlay"
|
||||
@remove-song="handleRemoveSong"
|
||||
@select="(id, selected) => handleSelect(id, selected)"
|
||||
:style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
|
||||
/>
|
||||
<div>
|
||||
<div class="double-item">
|
||||
<song-item
|
||||
:index="index"
|
||||
:compact="isCompactLayout"
|
||||
:item="formatSong(item)"
|
||||
:can-remove="canRemove"
|
||||
:selectable="isSelecting"
|
||||
:selected="selectedSongs.includes(item.id as number)"
|
||||
@play="handlePlay"
|
||||
@remove-song="handleRemoveSong"
|
||||
@select="(id, selected) => handleSelect(id, selected)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="index === filteredSongs.length - 1" class="h-36"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
/>
|
||||
<div class="play-list-item-info">
|
||||
<div class="play-list-item-name">
|
||||
{{ item.name }}
|
||||
<n-ellipsis :line-clamp="1">{{ item.name }}</n-ellipsis>
|
||||
<div v-if="item.creator.userId === user.userId" class="playlist-creator-tag">
|
||||
{{ t('user.playlist.mine') }}
|
||||
</div>
|
||||
@@ -396,6 +396,7 @@ const isLoggedIn = computed(() => userStore.user);
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
min-width: 60px;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user