中建四局：完成指挥中心页面的布局和样式

src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue

@@ -14,7 +14,7 @@
 
 <style lang='scss' scoped>
   .steps {
-    width: 100%;
+    // width: 100%;
     display: flex;
     height: 80px;
     &-item {
@@ -63,7 +63,7 @@
       justify-content: center;
       align-items: center;
       color: #fff;
-      transform: translateX(-7px);
+      transform: translateX(-11px);
 
       .label {
         color: #9da9b9;
@@ -75,6 +75,25 @@
         font-size: 15px;
       }
     }
+
+    .steps-item:first-child {
+      width: 80px;
+
+      .steps-item-line {
+        border-radius: 12px 0 0 12px;
+      }
+
+      .steps-item-num {
+        left: 0px;
+      }
+
+      .steps-item-text {
+        align-items: flex-start;
+        transform: translateX(0px);
+      }
+    }
+
+    
   }
 </style>
 

src/views/projectAdmin/zjsj/command/LeftThree/index.vue

@@ -18,23 +18,27 @@ export default {
       items: [
         {
           label: '2022-01-01',
-          value: '测试阶段1'
+          value: '基础工程'
         },
         {
-          label: '二',
+          label: '2022-02-14',
-          value: '测试阶段2'
+          value: '主题结构施工'
         },
         {
-          label: '三',
+          label: '2022-03-25',
-          value: '测试阶段3'
+          value: '屋面工程'
         },
         {
-          label: '四',
+          label: '2022-01-01',
-          value: '测试阶段3'
+          value: '基础工程'
         },
         {
-          label: '五',
+          label: '2022-02-14',
-          value: '测试阶段3'
+          value: '主题结构施工'
+        },
+        {
+          label: '2022-03-25',
+          value: '屋面工程'
         },
       ],
       index: 0
@@ -51,11 +55,4 @@ export default {
   height: 100%;
   overflow: auto;
 }
-
-// ::v-deep .steps-item {
-//   width: 150px;
-//   height: 34px;
-//   padding-top: 15px;
-//   position: relative;
-// }
 </style>

src/views/projectAdmin/zjsj/command/center.vue

@@ -11,7 +11,7 @@
             <span class="label">{{ item.label }}</span>
             <div class="bottom">
               <span class="value" :style="{ fontStyle: item.unit ? 'italic' : '' }">{{ item.value }}</span>
-              <span v-if="item.value" class="unit">{{ item.unit }}</span>
+              <span v-if="item.value" class="unit">&nbsp;{{ item.unit }}</span>
             </div>
           </div>
         </div>
@@ -104,7 +104,7 @@ export default {
             color: #002636;
           }
 
-          .value {
+          .bottom {
             color: #000;
           }
         }

src/views/projectAdmin/zjsj/command/leftFour.vue

@@ -374,17 +374,17 @@ export default {
 
   .first-box {
     bottom: 30%;
-    left: 6.5%;
+    left: 8%;
   }
 
   .second-box {
     bottom: 30%;
-    left: 42.5%;
+    left: 43.5%;
   }
 
   .third-box {
     bottom: 30%;
-    left: 80.5%;
+    left: 81.5%;
   }
 }
 </style>