From 57c3b9335c80079992ec605dd0739f7de4dfa86d Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 26 Aug 2022 15:47:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E7=AE=A1=E7=90=86)=EF=BC=9A=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/zjsj/progress/index.vue      | 60 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/zjsj/progress/index.vue b/src/views/projectAdmin/zjsj/progress/index.vue
index 1f8188f4..1ba20a3b 100644
--- a/src/views/projectAdmin/zjsj/progress/index.vue
+++ b/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>