lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-23 23:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 优化播放栏背景问题

Browse Source
This commit is contained in:
alger
2024-09-12 15:00:00 +08:00
parent 800e0b7360
commit 904d8744ef
3 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/PlayBar.vue
+10 -3
View File
@@ -1,8 +1,11 @@
<template>
<!-- 展开全屏 -->
<music-full ref="MusicFullRef" v-model:musicFull="musicFull" :audio="audio.value as HTMLAudioElement" />
<music-full ref="MusicFullRef" v-model:music-full="musicFull" :audio="audio.value as HTMLAudioElement" />
<!-- 底部播放栏 -->
<div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
<div
class="music-play-bar"
:class="setAnimationClass('animate__bounceInUp') + ' ' + (musicFull ? 'play-bar-opcity' : '')"
>
<n-image
:src="getImgUrl(playMusic?.picUrl, '300y300')"
class="play-bar-img"
@@ -223,7 +226,7 @@ const setMusicFull = () => {
@apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
z-index: 9999;
box-shadow: 0px 0px 10px 2px rgba(203, 203, 203, 0.034);
background-color: rgba(0, 0, 0, 0.747);
background-color: #212121;
animation-duration: 0.5s !important;
.music-content {
width: 140px;
@@ -240,6 +243,10 @@ const setMusicFull = () => {
}
}
.play-bar-opcity {
background-color: rgba(0, 0, 0, 0.218);
}
.play-bar-img {
@apply w-14 h-14 rounded-2xl;
}