diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index 4435ed8..cc3888e 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -1165,22 +1165,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>
 
@@ -1499,22 +1508,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>
 
@@ -1710,22 +1728,31 @@
                 </div>
 
                 <!-- 任务信息 -->
-                <div class="task-info">
-                  <div v-if="item.type === 'task'" class="info-item">
-                    <span class="label">任务类型</span>
-                    <span class="value">{{ getTaskTypeName(item.data.taskTypeId) }}</span>
+                <div class="task-info-wrapper">
+                  <div class="task-info">
+                    <div v-if="item.type === 'task'" class="info-item">
+                      <span class="label">任务类型</span>
+                      <span class="value">{{ getTaskTypeName(item.data.taskTypeId) }}</span>
+                    </div>
+                    <div v-if="item.type === 'taskGroup'" class="info-item">
+                      <span class="label">子任务数量</span>
+                      <span class="value">{{ item.data.items?.length || 0 }} 个</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">预估积分</span>
+                      <span class="value text-brand">{{ item.score }} 分</span>
+                    </div>
+                    <div v-if="item.type === 'task'" class="info-item">
+                      <span class="label">数量</span>
+                      <span class="value">{{ item.data.quantity || '--' }} 个</span>
+                    </div>
                   </div>
-                  <div v-if="item.type === 'taskGroup'" class="info-item">
-                    <span class="label">子任务数量</span>
-                    <span class="value">{{ item.data.items?.length || 0 }} 个</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">预估积分</span>
-                    <span class="value text-brand">{{ item.score }} 分</span>
-                  </div>
-                  <div v-if="item.type === 'task'" class="info-item">
-                    <span class="label">数量</span>
-                    <span class="value">{{ item.data.quantity || '--' }} 个</span>
+                  <!-- 预览图 -->
+                  <div v-if="item.data?.previewImage" class="preview-thumbnail">
+                    <img :src="item.data.previewImage" alt="预览图" class="thumbnail-img" />
+                    <div class="preview-popup">
+                      <img :src="item.data.previewImage" alt="预览图" />
+                    </div>
                   </div>
                 </div>