diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index 3cc3b85..855c4c2 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -200,154 +200,95 @@
             class="task-card chart-card"
             @click="handleTaskClick(task)"
           >
-            <!-- 带预览图的卡片布局 -->
-            <div class="card-with-preview">
-              <!-- 预览图 -->
-              <div v-if="task.previewImage" class="task-preview">
-                <img :src="task.previewImage" alt="预览图" />
+            <!-- 新版卡片布局 -->
+            <div class="card-new-layout">
+              <!-- 预览图区域 -->
+              <div v-if="task.previewImage" class="preview-cover">
+                <img :src="task.previewImage" alt="预览图" loading="lazy" />
+                <div class="preview-overlay"></div>
+                <!-- 悬浮标签 -->
+                <div class="floating-badges">
+                  <span v-if="task.isSubTask" class="badge-mini subtask">子任务</span>
+                  <span v-if="isNewTask(task)" class="badge-mini new">新发布</span>
+                  <span v-if="task.isUrgent" class="badge-mini urgent">紧急</span>
+                </div>
               </div>
               
-              <!-- 卡片内容 -->
-              <div class="card-content" :class="{ 'has-preview': task.previewImage }">
-                <!-- 任务标题 -->
-                <div class="task-header">
-                  <h3 class="task-title">{{ task.title }}</h3>
-                  <div class="task-badges">
-                    <span v-if="task.isSubTask" class="badge badge-subtask">
-                      <Icon name="layers" size="sm" color="#1890ff" style="margin-right: 4px; vertical-align: middle;" />
-                      子任务
-                    </span>
-                    <span v-if="isNewTask(task)" class="badge badge-new">
-                      <Icon name="sparkles" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
-                      新发布
-                    </span>
-                    <span v-if="isHighScoreTask(task)" class="badge badge-high-score">
-                      <Icon name="star" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
-                      高分
-                    </span>
-                    <span v-if="task.isUrgent" class="badge badge-urgent">
-                      <Icon name="fire" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
-                      紧急
-                    </span>
-                  </div>
+              <div class="card-body">
+                <!-- 头部标签（无预览图时显示） -->
+                <div v-if="!task.previewImage" class="header-badges">
+                  <span v-if="task.isSubTask" class="badge-tag subtask">子任务</span>
+                  <span v-if="isNewTask(task)" class="badge-tag new">新发布</span>
+                  <span v-if="task.isUrgent" class="badge-tag urgent">紧急</span>
+                  <span v-if="isHighScoreTask(task)" class="badge-tag high-score">高分</span>
                 </div>
 
-            <!-- 流程阶段 -->
-            <div v-if="getProcessStage(task)" class="process-stage">
-              <span class="stage-icon">
-                <Icon name="clock" size="sm" color="#31f08b" />
+                <!-- 标题 -->
+                <h3 class="card-title" :title="task.title">{{ task.title }}</h3>
+
+                <!-- 核心指标 -->
+                <div class="metrics-row">
+                  <div class="metric">
+                    <span class="label">类型</span>
+                    <span class="value type" :title="getTaskTypeName(task.taskTypeId, task.taskTypeName, task.taskSubType)">
+                      {{ getTaskTypeName(task.taskTypeId, task.taskTypeName, task.taskSubType) }}
               </span>
-              <span class="stage-text">{{ getProcessStage(task) }}</span>
             </div>
-
-            <!-- 任务信息 -->
-            <div class="task-info">
-              <div class="info-item">
-                <span class="label">任务类型</span>
-                <span class="value">{{ getTaskTypeName(task.taskTypeId, task.taskTypeName) }}</span>
+                  <div class="metric divider"></div>
+                  <div class="metric">
+                    <span class="label">积分</span>
+                    <span class="value score">{{ task.score || '--' }}</span>
               </div>
-              <div class="info-item">
-                <span class="label">预估积分</span>
-                <span class="value text-brand">{{ task.score || '--' }} 分</span>
-              </div>
-              <div class="info-item">
+                  <div class="metric divider"></div>
+                  <div class="metric">
                 <span class="label">数量</span>
-                <span class="value">{{ task.quantity || 1 }} 个</span>
+                    <span class="value">{{ task.quantity || 1 }}</span>
               </div>
             </div>
 
-            <!-- 任务详情 -->
-            <div class="task-details">
-              <div v-if="task.brandName" class="detail-item">
-                <span class="icon">
-                  <Icon name="tag" size="sm" color="#31f08b" />
+                <!-- 详细信息 -->
+                <div class="details-grid">
+                  <div class="detail-item" v-if="task.brandName || task.categoryName">
+                    <Icon name="tag" size="xs" class="icon" />
+                    <span class="text text-ellipsis">
+                      {{ task.brandName }} <span v-if="task.brandName && task.categoryName">·</span> {{ task.categoryName }}
                 </span>
-                <span>品牌: {{ task.brandName }}</span>
               </div>
