From 10b92700323bccebb3e6902f2bb4c70e8166a2a4 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 02 十月 2023 12:59:56 +0800
Subject: [PATCH] 修改

---
 src/components/process/index.vue |   49 ++++++++++++++++---------------------------------
 1 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/src/components/process/index.vue b/src/components/process/index.vue
index 6702405..376b98c 100644
--- a/src/components/process/index.vue
+++ b/src/components/process/index.vue
@@ -1,36 +1,13 @@
 <template>
   <div class="my-process">
     <div class="my-pro-header">
-      <div class="pro-step" v-for="(item, index) in list" :key="item.name">
-        <div class="pro-step-top">
-          <div
-            :class="[
-              'circle',
-              active === index
-                ? 'in-process__circle'
-                : active > index
-                ? 'finish'
-                : 'wait',
-            ]"
-          ></div>
-          <div
-            :class="['line', active > index ? 'finish-line' : '']"
-            v-if="index < list.length - 1 ? true : false"
-          ></div>
-        </div>
-        <div
-          :class="[
-            'pro-step-name',
-            active === index
-              ? 'in-process'
-              : active > index
-              ? 'finish-name'
-              : 'wait',
-          ]"
-        >
-          {{ item.name }}
-        </div>
-      </div>
+      <el-steps :space="260" :active="active" finish-status="success">
+        <el-step
+          v-for="item in list"
+          :title="item.name"
+          :key="item.title"
+        ></el-step>
+      </el-steps>
     </div>
     <div class="my-pro-main">
       <div class="pro-step-ver" v-for="(item, index) in list" :key="item.title">
@@ -81,7 +58,9 @@
           </div>
           <div class="desc-content" v-if="active > index">
             <div class="desc-content-message">
-              {{ item.disposeRecords[0].result || "" }}
+              {{
+                (item.disposeRecords[0] && item.disposeRecords[0].result) || ""
+              }}
             </div>
             <div class="desc-content-endtime">
               {{
@@ -120,7 +99,7 @@
     } else if (mystate === 9) {
       this.active = 4;
     } else {
-      this.active = -1;
+      this.active = 0;
     }
     this.list = mylist;
   },
@@ -138,7 +117,8 @@
 .my-process {
   padding-top: 50px;
   .my-pro-header {
-    display: flex;
+    padding: 0 30px;
+    line-height: 1;
 
     .pro-step {
       flex: 1;
@@ -220,5 +200,8 @@
   .finish-name {
     color: #4b9bb7;
   }
+  .desc-content-message {
+    color: #666;
+  }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0