订单物流信息

@@ -5,13 +5,7 @@
       v-for="(deliveryDetail, i) in deliveryList"
       :key="i"
     >
-      <i
-        :class="
-          i === 0
-            ? 'time-line-label iconfont iconxuanzhongduigou active'
-            : 'time-line-label'
-        "
-      ></i>
+      <i :class="i === 0 ? iconClass : 'time-line-label'"></i>
       <div>
         <p class="content">{{ deliveryDetail.acceptRemark }}</p>
         <p class="time">{{ deliveryDetail.createTimeStr }}</p>
@@ -26,6 +20,17 @@ export default {
     deliveryList: {
       type: Array,
       default: []
+    },
+    isGoingOn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    iconClass: function() {
+      return this.isGoingOn
+        ? "iconfont iconxuanzhongduigou custom-icon active"
+        : "iconfont iconxuanzhongduigou custom-icon";
     }
   }
 };
@@ -52,6 +57,20 @@ export default {
       margin-top: -8px;
     }
 
+    .custom-icon {
+      width: 40px;
+      height: 40px;
+      font-size: 40px;
+      line-height: 1;
+      left: -21px;
+      top: -10px;
+      position: absolute;
+
+      &.active {
+        color: #000;
+      }
+    }
+
     .time-line-label {
       width: 20px;
       height: 20px;
@@ -60,17 +79,6 @@ export default {
       display: block;
       position: absolute;
       left: -10px;
-
-      &.active {
-        width: 40px;
-        height: 40px;
-        font-size: 40px;
-        line-height: 1;
-        left: -21px;
-        background: #fff;
-        top: -10px;
-        color: #000;
-      }
     }
   }
 }

@@ -34,7 +34,10 @@
           :key="i"
         >
           <span class="title">{{ detailInfo.title }}</span>
-          <time-line :deliveryList="detailInfo.detailList" />
+          <time-line
+            :isGoingOn="i === 0"
+            :deliveryList="detailInfo.detailList"
+          />
         </div>
       </div>
     </div>