中建四局(进度管理)：完成进度条布局

src/views/projectAdmin/zjsj/progress/index.vue

@@ -6,14 +6,34 @@
         <TopRight />
       </div>
     </div>
-    <div class="bottom"></div>
+    <div class="bottom">
+      <div class="progress-item" :class="{ success: i < 6 }" v-for="(v, i) in progress" :key="i">
+        <div class="date">{{ v.date }}</div>
+        <div class="name">{{ v.name }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import TopRight from './topRight.vue'
 export default {
-  components: { TopRight }
+  components: { TopRight },
+  data() {
+    return {
+      progress: [
+        { name: '基础工程', date: '2022-02-02' },
+        { name: '主体结构施工', date: '2022-02-02' },
+        { name: '屋面工程', date: '2022-02-02' },
+        { name: '机械设备安拆工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' },
+        { name: '室内装饰装修工程', date: '2022-02-02' }
+      ]
+    }
+  }
 }
 </script>
 
@@ -39,7 +59,41 @@ export default {
   }
   .bottom {
     height: 26%;
-    border: 1px solid skyblue;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    .progress-item {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border: 1px solid #2de1fa;
+        border-radius: 50%;
+      }
+      &:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: calc(100% - 5px);
+        width: 100%;
+        height: 1px;
+        background-color: #ccc;
+      }
+      &.success::after {
+        background-color: #2de1fa;
+      }
+      .date {
+        margin: 4px 0;
+        font-size: 12px;
+        color: #ddd;
+      }
+    }
   }
 }
 </style>