调整使得卡片体积减小

components/ContentDashboard.vue

@@ -154,6 +154,8 @@ import { ref, onMounted } from 'vue';
 import { getTaskStatusType, getTaskStatusStyle, getStatusText } from '@/utils/taskConfig.js';
 import { getDashboardBrief, getTaskList } from '@/common/api';
 import { useUserStore } from '@/store/user';
+import {truncateText} from "@/utils/textSolve/truncateText";
+
 
 // 任务统计
 const taskStats = ref([
@@ -192,15 +194,7 @@ const customerStatus = ref([
   { label: '即将跟进', count: 0 }
 ]);
 
-const truncateText = (text, maxLength = 30, suffix = '...')=> {
-  if (!text || typeof text !== 'string') return ''
 
-  if (text.length <= maxLength) {
-    return text
-  }
-
-  return text.substring(0, maxLength) + suffix
-}
 
 // 加载状态
 const loading = ref(false);

pages/task/list/index.vue

@@ -13,24 +13,37 @@
           >
           <!-- 状态标签和日期 -->
           <view class="task-header">
-            <view class="task-badge-wrapper">
+            <view style="display: flex;align-items: center;gap: 12px">
-              <uv-tags 
+              <view class="task-badge-wrapper">
-                :text="getStatusText(task.status)"
+                <uv-tags
-                :type="getTaskStatusType(task.status)"
+                    :text="getStatusText(task.status)"
-                size="mini"
+                    :type="getTaskStatusType(task.status)"
-                :plain="false"
+                    size="mini"
-                :custom-style="getTagCustomStyle(task.status)"
+                    :plain="false"
-              ></uv-tags>
+                    :custom-style="getTagCustomStyle(task.status)"
+                ></uv-tags>
+              </view>
+              <view class="task-date-wrapper">
+                <text class="task-date">{{ task.date }}</text>
+              </view>
             </view>
-            <view class="task-date-wrapper">
+
-              <text class="task-date">{{ task.date }}</text>
+            <!-- 立即处理按钮 -->
+            <view class="task-action" v-if="task.status !== 'completed'">
+              <uv-button
+                  :type="getButtonType(task.status)"
+                  size="small"
+                  @click.stop="handleTask(task)"
+              >
+                立即处理
+              </uv-button>
             </view>
           </view>
 
           <!-- 任务内容 -->
           <view class="task-content">
             <text class="task-project">所属项目: {{ task.project }}</text>
-            <text class="task-description">{{ task.description }}</text>
+            <text class="task-description">{{truncateText(task.description)}}</text>
             <view class="task-meta">
               <text class="task-owner">负责人: {{ task.owner }}</text>
               <text class="task-owner">创建人: {{ task.createName }}</text>
@@ -41,21 +54,13 @@
                   <text class="countdown-text" :class="getCountdownClass(task.status)">
                     {{ task.remainingDays < 0 ? `已逾期${Math.abs(task.remainingDays)}天` : `剩余${task.remainingDays}天` }}
                   </text>
+
                 </view>
               </view>
             </view>
           </view>
 
-          <!-- 立即处理按钮 -->
+
-          <view class="task-action" v-if="task.status !== 'completed'">
-            <uv-button 
-              :type="getButtonType(task.status)" 
-              size="small" 
-              @click.stop="handleTask(task)"
-            >
-              立即处理
-            </uv-button>
-          </view>
           </view>
         </template>
 
@@ -79,6 +84,8 @@ import { onLoad } from '@dcloudio/uni-app';
 import { getStatusText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
 import { getTaskList } from '@/common/api';
 import { useTaskStore } from '@/store/task';
+import {truncateText} from "@/utils/textSolve/truncateText";
+
 
 // 获取页面参数
 const statusFilter = ref('');
@@ -454,6 +461,7 @@ onLoad((options) => {
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
+  justify-content: space-between;
 }
 
 .task-badge-wrapper {
@@ -543,7 +551,7 @@ onLoad((options) => {
 }
 
 .task-action {
-  margin-top: 12px;
+
   display: flex;
   justify-content: flex-end;
 }

utils/textSolve/truncateText.js

@@ -0,0 +1,9 @@
+export const truncateText = (text, maxLength = 30, suffix = '...')=> {
+    if (!text || typeof text !== 'string') return ''
+
+    if (text.length <= maxLength) {
+        return text
+    }
+
+    return text.substring(0, maxLength) + suffix
+}