feat: 优化播放条滑块提示样式,添加滑块悬停提示功能

This commit is contained in:
alger
2025-03-30 12:56:42 +08:00
parent ee6e9d43fd
commit 9ce872eebe
2 changed files with 15 additions and 3 deletions

View File

@@ -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;
}

View File

@@ -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;
}
}
}