更新action-timeline组件 --- fix5

src/components/action-timeline/action-timeline.less

-.action-timeline {
+.action-timeline-table {
+    width: calc(100% - 60px);
+    margin: 0 30px;
+    border-collapse:separate;
+    border-spacing:0px 40px;
+    .action-timeline-thead {
+        th:nth-child(1) {
+            min-width: 200px;
+        }
+        th:nth-child(2) {
+            width: 100%
+        }
+    }
+    .action-timeline-tbody {
+        tr {
+            td {
                 position: relative;
-    height: 100%;
-
+                > .date {
+                    display: flex;
+                    width: max-content;
+                    padding: 16px;
+                    font-size: 16px;
+                    border: 2px solid #515a6e;
+                    .arrow {
+                        margin-left: 10px;
+                    }
+                }
+                >.date::before {
+                    content: ' ';
+                    display: block;
+                    position: absolute;
+                    right: -20px;
+                    top: 30px;
+                    height: 2px;
+                    width: 20px;
+                    background-color: #515a6e;
+                }
+                >.timeline {
+                    padding: 16px;
+                    border: 2px solid #515a6e;
+                    min-height: 68px;
+                    margin-left: 18px;
                     .action-timeline-wrapper {
                         padding-left: 115px;
                         color: var(--view-font-color-bright);
@@ -49,50 +87,7 @@
                             border-left: 1px solid #515a6e;
                         }
                     }
-
-    .action-timeline-group-wrapper {
-        padding-left: 200px;
-        padding-right: 30px;
-        color: var(--view-font-color-bright);
-
-        .action-timeline-group {
-            position: relative;
-            padding-top: 40px;
-
-            >.date {
-                position: absolute;
-                width: 150px;
-                left: -170px;
-                border: 2px solid #515a6e;
-                font-size: 18px;
-                padding: 16px;
-
-                >.usertaskname {
-                    max-width: 100px;
-                }
-                >.arrow {
-                    position: absolute;
-                    top: 16px;
-                    right: 16px;
-                    cursor: pointer;
-                }
-            }
-
-            >.date::before {
-                content: ' ';
-                display: block;
-                position: absolute;
-                right: -22px;
-                top: 30px;
-                height: 2px;
-                width: 20px;
-                background-color: #515a6e;
                 }
-
-            >.timeline {
-                padding: 16px;
-                border: 2px solid #515a6e;
-                min-height: 68px;
             }
         }
     }

src/components/action-timeline/action-timeline.vue

 <template>
     <div class="action-timeline">
-        <div class='action-timeline-group-wrapper'>
+        <table class="action-timeline-table">
+            <thead class="action-timeline-thead">
+                <tr>
+                    <th></th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody class="action-timeline-tbody">
                 <template v-for="(usertask, usertaskIndex) in data.usertasks">
-                <div :key='usertaskIndex' class='action-timeline-group'>
+                    <tr :key='usertaskIndex'>
+                        <td align="right" valign="top">
                             <div class='date'>
                                 <div class='usertaskname'>{{ usertask.userTaskName }}</div>
                                 <div class='arrow' @click="changeExpand(usertask)">
                                     <i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
                                 </div>
                             </div>
+                        </td>
+                        <td>
                             <div class='timeline'>
                                 <template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
                                     {{$t('components.appWFApproval.wait')}}
@@ -51,9 +61,11 @@
                                     </ul>
                                 </template>
                             </div>
-                </div>
+                        </td>
+                    </tr>
                 </template>
-        </div>
+            </tbody>
+        </table>
     </div>
 </template>