feat(Playroom): 优化播放界面样式并添加视觉层次效果
- 替换列表箭头图标为循环双箭头图标 - 背景不再使用降低亮度的蒙版 - 为文本和按钮添加阴影和模糊背景效果 - 统一调整按钮尺寸和交互样式 - 优化时间显示布局和切换功能
This commit is contained in:
parent
5ded7f4f9d
commit
c07f430009
SSH Key Fingerprint:
SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
|
|
@ -18,7 +18,7 @@ import MusicListIcon from '../assets/icons/musiclist.vue'
|
|||
import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue'
|
||||
import XIcon from '../assets/icons/x.vue'
|
||||
import ShuffleIcon from '../assets/icons/shuffle.vue'
|
||||
import ListArrowIcon from '../assets/icons/listarrow.vue'
|
||||
import CycleTwoArrowsIcon from '../assets/icons/cycletwoarrows.vue'
|
||||
|
||||
const playQueueStore = usePlayQueueStore()
|
||||
gsap.registerPlugin(Draggable)
|
||||
|
|
@ -140,37 +140,60 @@ function makePlayQueueListDismiss() {
|
|||
v-if="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl">
|
||||
<img class="w-full h-full blur-2xl object-cover"
|
||||
:src="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" />
|
||||
<div class="bg-gray-600/50 w-full h-full absolute top-0 left-0" />
|
||||
<div class="bg-transparent w-full h-full absolute top-0 left-0" />
|
||||
</div>
|
||||
|
||||
<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 w-96 gap-4">
|
||||
<img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl"
|
||||
class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
|
||||
<div>
|
||||
<div class="text-white text-lg font-medium truncate">
|
||||
{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
|
||||
<div class="relative">
|
||||
<div class="">
|
||||
<div class="text-black/90 blur-lg text-lg font-medium truncate">
|
||||
{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
|
||||
</div>
|
||||
<div class="text-black/90 blur-lg text-base truncate">
|
||||
{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
|
||||
{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-white/75 text-base truncate">
|
||||
{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
|
||||
{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
|
||||
|
||||
<div class="absolute top-0">
|
||||
<div class="text-white text-lg font-medium truncate">
|
||||
{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
|
||||
</div>
|
||||
<div class="text-white/75 text-base truncate">
|
||||
{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
|
||||
{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="w-full p-[0.125rem] bg-white/20 rounded-full backdrop-blur-3xl">
|
||||
<div class="w-full p-[0.125rem] bg-white/20 shadow-[0_.125rem_1rem_0_#00000010] rounded-full backdrop-blur-3xl">
|
||||
<div class="w-full" ref="progressBarContainer">
|
||||
<div class="w-2 h-2 bg-white rounded-full shadow-md" ref="progressBarThumb" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-between">
|
||||
<div class="text-white/75 font-light flex-1 text-left">
|
||||
{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}
|
||||
<div class="font-medium flex-1 text-left relative">
|
||||
<span class="text-black blur-lg absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
|
||||
<span class="text-white/90">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-center relative">
|
||||
<span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span>
|
||||
<span class="text-white">{{ formatDetector() }}</span>
|
||||
</div>
|
||||
<div class="flex flex-1">
|
||||
<div class="flex-1" />
|
||||
<button class="text-white/90 font-medium text-right relative"
|
||||
@click="displayTimeLeft = !displayTimeLeft">
|
||||
<span class="text-black blur-lg absolute top-0">{{ `${displayTimeLeft? '-' : ''}${timeFormatter(displayTimeLeft? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span>
|
||||
<span>{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-white text-xs text-center">{{ formatDetector() }}</div>
|
||||
<button class="text-white/75 font-light flex-1 text-right"
|
||||
@click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -178,44 +201,73 @@ function makePlayQueueListDismiss() {
|
|||
|
||||
<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 class="h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
|
||||
<div class="w-6 h-6 relative">
|
||||
<span class="text-black blur-md absolute top-0 left-0"><StarEmptyIcon :size="6" /></span>
|
||||
<span class="text-white"><StarEmptyIcon :size="6" /></span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25"
|
||||
<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25"
|
||||
@click="makePlayQueueListPresent">
|
||||
<MusicListIcon :size="4" />
|
||||
<div class="w-6 h-6 relative">
|
||||
<span class="text-black blur-md absolute top-0 left-0"><MusicListIcon :size="6" /></span>
|
||||
<span class="text-white"><MusicListIcon :size="6" /></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-2 text-center align-center justify-center gap-2 flex">
|
||||
|
||||
<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-10 flex justify-center items-center rounded-lg hover:bg-white/25"
|
||||
@click="playPrevious">
|
||||
<RewindIcon :size="6" />
|
||||
<div class="w-8 h-8 relative">
|
||||
<span class="text-black/80 blur-lg absolute top-0 left-0"><RewindIcon :size="8" /></span>
|
||||
<span class="text-white"><RewindIcon :size="8" /></span>
|
||||
</div>
|
||||
</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-10 flex justify-center items-center rounded-lg hover:bg-white/25"
|
||||
@click="playQueueStore.isPlaying = !playQueueStore.isPlaying">
|
||||
<div v-if="playQueueStore.isPlaying">
|
||||
<LoadingIndicator v-if="playQueueStore.isBuffering" :size="6" />
|
||||
<PauseIcon v-else :size="6" />
|
||||
<div v-if="playQueueStore.isBuffering" class="w-6 h-6 relative">
|
||||
<span class="text-black/80 blur-lg absolute top-0 left-0"><LoadingIndicator :size="6" /></span>
|
||||
<span class="text-white"><LoadingIndicator :size="6" /></span>
|
||||
</div>
|
||||
<div v-else class="w-8 h-8 relative">
|
||||
<span class="text-black/80 blur-lg absolute top-0 left-0"><PauseIcon :size="8" /></span>
|
||||
<span class="text-white"><PauseIcon :size="8" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="w-8 h-8 relative">
|
||||
<span class="text-black/80 blur-lg absolute top-0 left-0"><PlayIcon :size="8" /></span>
|
||||
<span class="text-white"><PlayIcon :size="8" /></span>
|
||||
</div>
|
||||
</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-10 flex justify-center items-center rounded-lg hover:bg-white/25"
|
||||
@click="playNext">
|
||||
<ForwardIcon :size="6" />
|
||||
<div class="w-8 h-8 relative">
|
||||
<span class="text-black/80 blur-lg absolute top-0 left-0"><ForwardIcon :size="8" /></span>
|
||||
<span class="text-white"><ForwardIcon :size="8" /></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 text-right flex">
|
||||
<div class="flex-1" />
|
||||
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
|
||||
<ChatBubbleQuoteIcon :size="4" />
|
||||
<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
|
||||
<div class="w-6 h-6 relative">
|
||||
<span class="text-black blur-md absolute top-0 left-0"><ChatBubbleQuoteIcon :size="6" /></span>
|
||||
<span class="text-white"><ChatBubbleQuoteIcon :size="6" /></span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
|
||||
<EllipsisHorizontalIcon :size="4" />
|
||||
<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
|
||||
<div class="w-6 h-6 relative">
|
||||
<span class="text-black blur-sm absolute top-0 left-0"><EllipsisHorizontalIcon :size="6" /></span>
|
||||
<span class="text-white"><EllipsisHorizontalIcon :size="6" /></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -240,13 +292,13 @@ function makePlayQueueListDismiss() {
|
|||
<div class="flex gap-2 mx-8 mb-4">
|
||||
<button
|
||||
class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
|
||||
@click="makePlayQueueListDismiss">
|
||||
@click="">
|
||||
<ShuffleIcon :size="4" />
|
||||
</button>
|
||||
<button
|
||||
class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
|
||||
@click="makePlayQueueListDismiss">
|
||||
<ListArrowIcon :size="4" />
|
||||
@click="">
|
||||
<CycleTwoArrowsIcon :size="4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user