diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue index 6b4b611..8c0188b 100644 --- a/vite-tailwindcss/src/views/index/index.vue +++ b/vite-tailwindcss/src/views/index/index.vue @@ -55,12 +55,14 @@
选择曲目
-
- - {{ t.name }} - +
+
+ + {{ t.name }} + +
@@ -70,6 +72,12 @@ +
+ +
+
+ +
@@ -1439,11 +1447,15 @@ watch( /* ---------- 音乐曲目弹层 ---------- */ .music-wrap { position: relative; } .track-pop { - position: absolute; right: 0; bottom: 50px; width: 200px; background: rgba(255,255,255,0.95); + position: absolute; right: 46px; top: 0; width: 200px; + max-height: min(320px, calc(100vh - 3rem - 12px)); + display: flex; flex-direction: column; + background: rgba(255,255,255,0.95); border: 1px solid rgba(168,140,107,0.25); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.18); padding: 8px; backdrop-filter: blur(12px); z-index: 60; } -.track-pop-title { font-size: 10px; color: #a88c6b; letter-spacing: 0.2em; padding: 4px 8px 6px; } +.track-pop-title { flex-shrink: 0; font-size: 10px; color: #a88c6b; letter-spacing: 0.2em; padding: 4px 8px 6px; } +.track-pop-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .track-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background 0.2s; } .track-item:hover { background: rgba(168,140,107,0.1); } .track-item.active { background: rgba(168,140,107,0.16); color: #a88c6b; }