mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-07 09:00:50 +08:00
✨ feat: 优化播放条滑块提示样式,添加滑块悬停提示功能
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.n-slider-handle-indicator--top {
|
||||
@apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 dark:text-[#ffffffdd] text-[#000000dd] !important;
|
||||
@apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 text-white bg-dark-300 dark:bg-gray-800 bg-opacity-80 rounded-lg !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
:max="allTime"
|
||||
:min="0"
|
||||
:format-tooltip="formatTooltip"
|
||||
:show-tooltip="showSliderTooltip"
|
||||
@mouseenter="showSliderTooltip = true"
|
||||
@mouseleave="showSliderTooltip = false"
|
||||
></n-slider>
|
||||
</div>
|
||||
<div class="play-bar-img-wrapper" @click="setMusicFull">
|
||||
@@ -313,6 +316,7 @@ function handlePrev() {
|
||||
}
|
||||
|
||||
const MusicFullRef = ref<any>(null);
|
||||
const showSliderTooltip = ref(false);
|
||||
|
||||
// 播放暂停按钮事件
|
||||
const playMusicEvent = async () => {
|
||||
@@ -657,8 +661,16 @@ const isEQVisible = ref(false);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover .n-slider-handle {
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
.n-slider-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 确保悬停时提示样式正确
|
||||
.n-slider-tooltip {
|
||||
@apply bg-gray-800 text-white text-xs py-1 px-2 rounded;
|
||||
z-index: 999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user