From 6224c000eb6cfc83e16790295db1e15c8c0d7427 Mon Sep 17 00:00:00 2001
From: Nino <ninofocus@gmail.com>
Date: Mon, 19 Dec 2016 16:30:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.js                     |   5 ++
 app.json                   |  19 +++++
 app.wxss                   |  18 +++++
 pages/badge/index.js       |  13 ++++
 pages/badge/index.wxml     |  23 +++++++
 pages/badge/index.wxss     |  14 ++++
 pages/btn/index.js         |  13 ++++
 pages/btn/index.wxml       |  42 ++++++++++++
 pages/btns/index.js        |  13 ++++
 pages/btns/index.wxml      |   7 ++
 pages/cell/index.js        |  13 ++++
 pages/cell/index.wxml      |  31 +++++++++
 pages/dashboard/index.js   |  13 ++++
 pages/dashboard/index.wxml |  34 +++++++++
 pages/label/index.js       |  13 ++++
 pages/label/index.wxml     |  22 ++++++
 pages/loadmore/index.js    |  13 ++++
 pages/loadmore/index.wxml  |   7 ++
 pages/panel/index.js       |  13 ++++
 pages/panel/index.wxml     |  15 ++++
 pages/tab/index.js         |  70 +++++++++++++++++++
 pages/tab/index.wxml       |  36 ++++++++++
 pages/tab/index.wxss       |   0
 zui/badge.wxss             |  24 +++++++
 zui/btn.wxss               | 137 +++++++++++++++++++++++++++++++++++++
 zui/btns.wxss              |   3 +
 zui/cell.wxss              |  48 +++++++++++++
 zui/color.wxss             |  27 ++++++++
 zui/dialog.wxss            |  41 +++++++++++
 zui/form.wxss              |  17 +++++
 zui/helper.wxss            |  66 ++++++++++++++++++
 zui/index.wxss             |  16 +++++
 zui/label.wxss             |  34 +++++++++
 zui/loadmore.wxml          |  24 +++++++
 zui/loadmore.wxss          |  70 +++++++++++++++++++
 zui/namecard.wxss          |  37 ++++++++++
 zui/panel.wxss             |   7 ++
 zui/quantity.wxss          |  37 ++++++++++
 zui/steps.wxss             | 117 +++++++++++++++++++++++++++++++
 zui/tab.wxss               |  45 ++++++++++++
 zui/toast.wxss             |  17 +++++
 41 files changed, 1214 insertions(+)
 create mode 100644 app.js
 create mode 100644 app.json
 create mode 100644 app.wxss
 create mode 100644 pages/badge/index.js
 create mode 100644 pages/badge/index.wxml
 create mode 100644 pages/badge/index.wxss
 create mode 100644 pages/btn/index.js
 create mode 100644 pages/btn/index.wxml
 create mode 100644 pages/btns/index.js
 create mode 100644 pages/btns/index.wxml
 create mode 100644 pages/cell/index.js
 create mode 100644 pages/cell/index.wxml
 create mode 100644 pages/dashboard/index.js
 create mode 100644 pages/dashboard/index.wxml
 create mode 100644 pages/label/index.js
 create mode 100644 pages/label/index.wxml
 create mode 100644 pages/loadmore/index.js
 create mode 100644 pages/loadmore/index.wxml
 create mode 100644 pages/panel/index.js
 create mode 100644 pages/panel/index.wxml
 create mode 100644 pages/tab/index.js
 create mode 100644 pages/tab/index.wxml
 create mode 100644 pages/tab/index.wxss
 create mode 100644 zui/badge.wxss
 create mode 100644 zui/btn.wxss
 create mode 100644 zui/btns.wxss
 create mode 100644 zui/cell.wxss
 create mode 100644 zui/color.wxss
 create mode 100644 zui/dialog.wxss
 create mode 100644 zui/form.wxss
 create mode 100644 zui/helper.wxss
 create mode 100644 zui/index.wxss
 create mode 100644 zui/label.wxss
 create mode 100644 zui/loadmore.wxml
 create mode 100644 zui/loadmore.wxss
 create mode 100644 zui/namecard.wxss
 create mode 100644 zui/panel.wxss
 create mode 100644 zui/quantity.wxss
 create mode 100644 zui/steps.wxss
 create mode 100644 zui/tab.wxss
 create mode 100644 zui/toast.wxss