-              <div v-if="task.categoryName" class="detail-item">
-                <span class="icon">
-                  <Icon name="folder" size="sm" color="#31f08b" />
+                  
+                  <div class="detail-item" v-if="task.platformName || task.spuInfo">
+                    <Icon name="monitor" size="xs" class="icon" />
+                    <span class="text text-ellipsis">
+                      {{ task.platformName || '--' }} <span v-if="task.spuInfo">· {{ task.spuInfo }}</span>
                 </span>
-                <span>类目: {{ task.categoryName }}</span>
-              </div>
-              <div v-if="task.platformName" class="detail-item">
-                <span class="icon">
-                  <Icon name="monitor" size="sm" color="#31f08b" />
-                </span>
-                <span>平台: {{ task.platformName }}</span>
-              </div>
-              <div v-if="task.spuInfo" class="detail-item">
-                <span class="icon">
-                  <Icon name="tag" size="sm" color="#31f08b" />
-                </span>
-                <span>SPU: {{ task.spuInfo }}</span>
               </div>
+
               <div class="detail-item">
-                <span class="icon">
-                  <Icon name="user" size="sm" color="#31f08b" />
-                </span>
-                <span>发布人: {{ task.publisherName || '未知' }}</span>
-              </div>
-              <div v-if="task.attachmentUrl" class="detail-item detail-item-attachment">
-                <span class="icon">
-                  <Icon name="paperclip" size="sm" color="#31f08b" />
-                </span>
-                <span>附件: 
-                  <a 
-                    v-for="(url, index) in (task.attachmentUrl || '').split(',').filter(u => u.trim())" 
-                    :key="index"
-                    :href="url.trim()" 
-                    target="_blank"
-                    class="attachment-link"
-                    @click.stop
-                  >
-                    附件{{ index + 1 }}
-                  </a>
-                </span>
+                    <Icon name="user" size="xs" class="icon" />
+                    <span class="text text-ellipsis">{{ task.publisherName || '未知' }}</span>
               </div>
+
               <div class="detail-item">
-                <span class="icon">
-                  <Icon name="clock" size="sm" color="#31f08b" />
-                </span>
-                <span>时效要求: {{ formatEstimatedTime(task.estimatedHours) }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="icon">
-                  <Icon name="calendar" size="sm" color="#31f08b" />
-                </span>
-                <span>发布时间: {{ formatTime(task.createTime) }}</span>
+                    <Icon name="clock" size="xs" class="icon" />
+                    <span class="text">时效: {{ formatEstimatedTime(task.estimatedHours) }}</span>
               </div>
             </div>
 
-            <!-- 操作按钮 -->
-            <div class="task-actions">
-              <button
-                class="btn btn-secondary"
-                style="flex: 1"
-                @click.stop="handleTaskClick(task)"
-              >
-                查看详情
+                <!-- 底部操作栏 -->
+                <div class="card-actions">
+                  <button class="action-btn secondary" @click.stop="handleTaskClick(task)">
+                    详情
               </button>
               <button
-                :class="[
-                  'btn',
-                  canGrabTask(task).canGrab ? 'btn-primary' : 'btn-disabled'
-                ]"
-                :style="{
-                  flex: 1,
-                  backgroundColor: canGrabTask(task).canGrab ? '#31f08b' : '#666',
-                  cursor: canGrabTask(task).canGrab ? 'pointer' : 'not-allowed',
-                  opacity: canGrabTask(task).canGrab ? 1 : 0.6
-                }"
+                    class="action-btn primary" 
+                    :class="{ disabled: !canGrabTask(task).canGrab }"
                 :disabled="!canGrabTask(task).canGrab"
-                :title="canGrabTask(task).canGrab ? '点击抢单' : canGrabTask(task).reason"
                 @click.stop="handleGrab(task)"
               >
-                {{ canGrabTask(task).canGrab ? '抢单' : '不可接单' }}
+                    {{ canGrabTask(task).canGrab ? '立即抢单' : '不可抢' }}
               </button>
             </div>
-              </div> <!-- 结束 card-content -->
-            </div> <!-- 结束 card-with-preview -->
+              </div>
+            </div>
           </div>
         </div>
 
@@ -2452,7 +2393,10 @@ const completedPagination = reactive({
 })
 
 // 获取任务类型名称
-const getTaskTypeName = (typeId: number, taskTypeName?: string) => {
+const getTaskTypeName = (typeId: number, taskTypeName?: string, taskSubType?: string) => {
+  // 如果有任务子类型（如：新品、优化），优先显示
+  if (taskSubType) return taskSubType
+  
   // 如果有直接传入的类型名称，优先使用
   if (taskTypeName) return taskTypeName
   
@@ -2672,6 +2616,7 @@ const loadTasks = async () => {
         groupNo: item.groupNo,
         taskTypeId: item.taskTypeId,
         taskTypeName: item.taskTypeName, // 任务类型名称
+        taskSubType: item.taskSubType, // 任务子类型
         score: item.totalScore || item.score, // 预估积分
         estimatedHours: item.estimatedHours,
         quantity: item.quantity || 1, // 数量