修复进度条控件的BUG

public/css/style.css

@@ -618,9 +618,10 @@ header p {
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     opacity: 1;
     transition: opacity 0.2s ease, transform 0.2s ease;
+    overflow-x: auto;
 }
 
 .custom-controls.controls-faded,
@@ -635,7 +636,23 @@ header p {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    flex: 0 0 auto;
+}
+
+.control-seek {
+    min-width: 260px;
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.control-time {
+    color: rgba(226, 232, 240, 0.88);
+    font-size: 0.85rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }
 
 .playback-status {
@@ -710,7 +727,7 @@ header p {
 }
 
 .volume-slider {
-    width: 140px;
+    width: 96px;
     accent-color: #60a5fa;
     cursor: pointer;
 }
@@ -741,6 +758,41 @@ header p {
     cursor: pointer;
 }
 
+.seek-bar {
+    position: relative;
+    flex: 1 1 auto;
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.12);
+    overflow: visible;
+    cursor: pointer;
+}
+
+.seek-bar-progress {
+    width: 0%;
+    height: 100%;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #2563eb);
+}
+
+.seek-bar-handle {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #f8fafc;
+    border: 2px solid #2563eb;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
+}
+
+.seek-bar.seeking .seek-bar-handle,
+.seek-bar:hover .seek-bar-handle {
+    transform: translate(-50%, -50%) scale(1.08);
+}
+
 .progress-info {
     width: 100%;
     margin-top: 1rem;
@@ -936,12 +988,12 @@ header p {
     }
 
     .custom-controls {
-        align-items: stretch;
+        align-items: center;
     }
 
     .controls-left,
     .controls-right {
-        width: 100%;
+        width: auto;
     }
 
     .controls-right {
@@ -950,16 +1002,20 @@ header p {
 
     .playback-status,
     .speed-control {
-        width: 100%;
+        width: auto;
     }
 
     .volume-control {
-        width: 100%;
+        width: auto;
-        min-width: 0;
+        min-width: 150px;
     }
 
     .volume-slider {
-        flex: 1;
+        flex: 0 0 auto;
-        width: auto;
+        width: 84px;
+    }
+
+    .control-seek {
+        min-width: 220px;
     }
 }

public/index.html

@@ -125,17 +125,6 @@
                         <span>跳转中...</span>
                     </div>
                 </div>
-                <div id="custom-seek-container" class="custom-seek-container hidden">
-                    <div id="seek-bar" class="seek-bar">
-                        <div id="seek-bar-progress" class="seek-bar-progress"></div>
-                        <div id="seek-bar-handle" class="seek-bar-handle"></div>
-                    </div>
-                    <div class="seek-time-display">
-                        <span id="seek-current-time">00:00:00</span>
-                        <span class="seek-separator">/</span>
-                        <span id="seek-total-time">00:00:00</span>
-                    </div>
-                </div>
                 <div id="custom-controls" class="custom-controls hidden">
                     <div class="controls-left">
                         <div id="playback-status" class="playback-status paused">
@@ -149,6 +138,14 @@
                             <span id="volume-value" class="volume-value">100%</span>
                         </div>
                     </div>
+                    <div id="custom-seek-container" class="control-seek hidden">
+                        <span id="seek-current-time" class="control-time">00:00:00</span>
+                        <div id="seek-bar" class="seek-bar">
+                            <div id="seek-bar-progress" class="seek-bar-progress"></div>
+                            <div id="seek-bar-handle" class="seek-bar-handle"></div>
+                        </div>
+                        <span id="seek-total-time" class="control-time">00:00:00</span>
+                    </div>
                     <div class="controls-right">
                         <label class="speed-control" for="playback-speed">
                             <span>Speed</span>