From 98bd5fd443a0f6eead506800406d6311b0332efd Mon Sep 17 00:00:00 2001
From: "mo.duan" <mo.duan@tendcloud.com>
Date: Tue, 17 Sep 2019 10:43:33 +0800
Subject: [PATCH] optimize steps

to fixed steps line in other background-color problem
---
 examples/routers/steps.vue       |  7 ++++++-
 src/styles/components/steps.less | 36 +++++++++++++++++++++++++-------
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/examples/routers/steps.vue b/examples/routers/steps.vue
index 8a1fa0c7..c59802c1 100644
--- a/examples/routers/steps.vue
+++ b/examples/routers/steps.vue
@@ -1,8 +1,13 @@
+<style>
+    .ivu-steps{
+        background: greenyellow;
+    }
+</style>
 <template>
 <div>
     <Steps :current="index">
         <!--<Step title="开始"></Step>-->
-        <Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
+        <Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index"></Step>
         <!--<Step title="结束"></Step>-->
     </Steps>
     <Button @click="change">change</Button>
diff --git a/src/styles/components/steps.less b/src/styles/components/steps.less
index e59e5697..57e0f108 100644
--- a/src/styles/components/steps.less
+++ b/src/styles/components/steps.less
@@ -128,9 +128,6 @@
         display: inline-block;
         vertical-align: top;
     }
-    .@{steps-prefix-cls}-head {
-        background: #fff;
-    }
 
     .@{steps-prefix-cls}-head-inner {
         display: block;
@@ -172,8 +169,6 @@
         font-size: 14px;
         font-weight: bold;
         color: #666;
-        background: #fff;
-
         > a:first-child:last-child {
             color: #666;
         }
@@ -342,12 +337,39 @@
     &.@{steps-prefix-cls}-hidden {
         visibility: hidden;
     }
+    .@{steps-prefix-cls}-tail {
+        display: none;
+    }
     .@{steps-prefix-cls}-content {
         //max-width: 100px;
-        padding-left: 35px;
+        padding-left: 45px;
     }
     .@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
         padding-left: 10px;
-        margin-left: -10px;
+    }
+    .@{steps-prefix-cls}-item {
+        overflow: hidden;
+        &:last-child .@{steps-prefix-cls}-title:after{
+            display: none;
+        }
+    }
+    .@{steps-prefix-cls}-title {
+        position: relative;
+        &:after{
+            content: '';
+            position: absolute;
+            width: 9999px;
+            height: 1px;
+            left: 100%;
+            top: 50%;
+            background: @border-color-split;
+        }
+    }
+    .@{steps-prefix-cls}-status-finish {
+        .@{steps-prefix-cls}-title:after {
+            background: @primary-color;
+            transition: all @transition-time @ease-in-out;
+            opacity: 1;
+        }
     }
 }