step component

docs/examples/steps.vue

@@ -3,7 +3,7 @@
     <h1 class="page-title">Steps</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <zan-steps icon="topay">
+    <zan-steps icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货">
     </zan-steps>
   </div>
 </template>
@@ -11,3 +11,9 @@
 <script>
 
 </script>
+
+<style>
+.steps-success {
+  color: #06bf04;
+}
+</style>

packages/steps/src/steps.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="zan-steps">
-    <div class="zan-steps__desc" v-if="icon">
+    <div class="zan-steps__status" v-if="icon">
       <i class="zan-icon" :class="computedIconClass"></i>
+      <div class="zan-steps__message">
+        <div class="zan-steps__message-wrapper">
+          <h4 class="zan-steps__title" v-text="title"></h4>
+          <p class="zan-steps__desc" v-text="description"></p>
+        </div>
+      </div>
     </div>
     <div class="zan-steps__items">
       <slot></slot>
@@ -16,19 +22,22 @@ export default {
   props: {
     active: Number,
     icon: String,
-    // iconClass: String,
+    iconClass: {
+      type: String,
+      default: ''
+    },
     title: String,
     description: String
   },
 
   computed: {
-    // computedIconClass() {
-    //   let iconName = `zan-icon-${this.icon}`;
-    //   let result = (iconClass && iconClass.split(' ')) || [];
-    //   result.push(iconName);
+    computedIconClass() {
+      let iconName = `zan-icon-${this.icon}`;
+      let result = this.iconClass.split(' ');
+      result.push(iconName);
 
-    //   return result;
-    // }
+      return result;
+    }
   }
 };
 </script>

packages/zanui-css/src/cell.css

@@ -5,6 +5,7 @@
   @b cell-group {
     padding-left: 10px;
     position: relative;
+    background-color: #fff;
 
     &::after {
       @mixin border-retina (top, bottom);

packages/zanui-css/src/steps.css

@@ -3,5 +3,38 @@
 @component-namespace zan {
   @b steps {
     padding: 15px 0;
+
+    .zan-icon {
+      font-size: 40px;
+      line-height: 1;
+      float: left;
+    }
+
+    @e status {
+      padding: 0 10px;
+    }
+
+    @e message {
+      display: table;
+      height: 40px;
+      padding-right: 50px;
+      width: 100%;
+      box-sizing: border-box;
+
+      .zan-steps__message-wrapper {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    @e title {
+      font-size: 14px;
+      color: $c-black;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: $c-gray-dark;
+    }
   }
 }