内容看板ui优化

components/ContentDashboard.vue

@@ -5,23 +5,47 @@
       <view class="task-overview">
       <view class="task-card" v-for="item in taskStats" :key="item.label">
         <text class="task-count">{{ item.count }}</text>
-        <text class="task-label">{{ item.label }}</text>
+        <view class="task-label-wrapper">
+          <text class="task-label">{{ item.label }}</text>
+          <uv-tags 
+            v-if="item.label === '逾期任务'" 
+            text="紧急"
+            type="error" 
+            size="mini" 
+            plain
+            :custom-style="{ marginTop: '4px' }"
+          ></uv-tags>
+          <uv-tags 
+            v-else-if="item.label === '即将预期'" 
+            text="注意"
+            type="warning" 
+            size="mini" 
+            plain
+            :custom-style="{ marginTop: '4px' }"
+          ></uv-tags>
+        </view>
       </view>
     </view>
 
     <!-- 逾期任务详情 -->
     <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">逾期</view>
+        <view class="overdue-badge-wrapper">
+          <uv-tags text="逾期" type="error" size="mini"></uv-tags>
+        </view>
         <view class="overdue-content">
-          <text class="overdue-date">{{ task.date }}</text>
+          <view class="overdue-header">
+            <text class="overdue-date">{{ task.date }}</text>
+          </view>
           <text class="overdue-project">所属项目: {{ task.project }}</text>
           <text class="overdue-desc">{{ task.description }}</text>
-          <text class="overdue-owner">负责人: {{ task.owner }}</text>
+          <view class="overdue-meta">
-          <text class="overdue-time">发布时间: {{ task.releaseTime }}</text>
+            <text class="overdue-owner">负责人: {{ task.owner }}</text>
+            <text class="overdue-time">发布时间: {{ task.releaseTime }}</text>
+          </view>
         </view>
         <view class="overdue-action">
-          <button class="handle-btn" @click.stop="handleOverdueTask(task)">立即处理</button>
+          <uv-button type="error" size="small" @click.stop="handleOverdueTask(task)">立即处理</uv-button>
         </view>
       </view>
       <view class="carousel-dots">
@@ -56,7 +80,16 @@
       <view class="status-grid">
         <view class="status-card" v-for="status in projectStatus" :key="status.label">
           <text class="status-count">{{ status.count }}</text>
-          <text class="status-label">{{ status.label }}</text>
+          <view class="status-label-wrapper">
+            <text class="status-label">{{ status.label }}</text>
+            <uv-tags 
+              :text="getProjectStatusTag(status.label)"
+              :type="getProjectStatusType(status.label)" 
+              size="mini" 
+              plain
+              :custom-style="{ marginTop: '4px' }"
+            ></uv-tags>
+          </view>
         </view>
       </view>
     </view>
@@ -70,7 +103,16 @@
       <view class="status-grid">
         <view class="status-card" v-for="status in customerStatus" :key="status.label">
           <text class="status-count">{{ status.count }}</text>
-          <text class="status-label">{{ status.label }}</text>
+          <view class="status-label-wrapper">
+            <text class="status-label">{{ status.label }}</text>
+            <uv-tags 
+              :text="getCustomerStatusTag(status.label)"
+              :type="getCustomerStatusType(status.label)" 
+              size="mini" 
+              plain
+              :custom-style="{ marginTop: '4px' }"
+            ></uv-tags>
+          </view>
         </view>
       </view>
     </view>
@@ -161,6 +203,50 @@ const viewAnnouncement = (announcement) => {
     icon: 'none'
   });
 };
+
+// 获取项目状态标签类型
+const getProjectStatusType = (label) => {
+  const typeMap = {
+    '运行中': 'success',
+    '运维中': 'primary',
+    '即将到期': 'warning',
+    '开发超期': 'error'
+  };
+  return typeMap[label] || 'primary';
+};
+
+// 获取项目状态标签文本
+const getProjectStatusTag = (label) => {
+  const tagMap = {
+    '运行中': '正常',
+    '运维中': '进行中',
+    '即将到期': '待处理',
+    '开发超期': '超期'
+  };
+  return tagMap[label] || '';
+};
+
+// 获取客户状态标签类型
+const getCustomerStatusType = (label) => {
+  const typeMap = {
+    '今日新增': 'success',
+    '今日已跟进': 'primary',
+    '今日待跟进': 'warning',
+    '即将跟进': 'info'
+  };
+  return typeMap[label] || 'primary';
+};
+
+// 获取客户状态标签文本
+const getCustomerStatusTag = (label) => {
+  const tagMap = {
+    '今日新增': '新增',
+    '今日已跟进': '已完成',
+    '今日待跟进': '待处理',
+    '即将跟进': '即将'
+  };
+  return tagMap[label] || '';
+};
 </script>
 
 <style lang="scss" scoped>
@@ -183,13 +269,20 @@ const viewAnnouncement = (announcement) => {
 
 .task-card {
   flex: 1;
-  background: #fff;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 8px;
+  border-radius: 12px;
-  padding: 8px;
+  padding: 12px 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  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);
+}
+
+.task-card:active {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 .task-count {
@@ -199,6 +292,13 @@ const viewAnnouncement = (announcement) => {
   margin-bottom: 8px;
 }
 
+.task-label-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
 .task-label {
   font-size: 12px;
   color: #666;
@@ -209,40 +309,52 @@ const viewAnnouncement = (announcement) => {
 }
 
 .overdue-card {
-  background: #ffe6e6;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 16px;
   margin-bottom: 12px;
   display: flex;
   align-items: flex-start;
   position: relative;
   cursor: pointer;
-  transition: opacity 0.2s;
+  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 {
-  opacity: 0.8;
+  transform: scale(0.98);
+  box-shadow: 0 1px 8px rgba(255, 68, 68, 0.15);
+  opacity: 0.9;
 }
 
-.overdue-badge {
+.overdue-badge-wrapper {
   position: absolute;
   left: 0;
   top: 0;
-  background: #ff4444;
+  z-index: 1;
-  color: #fff;
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 4px 0 0 0;
 }
 
 .overdue-content {
   flex: 1;
-  margin-left: 60px;
+  margin-left: 50px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
+.overdue-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.overdue-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .overdue-date {
   font-size: 14px;
   color: #333;
@@ -260,15 +372,8 @@ const viewAnnouncement = (announcement) => {
 
 .overdue-action {
   margin-left: 12px;
-}
+  display: flex;
-
+  align-items: center;
-.handle-btn {
-  background: #ff4444;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  padding: 8px 16px;
-  font-size: 12px;
 }
 
 .carousel-dots {
@@ -361,13 +466,20 @@ const viewAnnouncement = (announcement) => {
 }
 
 .status-card {
-  background: #fff;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 8px;
+  border-radius: 12px;
-  padding: 8px;
+  padding: 12px 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  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);
+}
+
+.status-card:active {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 .status-count {
@@ -377,6 +489,14 @@ const viewAnnouncement = (announcement) => {
   margin-bottom: 8px;
 }
 
+.status-label-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+}
+
 .status-label {
   font-size: 12px;
   color: #666;