no message

src/views/components/Timeline.vue

@@ -8,7 +8,10 @@
           <span style="color: rgb(153, 153, 153);">{{list[0].createTime}}</span>
           <span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[0].operatorName}}</span>
           <span style="color: #333;" v-if="list[0].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[0].datingClueFollowStage)?.label}}</span>
-          <span style="color: #faa19d;margin-left: 16px;" v-if="list[0].remark">{{list[0].remark}}</span>
+          <Tooltip :overlayStyle="{maxWidth: '640px'}" v-if="list[0].remark">
+            <template #title>{{list[0].remark}}</template>
+            <span class="single-line" style="color: #faa19d;margin-left: 16px;">{{list[0].remark}}</span>
+          </Tooltip>
         </div>
       </div>
     </li>
@@ -20,7 +23,10 @@
           <span style="color: rgb(153, 153, 153);">{{list[1].createTime}}</span>
           <span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[1].operatorName}}</span>
           <span style="color: #333;" v-if="list[1].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[1].datingClueFollowStage)?.label}}</span>
-          <span style="color: #faa19d;margin-left: 16px;" v-if="list[1].remark">{{list[1].remark}}</span>
+          <Tooltip :overlayStyle="{maxWidth: '640px'}" v-if="list[1].remark">
+            <template #title>{{list[1].remark}}</template>
+            <span class="single-line" style="color: #faa19d;margin-left: 16px;" v-if="list[1].remark">{{list[1].remark}}</span>
+          </Tooltip>
         </div>
       </div>
     </li>
@@ -31,7 +37,10 @@
           <span style="color: rgb(153, 153, 153);">{{list[2].createTime}}</span>
           <span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[2].operatorName}}</span>
           <span style="color: #333;" v-if="list[2].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[2].datingClueFollowStage)?.label}}</span>
-          <span style="color: #faa19d;margin-left: 16px;" v-if="list[2].remark">{{list[2].remark}}</span>
+          <Tooltip :overlayStyle="{maxWidth: '640px'}" v-if="list[2].remark">
+            <template #title>{{list[2].remark}}</template>
+            <span class="single-line" style="color: #faa19d;margin-left: 16px;">{{list[2].remark}}</span>
+          </Tooltip>
         </div>
       </div>
     </li>
@@ -42,8 +51,10 @@
 </template>
 <script>
 import { followStageList } from '/@/enums/customerEnum'
+import { Tooltip } from 'ant-design-vue'
 export default {
   name: 'Timeline',
+  components: { Tooltip },
   props: {
     list: { // 时间轴内容数组
       type: Array,
@@ -59,4 +70,13 @@ export default {
   },
 }
 </script>
+<style scoped lang="less">
+.single-line {
+  display: inline-block;
+  max-width: 240px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+</style>