소스 검색

feat(workReport): 优化任务类型标签显示逻辑,调整样式和位置显示在其下方

xieyong 1 개월 전
부모
커밋
7b7e29a502
1개의 변경된 파일과 12개의 추가작업 그리고 9개의 파일을 삭제
  1. 12 9
      src/views/produceOrder/workReport.vue

+ 12 - 9
src/views/produceOrder/workReport.vue

@@ -101,12 +101,7 @@
                       @click="handIdx(row.flatIndex, row.item)"
                     >
                       <div class="route-node-name">
-                        {{ row.item.taskTypeName
-                        }}<span
-                          v-if="row.flatIndex === desIndex"
-                          class="route-node-tag"
-                          >此处</span
-                        >
+                        {{ row.item.taskTypeName }}
                       </div>
                       <div
                         v-if="showTaskTeamName(row.item)"
@@ -115,6 +110,10 @@
                         {{ getTaskTeamName(row.item) }}
                       </div>
                     </div>
+                    <span
+                      v-if="row.flatIndex === desIndex"
+                      class="route-node-tag"
+                    >此处</span>
                   </div>
                 </div>
               </div>
@@ -1916,6 +1915,7 @@
   }
 
   .route-node-row {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -2015,15 +2015,18 @@
   }
 
   .route-node-tag {
-    display: inline-block;
-    margin-left: 4px;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 6px;
     padding: 0 6px;
     font-size: 11px;
     line-height: 16px;
     color: #ffffff;
     background: #1890ff;
     border-radius: 8px;
-    vertical-align: middle;
+    white-space: nowrap;
   }
 
   ::v-deep .el-tabs__content {