Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

style(Playroom): 优化代码格式和布局间距

Browse Source 
- 移除多余的空格和换行符
- 统一按钮和布局的样式
- 调整元素间距提升视觉一致性
This commit is contained in:
Astrian Zheng 2025-05-26 14:14:03 +10:00
parent 4da52e7f95
commit 4a8f68346a
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/Playroom.vue
View File

@ -146,18 +146,15 @@ function getCurrentTrack() {
</script> </script>
<template> <template>
<div class="z-0 absolute top-0 left-0 w-screen h-screen" <div class="z-0 absolute top-0 left-0 w-screen h-screen" v-if="getCurrentTrack().album?.coverDeUrl">
v-if="getCurrentTrack().album?.coverDeUrl"> <img class="w-full h-full blur-2xl object-cover" :src="getCurrentTrack().album?.coverDeUrl" />
<img class="w-full h-full blur-2xl object-cover"
:src="getCurrentTrack().album?.coverDeUrl" />
<div class="bg-transparent w-full h-full absolute top-0 left-0" /> <div class="bg-transparent w-full h-full absolute top-0 left-0" />
</div> </div>
<div class="w-full flex justify-center items-center my-auto gap-16 z-10 select-none"> <div class="w-full flex justify-center items-center my-auto gap-16 z-10 select-none">
<div class="flex flex-col w-96 gap-4"> <div class="flex flex-col w-96 gap-4">
<img :src="getCurrentTrack().album?.coverUrl" <img :src="getCurrentTrack().album?.coverUrl" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" /> <div class="flex justify-between items-center gap-2">
<div class="flex justify-between items-center">
<div class="relative flex-auto w-0"> <div class="relative flex-auto w-0">
<div class=""> <div class="">
<div class="text-black/90 blur-lg text-lg font-medium truncate"> <div class="text-black/90 blur-lg text-lg font-medium truncate">
@ -181,11 +178,11 @@ function getCurrentTrack() {
</div> </div>
<div class="relative"> <button class="h-10 w-10 flex justify-center items-center rounded-full bg-black/10 backdrop-blur-3xl">
<button class="h-10 w-10 flex justify-center items-center rounded-full bg-black/10 backdrop-blur-3xl"> <span class="text-white">
<span class="text-white"><StarEmptyIcon :size="6" /></span> <StarEmptyIcon :size="6" />
</button> </span>
</div> </button>
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
@ -378,8 +375,8 @@ function getCurrentTrack() {
<hr class="border-[#ffffff39]" /> <hr class="border-[#ffffff39]" />
<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.playMode.shuffle"> <div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.playMode.shuffle">
<button v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList" class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2" <button v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList"
:key="oriIndex" @click="() => { class="p-4 w-full rounded-md hover:bg-white/5 first:mt-2" :key="oriIndex" @click="() => {
if (playQueueStore.currentIndex === shuffledIndex) { return } if (playQueueStore.currentIndex === shuffledIndex) { return }
playQueueStore.currentIndex = shuffledIndex playQueueStore.currentIndex = shuffledIndex
playQueueStore.isPlaying = true playQueueStore.isPlaying = true
@ -399,7 +396,8 @@ function getCurrentTrack() {
</div> </div>
<div class="flex flex-col text-left flex-auto w-0"> <div class="flex flex-col text-left flex-auto w-0">
<div class="text-white text-base font-medium truncate">{{ playQueueStore.list[oriIndex].song.name }}</div> <div class="text-white text-base font-medium truncate">{{ playQueueStore.list[oriIndex].song.name }}</div>
<div class="text-white/75 text-sm truncate">{{ artistsOrganize(playQueueStore.list[oriIndex].song.artists ?? []) }} — <div class="text-white/75 text-sm truncate">
{{ artistsOrganize(playQueueStore.list[oriIndex].song.artists ?? []) }} —
{{ playQueueStore.list[oriIndex].album?.name ?? '未知专辑' }} {{ playQueueStore.list[oriIndex].album?.name ?? '未知专辑' }}
</div> </div>
</div> </div>