diff --git a/app.json b/app.json
index 119ecf97..96f17368 100644
--- a/app.json
+++ b/app.json
@@ -15,6 +15,7 @@
"example/steps/index",
"example/namecard/index",
"example/toast/index",
+ "example/vsteps/index",
"example/icon/index",
"example/dialog/index"
],
diff --git a/dist/index.wxss b/dist/index.wxss
index 1efd4bda..c88e23bc 100644
--- a/dist/index.wxss
+++ b/dist/index.wxss
@@ -14,4 +14,5 @@
@import "steps/index.wxss";
@import "toast/index.wxss";
@import "toptips/index.wxss";
+@import "vsteps/index.wxss";
@import "icon/index.wxss";
diff --git a/dist/namecard/index.wxss b/dist/namecard/index.wxss
index e3a745ba..8cc07f56 100644
--- a/dist/namecard/index.wxss
+++ b/dist/namecard/index.wxss
@@ -35,3 +35,19 @@
width: auto;
position: relative;
}
+
+.zui-namecard__detail-row {
+ overflow: hidden;
+ line-height: 20px;
+ min-height: 20px;
+ margin-bottom: 3px;
+}
+
+.zui-namecard__right-col {
+ float: right;
+}
+
+.zui-namecard__left-col {
+ margin-right: 80px;
+}
+
diff --git a/dist/toast/index.wxss b/dist/toast/index.wxss
index e5fc81fd..ef1d5ce1 100644
--- a/dist/toast/index.wxss
+++ b/dist/toast/index.wxss
@@ -13,5 +13,5 @@
padding: 10px;
text-align: center;
border-radius: 4px;
- z-index: 10;
+ z-index: 100;
}
diff --git a/dist/toptips/index.wxss b/dist/toptips/index.wxss
index d5437271..a541db5b 100644
--- a/dist/toptips/index.wxss
+++ b/dist/toptips/index.wxss
@@ -3,13 +3,15 @@
position: fixed;
-webkit-transform: translateZ(0) translateY(-100%);
width: 100%;
+ /* 至少有一行的高度，保证第一次动画显示正常 */
+ min-height: 32px;
top: 0;
line-height: 2.3;
font-size: 14px;
text-align: center;
color: #FFF;
background-color: #E64340;
- z-index: 20;
+ z-index: 110;
/* 动画部分 */
transition: all 0.4s ease;
diff --git a/dist/vsteps/index.wxss b/dist/vsteps/index.wxss
new file mode 100644
index 00000000..04eb688c
--- /dev/null
+++ b/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;
+}
diff --git a/example/dashboard/index.js b/example/dashboard/index.js
index 306aeee4..2125f85d 100644
--- a/example/dashboard/index.js
+++ b/example/dashboard/index.js
@@ -42,6 +42,9 @@ Page({
}, {
name: 'Steps',
path: '/example/steps/index'
+ }, {
+ name: 'Vsteps',
+ path: '/example/vsteps/index'
}, {
name: 'Tab',
path: '/example/tab/index'
diff --git a/example/namecard/index.wxml b/example/namecard/index.wxml
index cf4bf5a4..c50b0a62 100644
--- a/example/namecard/index.wxml
+++ b/example/namecard/index.wxml
@@ -9,7 +9,23 @@
></image>
</view>
<view class="zui-namecard__detail">
- 描述内容~
+ <view class="zui-namecard__detail-row">
+ <view class="zui-namecard__right-col">¥ 999.99</view>
+ <view class="goods-card__left-col zui-ellipsis--l2">
+ 商品名称是什么
+ </view>
+ </view>
+
+ <view class="zui-namecard__detail-row zui-c-gray-darker">
+ <view class="zui-namecard__right-col">x2</view>
+ <view class="zui-namecard__left-col">
+ 商品SKU1
+ </view>
+ </view>
+
+ <view class="zui-namecard__detail-row zui-c-gray-darker">
+ <view class="goods-card__left-col zui-c-red">已发货</view>
+ </view>
</view>
</view>
</view>
diff --git a/example/vsteps/index.js b/example/vsteps/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/example/vsteps/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+ data: {
+ },
+
+ onLoad: function () {
+
+ },
+
+ onShow: function() {
+ },
+})
diff --git a/example/vsteps/index.wxml b/example/vsteps/index.wxml
new file mode 100644
index 00000000..c0b8a587
--- /dev/null
+++ b/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>