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

🔧 chore: 修改 MiniPlayBar 组件，调整音量滑块的样式和交互方式，优化悬停效果

Browse Source
This commit is contained in:
alger
2025-05-10 21:25:40 +08:00
parent b8580efb17
commit 31ea3b7e0a
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/player/MiniPlayBar.vue
+9 -7
View File
@@ -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>