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

sd

2025-08-07 41bcd5f09e1a357ddafdd7b02c32d93327333e62

 src/pages/modelTuning/components/imageCard.vue

@@ -1,14 +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="监控截图" /> -->
                <el-image :src="item.imagePath" class="gallery-image" fit="scale-down"/>
                <el-image :src="item.imagePath" class="gallery-image" fit="scale-down" />
            </div>

            <!-- 卡片操作按钮 -->
@@ -65,8 +66,18 @@
        }
    },
    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: {
@@ -82,19 +93,21 @@
        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 });
            }
        },

        // 删除
@@ -248,10 +261,14 @@
}

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