From 41bcd5f09e1a357ddafdd7b02c32d93327333e62 Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期四, 07 八月 2025 11:55:18 +0800
Subject: [PATCH] 模型训练-卡片样式：根据容器大小自适应调整卡片大小
---
src/pages/modelTuning/components/rightCardList.vue | 55 +++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 49 insertions(+), 6 deletions(-)
diff --git a/src/pages/modelTuning/components/rightCardList.vue b/src/pages/modelTuning/components/rightCardList.vue
index bb1a5e6..1eeb450 100644
--- a/src/pages/modelTuning/components/rightCardList.vue
+++ b/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();
+ // 娣诲姞闃叉姈鐨剅esize鐩戝惉
+ 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;
--
Gitblit v1.8.0