diff --git a/api/appUser.js b/api/appUser.js
index e31f7f9..b5c2114 100644
--- a/api/appUser.js
+++ b/api/appUser.js
@@ -150,6 +150,10 @@ export function getTasks(page = 1, page_size = 20) {
   return authRequest({ url: '/api/app/task-center/tasks', method: 'GET', data: { page, page_size } })
 }
 
+export function getTaskProgress(task_id, user_id) {
+  return authRequest({ url: `/api/app/task-center/tasks/${task_id}/progress/${user_id}`, method: 'GET' })
+}
+
 export function getShipments(user_id, page = 1, page_size = 20) {
   return authRequest({ url: `/api/app/users/${user_id}/shipments`, method: 'GET', data: { page, page_size } })
 }
diff --git a/pages.json b/pages.json
index a3526d7..81a4b4f 100644
--- a/pages.json
+++ b/pages.json
@@ -3,7 +3,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "柯大鸭"
 			}
 		},
 		{
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b9cee59..9798364 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -9,11 +9,6 @@
         <text class="brand-text">柯大鸭潮玩</text>
         <view class="brand-star">✨</view>
       </view>
-      <view class="search-bar">
-        <text class="search-icon">🔍</text>
-        <text class="search-placeholder">搜索商品</text>
-      </view>
-
     </view>
 
     <!-- 滚动区域 -->
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 18d6499..205ec80 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -330,48 +330,80 @@
           <text class="close-btn" @tap="closeTasksPopup">×</text>
         </view>
         
-        <!-- 总体进度指示器 -->
-        <view class="overall-progress">
-          <view class="progress-circle">
-            <text class="progress-percent">{{ getOverallProgress() }}%</text>
-            <text class="progress-label">总完成率</text>
-          </view>
-          <view class="progress-stats">
-            <view class="stat-row">
-              <view class="stat-dot done"></view>
-              <text class="stat-text">已完成 {{ tasksList.filter(t => t.status === 2).length }} 个</text>
+        <view class="task-hero">
+          <view class="hero-top">
+            <view class="hero-left">
+              <text class="hero-title">总完成率</text>
+              <view class="hero-percent-row">
+                <text class="hero-percent">{{ getOverallProgress() }}</text>
+                <text class="hero-percent-unit">%</text>
+              </view>
+              <view class="hero-progress">
+                <view class="hero-progress-fill" :style="{ width: getOverallProgress() + '%' }"></view>
+              </view>
             </view>
-            <view class="stat-row">
-              <view class="stat-dot ongoing"></view>
-              <text class="stat-text">进行中 {{ tasksList.filter(t => t.status === 1).length }} 个</text>
-            </view>
-            <view class="stat-row">
-              <view class="stat-dot waiting"></view>
-              <text class="stat-text">未开始 {{ tasksList.filter(t => t.status === 0).length }} 个</text>
+            <view class="hero-right">
+              <view class="hero-chip done">
+                <text class="chip-num">{{ tasksStats.done }}</text>
+                <text class="chip-label">已完成</text>
+              </view>
+              <view class="hero-chip ongoing">
+                <text class="chip-num">{{ tasksStats.ongoing }}</text>
+                <text class="chip-label">进行中</text>
+              </view>
+              <view class="hero-chip waiting">
+                <text class="chip-num">{{ tasksStats.waiting }}</text>
+                <text class="chip-label">未开始</text>
+              </view>
             </view>
           </view>
         </view>
         
         <scroll-view scroll-y class="task-list-scroll">
-           <view v-if="tasksLoading" class="status-text">加载中...</view>
+           <view v-if="tasksLoading" class="task-skeleton-list">
+             <view v-for="i in 3" :key="i" class="task-skeleton">
+               <view class="sk-left">
+                 <view class="sk-icon"></view>
+                 <view class="sk-text">
+                   <view class="sk-line sk-line-title"></view>
+                   <view class="sk-line sk-line-desc"></view>
+                 </view>
+               </view>
+               <view class="sk-btn"></view>
+             </view>
+           </view>
            <view v-else-if="!tasksList.length" class="empty-state">
              <text class="empty-icon">📝</text>
              <text class="empty-text">暂无任务</text>
            </view>
            
-           <view v-for="(task, index) in tasksList" :key="index" class="task-item" :class="getTaskClass(task)">
-             <view class="task-left">
-               <view class="task-icon">{{ getTaskIcon(task.type) }}</view>
-               <view class="task-info">
-                 <text class="task-name">{{ task.title }}</text>
-                 <text class="task-desc">{{ task.description }}</text>
-                 <view class="task-reward-tag" v-if="task.reward">
-                   <text>🏆 奖励: {{ task.reward }}</text>
+           <view v-for="(task, index) in tasksList" :key="index" class="task-card" :class="getTaskClass(task)">
+             <view class="task-card-left">
+               <view class="task-icon-bubble" :class="getTaskClass(task)">
+                 <text class="task-icon">{{ getTaskIcon(task.type || task.title || task.name) }}</text>
+               </view>
+               <view class="task-text">
+                 <view class="task-title-row">
+                   <text class="task-name">{{ task.title }}</text>
+                   <text class="task-status-tag" :class="getTaskClass(task)">{{ getTaskStatusText(task) }}</text>
                  </view>
+                 <text class="task-desc">{{ task.description }}</text>
+                <view class="task-meta">
+                  <view class="task-reward-chip" v-if="task.reward">
+                    <text class="reward-icon">🏆</text>
+                    <text class="reward-text">{{ task.reward }}</text>
+                  </view>
+                  <view class="task-progress-wrap">
+                    <view class="task-progress-bar">
+                      <view class="task-progress-fill" :class="getTaskClass(task)" :style="{ width: getTaskProgress(task).percent + '%' }"></view>
+                    </view>
+                    <text class="task-progress-text">{{ getTaskProgressText(task) }}</text>
+                  </view>
+                </view>
                </view>
              </view>
-             <view class="task-right">
-               <view class="task-btn" @tap="handleTask(task)">
+             <view class="task-card-right">
+               <view class="task-action-btn" :class="getTaskClass(task)" @tap="handleTask(task)">
                  {{ getTaskBtnText(task) }}
                </view>
              </view>
@@ -419,9 +451,9 @@
 </template>
 
 <script>
-import { 
-  getUserInfo, getUserStats, getPointsBalance, getUserPoints, getUserCoupons, getItemCards, 
-  getUserTasks, getInviteRecords 
+import {
+  getUserInfo, getUserStats, getPointsBalance, getUserPoints, getUserCoupons, getItemCards,
+  getUserTasks, getTaskProgress, getInviteRecords
 } from '../../api/appUser.js'
 
 export default {
@@ -466,6 +498,8 @@ export default {
       tasksVisible: false,
       tasksList: [],
       tasksLoading: false,
+      tasksStats: { done: 0, ongoing: 0, waiting: 0 },
+      tasksProgressMap: {},
       
       // Invites Popup
       invitesVisible: false,
@@ -842,27 +876,126 @@ export default {
       } catch (e) {
         this.tasksList = []
       } finally {
+        this.recalcTasksStats()
+        this.loadTasksProgress()
         this.tasksLoading = false
       }
     },
     closeTasksPopup() { this.tasksVisible = false },
+    recalcTasksStats() {
+      const list = Array.isArray(this.tasksList) ? this.tasksList : []
+      let done = 0
+      let ongoing = 0
+      let waiting = 0
+      for (let i = 0; i < list.length; i++) {
+        const s = Number(list[i]?.status)
+        if (s === 2) done += 1
+        else if (s === 1) ongoing += 1
+        else waiting += 1
+      }
+      this.tasksStats = { done, ongoing, waiting }
+    },
     getOverallProgress() {
-      if (!this.tasksList.length) return 0
-      const done = this.tasksList.filter(t => t.status === 2).length
-      return Math.floor((done / this.tasksList.length) * 100)
+      const total = Array.isArray(this.tasksList) ? this.tasksList.length : 0
+      if (!total) return 0
+      return Math.floor((this.tasksStats.done / total) * 100)
     },
     getTaskClass(task) {
-      if (task.status === 2) return 'task-done'
-      return ''
+      const s = Number(task && task.status)
+      if (s === 2) return 'task-done'
+      if (s === 1) return 'task-ongoing'
+      return 'task-waiting'
     },
     getTaskIcon(type) {
+      const s = String(type || '').trim()
+      if (!s) return '📌'
+      if (s.includes('邀请') || s.includes('invite')) return '👥'
+      if (s.includes('登录') || s.includes('login')) return '📅'
+      if (s.includes('分享') || s.includes('share')) return '📣'
+      if (s.includes('消费') || s.includes('consume')) return '🛒'
+      if (s.includes('绑定') || s.includes('phone')) return '📱'
+      if (s.includes('关注') || s.includes('follow')) return '⭐'
       return '📌'
     },
+    getTaskStatusText(task) {
+      const s = Number(task && task.status)
+      if (s === 2) return '已完成'
+      if (s === 1) return '进行中'
+      return '未开始'
+    },
     getTaskBtnText(task) {
       if (task.status === 2) return '已完成'
       if (task.status === 1) return '去完成'
       return '领取任务'
     },
+    normalizeTaskProgress(res) {
+      const raw = res && (res.data ?? res.result ?? res)
+      if (!raw || typeof raw !== 'object') return null
+      const current = raw.current ?? raw.progress ?? raw.done ?? raw.completed ?? raw.value ?? null
+      const total = raw.total ?? raw.target ?? raw.required ?? raw.max ?? raw.goal ?? null
+      const percentRaw = raw.percent ?? raw.percentage ?? raw.rate ?? raw.ratio ?? null
+      let percent = null
+      if (percentRaw !== null && percentRaw !== undefined && Number.isFinite(Number(percentRaw))) {
+        const p = Number(percentRaw)
+        percent = p <= 1 ? Math.round(p * 100) : Math.round(p)
+      }
+      if (percent === null && current !== null && total !== null) {
+        const c = Number(current)
+        const t = Number(total)
+        if (Number.isFinite(c) && Number.isFinite(t) && t > 0) {
+          percent = Math.round((c / t) * 100)
+        }
+      }
+      if (percent === null) return null
+      if (percent < 0) percent = 0
+      if (percent > 100) percent = 100
+      const currentNum = Number.isFinite(Number(current)) ? Number(current) : null
+      const totalNum = Number.isFinite(Number(total)) ? Number(total) : null
+      return { percent, current: currentNum, total: totalNum }
+    },
+    getTaskProgress(task) {
+      const id = task && (task.id ?? task.task_id ?? task.taskId)
+      const s = Number(task && task.status)
+      if (s === 2) return { percent: 100, current: null, total: null }
+      if (id === undefined || id === null || id === '') return { percent: 0, current: null, total: null }
+      const p = this.tasksProgressMap[String(id)]
+      if (p && Number.isFinite(Number(p.percent))) {
+        const percent = Math.max(0, Math.min(100, Number(p.percent)))
+        return { percent, current: p.current ?? null, total: p.total ?? null }
+      }
+      return { percent: 0, current: null, total: null }
+    },
+    getTaskProgressText(task) {
+      const p = this.getTaskProgress(task)
+      if (Number(task && task.status) === 2) return '进度 100%'
+      if (p.current !== null && p.total !== null) return `进度 ${p.current}/${p.total}`
+      return `进度 ${p.percent}%`
+    },
+    async loadTasksProgress() {
+      const user_id = this.userId || uni.getStorageSync('user_id')
+      const list = Array.isArray(this.tasksList) ? this.tasksList : []
+      if (!user_id || list.length === 0) return
+      const need = []
+      for (let i = 0; i < list.length; i++) {
+        const t = list[i]
+        const id = t && (t.id ?? t.task_id ?? t.taskId)
+        if (id === undefined || id === null || id === '') continue
+        const key = String(id)
+        if (this.tasksProgressMap[key]) continue
+        need.push({ key, id })
+      }
+      if (need.length === 0) return
+      const settled = await Promise.allSettled(need.map(it => getTaskProgress(it.id, user_id)))
+      const next = { ...this.tasksProgressMap }
+      for (let i = 0; i < settled.length; i++) {
+        const it = need[i]
+        const r = settled[i]
+        if (r.status !== 'fulfilled') continue
+        const normalized = this.normalizeTaskProgress(r.value)
+        if (normalized) next[it.key] = normalized
+      }
+      this.tasksProgressMap = next
+    },
     handleTask(task) {
       if (task.status === 2) return
       // Implement task action logic
@@ -1449,43 +1582,174 @@ export default {
 }
 
 /* 任务中心弹窗 */
-.task-center-popup { background: #F8F9FA; }
-.overall-progress {
-  padding: 40rpx;
-  background: #fff;
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 20rpx;
+.task-center-popup { background: $bg-page; }
+.task-hero {
+  margin: 20rpx;
+  border-radius: 24rpx;
+  overflow: hidden;
+  background: $gradient-brand;
+  box-shadow: $shadow-warm;
 }
-.progress-circle {
-  width: 120rpx; height: 120rpx;
-  border-radius: 50%;
-  border: 8rpx solid $brand-primary;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
+.hero-top {
+  padding: 28rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20rpx;
 }
-.progress-percent { font-size: $font-lg; font-weight: 900; color: $brand-primary; line-height: 1; }
-.progress-label { font-size: 18rpx; color: $text-sub; margin-top: 4rpx; }
-.progress-stats { flex: 1; margin-left: 40rpx; }
-.stat-row { display: flex; align-items: center; margin-bottom: 8rpx; }
-.stat-dot { width: 12rpx; height: 12rpx; border-radius: 50%; margin-right: 12rpx; }
-.stat-dot.done { background: #10B981; }
-.stat-dot.ongoing { background: $brand-primary; }
-.stat-dot.waiting { background: $text-tertiary; }
-.stat-text { font-size: $font-sm; color: $text-sub; }
+.hero-left { flex: 1; }
+.hero-title { font-size: 22rpx; color: rgba(255,255,255,0.9); display: block; }
+.hero-percent-row { display: flex; align-items: baseline; margin-top: 10rpx; }
+.hero-percent { font-size: 54rpx; font-weight: 900; color: #fff; line-height: 1; }
+.hero-percent-unit { font-size: 22rpx; font-weight: 700; color: rgba(255,255,255,0.95); margin-left: 8rpx; }
+.hero-progress {
+  margin-top: 16rpx;
+  height: 10rpx;
+  background: rgba(255,255,255,0.25);
+  border-radius: 100rpx;
+  overflow: hidden;
+}
+.hero-progress-fill {
+  height: 100%;
+  background: rgba(255,255,255,0.95);
+  border-radius: 100rpx;
+}
+.hero-right {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  align-items: flex-end;
+}
+.hero-chip {
+  min-width: 140rpx;
+  padding: 10rpx 14rpx;
+  border-radius: 18rpx;
+  background: rgba(255,255,255,0.16);
+  border: 1rpx solid rgba(255,255,255,0.22);
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 10rpx;
+}
+.chip-num { font-size: 28rpx; font-weight: 900; color: #fff; }
+.chip-label { font-size: 20rpx; color: rgba(255,255,255,0.9); }
+.task-skeleton-list { padding: 10rpx 0; }
+.task-skeleton {
+  background: $bg-card;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin: 0 20rpx 16rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: $shadow-sm;
+}
+.sk-left { display: flex; align-items: center; gap: 16rpx; flex: 1; }
+.sk-icon { width: 68rpx; height: 68rpx; border-radius: 18rpx; background: rgba(0,0,0,0.06); }
+.sk-text { flex: 1; display: flex; flex-direction: column; gap: 12rpx; }
+.sk-line { height: 18rpx; border-radius: 10rpx; background: rgba(0,0,0,0.06); }
+.sk-line-title { width: 58%; }
+.sk-line-desc { width: 78%; }
+.sk-btn { width: 140rpx; height: 56rpx; border-radius: 100rpx; background: rgba(0,0,0,0.06); }
 
-.task-item {
-  background: #fff; margin-bottom: 20rpx; padding: 24rpx; border-radius: 16rpx;
-  display: flex; justify-content: space-between; align-items: center;
+.task-card {
+  background: $bg-card;
+  margin: 0 20rpx 16rpx;
+  padding: 24rpx;
+  border-radius: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: $shadow-sm;
+  border: 1rpx solid rgba(0,0,0,0.02);
 }
-.task-left { display: flex; align-items: center; flex: 1; }
-.task-icon { font-size: 40rpx; margin-right: 20rpx; }
-.task-info { display: flex; flex-direction: column; }
-.task-name { font-size: $font-md; font-weight: 700; margin-bottom: 4rpx; }
-.task-desc { font-size: $font-xs; color: $text-sub; margin-bottom: 8rpx; }
-.task-reward-tag { font-size: 20rpx; color: $accent-gold; background: #FFF9E6; padding: 2rpx 8rpx; border-radius: 4rpx; align-self: flex-start; }
-.task-btn {
-  background: $brand-primary; color: #fff; font-size: 24rpx; padding: 10rpx 28rpx; border-radius: 100rpx;
+.task-card:active { transform: scale(0.99); }
+.task-card-left { display: flex; align-items: flex-start; gap: 16rpx; flex: 1; min-width: 0; }
+.task-icon-bubble {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 22rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: rgba($brand-primary, 0.12);
 }
-.task-done .task-btn { background: #E0E0E0; color: #999; }
+.task-ongoing .task-icon-bubble { background: rgba($brand-primary, 0.12); }
+.task-waiting .task-icon-bubble { background: rgba(0,0,0,0.06); }
+.task-done .task-icon-bubble { background: rgba(16,185,129,0.12); }
+.task-icon { font-size: 36rpx; }
+.task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.task-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12rpx; }
+.task-name { font-size: $font-md; font-weight: 800; color: $text-main; max-width: 420rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.task-status-tag {
+  font-size: 20rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 100rpx;
+  flex-shrink: 0;
+}
+.task-ongoing .task-status-tag { background: rgba($brand-primary, 0.12); color: $brand-primary; }
+.task-waiting .task-status-tag { background: rgba(0,0,0,0.06); color: $text-sub; }
+.task-done .task-status-tag { background: rgba(16,185,129,0.12); color: #10B981; }
+.task-desc {
+  font-size: $font-xs;
+  color: $text-sub;
+  margin-top: 8rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.task-meta { margin-top: 10rpx; display: flex; gap: 10rpx; flex-wrap: wrap; }
+.task-progress-wrap {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+.task-progress-bar {
+  height: 8rpx;
+  background: rgba(0,0,0,0.06);
+  border-radius: 100rpx;
+  overflow: hidden;
+}
+.task-progress-fill {
+  height: 100%;
+  width: 0;
+  border-radius: 100rpx;
+  background: rgba($brand-primary, 0.9);
+}
+.task-progress-fill.task-done { background: rgba(16,185,129,0.9); }
+.task-progress-fill.task-waiting { background: rgba($brand-primary, 0.4); }
+.task-progress-text {
+  font-size: 20rpx;
+  color: $text-tertiary;
+}
+.task-reward-chip {
+  padding: 4rpx 10rpx;
+  border-radius: 10rpx;
+  background: #FFF7E6;
+  color: #D97706;
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+}
+.reward-icon { font-size: 18rpx; }
+.reward-text { font-size: 20rpx; font-weight: 700; }
+.task-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10rpx; margin-left: 16rpx; }
+.task-action-btn {
+  min-width: 140rpx;
+  text-align: center;
+  padding: 12rpx 18rpx;
+  border-radius: 100rpx;
+  font-size: 24rpx;
+  font-weight: 700;
+  background: $gradient-brand;
+  color: #fff;
+  box-shadow: $shadow-warm;
+}
+.task-waiting .task-action-btn { background: rgba($brand-primary, 0.12); color: $brand-primary; box-shadow: none; }
+.task-done .task-action-btn { background: #F2F2F2; color: $text-tertiary; box-shadow: none; }
 
 /* 邀请记录 */
 .invite-summary { display: flex; padding: 30rpx; background: #fff; margin-bottom: 20rpx; }