Prechádzať zdrojové kódy

feat(workReport): 调整工序节点样式,优化布局和字体大小

xieyong 1 mesiac pred
rodič
commit
a99db0e56b
1 zmenil súbory, kde vykonal 20 pridanie a 12 odobranie
  1. 20 12
      src/views/produceOrder/workReport.vue

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

@@ -443,7 +443,7 @@
         activeIndex: 0,
         desIndex: 0,
         errorIndex: 10000,
-        stepNodeH: 50, // 每个工序节点的行高
+        stepNodeH: 38, // 每个工序节点的行高
         stepConnectorW: 12, // 列间连接线 SVG 的最小宽度
         connectorViewW: 56, // 连接线 SVG 的实际宽度(自适应测量)
         drawer: false,
@@ -1919,6 +1919,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100px;
+    box-sizing: border-box;
   }
 
   .route-node {
@@ -1926,15 +1928,18 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-width: 84px;
-    max-width: 160px;
-    min-height: 38px;
-    padding: 3px 12px;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    max-width: none;
+    min-height: 0;
+    padding: 2px 8px;
     background: #ffffff;
     border: 2px solid #c0c4cc;
     border-radius: 2px;
     cursor: pointer;
     box-sizing: border-box;
+    overflow: hidden;
     transition: border-color 0.2s, box-shadow 0.2s;
 
     &:hover {
@@ -1969,10 +1974,13 @@
 
   // 并行工序节点(isParallel == 1):更紧凑
   .route-node.is-compact {
-    min-width: 64px;
-    max-width: 110px;
-    min-height: 28px;
-    padding: 1px 8px;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    max-width: none;
+    min-height: 0;
+    padding: 1px 6px;
+    overflow: hidden;
 
     .route-node-name {
       font-size: 12px;
@@ -1989,9 +1997,9 @@
   }
 
   .route-node-name {
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
-    line-height: 1.35;
+    line-height: 1.3;
     color: #303133;
     text-align: center;
     word-break: break-all;
@@ -2000,7 +2008,7 @@
   .route-node-team {
     margin-top: 2px;
     color: #606266;
-    font-size: 11px;
+    font-size: 10px;
     line-height: 1.2;
     text-align: center;
     word-break: break-all;