样式修改

src/views/modules/result/record/recorddetail.vue

@@ -5,13 +5,16 @@
       <div class="title">
 
         <div class="titleTop">
-          <el-steps :active="active" finish-status="success">
+          <el-steps :active="active">
-            <el-step title="03-23 11:21"></el-step>
+            <el-step
-            <el-step title="03-23 11:21"></el-step>
+              v-for="(item, i) in stepList"
-            <el-step title="03-23 11:21"></el-step>
+              :key="i"
-            <el-step title="03-23 11:21"></el-step>
+              :class="{ refuse: item.status === 3 }"
-            <el-step title="03-23 11:21"></el-step>
+              :title="item.statusStr"
-            <el-step title="03-23 11:21"></el-step>
+            >
+              <div slot="description">{{ item.time }}</div>
+              <div slot="icon">{{ item.name }}</div>
+            </el-step>
           </el-steps>
         </div>
         <div class="titleCenter">
@@ -131,6 +134,7 @@ export default {
     console.log(window.innerHeight)
     this.clientHeight = window.innerHeight - 273
     console.log(this.clientHeight)
+    this.stepList.forEach(item => item.name = item.name.slice(-2))
   },
   filters: {
     getcheckWeightStr (val) {
@@ -175,7 +179,14 @@ export default {
       auth: [],
       recordType: 0,
       fileCount: 0,
-      clientHeight: 0
+      clientHeight: 0,
+      stepList: [
+        { name: '转成', time: '03-23 11:21', status: 1, statusStr: '通过' },
+        { name: '转成是', time: '03-23 11:21', status: 2, statusStr: '未提交' },
+        { name: '转成去', time: '03-23 11:21', status: 3, statusStr: '拒绝' },
+        { name: '转成饿', time: '03-23 11:21', status: 1, statusStr: '通过' },
+        { name: '转成个是', time: '03-23 11:21', status: 2, statusStr: '未提交' }
+      ]
     }
   },
   components: {
@@ -358,6 +369,53 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 
 .app-container {
+  .el-steps{
+    margin: 20px;
+    
+  }
+  /deep/ .el-step__head{
+    .el-step__icon.is-text{
+      border: 2px solid;
+      width: 40px;
+      height: 40px;
+      color: #999;
+      border-color: #ccc;
+    }
+    .el-step__line{
+      top: 20px;
+      left: 46px;
+      width: calc(100% - 53px);
+      background: #ccc;
+    }
+    &.is-finish{
+      .el-step__icon.is-text{
+        color: #fff;
+        border-color: #3E8EF7;
+        background: #3E8EF7;
+      }
+    }
+  }
+  /deep/ .el-step__main{
+    .el-step__description{
+      text-indent: -10px;
+      color: #999;
+    }
+    .el-step__title{
+      width: 50px;
+      text-indent: -10px;
+      text-align: center;
+      font-weight: bold;
+      &.is-finish{
+        color: #333;
+      }
+      &.is-process{
+        color: #888;
+      }
+      &.is-wait{
+        color: #ccc;
+      }
+    }
+  }
   font-size: 14px;
 
   .tip {
@@ -428,7 +486,7 @@ export default {
 
         span {
           display: inline-block;
-          margin: 5px 15px;
+          margin: 0 10px;
         }
       }
 
@@ -437,7 +495,7 @@ export default {
         font-weight:bold;
         font-size:14px;
         color:#7266ba;
-        height: 40px;
+        height: 30px;
 
         .bottom{
           float: right;
@@ -445,6 +503,9 @@ export default {
           width: 120px;
           height: 30px;
           text-align: left;
+          p{
+            margin: 5px 0;
+          }
           .des{
             display: -webkit-box;
             -webkit-box-orient: vertical;