bonus
/
smart-car-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

识别图片修改

This commit is contained in:
cwchen 2025-12-23 17:35:24 +08:00
parent 8ba5c68ae0
commit e936ffa471
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/device/image-recognition/index.vue
View File

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