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

sd

2025-08-07 41bcd5f09e1a357ddafdd7b02c32d93327333e62

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

 src/pages/modelTuning/components/imageCard.vue

@@ -1,5 +1,5 @@
<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">

 src/pages/modelTuning/components/rightCardList.vue

@@ -104,11 +104,14 @@
                    @status-change="handleStatusChange" @show-details="showImageDetails"
                    @edit-annotation="editAnnotation" @download="downloadImage"-->
        <div class="gallery-section">
            <el-row :gutter="20" class="image-grid">
                <image-card v-for="(item, index) in galleryItems" :key="index" :item="item" :is-batch-mode="isBatchMode"
                    @delete-details="handleDeleteDetails" @status-change="handleStatusChange"
                    @card-click="handleCardClick1" @toggle-select="toggleSelect(index)" />
            </el-row>
            <div class="image-grid" ref="imageGrid">
                <div v-for="(item, index) in galleryItems" :key="index" class="image-card-wrapper"
                    :style="{ width: cardWidth}">
                    <image-card :item="item" :is-batch-mode="isBatchMode" @delete-details="handleDeleteDetails"
                        @status-change="handleStatusChange" @card-click="handleCardClick1"
                        @toggle-select="toggleSelect(index)" />
                </div>
            </div>
        </div>
        <!-- 分页组件 -->
        <Pagination :total="totalCount" :current-page.sync="currentPage" :page-size.sync="pageSize"
@@ -117,6 +120,7 @@
</template>

<script>
import _ from 'lodash'; // 用于防抖
import BatchImport from './batchImport';
import imageCard from './imageCard';
import Pagination from '@/components/rightPagination';
@@ -131,6 +135,9 @@
    name: 'ImageGallery',
    data() {
        return {
            cardWidth: 'calc(25% - 20px)', // 默认4列布局
            minCardWidth: 300, // 卡片最小宽度
            margin: 20, // 卡片间距
            trainDialogVisible: false,       // 模型训练弹窗可见性
            batchLabelDialogVisible: false,  // 批量标注弹窗可见性
            // 模型训练弹窗数据
@@ -144,7 +151,7 @@
            trainId: 0,
            totalCount: 0,     // 总数据量
            currentPage: 1,    // 当前页码
            pageSize: 12,     // 每页数量
            pageSize: 15,     // 每页数量
            tableData: [],    // 表格数据
            // 是否批量模式
            isBatchMode: false,
@@ -170,8 +177,25 @@
        }
    },
    mounted() {
        this.calculateCardWidth();
        // 添加防抖的resize监听
        window.addEventListener('resize', _.debounce(this.calculateCardWidth, 100));
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.calculateCardWidth);
    },
    methods: {
        // 新增卡片宽度计算方法
        calculateCardWidth() {
            if (this.$refs.imageGrid) {
                const containerWidth = this.$refs.imageGrid.clientWidth;
                // 计算每行可以放置的卡片数量
                const cardsPerRow = Math.floor(containerWidth / (this.minCardWidth + this.margin));
                const n = Math.max(3, cardsPerRow); // 至少1列
                // 设置卡片宽度公式
                this.cardWidth = `calc(${100 / n}% - ${this.margin}px)`;
            }
        },
        // 打开导入对话框
        openImportDialog(type) {
            this.$refs.batchImport.presetType = type;
@@ -541,6 +565,24 @@
</script>

<style scoped>
/* 新增图片网格布局样式 */
.image-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
    min-width: 1000px;
    /* 负边距抵消包裹元素的边距 */
    /* width: 100%; */
}

.image-card-wrapper {
    margin: 10px;
    /* 设置卡片间距 */
    box-sizing: border-box;
    /* transition: width 0.3s ease; */
    /* 添加平滑过渡效果 */
}

.image-gallery {
    background-color: #ffffff;
    padding: 20px;
@@ -668,6 +710,7 @@

/* 批量惭怍弹窗样式 */
.dialog2 {

    /* 批量标注弹窗内容 */
    .label-options {
        display: flex;