mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 15:47:23 +08:00
✨ feat: 优化播放条滑块提示样式,添加滑块悬停提示功能
This commit is contained in:
@@ -11,7 +11,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.n-slider-handle-indicator--top {
|
.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;
|
mix-blend-mode: difference !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -25,6 +25,9 @@
|
|||||||
:max="allTime"
|
:max="allTime"
|
||||||
:min="0"
|
:min="0"
|
||||||
:format-tooltip="formatTooltip"
|
:format-tooltip="formatTooltip"
|
||||||
|
:show-tooltip="showSliderTooltip"
|
||||||
|
@mouseenter="showSliderTooltip = true"
|
||||||
|
@mouseleave="showSliderTooltip = false"
|
||||||
></n-slider>
|
></n-slider>
|
||||||
</div>
|
</div>
|
||||||
<div class="play-bar-img-wrapper" @click="setMusicFull">
|
<div class="play-bar-img-wrapper" @click="setMusicFull">
|
||||||
@@ -313,6 +316,7 @@ function handlePrev() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const MusicFullRef = ref<any>(null);
|
const MusicFullRef = ref<any>(null);
|
||||||
|
const showSliderTooltip = ref(false);
|
||||||
|
|
||||||
// 播放暂停按钮事件
|
// 播放暂停按钮事件
|
||||||
const playMusicEvent = async () => {
|
const playMusicEvent = async () => {
|
||||||
@@ -657,8 +661,16 @@ const isEQVisible = ref(false);
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .n-slider-handle {
|
&:hover {
|
||||||
opacity: 1;
|
.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