From 6159ce3a1839f837a546d8b84c5000e083c04472 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Tue, 22 Oct 2024 13:54:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/html/Home.vue | 37 ++++++++++---------------------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/html/Home.vue b/src/html/Home.vue
index 180b0d1..c7ab55d 100644
--- a/src/html/Home.vue
+++ b/src/html/Home.vue
@@ -30,14 +30,8 @@
           <canvas v-show="playing" ref="canvasRef" class="camera-large"></canvas>
 
           <!-- 播放按钮 -->
-          <el-button
-            v-show="!playing || showButton"
-            class="play-button"
-            type="primary"
-            circle
-            size="large"
-            @click="handlePlayPause"
-          >
+          <el-button v-show="!playing || showButton" 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>
\ No newline at end of file