识别图片修改

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;