diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index 1eab3df..1b459d0 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -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;