vsteps

app.json

@@ -14,7 +14,8 @@
     "example/form/index",
     "example/steps/index",
     "example/namecard/index",
-    "example/toast/index"
+    "example/toast/index",
+    "example/vsteps/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",

dist/index.wxss

@@ -14,3 +14,4 @@
 @import "steps/index.wxss";
 @import "toast/index.wxss";
 @import "toptips/index.wxss";
+@import "vsteps/index.wxss";

dist/vsteps/index.wxss

@@ -0,0 +1,78 @@
+
+.zui-vsteps {
+  position: relative;
+  padding: 15px;
+  color: #999;
+  font-size: 14px;
+}
+
+.zui-vsteps::after {
+  left: 42px;
+}
+
+.zui-vsteps--active {
+  color: #44BB00;
+}
+
+.zui-vsteps__line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 22px;
+  width: 1px;
+  background-color: #e5e5e5;
+}
+
+.zui-vsteps__content {
+  padding-left: 27px;
+}
+
+.zui-vsteps__icons {
+  position: absolute;
+  left: 22px;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  font-size: 0;
+  line-height: 0;
+  padding: 3px 0;
+  background-color: #fff;
+}
+
+.zui-vsteps__icon {
+
+}
+
+.zui-vsteps__icon--normal {
+  width: 5px;
+  height: 5px;
+  background-color: #cacaca;
+  border-radius: 10px;
+}
+
+.zui-vsteps__icon--active {
+  width: 13px;
+  height: 13px;
+}
+
+.zui-vsteps--first-child .zui-vsteps__title::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 22px;
+  width: 1px;
+  background-color: #fff;
+  z-index: 1;
+}
+
+.zui-vsteps--last-child .zui-vsteps__title::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  bottom: 0%;
+  left: 22px;
+  width: 1px;
+  background-color: #fff;
+  z-index: 1;
+}

example/dashboard/index.wxml

@@ -53,6 +53,10 @@
       <view class="zui-cell__bd">Steps</view>
       <view class="zui-cell__ft"></view>
     </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/example/vsteps/index">
+      <view class="zui-cell__bd">Vsteps</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
     <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/example/toast/index">
       <view class="zui-cell__bd">Toast</view>
       <view class="zui-cell__ft"></view>

example/vsteps/index.js

@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})

example/vsteps/index.wxml

@@ -0,0 +1,43 @@
+<view class="container">
+  <view class="zui-panel">
+    <view
+      class="zui-vsteps zui-vsteps--active zui-vsteps--first-child"
+    >
+      <view class="zui-vsteps__line"></view>
+      <view class="">
+        <view class="zui-vsteps__content zui-vsteps__title">
+          <view class="zui-vsteps__icons">
+            <icon type="success" size="13" class="zui-vsteps__icon zui-vsteps__icon--active" />
+          </view>
+          <text>卖家退款(2016-03-23  20:20:20)</text>
+        </view>
+      </view>
+    </view>
+    <view
+      class="zui-vsteps zui-vsteps--active"
+    >
+      <view class="zui-vsteps__line"></view>
+      <view class="">
+        <view class="zui-vsteps__content zui-vsteps__title">
+          <view class="zui-vsteps__icons">
+            <icon type="success" size="13" class="zui-vsteps__icon zui-vsteps__icon--active" />
+          </view>
+          <text>卖家退款(2016-03-23  20:20:20)</text>
+        </view>
+      </view>
+    </view>
+    <view
+      class="zui-vsteps zui-vsteps--last-child"
+    >
+      <view class="zui-vsteps__line"></view>
+      <view class="">
+        <view class="zui-vsteps__content zui-vsteps__title">
+          <view class="zui-vsteps__icons">
+            <view class="zui-vsteps__icon zui-vsteps__icon--normal"></view>
+          </view>
+          <text>卖家退款(2016-03-23  20:20:20)</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>