diff --git a/components/ContentDashboard.vue b/components/ContentDashboard.vue
index d8de55d..872fe96 100644
--- a/components/ContentDashboard.vue
+++ b/components/ContentDashboard.vue
@@ -3,7 +3,13 @@
     <view class="dashboard-content">
       <!-- 任务概览 -->
       <view class="task-overview">
-      <view class="task-card" v-for="item in taskStats" :key="item.label" @click="goToTaskList(item.label)">
+      <view 
+        class="task-card task-card-base" 
+        v-for="item in taskStats" 
+        :key="item.label" 
+        :class="getTaskCardClass(item.label)"
+        @click="goToTaskList(item.label)"
+      >
         <text class="task-count">{{ item.count }}</text>
         <view class="task-label-wrapper">
           <text class="task-label">{{ item.label }}</text>
@@ -29,22 +35,24 @@
 
     <!-- 逾期任务详情 -->
     <view class="overdue-section" v-if="overdueTasks.length > 0">
-      <view class="overdue-card" v-for="task in overdueTasks" :key="task.id" @click="goToTaskDetail(task)">
-        <view class="overdue-badge-wrapper">
-          <uv-tags text="逾期" type="error" size="mini"></uv-tags>
-        </view>
-        <view class="overdue-content">
-          <view class="overdue-header">
-            <text class="overdue-date">{{ task.date }}</text>
+      <view class="overdue-card task-card-base task-card-overdue" v-for="task in overdueTasks" :key="task.id" @click="goToTaskDetail(task)">
+        <view class="task-header">
+          <view class="task-badge-wrapper">
+            <uv-tags text="逾期" type="error" size="mini"></uv-tags>
           </view>
-          <text class="overdue-project">所属项目: {{ task.project }}</text>
-          <text class="overdue-desc">{{ task.description }}</text>
-          <view class="overdue-meta">
-            <text class="overdue-owner">负责人: {{ task.owner }}</text>
-            <text class="overdue-time">发布时间: {{ task.releaseTime }}</text>
+          <view class="task-date-wrapper">
+            <text class="task-date">{{ task.date }}</text>
           </view>
         </view>
-        <view class="overdue-action">
+        <view class="task-content">
+          <text class="task-project">所属项目: {{ task.project }}</text>
+          <text class="task-description">{{ task.description }}</text>
+          <view class="task-meta">
+            <text class="task-owner">负责人: {{ task.owner }}</text>
+            <text class="task-time">发布时间: {{ task.releaseTime }}</text>
+          </view>
+        </view>
+        <view class="task-action">
           <uv-button type="error" size="small" @click.stop="handleOverdueTask(task)">立即处理</uv-button>
         </view>
       </view>
@@ -61,7 +69,7 @@
         <text class="section-icon">📢</text>
         <text class="section-title">公告事项</text>
       </view>
-      <view class="announcement-item" v-for="announcement in announcements" :key="announcement.id" @click="viewAnnouncement(announcement)">
+      <view class="announcement-item task-card-base task-card-announcement" v-for="announcement in announcements" :key="announcement.id" @click="viewAnnouncement(announcement)">
         <view class="announcement-content">
           <text class="announcement-title">{{ announcement.title }}</text>
           <text class="announcement-desc">{{ announcement.description }}</text>
@@ -78,7 +86,12 @@
         <text class="section-title">项目状态</text>
       </view>
       <view class="status-grid">
-        <view class="status-card" v-for="status in projectStatus" :key="status.label">
+        <view 
+          class="status-card task-card-base" 
+          v-for="status in projectStatus" 
+          :key="status.label"
+          :class="getProjectCardClass(status.label)"
+        >
           <text class="status-count">{{ status.count }}</text>
           <view class="status-label-wrapper">
             <text class="status-label">{{ status.label }}</text>
@@ -101,7 +114,12 @@
         <text class="section-title">客户状态</text>
       </view>
       <view class="status-grid">
-        <view class="status-card" v-for="status in customerStatus" :key="status.label">
+        <view 
+          class="status-card task-card-base" 
+          v-for="status in customerStatus" 
+          :key="status.label"
+          :class="getCustomerCardClass(status.label)"
+        >
           <text class="status-count">{{ status.count }}</text>
           <view class="status-label-wrapper">
             <text class="status-label">{{ status.label }}</text>
@@ -264,6 +282,39 @@ const getCustomerStatusTag = (label) => {
   };
   return tagMap[label] || '';
 };
