横向滚动条调整

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" />
@@ -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>