diff --git a/src/renderer/components/player/MiniPlayBar.vue b/src/renderer/components/player/MiniPlayBar.vue index 0fe989d..61d9d73 100644 --- a/src/renderer/components/player/MiniPlayBar.vue +++ b/src/renderer/components/player/MiniPlayBar.vue @@ -54,7 +54,7 @@ @@ -64,6 +64,7 @@ :step="0.01" :tooltip="false" vertical + @wheel.prevent="handleVolumeWheel" > @@ -183,6 +184,14 @@ const mute = () => { } }; +// 鼠标滚轮调整音量 +const handleVolumeWheel = (e: WheelEvent) => { + // 向上滚动增加音量,向下滚动减少音量 + const delta = e.deltaY < 0 ? 5 : -5; + const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100); + volumeSlider.value = newValue; +}; + // 收藏相关 const isFavorite = computed(() => { // 对于B站视频,使用ID匹配函数 @@ -529,6 +538,50 @@ const setMusicFull = () => { .volume-slider-wrapper { @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur; height: 160px; + + :deep(.n-slider) { + --n-rail-height: 4px; + --n-rail-color: theme('colors.gray.200'); + --n-rail-color-dark: theme('colors.gray.700'); + --n-fill-color: theme('colors.green.500'); + --n-handle-size: 12px; + --n-handle-color: theme('colors.green.500'); + + &.n-slider--vertical { + height: 100%; + + .n-slider-rail { + width: 4px; + } + + &:hover { + .n-slider-rail { + width: 6px; + } + + .n-slider-handle { + width: 14px; + height: 14px; + } + } + } + + .n-slider-rail { + @apply overflow-hidden transition-all duration-200; + @apply bg-gray-500 dark:bg-dark-300 bg-opacity-10 !important; + } + + .n-slider-handle { + @apply transition-all duration-200; + opacity: 0; + } + + &:hover { + .n-slider-handle { + opacity: 1; + } + } + } } // 播放列表样式 diff --git a/src/renderer/components/player/PlayBar.vue b/src/renderer/components/player/PlayBar.vue index e7d9dd5..cd587cb 100644 --- a/src/renderer/components/player/PlayBar.vue +++ b/src/renderer/components/player/PlayBar.vue @@ -483,12 +483,13 @@ const openPlayListDrawer = () => { .volume-slider { @apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 rounded-xl; - @apply bg-light dark:bg-gray-800; + @apply bg-light dark:bg-dark-200; @apply border border-gray-200 dark:border-gray-700; .volume-percentage { - @apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-gray-800 px-2 py-1 rounded-md; + @apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-dark-200 px-2 py-1 rounded-md; @apply border border-gray-200 dark:border-gray-700; + @apply text-gray-800 dark:text-white; white-space: nowrap; } } @@ -597,7 +598,7 @@ const openPlayListDrawer = () => { // 确保悬停时提示样式正确 .n-slider-tooltip { - @apply bg-gray-800 text-white text-xs py-1 px-2 rounded; + @apply bg-dark-200 text-white text-xs py-1 px-2 rounded; z-index: 999999; } }