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

style(Playroom): 调整布局间距以提升视觉一致性

Browse Source 
将按钮之间的间距从 `gap-12` 调整为 `gap-16`，并重新排列部分按钮的布局，以提高页面的视觉一致性和美观性。
This commit is contained in:
Astrian Zheng 2025-05-25 17:52:34 +10:00
parent 02dd087239
commit a40268e134
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/Playroom.vue
View File

@ -100,7 +100,7 @@ function playPrevious() {
<div class="bg-gray-600/50 w-full h-full absolute top-0 left-0" /> <div class="bg-gray-600/50 w-full h-full absolute top-0 left-0" />
</div> </div>
<div class="w-full flex justify-center items-center my-auto gap-12 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 text-center w-96 gap-4"> <div class="flex flex-col text-center w-96 gap-4">
<img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl" <img :src="playQueueStore.list[playQueueStore.currentIndex].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" />
@ -129,47 +129,49 @@ function playPrevious() {
@click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button> @click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button>
</div> </div>
<div class="w-full flex justify-between items-center">
<div class="flex-1 text-left flex gap-1"> </div>
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<StarEmptyIcon :size="4" />
</button>
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<MusicListIcon :size="4" />
</button>
</div>
<div class="flex-2 text-center align-center justify-center gap-2 flex"> <div class="w-full flex justify-between items-center">
<div class="flex-1 text-left flex gap-1">
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<StarEmptyIcon :size="4" />
</button>
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<MusicListIcon :size="4" />
</button>
</div>
<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25" <div class="flex-2 text-center align-center justify-center gap-2 flex">
@click="playPrevious">
<RewindIcon :size="6" />
</button>
<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25" <button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
@click="playQueueStore.isPlaying = !playQueueStore.isPlaying"> @click="playPrevious">
<div v-if="playQueueStore.isPlaying"> <RewindIcon :size="6" />
<LoadingIndicator v-if="playQueueStore.isBuffering" :size="6" /> </button>
<PauseIcon v-else :size="6" />
</div>
<PlayIcon v-else :size="6" />
</button>
<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25" <button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
@click="playNext"> @click="playQueueStore.isPlaying = !playQueueStore.isPlaying">
<ForwardIcon :size="6" /> <div v-if="playQueueStore.isPlaying">
</button> <LoadingIndicator v-if="playQueueStore.isBuffering" :size="6" />
</div> <PauseIcon v-else :size="6" />
</div>
<PlayIcon v-else :size="6" />
</button>
<div class="flex-1 text-right flex"> <button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
<div class="flex-1" /> @click="playNext">
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25"> <ForwardIcon :size="6" />
<ChatBubbleQuoteIcon :size="4" /> </button>
</button> </div>
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<EllipsisHorizontalIcon :size="4" /> <div class="flex-1 text-right flex">
</button> <div class="flex-1" />
</div> <button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<ChatBubbleQuoteIcon :size="4" />
</button>
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<EllipsisHorizontalIcon :size="4" />
</button>
</div> </div>
</div> </div>
</div> </div>