src/components/taskItem.vue

@@ -2,7 +2,15 @@
     <div class="farm-item" :class="{ done: props.status, hall: isHall }">
         <div class="item-top">
             <div class="top-l">
-                <div class="item-name">{{ itemData?.farmWorkName }}</div>
+                <el-popover
+                    placement="top"
+                    trigger="click"
+                >
+                    <template #reference>
+                        <div class="item-name">{{ itemData?.farmWorkName }}</div>
+                    </template>
+                    <div class="popover-content">{{ itemData?.farmWorkName }}</div>
+                </el-popover>
                 <div class="item-time" v-if="itemIndex === 0">
                     {{
                         itemData?.expectedExecuteDate
@@ -356,13 +364,13 @@ const toDetail = (status, id, farmWorkId) => {
                 color: #fff;
             }
         }
-        .top-r {
-            color: rgba(0, 0, 0, 0.6);
-        }
         .item-desc .copy-info .copy-text {
             color: #000000;
         }
     }
+    .top-r {
+        flex: none;
+    }
     &.hall {
         background: #cfe9ff;
         .item-top {
@@ -386,6 +394,10 @@ const toDetail = (status, id, farmWorkId) => {
             font-size: 16px;
             color: #000000;
         }
+        .item-time {
+            padding-right: 8px;
+            flex: none;
+        }
         .item-name {
             margin-right: 8px;
             color: #2199f8;
@@ -395,6 +407,11 @@ const toDetail = (status, id, farmWorkId) => {
             border: 1px solid #2199f8;
             line-height: 29px;
             background: #fff;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
         }
     }
     .item-box {
@@ -723,4 +740,11 @@ const toDetail = (status, id, farmWorkId) => {
         }
     }
 }
+
+.popover-content {
+    font-size: 14px;
+    color: #000;
+    line-height: 1.5;
+    word-break: break-all;
+}
 </style>