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/imageCard.vue | 71 +++++++++++++++++++++++++----------
1 files changed, 50 insertions(+), 21 deletions(-)
diff --git a/src/pages/modelTuning/components/imageCard.vue b/src/pages/modelTuning/components/imageCard.vue
index 3b6ba68..84e6bb5 100644
--- a/src/pages/modelTuning/components/imageCard.vue
+++ b/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;
+ }
+ },
+ // 娣诲姞瀵筰tem.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>
\ No newline at end of file
--
Gitblit v1.8.0