+
+// 获取任务卡片样式类
+const getTaskCardClass = (label) => {
+  const classMap = {
+    '完成任务': 'task-card-completed',
+    '待完成任务': 'task-card-pending',
+    '即将预期': 'task-card-imminent',
+    '逾期任务': 'task-card-overdue'
+  };
+  return classMap[label] || '';
+};
+
+// 获取项目状态卡片样式类
+const getProjectCardClass = (label) => {
+  const classMap = {
+    '运行中': 'status-card-success',
+    '运维中': 'status-card-primary',
+    '即将到期': 'status-card-warning',
+    '开发超期': 'status-card-error'
+  };
+  return classMap[label] || '';
+};
+
+// 获取客户状态卡片样式类
+const getCustomerCardClass = (label) => {
+  const classMap = {
+    '今日新增': 'status-card-success',
+    '今日已跟进': 'status-card-primary',
+    '今日待跟进': 'status-card-warning',
+    '即将跟进': 'status-card-info'
+  };
+  return classMap[label] || '';
+};
 </script>
 
 <style lang="scss" scoped>
@@ -276,6 +327,22 @@ const getCustomerStatusTag = (label) => {
   padding: 10px 30rpx;
 }
 
+// 统一卡片基础样式
+.task-card-base {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.task-card-base:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
 .task-overview {
   display: flex;
   justify-content: space-between;
@@ -286,20 +353,32 @@ const getCustomerStatusTag = (label) => {
 
 .task-card {
   flex: 1;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 12px;
-  padding: 12px 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  
+  // 任务卡片使用较小的padding
+  &.task-card-base {
+    padding: 12px 8px;
+  }
 }
 
-.task-card:active {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+// 任务卡片状态样式
+.task-card-imminent {
+  border-left: 4px solid #ff9800;
+}
+
+.task-card-pending {
+  border-left: 4px solid #2885ff;
+}
+
+.task-card-completed {
+  border-left: 4px solid #909399;
+  opacity: 0.85;
+}
+
+.task-card-overdue {
+  border-left: 4px solid #f56c6c;
 }
 
 .task-count {
@@ -326,71 +405,81 @@ const getCustomerStatusTag = (label) => {
 }
 
 .overdue-card {
-  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
-  border-radius: 12px;
-  padding: 16px;
   margin-bottom: 12px;
   display: flex;
-  align-items: flex-start;
-  position: relative;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 12px rgba(255, 68, 68, 0.1);
-  border: 1px solid rgba(255, 68, 68, 0.1);
-}
-
-.overdue-card:active {
-  transform: scale(0.98);
-  box-shadow: 0 1px 8px rgba(255, 68, 68, 0.15);
-  opacity: 0.9;
-}
-
-.overdue-badge-wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-}
-
-.overdue-content {
-  flex: 1;
-  margin-left: 50px;
-  display: flex;
   flex-direction: column;
-  gap: 8px;
 }
 
-.overdue-header {
+.overdue-card.task-card-overdue {
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
+  border-left: 4px solid #f56c6c;
+  box-shadow: 0 2px 12px rgba(255, 68, 68, 0.1);
+}
+
+// 任务卡片头部样式（用于逾期卡片）
+.task-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
-.overdue-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.task-badge-wrapper {
+  flex-shrink: 0;
 }
 
-.overdue-date {
+.task-date-wrapper {
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.task-date {
   font-size: 14px;
   color: #333;
   font-weight: 500;
 }
 
-.overdue-project,
-.overdue-desc,
-.overdue-owner,
-.overdue-time {
+.task-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-project {
   font-size: 12px;
   color: #666;
   line-height: 1.5;
 }
 
-.overdue-action {
-  margin-left: 12px;
+.task-description {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 4px;
+}
+
+.task-meta {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.task-owner {
+  font-size: 12px;
+  color: #666;
+}
+
+.task-time {
+  font-size: 12px;
+  color: #666;
+}
+
+.task-action {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .carousel-dots {
@@ -436,14 +525,14 @@ const getCustomerStatusTag = (label) => {
 }
 
 .announcement-item {
-  background: #fff;
-  border-radius: 8px;
-  padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.task-card-announcement {
+  border-left: 4px solid #2885ff;
 }
 
 .announcement-content {
@@ -483,20 +572,35 @@ const getCustomerStatusTag = (label) => {
 }
 
 .status-card {
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 12px;
-  padding: 12px 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  
+  // 状态卡片使用较小的padding
+  &.task-card-base {
+    padding: 12px 8px;
+  }
 }
 
-.status-card:active {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+// 状态卡片边框样式
+.status-card-success {
+  border-left: 4px solid #67c23a;
+}
+
+.status-card-primary {
+  border-left: 4px solid #2885ff;
+}
+
+.status-card-warning {
+  border-left: 4px solid #ff9800;
+}
+
+.status-card-error {
+  border-left: 4px solid #f56c6c;
+}
+
+.status-card-info {
+  border-left: 4px solid #909399;
 }
 
 .status-count {