From e398689720998383c6106bcebeb09496a871ca96 Mon Sep 17 00:00:00 2001
From: 13218645326 <sjf13651675634@163.com>
Date: Wed, 6 Dec 2023 09:50:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E6=A8=AA=E5=90=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../orderCom/timeLineHorizontal.vue           | 164 +++++++++---------
 1 file changed, 86 insertions(+), 78 deletions(-)

diff --git a/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue b/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
index c58c1ef..262d013 100644
--- a/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
+++ b/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
@@ -1,107 +1,115 @@
 <template>
     <div class="processBox">
-      <div class="title">工程进度</div>
-      <el-divider />
-      <div class="timelineProcessBox">
-        <el-timeline class="timeline">
-          <el-timeline-item
-            class="lineitem"
-            :class="item.done ? 'active' : 'inactive'"
-            v-for="(item, index) in activities"
-            :key="index"
-            :timestamp="item.time"
-          >
-            <div>
-                {{ item.content }}
-            </div>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
+        <div class="title">工程进度</div>
+        <el-divider />
+        <div class="timelineProcessBox">
+            <el-timeline class="timeline"  >
+                <el-timeline-item class="lineitem" :class="item.done ? 'active' : 'inactive'"
+                    v-for="(item, index) in props.timeLineList" :key="index" :timestamp="item.content">
+                    <div>
+                        {{ item.title }}
+                    </div>
+                </el-timeline-item>
+            </el-timeline>
+        </div>
     </div>
-  </template>
-  <script lang="ts" setup>
-  const activities = [
-    {
-      content: '开工阶段',
-      time: '2018-04-12 20:46',
-      people: '五六七',
-      done: true,
+</template>
+<script lang="ts" setup>
+ 
+const props = defineProps({
+    themeColor:{
+        type:String,
+        default:'#2282fe'
     },
-    {
-      content: '实施阶段',
-      people: '吉吉国王',
-      done: true,
-      time: '2018-04-03 20:46',
-    },
-    {
-      content: '竣工阶段',
-      done: false,
-      people: '熊大',
-      time: '2018-04-03 20:46',
-    },
-    {
-      content: '结算阶段',
-      people: '',
-      done: false,
-      time: '',
-    },
-  ]
-  </script>
-  <style lang="scss" scoped>
+    timeLineList: {
+        type: Array,
+        default: () => {
+            return [
+                {
+                    title: '订单需求审核',
+                    content: '开工阶段',
+                    done: true,
+                },
+                {
+                    title: '合同上传',
+                    content: '请填写公司详细信息',
+                    done: true,
+                },
+                {
+                    title: '装备发货',
+                    content: '请填写公司财务信息',
+                    done: true,
+                },
+     
+            ]
+        }
+    }
+})
 
-  .processBox {
+</script>
+<style lang="scss" scoped>
+.processBox {
     background-color: #fff;
     height: 210px;
-   
+
     .title {
-      font-size: 16px;
-      font-weight: 600;
-      padding-left: 32px;
-      padding-top: 16px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-left: 32px;
+        padding-top: 16px;
     }
+
     .timelineProcessBox {
-      .timeline {
-        display: flex;
-        width: 95%;
-        margin: 40px auto;
-        .lineitem {
-          transform: translateX(50%);
-          width: 25%;
+        .timeline {
+            display: flex;
+            width: 95%;
+            margin: 40px auto;
+
+            .lineitem {
+                transform: translateX(50%);
+                width: 25%;
+            }
         }
-      }
     }
-  }
-   
-  :deep(.el-timeline-item__tail) {
+}
+
+:deep(.el-timeline-item__tail) {
     border-left: none;
     border-top: 2px solid #e4e7ed;
     width: 100%;
     position: absolute;
     top: 6px;
-  }
-  :deep(.el-timeline-item__wrapper) {
+}
+
+:deep(.el-timeline-item__wrapper) {
     padding-left: 0;
     position: absolute;
     top: 20px;
     transform: translateX(-50%);
     text-align: center;
-  }
-  :deep(.el-timeline-item__timestamp) {
+}
+
+:deep(.el-timeline-item__timestamp) {
     font-size: 14px;
-  }
-  .active {
-    border: none!important;
+    font-weight: normal;
+}
+
+.active {
+    border: none !important;
+
     :deep(.el-timeline-item__node) {
-      background-color: $main-color;
+        // background-color: $main-color;
     }
+
     :deep(.el-timeline-item__tail) {
-      border-color: $main-color;
+        // border-color: $main-color;
     }
-  }
-  // 有active样式的下一个li
-  .active + li {
+}
+
+// 有active样式的下一个li
+.active+li {
     :deep(.el-timeline-item__node) {
-      background-color: $main-color;
+        // background-color: $main-color;
     }
-  }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file