lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-29 11:27:23 +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> ></i>
</div> </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> <template #trigger>
<div class="function-button" @click="mute"> <div class="function-button" @click="mute">
<i class="iconfont" :class="getVolumeIcon"></i> <i class="iconfont" :class="getVolumeIcon"></i>
</div> </div>
</template> </template>
<div class="volume-slider-wrapper"> <div class="volume-slider-wrapper transparent-popover">
<n-slider <n-slider
v-model:value="volumeSlider" v-model:value="volumeSlider"
:step="0.01" :step="0.01"
@@ -459,7 +459,7 @@ const setMusicFull = () => {
} }
.control-button { .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; width: 32px;
height: 32px; height: 32px;
@@ -484,10 +484,9 @@ const setMusicFull = () => {
} }
.function-button { .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; width: 32px;
height: 32px; height: 32px;
color: var(--text-color-2, #666);
&:hover { &:hover {
@apply bg-gray-100 dark:bg-dark-300; @apply bg-gray-100 dark:bg-dark-300;
@@ -546,8 +545,7 @@ const setMusicFull = () => {
} }
.volume-slider-wrapper { .volume-slider-wrapper {
@apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg; @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
width: 40px;
height: 160px; height: 160px;
} }
@@ -608,4 +606,8 @@ const setMusicFull = () => {
} }
} }
} }
:deep(.n-popover){
background-color: transparent !important;
}
</style> </style>