模型训练-卡片样式：根据容器大小自适应调整卡片大小

sd

2025-08-07 41bcd5f09e1a357ddafdd7b02c32d93327333e62

 src/pages/modelTuning/components/imageCard.vue

@@ -1,13 +1,15 @@
<template>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" class="image-card-container">
    <el-col class="image-card-container">
        <div class="image-card" :class="{ 'batch-selected': isBatchMode && selected }" @click="handleCardClick">
            <!-- 多选框 (仅在批量模式下显示) -->
            <div class="checkbox-wrapper" v-if="isBatchMode">
                <el-checkbox v-model="localSelected" @click.stop @change="emitSelection" />
            </div>
            <!-- <div class="checkbox-wrapper" v-if="isBatchMode">
            </div> -->
            <el-checkbox class="checkbox-wrapper" v-if="isBatchMode" v-model="localSelected" @click.stop
                @change="emitSelection" />
            <!-- 图片容器 -->
            <div class="image-container" >
                <img :src="item.imagePath" class="gallery-image" alt="监控截图" />
            <div class="image-container">
                <!-- <img :src="item.imagePath" class="gallery-image" alt="监控截图" /> -->
                <el-image :src="item.imagePath" class="gallery-image" fit="scale-down" />
            </div>

            <!-- 卡片操作按钮 -->
@@ -20,11 +22,11 @@
                    <el-button size="mini" plain :type="item.status === 0 ? 'warning' : 'info'"
                        @click.stop="changeStatus(0)">不确定</el-button>
                </div>
                <img src="@/assets/img/删除标签.png" class="btn-icon" @click.stop="deleteDetails()"/>
                <img src="@/assets/img/删除标签.png" class="btn-icon" @click.stop="deleteDetails()" />
            </div>
            <!-- 图片信息 -->
            <div class="image-info">
                <div class="image-date">{{ item.createTime }}</div>
                <div class="image-date">{{ formatStartDateTime(item.createTime) }}</div>
                <div class="image-source">{{ item.cameraName }}</div>
            </div>

@@ -64,27 +66,48 @@
        }
    },
    watch: {
        selected(newVal) {
            this.localSelected = newVal;
        selected: {
            immediate: true,
            handler(newVal) {
                this.localSelected = newVal;
            }
        },
        // 添加对item.selected的深度监听
        'item.selected': {
            immediate: true,
            handler(newVal) {
                this.localSelected = newVal;
            }
        }
    },
    methods: {
        // 格式化开始时间（保持原时间）
        formatStartDateTime(date) {
            if (!date) return null;
            const d = new Date(date);
            const pad = (num) => num.toString().padStart(2, "0");
            return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
                d.getDate()
            )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
        },
        handleCardClick() {
            // 批量模式下点击卡片触发选择
            if (this.isBatchMode) {
                this.localSelected = !this.localSelected;
                this.emitSelection();
            } else {
                this.$emit('card-click', this.item);
            }
        },
        emitSelection() {
            // console.info(this.selected)
            this.localSelected = !this.localSelected;
            this.$emit('toggle-select');
        },

        // 更改状态
        changeStatus(status) {
            this.$emit('status-change', { trainId: this.item.trainId, status });
            if (!this.isBatchMode) {
                this.$emit('status-change', { trainId: this.item.trainId, status });
            }
        },

        // 删除
@@ -127,9 +150,10 @@
    display: flex;
    flex-direction: column;
}

.image-card.batch-selected {
  box-shadow: 0 0 0 2px #409eff;
  border-color: #409eff;
    box-shadow: 0 0 0 2px #409eff;
    border-color: #409eff;
}

.image-card:hover {
@@ -151,7 +175,7 @@
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    height: 100%;
    /* object-fit: cover; */
    transition: transform 0.3s ease;
}
@@ -235,11 +259,16 @@
    color: #409EFF;
    border-color: #409EFF;
}

.checkbox-wrapper {
  color: #FFFFFF;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 10;
    width: 18px;
    /* height: 18px; */
    color: #FFFFFF;
    position: absolute;
    /* top: 10px;
    left: 20px; */
    margin-top: 10px;
    margin-left: 10px;
    z-index: 10;
}
</style>