From 33027cf61e5cb3f200b4b5cba0aaabda56a53fe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= Date: Sat, 1 Aug 2026 18:07:09 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E6=92=AD=E6=94=BE=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-tailwindcss/src/views/index/index.vue | 277 ++++++++++++++------- 1 file changed, 191 insertions(+), 86 deletions(-) diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue index fe57b0d..a93cbea 100644 --- a/vite-tailwindcss/src/views/index/index.vue +++ b/vite-tailwindcss/src/views/index/index.vue @@ -173,16 +173,21 @@
- - + +
+ +
@@ -605,6 +611,26 @@ const lrcListRef = ref(null) const danmakuLayerRef = ref(null) const seekMax = computed(() => Math.max(audio.duration.value || 0, audio.currentTime.value || 0, 1)) +const seekPercent = computed(() => { + const d = audio.duration.value || 0 + if (!d) return '0%' + return `${Math.min(100, Math.max(0, (audio.currentTime.value / d) * 100))}%` +}) +const volumeIconClass = computed(() => { + const v = audio.volume.value || 0 + if (v <= 0.001) return 'fa-solid fa-volume-xmark' + if (v < 0.45) return 'fa-solid fa-volume-low' + return 'fa-solid fa-volume-high' +}) +let lastVolumeBeforeMute = 0.5 +const toggleMute = () => { + if ((audio.volume.value || 0) > 0.001) { + lastVolumeBeforeMute = audio.volume.value + audio.setVolume(0) + } else { + audio.setVolume(lastVolumeBeforeMute || 0.5) + } +} const activeLrcIndex = computed(() => findLrcIndex(lrcLines.value, audio.currentTime.value)) const loadLrcForActive = async () => { @@ -835,7 +861,7 @@ const clearBottomReturn = () => { } const scheduleBottomReturn = (reset = false) => { - if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value || showBlessingDrawer.value || showPlayerPanel.value) return + if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value || showBlessingDrawer.value) return if (bottomReturnTimer && !reset) return clearBottomReturn() bottomReturnTimer = setTimeout(() => { @@ -879,7 +905,6 @@ const canAutoAdvance = () => && !isInteracting.value && !isDrawerOpen.value && !showBlessingDrawer.value - && !showPlayerPanel.value && !previewVisible.value && !showMapOptions.value && !showOpenInBrowser.value @@ -1215,9 +1240,9 @@ watch( ) watch(freeScrollSignature, restartAutoScroll) watch( - () => [isDrawerOpen.value, showBlessingDrawer.value, showPlayerPanel.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value], + () => [isDrawerOpen.value, showBlessingDrawer.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value], () => { - if (isDrawerOpen.value || showBlessingDrawer.value || showPlayerPanel.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) { + if (isDrawerOpen.value || showBlessingDrawer.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) { cancelAnimationFrame(animId) clearBottomReturn() } @@ -1445,9 +1470,24 @@ watch( align-items: center; justify-content: space-between; gap: 8px; - margin-bottom: 12px; + margin-bottom: 10px; padding: 0 2px; } +.player-panel-meta { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; + flex: 1; +} +.player-panel-cover { + flex: 0 0 auto; + width: 36px; + height: 36px; + border-radius: 12px; + background: #c4a484 center/cover no-repeat; + box-shadow: 0 3px 10px rgba(92, 74, 53, 0.18); +} .player-panel-title { font-size: 14px; color: #5c4a35; @@ -1467,79 +1507,10 @@ watch( display: inline-flex; align-items: center; justify-content: center; -} -.player-panel-controls { - display: flex; - align-items: center; - gap: 12px; -} -.player-play-btn { - width: 42px; - height: 42px; - border-radius: 999px; - background: linear-gradient(145deg, #c4a484, #a88c6b); - color: #fff; - display: inline-flex; - align-items: center; - justify-content: center; flex: 0 0 auto; - box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35); - font-size: 14px; } -.player-play-btn .fa-play { margin-left: 2px; } -.player-seek-wrap { flex: 1; min-width: 0; } -.player-time { - display: flex; - justify-content: space-between; - font-size: 10px; - color: #9a9084; - margin-top: 4px; - padding: 0 2px; -} -.player-vol-row { - display: flex; - align-items: center; - gap: 10px; - margin-top: 10px; - padding: 8px 12px; - border-radius: 999px; - background: rgba(168, 140, 107, 0.08); - color: #a88c6b; - font-size: 12px; -} -.player-range { - -webkit-appearance: none; - appearance: none; - width: 100%; - height: 6px; - border-radius: 999px; - background: rgba(168, 140, 107, 0.22); - outline: none; -} -.player-range::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 16px; - height: 16px; - border-radius: 999px; - background: #fff; - border: 2px solid #a88c6b; - box-shadow: 0 2px 6px rgba(92, 74, 53, 0.2); - cursor: pointer; -} -.player-range::-moz-range-thumb { - width: 16px; - height: 16px; - border-radius: 999px; - background: #fff; - border: 2px solid #a88c6b; - box-shadow: 0 2px 6px rgba(92, 74, 53, 0.2); - cursor: pointer; -} -.player-vol { flex: 1; } .player-lrc-list { - margin-top: 12px; - max-height: 148px; + max-height: 132px; overflow-y: auto; padding: 10px 8px; border-radius: 18px; @@ -1569,6 +1540,141 @@ watch( font-size: 12px; color: #9a9084; } +.player-panel-footer { + display: flex; + align-items: center; + gap: 12px; + margin-top: 12px; +} +.player-play-btn { + width: 46px; + height: 46px; + border-radius: 999px; + background: linear-gradient(145deg, #c4a484, #a88c6b); + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35); + font-size: 15px; +} +.player-play-btn .fa-play { margin-left: 2px; } +.player-panel-sliders { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 8px; +} +.player-vol-row { + display: flex; + align-items: center; + gap: 6px; + color: #a88c6b; +} +.player-vol-icon { + width: 28px; + height: 28px; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + color: #a88c6b; + font-size: 12px; + flex: 0 0 auto; + background: transparent; +} +.player-vol-track { + flex: 1; + min-width: 0; + height: 28px; + display: flex; + align-items: center; +} +.player-vol-range { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 4px; + border-radius: 999px; + outline: none; + background: linear-gradient( + 90deg, + #c4a484 0%, + #a88c6b var(--vol, 50%), + rgba(168, 140, 107, 0.18) var(--vol, 50%), + rgba(168, 140, 107, 0.18) 100% + ); + cursor: pointer; +} +.player-vol-range::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 14px; + height: 14px; + border-radius: 999px; + background: #fff; + border: none; + box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35); + cursor: pointer; + transition: transform 0.15s ease; +} +.player-vol-range:active::-webkit-slider-thumb { transform: scale(1.12); } +.player-vol-range::-moz-range-thumb { + width: 14px; + height: 14px; + border-radius: 999px; + background: #fff; + border: none; + box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35); + cursor: pointer; +} +.player-seek-wrap { width: 100%; } +.player-time { + display: flex; + justify-content: space-between; + font-size: 10px; + color: #9a9084; + margin-top: 3px; + padding: 0 2px; +} +.player-range { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 4px; + border-radius: 999px; + outline: none; + background: linear-gradient( + 90deg, + #c4a484 0%, + #a88c6b var(--seek, 0%), + rgba(168, 140, 107, 0.18) var(--seek, 0%), + rgba(168, 140, 107, 0.18) 100% + ); + cursor: pointer; +} +.player-range::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 14px; + height: 14px; + border-radius: 999px; + background: #fff; + border: none; + box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35); + cursor: pointer; +} +.player-range::-moz-range-thumb { + width: 14px; + height: 14px; + border-radius: 999px; + background: #fff; + border: none; + box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35); + cursor: pointer; +} @keyframes vinyl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } @@ -2353,4 +2459,3 @@ watch( 100% { opacity: 0; transform: translateY(-12px) scale(.94); filter: blur(1.4px); } } - \ No newline at end of file