lunanting/qiangdanxitong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 任务卡片添加预览图显示(45x45)，悬停放大(300x300)

Browse Source
This commit is contained in:
Your Name 2026-01-06 22:55:25 +08:00
parent a6d620d114
commit ebc873114c
1 changed files with 126 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
frontend/src/views/TaskHall.vue
View File

@ -241,18 +241,27 @@
</div>
<!-- 任务信息 -->
<div class="task-info">
<div class="info-item">
<span class="label">任务类型</span>
<span class="value">{{ getTaskTypeName(task.taskTypeId, task.taskTypeName, task.taskSubType) }}</span>
<div class="task-info-wrapper">
<div class="task-info">
<div class="info-item">
<span class="label">任务类型</span>
<span class="value">{{ getTaskTypeName(task.taskTypeId, task.taskTypeName, task.taskSubType) }}</span>
</div>
<div class="info-item">
<span class="label">预估积分</span>
<span class="value text-brand">{{ task.score || '--' }} 分</span>
</div>
<div class="info-item">
<span class="label">数量</span>
<span class="value">{{ task.quantity || 1 }} 个</span>
</div>
</div>
<div class="info-item">
<span class="label">预估积分</span>
<span class="value text-brand">{{ task.score || '--' }} 分</span>
</div>
<div class="info-item">
<span class="label">数量</span>
<span class="value">{{ task.quantity || 1 }} 个</span>
<!-- 预览图 -->
<div v-if="task.previewImage" class="preview-thumbnail">
<img :src="task.previewImage" alt="预览图" class="thumbnail-img" />
<div class="preview-popup">
<img :src="task.previewImage" alt="预览图" />
</div>
</div>
</div>
@ -531,22 +540,31 @@
</div>
<!-- 任务信息 -->
<div class="task-info">
<div class="info-item">
<span class="label">任务编号</span>
<span class="value">{{ task.taskNo }}</span>
<div class="task-info-wrapper">
<div class="task-info">
<div class="info-item">
<span class="label">任务编号</span>
<span class="value">{{ task.taskNo }}</span>
</div>
<div class="info-item">
<span class="label">任务类型</span>
<span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
</div>
<div class="info-item">
<span class="label">预估积分</span>
<span class="value text-brand">{{ task.score }} 分</span>
</div>
<div class="info-item">
<span class="label">数量</span>
<span class="value">{{ task.quantity || '--' }} 个</span>
</div>
</div>
<div class="info-item">
<span class="label">任务类型</span>
<span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
</div>
<div class="info-item">
<span class="label">预估积分</span>
<span class="value text-brand">{{ task.score }} 分</span>
</div>
<div class="info-item">
<span class="label">数量</span>
<span class="value">{{ task.quantity || '--' }} 个</span>
<!-- 预览图 -->
<div v-if="task.previewImage" class="preview-thumbnail">
<img :src="task.previewImage" alt="预览图" class="thumbnail-img" />
<div class="preview-popup">
<img :src="task.previewImage" alt="预览图" />
</div>
</div>
</div>
@ -831,22 +849,31 @@
</div>
<!-- 任务信息 -->
<div class="task-info">
<div class="info-item">
<span class="label">任务编号</span>
<span class="value">{{ task.taskNo }}</span>
<div class="task-info-wrapper">
<div class="task-info">
<div class="info-item">
<span class="label">任务编号</span>
<span class="value">{{ task.taskNo }}</span>
</div>
<div class="info-item">
<span class="label">任务类型</span>
<span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
</div>
<div class="info-item">
<span class="label">预估积分</span>
<span class="value text-brand">{{ task.score }} 分</span>
</div>
<div class="info-item">
<span class="label">数量</span>
<span class="value">{{ task.quantity || '--' }} 个</span>
</div>
</div>
<div class="info-item">
<span class="label">任务类型</span>
<span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
</div>
<div class="info-item">
<span class="label">预估积分</span>
<span class="value text-brand">{{ task.score }} 分</span>
</div>
<div class="info-item">
<span class="label">数量</span>
<span class="value">{{ task.quantity || '--' }} 个</span>
<!-- 预览图 -->
<div v-if="task.previewImage" class="preview-thumbnail">
<img :src="task.previewImage" alt="预览图" class="thumbnail-img" />
<div class="preview-popup">
<img :src="task.previewImage" alt="预览图" />
</div>
</div>
</div>
@ -4791,16 +4818,69 @@ onUnmounted(() => {
border: 1px solid rgba(49, 240, 139, 0.2);
}
// 任务信息
.task-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: $space-md;
// 任务信息容器（包含预览图）
.task-info-wrapper {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: $space-md;
padding-bottom: $space-md;
border-bottom: 1px solid $border-primary;
}
// 任务信息
.task-info {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: $space-md;
}
// 预览图缩略图
.preview-thumbnail {
position: relative;
width: 45px;
height: 45px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
border: 1px solid $border-primary;
cursor: pointer;
.thumbnail-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-popup {
display: none;
position: absolute;
top: 50%;
right: calc(100% + 10px);
transform: translateY(-50%);
width: 300px;
height: 300px;
background: $bg-card;
border: 2px solid $brand-primary;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
z-index: 1000;
padding: 4px;
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
}
}
&:hover .preview-popup {
display: block;
}
}
.info-item {
display: flex;
flex-direction: column;