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

6
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,6 +129,9 @@ 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>
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<div class="flex-1 text-left flex gap-1"> <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"> <button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
@ -173,5 +176,4 @@ function playPrevious() {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>