diff --git a/apps/miniprogram/src/pages/followup/detail/index.scss b/apps/miniprogram/src/pages/followup/detail/index.scss
index 16b054e..da83984 100644
--- a/apps/miniprogram/src/pages/followup/detail/index.scss
+++ b/apps/miniprogram/src/pages/followup/detail/index.scss
@@ -42,6 +42,29 @@
 .detail-value {
   font-size: 26px;
   color: $tx;
+
+  &.status-completed { color: $acc; }
+  &.status-overdue { color: $dan; }
+  &.status-pending { color: $wrn; }
+}
+
+.countdown {
+  margin-top: 12px;
+  padding: 12px 16px;
+  background: $wrn-l;
+  border-radius: $r-sm;
+}
+
+.countdown-urgent {
+  background: $dan-l;
+}
+
+.countdown-text {
+  font-size: 24px;
+  color: $wrn;
+  font-weight: bold;
+
+  .countdown-urgent & { color: $dan; }
 }
 
 .detail-desc {
diff --git a/apps/miniprogram/src/pages/followup/detail/index.tsx b/apps/miniprogram/src/pages/followup/detail/index.tsx
index be0d18e..ec50e54 100644
--- a/apps/miniprogram/src/pages/followup/detail/index.tsx
+++ b/apps/miniprogram/src/pages/followup/detail/index.tsx
@@ -60,6 +60,24 @@ export default function FollowUpDetail() {
     return '待完成';
   };
 
+  const getStatusClass = (status: string) => {
+    if (status === 'completed') return 'status-completed';
+    if (status === 'overdue') return 'status-overdue';
+    return 'status-pending';
+  };
+
+  const getCountdown = (dueDate: string, status: string) => {
+    if (status === 'completed') return null;
+    const now = new Date();
+    const due = new Date(dueDate);
+    const diffMs = due.getTime() - now.getTime();
+    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+    if (diffDays < 0) return { text: `已过期 ${Math.abs(diffDays)} 天`, urgent: true };
+    if (diffDays === 0) return { text: '今天截止', urgent: true };
+    if (diffDays <= 3) return { text: `还剩 ${diffDays} 天`, urgent: true };
+    return { text: `还剩 ${diffDays} 天`, urgent: false };
+  };
+
   if (loading) {
     return (
       <View className='detail-page'>
@@ -84,12 +102,22 @@ export default function FollowUpDetail() {
         <Text className='detail-title'>{task.task_type}</Text>
         <View className='detail-row'>
           <Text className='detail-label'>状态</Text>
-          <Text className='detail-value'>{getStatusLabel(task.status)}</Text>
+          <Text className={`detail-value ${getStatusClass(task.status)}`}>
+            {getStatusLabel(task.status)}
+          </Text>
         </View>
         <View className='detail-row'>
           <Text className='detail-label'>截止日期</Text>
           <Text className='detail-value'>{task.due_date}</Text>
         </View>
+        {(() => {
+          const cd = getCountdown(task.due_date, task.status);
+          return cd ? (
+            <View className={`countdown ${cd.urgent ? 'countdown-urgent' : ''}`}>
+              <Text className='countdown-text'>{cd.text}</Text>
+            </View>
+          ) : null;
+        })()}
         {task.description && (
           <View className='detail-desc'>
             <Text className='detail-desc-text'>{task.description}</Text>