From 31ea3b7e0aa252a5b619105238c10dcbbae66811 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sat, 10 May 2025 21:25:40 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20=E4=BF=AE=E6=94=B9=20Mi?=
 =?UTF-8?q?niPlayBar=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=9F=B3=E9=87=8F=E6=BB=91=E5=9D=97=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E4=BA=A4=E4=BA=92=E6=96=B9=E5=BC=8F=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=82=AC=E5=81=9C=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/player/MiniPlayBar.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/player/MiniPlayBar.vue b/src/renderer/components/player/MiniPlayBar.vue
index b5517e2..44757f2 100644
--- a/src/renderer/components/player/MiniPlayBar.vue
+++ b/src/renderer/components/player/MiniPlayBar.vue
@@ -52,13 +52,13 @@
           ></i>
         </div>
 
-        <n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
+        <n-popover trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
           <template #trigger>
             <div class="function-button" @click="mute">
               <i class="iconfont" :class="getVolumeIcon"></i>
             </div>
           </template>
-          <div class="volume-slider-wrapper">
+          <div class="volume-slider-wrapper transparent-popover">
             <n-slider
               v-model:value="volumeSlider"
               :step="0.01"
@@ -459,7 +459,7 @@ const setMusicFull = () => {
 }
 
 .control-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600;
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
   width: 32px;
   height: 32px;
 
@@ -484,10 +484,9 @@ const setMusicFull = () => {
 }
 
 .function-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
   width: 32px;
   height: 32px;
-  color: var(--text-color-2, #666);
 
   &:hover {
     @apply bg-gray-100 dark:bg-dark-300;
@@ -546,8 +545,7 @@ const setMusicFull = () => {
 }
 
 .volume-slider-wrapper {
-  @apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
-  width: 40px;
+  @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
   height: 160px;
 }
 
@@ -608,4 +606,8 @@ const setMusicFull = () => {
     }
   }
 }
+
+:deep(.n-popover){
+  background-color: transparent !important;
+}
 </style>