From e936ffa471ae6ea8ac162a5ae9900b6a798c72c1 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 23 Dec 2025 17:35:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=86=E5=88=AB=E5=9B=BE=E7=89=87=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/image-recognition/index.vue | 23 +++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/views/device/image-recognition/index.vue b/src/views/device/image-recognition/index.vue
index e36ad73..3841aeb 100644
--- a/src/views/device/image-recognition/index.vue
+++ b/src/views/device/image-recognition/index.vue
@@ -31,7 +31,7 @@
             </div>
 
             <!-- 图像网格 -->
-            <div class="image-grid-container" :class="{ 'has-scroll': needsScroll() }" v-loading="loading">
+            <div class="image-grid-container" v-loading="loading">
                 <div v-for="(item, index) in imageList" :key="index" class="image-card">
                     <div class="image-wrapper">
                         <el-image :src="item.imageUrl || test_image" fit="cover" class="detection-image"
@@ -280,10 +280,6 @@ export default {
             return parts.join(' ') || '未知位置'
         },
 
-        /** 判断是否需要滚动 */
-        needsScroll() {
-            return this.imageList.length > 4
-        },
     },
 }
 </script>
@@ -355,15 +351,18 @@ export default {
 }
 
 .table-card {
-    min-height: calc(100vh - 230px);
+    height: calc(100vh - 230px);
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 
     ::v-deep .el-card__body {
         padding: 20px;
         display: flex;
         flex-direction: column;
         min-height: 0;
+        height: 100%;
+        overflow: hidden;
     }
 
     .table-header {
@@ -386,13 +385,11 @@ export default {
         // 防止单行数据时占满整个高度
         align-content: start;
         grid-auto-rows: min-content;
-        
-        // 数据多时才允许滚动
-        &.has-scroll {
-            flex: 1;
-            overflow-y: auto;
-            min-height: 0;
-        }
+        // 使用 flex 布局，让图片区域占据剩余空间，超出时显示滚动条
+        flex: 1;
+        overflow-y: auto;
+        min-height: 0;
+        overflow-x: hidden;
 
         &::-webkit-scrollbar {
             width: 6px;