修复进度条控件的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%;
-        min-width: 0;
+        width: auto;
+        min-width: 150px;
     }
 
     .volume-slider {
-        flex: 1;
-        width: auto;
+        flex: 0 0 auto;
+        width: 84px;
+    }
+
+    .control-seek {
+        min-width: 220px;
     }
 }