diff --git a/app.js b/app.js
new file mode 100644
index 00000000..725edee2
--- /dev/null
+++ b/app.js
@@ -0,0 +1,5 @@
+
+App({
+  globalData:{
+  }
+})
diff --git a/app.json b/app.json
new file mode 100644
index 00000000..8ce335c1
--- /dev/null
+++ b/app.json
@@ -0,0 +1,19 @@
+{
+  "pages":[
+    "pages/dashboard/index",
+    "pages/btn/index",
+    "pages/badge/index",
+    "pages/cell/index",
+    "pages/label/index",
+    "pages/loadmore/index",
+    "pages/panel/index",
+    "pages/tab/index"
+  ],
+  "window":{
+    "navigationBarBackgroundColor": "#FAFAFA",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle":"black",
+    "backgroundTextStyle":"dark",
+    "backgroundColor": "#f9f9f9"
+  }
+}
diff --git a/app.wxss b/app.wxss
new file mode 100644
index 00000000..63c781e8
--- /dev/null
+++ b/app.wxss
@@ -0,0 +1,18 @@
+@import "zui/index.wxss";
+
+.container {
+  background: #F9F9F9;
+  overflow: hidden;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+.container::before {
+  position: fixed;
+  top: 0;
+  left: 0;
+  content: ' ';
+  width: 100%;
+  height: 1rpx;
+  background-color: #e2e2e2;
+  z-index: 5;
+}
diff --git a/pages/badge/index.js b/pages/badge/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/badge/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/badge/index.wxml b/pages/badge/index.wxml
new file mode 100644
index 00000000..81bc5d3f
--- /dev/null
+++ b/pages/badge/index.wxml
@@ -0,0 +1,23 @@
+<view class="container">
+  <view class="demo">
+    <view class="demo__item">
+      <view class="demo__icon zui-badge">
+      </view>
+    </view>
+    <view class="demo__item">
+      <view class="demo__icon zui-badge">
+        <view class="zui-badge__count">9</view>
+      </view>
+    </view>
+    <view class="demo__item">
+      <view class="demo__icon zui-badge">
+        <view class="zui-badge__count">19</view>
+      </view>
+    </view>
+    <view class="demo__item">
+      <view class="demo__icon zui-badge">
+        <view class="zui-badge__count">99+</view>
+      </view>
+    </view>
+  </view>
+</view>
diff --git a/pages/badge/index.wxss b/pages/badge/index.wxss
new file mode 100644
index 00000000..afbb2e63
--- /dev/null
+++ b/pages/badge/index.wxss
@@ -0,0 +1,14 @@
+.demo {
+  padding: 40px 0;
+  display: flex;
+}
+.demo__item {
+  flex: 1;
+}
+.demo__icon {
+  margin: 0 auto;
+  width: 48px;
+  height: 48px;
+  background: #ddd;
+  border-radius: 4px;
+}
diff --git a/pages/btn/index.js b/pages/btn/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/btn/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/btn/index.wxml b/pages/btn/index.wxml
new file mode 100644
index 00000000..ac3dd5d7
--- /dev/null
+++ b/pages/btn/index.wxml
@@ -0,0 +1,42 @@
+<view class="container">
+
+  <view class="zui-panel" style="padding: 15px;">
+    <button class="zui-btn">取消订单</button>
+    <button class="zui-btn zui-btn--primary">确认付款</button>
+    <button class="zui-btn zui-btn--danger">确认付款</button>
+    <button class="zui-btn zui-btn--warn zui-btn--last-child">确认付款</button>
+  </view>
+
+  <view class="zui-panel">
+    <button class="zui-btn zui-btn--big zui-btn--primary">确认付款</button>
+    <button class="zui-btn zui-btn--big zui-btn--warn">立即购买</button>
+    <button class="zui-btn zui-btn--big zui-btn--danger">立即购买</button>
+  </view>
+
+  <view class="zui-panel" style="padding: 15px;">
+    <button class="zui-btn zui-btn--small">取消订单</button>
+    <button class="zui-btn zui-btn--small zui-btn--primary">确认付款</button>
+  </view>
+
+  <view class="zui-panel" style="padding: 15px;">
+    <button class="zui-btn zui-btn--mini zui-btn--plain">取消订单</button>
+    <button class="zui-btn zui-btn--mini zui-btn--primary zui-btn--plain">确认付款</button>
+    <button class="zui-btn zui-btn--mini zui-btn--warn zui-btn--plain">确认付款</button>
+    <button class="zui-btn zui-btn--mini zui-btn--danger zui-btn--plain">确认付款</button>
+  </view>
+
+  <view class="zui-panel" style="padding: 15px;">
+    <button class="zui-btn zui-btn--loading">取消订单</button>
+    <button class="zui-btn zui-btn--loading zui-btn--primary">确认付款</button>
+    <button class="zui-btn zui-btn--loading zui-btn--danger">确认付款</button>
+    <button class="zui-btn zui-btn--loading zui-btn--warn zui-btn--last-child">确认付款</button>
+  </view>
+
+  <view class="zui-panel" style="padding: 15px;">
+    <button class="zui-btn zui-btn--disabled" disabled>取消订单</button>
+    <button class="zui-btn zui-btn--disabled zui-btn--primary" disabled>确认付款</button>
+    <button class="zui-btn zui-btn--disabled zui-btn--danger" disabled>确认付款</button>
+    <button class="zui-btn zui-btn--disabled zui-btn--warn zui-btn--last-child" disabled>确认付款</button>
+  </view>
+
+</view>
diff --git a/pages/btns/index.js b/pages/btns/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/btns/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/btns/index.wxml b/pages/btns/index.wxml
new file mode 100644
index 00000000..b33cc46b
--- /dev/null
+++ b/pages/btns/index.wxml
@@ -0,0 +1,7 @@
+<view class="container">
+  <view class="zui-btns">
+    <button class="zui-btn zui-btn--danger">1号按钮</button>
+    <button class="zui-btn zui-btn--primary">1号按钮</button>
+    <button class="zui-btn">2号按钮</button>
+  </view>
+</view>
diff --git a/pages/cell/index.js b/pages/cell/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/cell/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/cell/index.wxml b/pages/cell/index.wxml
new file mode 100644
index 00000000..bcff0650
--- /dev/null
+++ b/pages/cell/index.wxml
@@ -0,0 +1,31 @@
+<view class="container">
+
+  <view class="zui-panel">
+    <view class="zui-cell zui-cell--access">
+      <view class="zui-cell__bd">字段1</view>
+      <view class="zui-cell__ft"></view>
+    </view>
+    <view class="zui-cell zui-cell--access">
+      <view class="zui-cell__bd">字段2</view>
+      <view class="zui-cell__ft"></view>
+    </view>
+    <view class="zui-cell zui-cell--last-child zui-cell--access">
+      <view class="zui-cell__bd">最后一个字段</view>
+      <view class="zui-cell__ft"></view>
+    </view>
+  </view>
+
+  <view class="zui-panel">
+    <view class="zui-cell zui-cell--last-child">
+      <view class="zui-cell__bd">不带箭头</view>
+    </view>
+  </view>
+
+  <view class="zui-panel">
+    <navigator class="zui-cell zui-cell--last-child">
+      <view class="zui-cell__bd">点击时背景会变色</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+  </view>
+
+</view>
diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/dashboard/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/dashboard/index.wxml b/pages/dashboard/index.wxml
new file mode 100644
index 00000000..e66910df
--- /dev/null
+++ b/pages/dashboard/index.wxml
@@ -0,0 +1,34 @@
+<view class="container">
+
+  <view class="zui-panel">
+    <navigator class="zui-cell zui-cell--access" url="/pages/btn/index">
+      <view class="zui-cell__bd">Button</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/pages/loadmore/index">
+      <view class="zui-cell__bd">Loadmore</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/pages/panel/index">
+      <view class="zui-cell__bd">Panel</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/pages/cell/index">
+      <view class="zui-cell__bd">Cell</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/pages/badge/index">
+      <view class="zui-cell__bd">Badge</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/pages/tab/index">
+      <view class="zui-cell__bd">Tab</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/label/index">
+      <view class="zui-cell__bd">Label</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+  </view>
+
+</view>
diff --git a/pages/label/index.js b/pages/label/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/label/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/label/index.wxml b/pages/label/index.wxml
new file mode 100644
index 00000000..072ee8e2
--- /dev/null
+++ b/pages/label/index.wxml
@@ -0,0 +1,22 @@
+<view class="container">
+  <view class="zui-panel">
+    <view class="zui-cell zui-cell--last-child">
+      <view class="zui-label">蓝色</view>
+      <view class="zui-label zui-label--primary">红色</view>
+      <view class="zui-label zui-label--disabled">黑色</view>
+    </view>
+  </view>
+  <view class="zui-panel">
+    <view class="zui-cell zui-cell--last-child">
+      <view class="zui-label zui-label--primary zui-label--small">会员折扣</view>
+      <view class="zui-label zui-label--primary zui-label--small">返现</view>
+    </view>
+  </view>
+
+    <view class="zui-panel">
+    <view class="zui-cell zui-cell--last-child">
+      <view class="zui-label zui-label--primary zui-label--small zui-label--plain">会员折扣</view>
+      <view class="zui-label zui-label--primary zui-label--small zui-label--plain">返现</view>
+    </view>
+  </view>
+</view>
diff --git a/pages/loadmore/index.js b/pages/loadmore/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/loadmore/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/loadmore/index.wxml b/pages/loadmore/index.wxml
new file mode 100644
index 00000000..b6836923
--- /dev/null
+++ b/pages/loadmore/index.wxml
@@ -0,0 +1,7 @@
+<import src="/zui/loadmore.wxml" />
+
+<view class="container">
+  <template is="loadmore" data="{{loading: true}}" />
+  <template is="loadmore" data="{{nomore: true}}" />
+  <template is="loadmore" data="{{nodata: true}}" />
+</view>
diff --git a/pages/panel/index.js b/pages/panel/index.js
new file mode 100644
index 00000000..99e7458d
--- /dev/null
+++ b/pages/panel/index.js
@@ -0,0 +1,13 @@
+var app = getApp()
+
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/pages/panel/index.wxml b/pages/panel/index.wxml
new file mode 100644
index 00000000..9a14a05a
--- /dev/null
+++ b/pages/panel/index.wxml
@@ -0,0 +1,15 @@
+<view class="container">
+
+  <view class="zui-panel">
+    <view style="padding: 15px;">Panel</view>
+  </view>
+
+  <view class="zui-panel">
+    <view style="padding: 15px;">Panel</view>
+  </view>
+
+  <view class="zui-panel">
+    <view style="padding: 15px;">Panel</view>
+  </view>
+
+</view>
diff --git a/pages/tab/index.js b/pages/tab/index.js
new file mode 100644
index 00000000..8d700913
--- /dev/null
+++ b/pages/tab/index.js
@@ -0,0 +1,70 @@
+Page({
+  data: {
+    tab1: {
+      list: [{
+        id: 'all',
+        title: '全部'
+      }, {
+        id: 'topay',
+        title: '待付款'
+      }, {
+        id: 'tosend',
+        title: '待发货'
+      }, {
+        id: 'send',
+        title: '待收货'
+      }, {
+        id: 'sign',
+        title: '已完成'
+      }],
+      selectedId: 'all',
+      scroll: false
+    },
+    tab2: {
+      list: [{
+        id: '1',
+        title: '最新商品1'
+      }, {
+        id: '2',
+        title: '最新商品2'
+      }, {
+        id: '3',
+        title: '最新商品3'
+      }, {
+        id: '4',
+        title: '最新商品4'
+      }, {
+        id: '5',
+        title: '最新商品5'
+      }, {
+        id: '6',
+        title: '最新商品6'
+      }],
+      selectedId: '1',
+      scroll: true
+    }
+  },
+
+  _handleComponentTabChange(e) {
+    var dataset = e.currentTarget.dataset;
+    var componentId = dataset.componentId;
+    var selectedId = dataset.itemId;
+
+    if (this.handleComponentTabChange) {
+      this.handleComponentTabChange({
+        componentId,
+        selectedId
+      });
+    }
+  },
+
+  handleComponentTabChange(e) {
+    console.log('[handleComponentTabChange]', e);
+    var componentId = e.componentId;
+    var selectedId = e.selectedId;
+
+    this.setData({
+      [`${componentId}.selectedId`]: selectedId
+    });
+  }
+});
diff --git a/pages/tab/index.wxml b/pages/tab/index.wxml
new file mode 100644
index 00000000..2ac205c5
--- /dev/null
+++ b/pages/tab/index.wxml
@@ -0,0 +1,36 @@
+<template name="component-tab">
+  <view class="zui-tab">
+      <block wx:if="{{tab.scroll}}">
+        <scroll-view class="zui-tab__bd zui-tab__bd--scroll {{fixed ? 'zui-tab__bd--fixed' : ''}}" scroll-x="true">
+          <template is="component-tab-list" data="{{ tab, componentId }}"></template>
+        </scroll-view>
+      </block>
+      <block wx:else>
+        <view class="zui-tab__bd">
+          <template is="component-tab-list" data="{{ tab, componentId }}"></template>
+        </view>
+      </block>
+  </view>
+</template>
+
+<template name="component-tab-list">
+  <view
+    wx:for="{{tab.list}}"
+    wx:key="id"
+    class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}"
+    data-component-id="{{componentId}}"
+    data-item-id="{{item.id}}"
+    bindtap="_handleComponentTabChange"
+  >
+    <view class="zui-tab__title">{{item.title}}</view>
+  </view>
+</template>
+
+<view class="container">
+  <view style="margin: 20px 0">
+    <template is="component-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
+  </view>
+  <view style="margin: 20px 0">
+    <template is="component-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
+  </view>
+</view>
diff --git a/pages/tab/index.wxss b/pages/tab/index.wxss
new file mode 100644
index 00000000..e69de29b
diff --git a/zui/badge.wxss b/zui/badge.wxss
new file mode 100644
index 00000000..b3cedd2c
--- /dev/null
+++ b/zui/badge.wxss
@@ -0,0 +1,24 @@
+.zui-badge {
+  position: relative;
+}
+.zui-badge__count {
+  position: absolute;
+  top: -8px;
+  right: 0px;
+  height: 16px;
+  min-width: 16px;
+  line-height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-family: tahoma;
+  border-radius: 10px;
+  background: #FF4444;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  transform: translateX(50%);
+  transform-origin: -10% center;
+  z-index: 10;
+  box-shadow: 0 0 0 1px #fff;
+  box-sizing: border-box;
+}
diff --git a/zui/btn.wxss b/zui/btn.wxss
new file mode 100644
index 00000000..782ff476
--- /dev/null
+++ b/zui/btn.wxss
@@ -0,0 +1,137 @@
+.zui-btn {
+  position: relative;
+  color: #333;
+  background-color: #fff;
+  margin-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-radius: 2px;
+  border: 1rpx solid #e5e5e5;
+  font-size: 16px;
+  line-height: 45px;
+  height: 45px;
+  box-sizing: border-box;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+}
+.zui-btn::after {
+  display: none;
+}
+
+/* type */
+.zui-btn--primary {
+  color: #fff;
+  background-color: #4b0;
+  border-color: #0a0;
+}
+
+.zui-btn--warn {
+  color: #fff;
+  background-color: #f85;
+  border-color: #f85;
+}
+
+.zui-btn--danger {
+  color: #fff;
+  background-color: #f44;
+  border-color: #e33;
+}
+
+/* size */
+.zui-btn--small {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  margin-right: 5px;
+  margin-bottom: 0;
+}
+.zui-btn--mini {
+  display: inline-block;
+  line-height: 21px;
+  height: 22px;
+  font-size: 10px;
+  margin-right: 5px;
+  margin-bottom: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.zui-btn--big {
+  border-radius: 0;
+  margin-bottom: 0;
+  border: none;
+  line-height: 50px;
+  height: 50px;
+}
+
+/* plain */
+.zui-btn--plain.zui-btn {
+  background-color: transparent;
+}
+.zui-btn--plain.zui-btn--primary {
+  color: #06BF04;
+}
+.zui-btn--plain.zui-btn--warn {
+  color: #FF6600;
+}
+.zui-btn--plain.zui-btn--danger {
+  color: #FF4444;
+}
+
+/* 重写button组件的button-hover样式 */
+.button-hover {
+  opacity: 0.9;
+}
+
+/* loading */
+.zui-btn--loading {
+  color: transparent;
+  opacity: 1;
+}
+.zui-btn--loading::before {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  content: ' ';
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  margin-top: -8px;
+  border: 3px solid #e5e5e5;
+  border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
+  border-radius: 8px;
+  box-sizing: border-box;
+  animation: btn-spin 0.6s linear;
+  animation-iteration-count: infinite;
+}
+.zui-btn--primary.zui-btn--loading::before,
+.zui-btn--warn.zui-btn--loading::before,
+.zui-btn--danger.zui-btn--loading::before {
+  border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
+}
+
+@keyframes btn-spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* disabled */
+.zui-btn.zui-btn--disabled {
+  color: #999;
+  background: #f8f8f8;
+  border-color: #e5e5e5;
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* ::last-child */
+.zui-btn--last-child {
+  margin-bottom: 0;
+  margin-right: 0;
+}
+
diff --git a/zui/btns.wxss b/zui/btns.wxss
new file mode 100644
index 00000000..495f1c34
--- /dev/null
+++ b/zui/btns.wxss
@@ -0,0 +1,3 @@
+.zui-btns {
+  margin: 15px;
+}
diff --git a/zui/cell.wxss b/zui/cell.wxss
new file mode 100644
index 00000000..2611fb7a
--- /dev/null
+++ b/zui/cell.wxss
@@ -0,0 +1,48 @@
+.zui-cell {
+  position: relative;
+  padding: 12px 15px;
+  display: flex;
+  align-items: center;
+  line-height: 1.4;
+  font-size: 14px;
+}
+
+.zui-cell::after {
+  position: absolute;
+  left: 15px;
+  right: 0;
+  bottom: 0;
+  border-top: 1rpx solid #e5e5e5;
+  background: #e5e5e5;
+  content: ' ';
+}
+.zui-cell__bd {
+  flex: 1;
+}
+.zui-cell__ft {
+  position: relative;
+  text-align: right;
+  color: #999;
+}
+
+.zui-cell--last-child::after {
+  display: none;
+}
+
+.zui-cell--access .zui-cell__ft {
+  padding-right: 13px;
+}
+
+.zui-cell--access .zui-cell__ft::after {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  content: " ";
+  display: inline-block;
+  height: 6px;
+  width: 6px;
+  border-width: 2px 2px 0 0;
+  border-color: #c8c8c8;
+  border-style: solid;
+  transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+}
diff --git a/zui/color.wxss b/zui/color.wxss
new file mode 100644
index 00000000..5b5b8df5
--- /dev/null
+++ b/zui/color.wxss
@@ -0,0 +1,27 @@
+.zui-c-red {
+  color: #f44 !important;
+}
+
+.zui-c-gray {
+  color: #c9c9c9 !important;
+}
+
+.zui-c-gray-dark {
+  color: #999 !important;
+}
+
+.zui-c-gray-darker {
+  color: #666 !important;
+}
+
+.zui-c-black {
+  color: #333 !important;
+}
+
+.zui-c-blue {
+  color: #3283fa !important;
+}
+
+.zui-c-green {
+  color: #44BB00 !important;
+}
diff --git a/zui/dialog.wxss b/zui/dialog.wxss
new file mode 100644
index 00000000..79eec609
--- /dev/null
+++ b/zui/dialog.wxss
@@ -0,0 +1,41 @@
+.zui-dialog,
+.zui-dialog__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+}
+
+.zui-dialog__mask {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.zui-dialog__container {
+  position: absolute;
+  bottom: 0;
+  width: 750rpx;
+  background: white;
+  transform: translateY(0);
+  opacity: 0;
+  transition: all 0.4s ease;
+  animation: slideUp 0.4s ease ;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+  z-index: 11;
+}
diff --git a/zui/form.wxss b/zui/form.wxss
new file mode 100644
index 00000000..e29ddc75
--- /dev/null
+++ b/zui/form.wxss
@@ -0,0 +1,17 @@
+.zui-form {
+  background-color: #fff;
+  border-bottom: 1rpx solid #e5e5e5;
+}
+
+.zui-form__item {
+  line-height: 26px;
+}
+
+.zui-form__title {
+  float: left;
+  width: 80px;
+  font-size: 14px;
+}
+
+.zui-form__input {
+}
diff --git a/zui/helper.wxss b/zui/helper.wxss
new file mode 100644
index 00000000..cd9ebf50
--- /dev/null
+++ b/zui/helper.wxss
@@ -0,0 +1,66 @@
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+.zui-center {
+  text-align: center;
+}
+
+.zui-right {
+  text-align: right;
+}
+
+.zui-text-deleted {
+  text-decoration: line-through;
+}
+.zui-font-12 {
+  font-size: 12px;
+}
+.zui-font-14 {
+  font-size: 14px;
+}
+.zui-font-16 {
+  font-size: 16px;
+}
+.zui-font-18 {
+  font-size: 18px;
+}
+.zui-font-30 {
+  font-size: 30px;
+}
+.zui-font-bold {
+  font-weight: bold;
+}
+
+.zui-arrow {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  display: inline-block;
+  height: 6px;
+  width: 6px;
+  border-width: 2px 2px 0 0;
+  border-color: #c8c8c8;
+  border-style: solid;
+  transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+}
+
+.zui-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.zui-ellipsis--l2 {
+  max-height: 40px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
diff --git a/zui/index.wxss b/zui/index.wxss
new file mode 100644
index 00000000..c3026ccd
--- /dev/null
+++ b/zui/index.wxss
@@ -0,0 +1,16 @@
+@import "loadmore.wxss";
+@import "color.wxss";
+@import "helper.wxss";
+@import "panel.wxss";
+@import "btn.wxss";
+@import "btns.wxss";
+@import "cell.wxss";
+@import "namecard.wxss";
+@import "badge.wxss";
+@import "dialog.wxss";
+@import "form.wxss";
+@import "tab.wxss";
+@import "label.wxss";
+@import "quantity.wxss";
+@import "steps.wxss";
+@import "toast.wxss";
diff --git a/zui/label.wxss b/zui/label.wxss
new file mode 100644
index 00000000..1778d7b8
--- /dev/null
+++ b/zui/label.wxss
@@ -0,0 +1,34 @@
+.zui-label {
+  display: inline-block;
+  font-size: 12px;
+  height: 28px;
+  line-height: 28px;
+  color: #333;
+  border: 1rpx solid #999;
+  padding: 0px 10px;
+  border-radius: 2px;
+  margin-right: 10px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+}
+.zui-label--primary {
+  color: #fff;
+  background: #f44;
+  border: 1rpx solid #f44;
+}
+.zui-label--disabled {
+  color: #cacaca;
+  background: #eee;
+  border: 1rpx solid #e5e5e5;
+}
+.zui-label--small {
+  font-size: 11px;
+  height: 16px;
+  line-height: 16px;
+  padding: 0px 3px;
+}
+.zui-label--plain.zui-label--primary {
+  color: #f44;
+  background: #fff;
+}
diff --git a/zui/loadmore.wxml b/zui/loadmore.wxml
new file mode 100644
index 00000000..ea9fe2f1
--- /dev/null
+++ b/zui/loadmore.wxml
@@ -0,0 +1,24 @@
+<template name="loadmore">
+
+  <block wx:if="{{nomore}}">
+    <view class="zui-loadmore zui-loadmore--nomore">
+      <view class="zui-loadmore__tips">
+        <view class="zui-loadmore__dot"></view>
+      </view>
+    </view>
+  </block>
+
+  <block wx:elif="{{nodata}}">
+    <view class="zui-loadmore zui-loadmore--nodata">
+      <view class="zui-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
+    </view>
+  </block>
+
+  <block wx:elif="{{loading}}">
+    <view class="zui-loadmore">
+      <view class="zui-loading"></view>
+      <view class="zui-loadmore__tips">加载中...</view>
+    </view>
+  </block>
+
+</template>
diff --git a/zui/loadmore.wxss b/zui/loadmore.wxss
new file mode 100644
index 00000000..0ed5dedc
--- /dev/null
+++ b/zui/loadmore.wxss
@@ -0,0 +1,70 @@
+.zui-loadmore {
+  position: relative;
+  width: 65%;
+  margin: 21px auto;
+  line-height: 20px;
+  font-size: 14px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.zui-loading {
+  width:20px;
+  height:20px;
+  display: inline-block;
+  vertical-align: middle;
+  animation: weuiLoading 1s steps(12, end) infinite;
+  background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+}
+
+.zui-loadmore .zui-loading {
+  margin-right: 4px;
+}
+
+.zui-loadmore__tips {
+  display: inline-block;
+  vertical-align: middle;
+  height: 20px;
+  line-height: 20px;
+}
+
+.zui-loadmore--nodata,
+.zui-loadmore--nomore {
+  border-top: 1rpx solid #e5e5e5;
+  color: #999;
+}
+
+.zui-loadmore--nodata {
+  margin-top: 120px;
+}
+
+.zui-loadmore--nodata .zui-loadmore__tips {
+  position: relative;
+  top: -11px;
+  background: #f9f9f9;
+  padding: 0 6px;
+}
+
+.zui-loadmore--nomore .zui-loadmore__tips {
+  position: relative;
+  top: -11px;
+  background: #f9f9f9;
+  padding: 0 6px;
+}
+
+.zui-loadmore__dot {
+  position: absolute;
+  left: 50%;
+  top: 11px;
+  margin-left: -2px;
+  margin-top: -2px;
+  content: " ";
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #E5E5E5;
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/zui/namecard.wxss b/zui/namecard.wxss
new file mode 100644
index 00000000..e3a745ba
--- /dev/null
+++ b/zui/namecard.wxss
@@ -0,0 +1,37 @@
+.zui-namecard {
+  margin-left: 0px;
+  width: auto;
+  padding: 5px 15px;
+  overflow: hidden;
+  position: relative;
+}
+
+.zui-namecard__thumb {
+  width: 90px;
+  height: 90px;
+  float: left;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  background-size: cover;
+}
+
+.zui-namecard__img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.zui-namecard__detail {
+  margin-left: 100px;
+  width: auto;
+  position: relative;
+}
diff --git a/zui/panel.wxss b/zui/panel.wxss
new file mode 100644
index 00000000..ef043194
--- /dev/null
+++ b/zui/panel.wxss
@@ -0,0 +1,7 @@
+.zui-panel {
+  background: #fff;
+  border-top: 1rpx solid #e5e5e5;
+  border-bottom: 1rpx solid #e5e5e5;
+  margin-top: 10px;
+  overflow: hidden;
+}
diff --git a/zui/quantity.wxss b/zui/quantity.wxss
new file mode 100644
index 00000000..9b81aeed
--- /dev/null
+++ b/zui/quantity.wxss
@@ -0,0 +1,37 @@
+.zui-quantity {
+  color: #666;
+}
+.zui-quantity view {
+  display: inline-block;
+  line-height: 20px;
+  padding: 5px 0;
+  text-align: center;
+  min-width: 40px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  font-size: 12px;
+  border: 1rpx solid #999;
+}
+.zui-quantity .zui-quantity__minus {
+  border-right: none;
+  border-radius: 2px 0 0 2px;
+}
+.zui-quantity .zui-quantity__text {
+  border: 1rpx solid #999;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  height: 30px;
+  width: 40px;
+  font-size: 12px;
+  line-height: 30px;
+}
+.zui-quantity .zui-quantity__plus {
+  border-left: none;
+  border-radius: 0 2px 2px 0;
+}
+.zui-quantity .zui-quantity--disabled {
+  background: #f8f8f8;
+  color: #bbb;
+  border-color: #e8e8e8;
+}
diff --git a/zui/steps.wxss b/zui/steps.wxss
new file mode 100644
index 00000000..102e1dd4
--- /dev/null
+++ b/zui/steps.wxss
@@ -0,0 +1,117 @@
+.zui-steps {
+  position: relative;
+}
+
+.zui-steps-4 .zui-steps__step {
+  width: 33%;
+}
+
+.zui-steps-3 .zui-steps__step {
+  width: 50%;
+}
+
+.zui-steps__step {
+  position: relative;
+  float: left;
+  padding-bottom: 20px;
+  color: #b1b1b1;
+}
+
+.zui-steps__title {
+  display: inline-block;
+  transform: translateX(-50%);
+  margin-left: 2px;
+  font-size: 10px;
+}
+
+.zui-steps__icon {
+  position: absolute;
+  top: 28px;
+  left: -8px;
+  padding: 0 8px;
+  background-color: #fff;
+  z-index: 10;
+}
+
+.zui-steps__circle {
+  display: block;
+  position: relative;
+  width: 5px;
+  height: 5px;
+  background-color: #e5e5e5;
+  border-radius: 50%;
+}
+
+.zui-steps__line {
+  position: absolute;
+  left: 0px;
+  top: 30px;
+  width: 100%;
+  height: 1px;
+  background-color: #e5e5e5;
+}
+
+
+/* 已完成的steps */
+.zui-steps__step--done {
+  color: #333;
+}
+
+.zui-steps__step--done .zui-steps__line {
+  background-color: #06bf04;
+}
+
+.zui-steps__step--done .zui-steps__circle {
+  width: 5px;
+  height: 5px;
+  background: transparent url("https://b.yzcdn.cn/v2/image/wap/trade/steps/icon_green@2x.png") center no-repeat;
+  background-size: 5px 5px;
+  border-radius: 0;
+}
+
+/* 正在进行中的steps */
+.zui-steps__step--cur .zui-steps__icon {
+  top: 24px;
+}
+
+.zui-steps__step--cur .zui-steps__circle {
+  width: 13px;
+  height: 13px;
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
+  background-size: 13px 13px;
+}
+
+.zui-steps__step--cur .zui-steps__title {
+  margin-left: 6px;
+}
+
+.zui-steps__step--cur .zui-steps__line {
+  background-color: #e5e5e5;
+}
+
+/* 各种不同位置的 */
+.zui-steps__step--first-child .zui-steps__title {
+  margin-left: 0;
+  transform: none;
+}
+
+.zui-steps__step--last-child {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  text-align: right;
+}
+
+.zui-steps__step--last-child .zui-steps__title {
+  transform: none;
+}
+
+.zui-steps__step--last-child .zui-steps__icon {
+  left: auto;
+  right: -6px;
+}
+
+.zui-steps__step--last-child .zui-steps__line {
+  display: none;
+}
diff --git a/zui/tab.wxss b/zui/tab.wxss
new file mode 100644
index 00000000..d8fa0b03
--- /dev/null
+++ b/zui/tab.wxss
@@ -0,0 +1,45 @@
+.zui-tab {
+  height: 45px;
+}
+.zui-tab__bd {
+  width: 750rpx;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1rpx solid #e5e5e5;
+  background: #fff;
+}
+.zui-tab__bd--fixed {
+  position: fixed;
+  top: 0;
+  z-index: 2;
+}
+.zui-tab__item {
+  flex: 1;
+  display: inline-block;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.zui-tab__title {
+  font-size: 14px;
+  display: inline-block;
+  color: #666;
+  height: 44px;
+  line-height: 44px;
+  box-sizing: border-box;
+  margin: 0 10px;
+  word-break: keep-all;
+}
+
+.zui-tab__item--selected .zui-tab__title {
+  color: #f44;
+  border-bottom: 2px solid #f44;
+}
+
+.zui-tab__bd--scroll {
+  display: block;
+  white-space: nowrap;
+}
+.zui-tab__bd--scroll .zui-tab__text {
+  margin: 0 20px;
+}
diff --git a/zui/toast.wxss b/zui/toast.wxss
new file mode 100644
index 00000000..2f2d564c
--- /dev/null
+++ b/zui/toast.wxss
@@ -0,0 +1,17 @@
+.zui-toast {
+  position: fixed;
+  top: 35%;
+  left: 20%;
+  transform: translateY(-100%);
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 14px;
+  width: 60%;
+  line-height: 1.5em;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 10px;
+  text-align: center;
+  border-radius: 4px;
+  z-index: 10;
+}