style(Player): 调整播放器界面的样式

移除宽度限制并添加文本截断功能,以改善播放器界面的显示效果
This commit is contained in:
Astrian Zheng 2025-05-24 23:49:15 +10:00
parent 2ffa445413
commit 05070e3322
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA

View File

@ -69,11 +69,11 @@ function playPrevious() {
</audio> </audio>
<div <div
class="text-white w-48 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex gap-2 overflow-hidden select-none" class="text-white h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex gap-2 overflow-hidden select-none"
v-if="playQueueStore.list.length !== 0"> v-if="playQueueStore.list.length !== 0">
<img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl ?? ''" class="rounded-full" /> <img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl ?? ''" class="rounded-full" />
<div class="flex-1 flex items-center"> <div class="flex items-center w-32">
<span class="">{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}</span> <span class="truncate">{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}</span>
</div> </div>
<button class="h-9 w-9 flex justify-center items-center" @click="() => { <button class="h-9 w-9 flex justify-center items-center" @click="() => {
playQueueStore.isPlaying = !playQueueStore.isPlaying playQueueStore.isPlaying = !playQueueStore.isPlaying