横向滚动条调整

src/html/Home.vue

@@ -30,14 +30,8 @@
           <canvas v-show="playing" ref="canvasRef" class="camera-large"></canvas>
 
           <!-- 播放按钮 -->
-          <el-button
+          <el-button v-show="!playing || showButton" class="play-button" type="primary" circle size="large"
-            v-show="!playing || showButton"
+            @click="handlePlayPause">
-            class="play-button"
-            type="primary"
-            circle
-            size="large"
-            @click="handlePlayPause"
-          >
             <el-icon>
               <VideoPlay v-if="!playing" />
               <VideoPause v-if="playing" />
@@ -107,16 +101,16 @@ const handleStartStream = async () => {
     playing.value = true;
 
     // 创建播放器
-    const url = `ws://192.168.28.33:${streamPort.value}/`; 
+    const url = `ws://192.168.28.33:${streamPort.value}/`;
     console.log('Playing set to true:', playing.value);
-    
+
     if (playerRef.value) {
       playerRef.value.destroy(); // 销毁旧播放器
     }
 
     if (window.JSMpeg) {
       playerRef.value = new window.JSMpeg.Player(url, {
-        canvas: canvasRef.value, 
+        canvas: canvasRef.value,
         autoplay: true,
         videoBufferSize: 15 * 1024 * 1024,
         audioBufferSize: 5 * 1024 * 1024,
@@ -166,10 +160,15 @@ onMounted(() => {
 <style scoped>
 .camera-container {
   display: flex;
+  overflow-x: auto;
+  /* 横向滚动条 */
+  min-width: 0;
+  /* 避免内容挤压 */
 }
 
 .camera-list {
   width: 20%;
+  min-width: 215px;
   max-height: 90vh;
   /* 限制高度为一屏 */
   overflow-y: auto;
@@ -268,20 +267,4 @@ onMounted(() => {
 .play-button:hover {
   opacity: 1;
 }
-
-.camera-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: 10px;
-  width: 80%;
-  height: 90vh;
-}
-
-.camera-box {
-  position: relative;
-  background-color: #1a1a1a;
-}
-
-
 </style>