From 2808f7632fd8a11fa0298d7f47d9219d0e56494f Mon Sep 17 00:00:00 2001
From: Nino <ninofocus@gmail.com>
Date: Tue, 7 Feb 2017 20:33:18 +0800
Subject: [PATCH] =?UTF-8?q?zui=20=E6=94=B9=E5=90=8D=E4=B8=BA=20zanui-weapp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                    |  18 +++---
 app.json                     |   2 +-
 bower.json                   |   8 +--
 dist/badge/index.wxss        |   4 +-
 dist/btn/index.wxss          |  40 +++++++-------
 dist/card/index.wxss         |  14 ++---
 dist/cell/index.wxss         |  14 ++---
 dist/color/index.wxss        |  14 ++---
 dist/dialog/index.wxss       |   8 +--
 dist/form/index.wxss         |  16 +++---
 dist/helper/index.wxss       |  44 +++++++--------
 dist/icon/index.wxss         |  38 ++++++-------
 dist/label/index.wxss        |  10 ++--
 dist/loadmore/index.wxml     |  18 +++---
 dist/loadmore/index.wxss     |  20 +++----
 dist/panel/index.wxss        |   6 +-
 dist/quantity/index.js       |  14 ++---
 dist/quantity/index.wxml     |  16 +++---
 dist/quantity/index.wxss     |  16 +++---
 dist/steps/index.wxml        |  16 +++---
 dist/steps/index.wxss        |   2 +-
 dist/steps/wxss/step.wxss    |  48 ++++++++--------
 dist/steps/wxss/vstep.wxss   |  24 ++++----
 dist/tab/index.js            |  10 ++--
 dist/tab/index.wxml          |  20 +++----
 dist/tab/index.wxss          |  18 +++---
 dist/toast/index.js          |  22 ++++----
 dist/toast/index.wxml        |   4 +-
 dist/toast/index.wxss        |   2 +-
 dist/toptips/index.js        |   6 +-
 dist/toptips/index.wxml      |   4 +-
 dist/toptips/index.wxss      |   4 +-
 example/badge/index.wxml     |  14 ++---
 example/btn/index.wxml       |  72 ++++++++++++------------
 example/card/index.wxml      |  26 ++++-----
 example/cell/index.wxml      | 104 +++++++++++++++++------------------
 example/dashboard/index.wxml |   8 +--
 example/dialog/index.wxml    |  10 ++--
 example/form/index.wxml      |  20 +++----
 example/helper/index.wxml    |  72 ++++++++++++------------
 example/icon/index.wxml      |  12 ++--
 example/icon/index.wxss      |   2 +-
 example/label/index.wxml     |  26 ++++-----
 example/loadmore/index.wxml  |   6 +-
 example/panel/index.wxml     |   8 +--
 example/quantity/index.js    |   6 +-
 example/quantity/index.wxml  |   6 +-
 example/steps/index.wxml     |  66 +++++++++++-----------
 example/steps/index.wxss     |   2 +-
 example/tab/index.js         |   6 +-
 example/tab/index.wxml       |   6 +-
 example/toast/index.js       |   6 +-
 example/toast/index.wxml     |   6 +-
 example/toptips/index.js     |   6 +-
 example/toptips/index.wxml   |   6 +-
 55 files changed, 498 insertions(+), 498 deletions(-)

diff --git a/README.md b/README.md
index ac433d9b..9df61bf5 100644
--- a/README.md
+++ b/README.md
@@ -3,19 +3,19 @@
 </p>
 
 
-ZUI 为微信小程序量身设计
+ZanUI Weapp是有赞移动端UI规范ZanUI的小程序现实版本。
 ====
 
 ## 概述
-[ZUI] 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 `btn`、`card`、`cell`、`icon`、`tab` 等各式元素
+[ZanUI Weapp] 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 `btn`、`card`、`cell`、`icon`、`tab` 等各式元素
 
 ## 例子
 ``` bash
-git clone https://github.com/youzan/zui.git
-cd zui
+git clone https://github.com/youzan/zanui-weapp.git
+cd zan
 ```
 
-将 [ZUI] 目录放入 微信Web开发者工具 中，可以预览各种组件的 Demo 和使用方法
+将 [ZanUI Weapp] 目录放入 微信Web开发者工具 中，可以预览各种组件的 Demo 和使用方法
 
 ## 协议
 [MIT]
@@ -24,9 +24,9 @@ cd zui
 
 ## 贡献
 
-如果你有好的意见或建议，欢迎给我们提 [issue] 或 [PR]，为提升 [ZUI] 贡献力量
+如果你有好的意见或建议，欢迎给我们提 [issue] 或 [PR]，为提升 [ZanUI Weapp] 贡献力量
 
-[issue]: https://github.com/youzan/zui/issues/new
-[PR]: https://github.com/youzan/zui/compare
-[ZUI]: https://github.com/youzan/zui
+[issue]: https://github.com/youzan/zanui-weapp/issues/new
+[PR]: https://github.com/youzan/zanui-weapp/compare
+[ZanUI Weapp]: https://github.com/youzan/zanui-weapp
 [MIT]: http://opensource.org/licenses/MIT
diff --git a/app.json b/app.json
index 077bb91b..97f7a4c6 100644
--- a/app.json
+++ b/app.json
@@ -20,7 +20,7 @@
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",
-    "navigationBarTitleText": "ZUI",
+    "navigationBarTitleText": "ZanUI",
     "navigationBarTextStyle":"black",
     "backgroundTextStyle":"dark",
     "backgroundColor": "#f9f9f9"
diff --git a/bower.json b/bower.json
index 3e5125b8..0d671ce9 100644
--- a/bower.json
+++ b/bower.json
@@ -1,12 +1,12 @@
 {
-  "name": "zui",
+  "name": "zanui-weapp",
   "authors": [
-    "Nino <nino@youzan.com>",
+    "Nino <ninofocus@gmail.com>",
     "Pangxie <pangxie@youzan.com>"
   ],
-  "directory": "zui",
+  "directory": "zanui-weapp",
   "description": "A UI Library for Weapp",
-  "main": "zui",
+  "main": "zan",
   "license": "MIT",
   "homepage": "",
   "ignore": [
diff --git a/dist/badge/index.wxss b/dist/badge/index.wxss
index b3cedd2c..a712f29f 100644
--- a/dist/badge/index.wxss
+++ b/dist/badge/index.wxss
@@ -1,7 +1,7 @@
-.zui-badge {
+.zan-badge {
   position: relative;
 }
-.zui-badge__count {
+.zan-badge__count {
   position: absolute;
   top: -8px;
   right: 0px;
diff --git a/dist/btn/index.wxss b/dist/btn/index.wxss
index 04a9d145..e4bf4478 100644
--- a/dist/btn/index.wxss
+++ b/dist/btn/index.wxss
@@ -1,4 +1,4 @@
-.zui-btn {
+.zan-btn {
   position: relative;
   color: #333;
   background-color: #fff;
@@ -15,34 +15,34 @@
   text-align: center;
   vertical-align: middle;
 }
-.zui-btn::after {
+.zan-btn::after {
   display: none;
 }
-.zui-btns {
+.zan-btns {
   margin: 15px;
 }
 
 /* type */
-.zui-btn--primary {
+.zan-btn--primary {
   color: #fff;
   background-color: #4b0;
   border-color: #0a0;
 }
 
-.zui-btn--warn {
+.zan-btn--warn {
   color: #fff;
   background-color: #f85;
   border-color: #f85;
 }
 
-.zui-btn--danger {
+.zan-btn--danger {
   color: #fff;
   background-color: #f44;
   border-color: #e33;
 }
 
 /* size */
-.zui-btn--small {
+.zan-btn--small {
   display: inline-block;
   height: 30px;
   line-height: 30px;
@@ -50,7 +50,7 @@
   margin-right: 5px;
   margin-bottom: 0;
 }
-.zui-btn--mini {
+.zan-btn--mini {
   display: inline-block;
   line-height: 21px;
   height: 22px;
@@ -60,7 +60,7 @@
   padding-left: 5px;
   padding-right: 5px;
 }
-.zui-btn--large {
+.zan-btn--large {
   border-radius: 0;
   margin-bottom: 0;
   border: none;
@@ -69,16 +69,16 @@
 }
 
 /* plain */
-.zui-btn--plain.zui-btn {
+.zan-btn--plain.zan-btn {
   background-color: transparent;
 }
-.zui-btn--plain.zui-btn--primary {
+.zan-btn--plain.zan-btn--primary {
   color: #06BF04;
 }
-.zui-btn--plain.zui-btn--warn {
+.zan-btn--plain.zan-btn--warn {
   color: #FF6600;
 }
-.zui-btn--plain.zui-btn--danger {
+.zan-btn--plain.zan-btn--danger {
   color: #FF4444;
 }
 
@@ -88,11 +88,11 @@
 }
 
 /* loading */
-.zui-btn--loading {
+.zan-btn--loading {
   color: transparent;
   opacity: 1;
 }
-.zui-btn--loading::before {
+.zan-btn--loading::before {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -108,9 +108,9 @@
   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 {
+.zan-btn--primary.zan-btn--loading::before,
+.zan-btn--warn.zan-btn--loading::before,
+.zan-btn--danger.zan-btn--loading::before {
   border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
 }
 
@@ -124,7 +124,7 @@
 }
 
 /* disabled */
-.zui-btn.zui-btn--disabled {
+.zan-btn.zan-btn--disabled {
   /* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */
   color: #999 ! important;
   background: #f8f8f8 ! important;
@@ -134,7 +134,7 @@
 }
 
 /* ::last-child */
-.zui-btn--last-child {
+.zan-btn--last-child {
   margin-bottom: 0;
   margin-right: 0;
 }
diff --git a/dist/card/index.wxss b/dist/card/index.wxss
index 20ff9d66..5829a31d 100644
--- a/dist/card/index.wxss
+++ b/dist/card/index.wxss
@@ -1,4 +1,4 @@
-.zui-card {
+.zan-card {
   margin-left: 0px;
   width: auto;
   padding: 5px 15px;
@@ -7,7 +7,7 @@
   font-size: 14px;
 }
 
-.zui-card__thumb {
+.zan-card__thumb {
   width: 90px;
   height: 90px;
   float: left;
@@ -18,7 +18,7 @@
   background-size: cover;
 }
 
-.zui-card__img {
+.zan-card__img {
   position: absolute;
   margin: auto;
   top: 0;
@@ -31,24 +31,24 @@
   max-height: 100%;
 }
 
-.zui-card__detail {
+.zan-card__detail {
   margin-left: 100px;
   width: auto;
   position: relative;
 }
 
-.zui-card__detail-row {
+.zan-card__detail-row {
   overflow: hidden;
   line-height: 20px;
   min-height: 20px;
   margin-bottom: 3px;
 }
 
-.zui-card__right-col {
+.zan-card__right-col {
   float: right;
 }
 
-.zui-card__left-col {
+.zan-card__left-col {
   margin-right: 80px;
 }
 
diff --git a/dist/cell/index.wxss b/dist/cell/index.wxss
index e8f1ae4e..0b64fca8 100644
--- a/dist/cell/index.wxss
+++ b/dist/cell/index.wxss
@@ -1,4 +1,4 @@
-.zui-cell {
+.zan-cell {
   position: relative;
   padding: 12px 15px;
   display: flex;
@@ -7,7 +7,7 @@
   font-size: 14px;
 }
 
-.zui-cell::after {
+.zan-cell::after {
   position: absolute;
   left: 15px;
   right: 0;
@@ -16,24 +16,24 @@
   background: #e5e5e5;
   content: ' ';
 }
-.zui-cell__bd {
+.zan-cell__bd {
   flex: 1;
 }
-.zui-cell__ft {
+.zan-cell__ft {
   position: relative;
   text-align: right;
   color: #666;
 }
 
-.zui-cell--last-child::after {
+.zan-cell--last-child::after {
   display: none;
 }
 
-.zui-cell--access .zui-cell__ft {
+.zan-cell--access .zan-cell__ft {
   padding-right: 13px;
 }
 
-.zui-cell--access .zui-cell__ft::after {
+.zan-cell--access .zan-cell__ft::after {
   position: absolute;
   top: 50%;
   right: 2px;
diff --git a/dist/color/index.wxss b/dist/color/index.wxss
index 5b5b8df5..f61ea662 100644
--- a/dist/color/index.wxss
+++ b/dist/color/index.wxss
@@ -1,27 +1,27 @@
-.zui-c-red {
+.zan-c-red {
   color: #f44 !important;
 }
 
-.zui-c-gray {
+.zan-c-gray {
   color: #c9c9c9 !important;
 }
 
-.zui-c-gray-dark {
+.zan-c-gray-dark {
   color: #999 !important;
 }
 
-.zui-c-gray-darker {
+.zan-c-gray-darker {
   color: #666 !important;
 }
 
-.zui-c-black {
+.zan-c-black {
   color: #333 !important;
 }
 
-.zui-c-blue {
+.zan-c-blue {
   color: #3283fa !important;
 }
 
-.zui-c-green {
+.zan-c-green {
   color: #44BB00 !important;
 }
diff --git a/dist/dialog/index.wxss b/dist/dialog/index.wxss
index 36f4393c..0afa5587 100644
--- a/dist/dialog/index.wxss
+++ b/dist/dialog/index.wxss
@@ -1,4 +1,4 @@
-.zui-dialog__mask {
+.zan-dialog__mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -8,7 +8,7 @@
   background: rgba(0, 0, 0, 0.7);
   display: none;
 }
-.zui-dialog__container {
+.zan-dialog__container {
   position: fixed;
   bottom: 0;
   width: 750rpx;
@@ -17,10 +17,10 @@
   transition: all 0.4s ease;
   z-index: 11;
 }
-.zui-dialog--show .zui-dialog__container {
+.zan-dialog--show .zan-dialog__container {
   transform: translateY(0);
 }
-.zui-dialog--show .zui-dialog__mask {
+.zan-dialog--show .zan-dialog__mask {
   display: block;
 }
 
diff --git a/dist/form/index.wxss b/dist/form/index.wxss
index 7c7a2ff6..d3dac94f 100644
--- a/dist/form/index.wxss
+++ b/dist/form/index.wxss
@@ -1,38 +1,38 @@
-.zui-form {
+.zan-form {
   background-color: #fff;
   border-top: 1rpx solid #e5e5e5;
   border-bottom: 1rpx solid #e5e5e5;
 }
 
-.zui-form__item {
+.zan-form__item {
   line-height: 26px;
 }
 
-.zui-form__title {
+.zan-form__title {
   float: left;
   width: 80px;
   font-size: 14px;
 }
 
-.zui-form__title--top {
+.zan-form__title--top {
   align-self: flex-start;
 }
 
-.zui-form__input, .zui-form__textarea {
+.zan-form__input, .zan-form__textarea {
   min-height: 26px;
 }
 
-.zui-form__input input {
+.zan-form__input input {
   min-height: 26px;
 }
 
-.zui-form__textarea {
+.zan-form__textarea {
   display: -webkit-flex;
   display: flex;
   align-items: center;
 }
 
-.zui-form__textarea textarea {
+.zan-form__textarea textarea {
   width: auto;
   flex: 1;
 }
diff --git a/dist/helper/index.wxss b/dist/helper/index.wxss
index 23a08395..a80f4d34 100644
--- a/dist/helper/index.wxss
+++ b/dist/helper/index.wxss
@@ -1,57 +1,57 @@
-.zui-pull-left {
+.zan-pull-left {
   float: left;
 }
 
-.zui-pull-right {
+.zan-pull-right {
   float: right;
 }
 
-.zui-center {
+.zan-center {
   text-align: center;
 }
 
-.zui-right {
+.zan-right {
   text-align: right;
 }
 
-.zui-text-deleted {
+.zan-text-deleted {
   text-decoration: line-through;
 }
-.zui-font-8 {
+.zan-font-8 {
   font-size: 8px;
 }
-.zui-font-10 {
+.zan-font-10 {
   font-size: 10px;
 }
-.zui-font-12 {
+.zan-font-12 {
   font-size: 12px;
 }
-.zui-font-14 {
+.zan-font-14 {
   font-size: 14px;
 }
-.zui-font-16 {
+.zan-font-16 {
   font-size: 16px;
 }
-.zui-font-18 {
+.zan-font-18 {
   font-size: 18px;
 }
-.zui-font-20 {
+.zan-font-20 {
   font-size: 20px;
 }
-.zui-font-22 {
+.zan-font-22 {
   font-size: 22px;
 }
-.zui-font-24 {
+.zan-font-24 {
   font-size: 22px;
 }
-.zui-font-30 {
+.zan-font-30 {
   font-size: 30px;
 }
-.zui-font-bold {
+.zan-font-bold {
   font-weight: bold;
 }
 
-.zui-arrow {
+.zan-arrow {
   position: absolute;
   right: 15px;
   top: 50%;
@@ -64,14 +64,14 @@
   transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
 }
 
-.zui-ellipsis {
+.zan-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
 }
 
-.zui-ellipsis--l2 {
+.zan-ellipsis--l2 {
   max-height: 40px;
   line-height: 20px;
   overflow: hidden;
@@ -81,7 +81,7 @@
   -webkit-box-orient: vertical;
 }
 
-.zui-ellipsis--l3 {
+.zan-ellipsis--l3 {
   max-height: 60px;
   line-height: 20px;
   overflow: hidden;
@@ -91,10 +91,10 @@
   -webkit-box-orient: vertical;
 }
 
-.zui-clearfix {
+.zan-clearfix {
   zoom: 1;
 }
-.zui-clearfix::after {
+.zan-clearfix::after {
   content: '';
   display: table;
   clear: both;
diff --git a/dist/icon/index.wxss b/dist/icon/index.wxss
index f8d88ff5..4d8b6bfc 100644
--- a/dist/icon/index.wxss
+++ b/dist/icon/index.wxss
@@ -9,10 +9,10 @@
        url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
 }
 
-.zui-icon {
+.zan-icon {
     display: inline-block;
 }
-.zui-icon::before {
+.zan-icon::before {
   font-family: "zuiicon" !important;
   font-style: normal;
   font-weight: normal;
@@ -47,20 +47,20 @@
 /* DO NOT EDIT! Generated by fount */
 
 
-.zui-icon-album:before { content: '\e800'; } /* '' */
-.zui-icon-arrow:before { content: '\e801'; } /* '' */
-.zui-icon-camera:before { content: '\e802'; } /* '' */
-.zui-icon-certificate:before { content: '\e803'; } /* '' */
-.zui-icon-check:before { content: '\e804'; } /* '' */
-.zui-icon-checked:before { content: '\e805'; } /* '' */
-.zui-icon-close:before { content: '\e806'; } /* '' */
-.zui-icon-gift:before { content: '\e807'; } /* '' */
-.zui-icon-home:before { content: '\e808'; } /* '' */
-.zui-icon-location:before { content: '\e809'; } /* '' */
-.zui-icon-message:before { content: '\e80a'; } /* '' */
-.zui-icon-send:before { content: '\e80b'; } /* '' */
-.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */
-.zui-icon-sign:before { content: '\e80d'; } /* '' */
-.zui-icon-store:before { content: '\e80e'; } /* '' */
-.zui-icon-topay:before { content: '\e80f'; } /* '' */
-.zui-icon-tosend:before { content: '\e810'; } /* '' */
+.zan-icon-album:before { content: '\e800'; } /* '' */
+.zan-icon-arrow:before { content: '\e801'; } /* '' */
+.zan-icon-camera:before { content: '\e802'; } /* '' */
+.zan-icon-certificate:before { content: '\e803'; } /* '' */
+.zan-icon-check:before { content: '\e804'; } /* '' */
+.zan-icon-checked:before { content: '\e805'; } /* '' */
+.zan-icon-close:before { content: '\e806'; } /* '' */
+.zan-icon-gift:before { content: '\e807'; } /* '' */
+.zan-icon-home:before { content: '\e808'; } /* '' */
+.zan-icon-location:before { content: '\e809'; } /* '' */
+.zan-icon-message:before { content: '\e80a'; } /* '' */
+.zan-icon-send:before { content: '\e80b'; } /* '' */
+.zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
+.zan-icon-sign:before { content: '\e80d'; } /* '' */
+.zan-icon-store:before { content: '\e80e'; } /* '' */
+.zan-icon-topay:before { content: '\e80f'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */
diff --git a/dist/label/index.wxss b/dist/label/index.wxss
index 1778d7b8..7c02728a 100644
--- a/dist/label/index.wxss
+++ b/dist/label/index.wxss
@@ -1,4 +1,4 @@
-.zui-label {
+.zan-label {
   display: inline-block;
   font-size: 12px;
   height: 28px;
@@ -12,23 +12,23 @@
   vertical-align: middle;
   text-align: center;
 }
-.zui-label--primary {
+.zan-label--primary {
   color: #fff;
   background: #f44;
   border: 1rpx solid #f44;
 }
-.zui-label--disabled {
+.zan-label--disabled {
   color: #cacaca;
   background: #eee;
   border: 1rpx solid #e5e5e5;
 }
-.zui-label--small {
+.zan-label--small {
   font-size: 11px;
   height: 16px;
   line-height: 16px;
   padding: 0px 3px;
 }
-.zui-label--plain.zui-label--primary {
+.zan-label--plain.zan-label--primary {
   color: #f44;
   background: #fff;
 }
diff --git a/dist/loadmore/index.wxml b/dist/loadmore/index.wxml
index a67dbf92..8c41cf40 100644
--- a/dist/loadmore/index.wxml
+++ b/dist/loadmore/index.wxml
@@ -1,23 +1,23 @@
-<template name="zui-loadmore">
+<template name="zan-loadmore">
 
   <block wx:if="{{nomore}}">
-    <view class="zui-loadmore zui-loadmore--nomore">
-      <view class="zui-loadmore__tips">
-        <view class="zui-loadmore__dot"></view>
+    <view class="zan-loadmore zan-loadmore--nomore">
+      <view class="zan-loadmore__tips">
+        <view class="zan-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 class="zan-loadmore zan-loadmore--nodata">
+      <view class="zan-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 class="zan-loadmore">
+      <view class="zan-loading"></view>
+      <view class="zan-loadmore__tips">加载中...</view>
     </view>
   </block>
 
diff --git a/dist/loadmore/index.wxss b/dist/loadmore/index.wxss
index 619b9193..538195eb 100644
--- a/dist/loadmore/index.wxss
+++ b/dist/loadmore/index.wxss
@@ -1,4 +1,4 @@
-.zui-loadmore {
+.zan-loadmore {
   position: relative;
   width: 65%;
   margin: 21px auto;
@@ -8,7 +8,7 @@
   vertical-align: middle;
 }
 
-.zui-loading {
+.zan-loading {
   width:20px;
   height:20px;
   display: inline-block;
@@ -19,42 +19,42 @@
   background-size: 100%;
 }
 
-.zui-loadmore .zui-loading {
+.zan-loadmore .zan-loading {
   margin-right: 4px;
 }
 
-.zui-loadmore__tips {
+.zan-loadmore__tips {
   display: inline-block;
   vertical-align: middle;
   height: 20px;
   line-height: 20px;
 }
 
-.zui-loadmore--nodata,
-.zui-loadmore--nomore {
+.zan-loadmore--nodata,
+.zan-loadmore--nomore {
   border-top: 1rpx solid #e5e5e5;
   color: #999;
 }
 
-.zui-loadmore--nodata {
+.zan-loadmore--nodata {
   margin-top: 120px;
 }
 
-.zui-loadmore--nodata .zui-loadmore__tips {
+.zan-loadmore--nodata .zan-loadmore__tips {
   position: relative;
   top: -11px;
   background: #f9f9f9;
   padding: 0 6px;
 }
 
-.zui-loadmore--nomore .zui-loadmore__tips {
+.zan-loadmore--nomore .zan-loadmore__tips {
   position: relative;
   top: -11px;
   background: #f9f9f9;
   padding: 0 6px;
 }
 
-.zui-loadmore__dot {
+.zan-loadmore__dot {
   position: absolute;
   left: 50%;
   top: 10px;
diff --git a/dist/panel/index.wxss b/dist/panel/index.wxss
index 6d0006b0..51c0650a 100644
--- a/dist/panel/index.wxss
+++ b/dist/panel/index.wxss
@@ -1,4 +1,4 @@
-.zui-panel {
+.zan-panel {
   background: #fff;
   border-top: 1rpx solid #e5e5e5;
   border-bottom: 1rpx solid #e5e5e5;
@@ -6,7 +6,7 @@
   overflow: hidden;
 }
 
-.zui-panel-title {
+.zan-panel-title {
   font-size: 14px;
   line-height: 14px;
   color: #999;
@@ -14,6 +14,6 @@
 }
 
 
-.zui-panel--without-margin-top {
+.zan-panel--without-margin-top {
   margin-top: 0;
 }
diff --git a/dist/quantity/index.js b/dist/quantity/index.js
index e3d1870b..86aea36b 100644
--- a/dist/quantity/index.js
+++ b/dist/quantity/index.js
@@ -12,25 +12,25 @@ function handle(e, num) {
 function callback(componentId, quantity) {
   quantity = +quantity;
   var e = { componentId, quantity };
-  console.info('[zui:quantity:change]', e);
+  console.info('[zan:quantity:change]', e);
 
-  if (this.handleZuiQuantityChange) {
-    this.handleZuiQuantityChange(e);
+  if (this.handleZanQuantityChange) {
+    this.handleZanQuantityChange(e);
   } else {
-    console.warn('页面缺少 handleZuiQuantityChange 回调函数');
+    console.warn('页面缺少 handleZanQuantityChange 回调函数');
   }
 }
 
 var Quantity = {
-  _handleZuiQuantityMinus(e) {
+  _handleZanQuantityMinus(e) {
     handle.call(this, e, -1);
   },
 
-  _handleZuiQuantityPlus(e) {
+  _handleZanQuantityPlus(e) {
     handle.call(this, e, +1);
   },
 
-  _handleZuiQuantityBlur(e) {
+  _handleZanQuantityBlur(e) {
     var dataset = e.currentTarget.dataset;
     var componentId = dataset.componentId;
     var max = +dataset.max;
diff --git a/dist/quantity/index.wxml b/dist/quantity/index.wxml
index 15cd7391..cdfb225f 100644
--- a/dist/quantity/index.wxml
+++ b/dist/quantity/index.wxml
@@ -1,28 +1,28 @@
-<template name="zui-quantity">
-  <view class="zui-quantity {{ size === 'small' ? 'zui-quantity--small' : '' }}">
+<template name="zan-quantity">
+  <view class="zan-quantity {{ size === 'small' ? 'zan-quantity--small' : '' }}">
     <view
-      class="zui-quantity__minus {{ quantity <= min ? 'zui-quantity--disabled' : '' }}"
+      class="zan-quantity__minus {{ quantity <= min ? 'zan-quantity--disabled' : '' }}"
       data-component-id="{{ componentId }}"
       data-quantity="{{ quantity }}"
       data-disabled="{{ quantity <= min }}"
-      bindtap="_handleZuiQuantityMinus"
+      bindtap="_handleZanQuantityMinus"
     >-</view>
     <input
-      class="zui-quantity__text {{ min >= max ? 'zui-quantity--disabled' : '' }}"
+      class="zan-quantity__text {{ min >= max ? 'zan-quantity--disabled' : '' }}"
       type="number"
       data-component-id="{{ componentId }}"
       data-min="{{ min }}"
       data-max="{{ max }}"
       value="{{ quantity }}"
       disabled="{{ min >= max }}"
-      bindblur="_handleZuiQuantityBlur"
+      bindblur="_handleZanQuantityBlur"
     ></input>
     <view
-      class="zui-quantity__plus {{ quantity >= max ? 'zui-quantity--disabled' : '' }}"
+      class="zan-quantity__plus {{ quantity >= max ? 'zan-quantity--disabled' : '' }}"
       data-component-id="{{ componentId }}"
       data-quantity="{{ quantity }}"
       data-disabled="{{ quantity >= max }}"
-      bindtap="_handleZuiQuantityPlus"
+      bindtap="_handleZanQuantityPlus"
     >+</view>
   </view>
 </template>
diff --git a/dist/quantity/index.wxss b/dist/quantity/index.wxss
index b39bf63c..513de17e 100644
--- a/dist/quantity/index.wxss
+++ b/dist/quantity/index.wxss
@@ -1,7 +1,7 @@
-.zui-quantity {
+.zan-quantity {
   color: #666;
 }
-.zui-quantity view {
+.zan-quantity view {
   display: inline-block;
   line-height: 20px;
   padding: 5px 0;
@@ -12,11 +12,11 @@
   font-size: 12px;
   border: 1rpx solid #999;
 }
-.zui-quantity .zui-quantity__minus {
+.zan-quantity .zan-quantity__minus {
   border-right: none;
   border-radius: 2px 0 0 2px;
 }
-.zui-quantity .zui-quantity__text {
+.zan-quantity .zan-quantity__text {
   border: 1rpx solid #999;
   display: inline-block;
   text-align: center;
@@ -26,20 +26,20 @@
   font-size: 12px;
   line-height: 30px;
 }
-.zui-quantity .zui-quantity__plus {
+.zan-quantity .zan-quantity__plus {
   border-left: none;
   border-radius: 0 2px 2px 0;
 }
-.zui-quantity .zui-quantity--disabled {
+.zan-quantity .zan-quantity--disabled {
   background: #f8f8f8;
   color: #bbb;
   border-color: #e8e8e8;
 }
-.zui-quantity--small view {
+.zan-quantity--small view {
   min-width: 36px;
   line-height: 18px;
 }
-.zui-quantity--small .zui-quantity__text {
+.zan-quantity--small .zan-quantity__text {
   width: 36px;
   line-height: 28px;
   height: 28px;
diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml
index d609b1a2..7e57b18b 100644
--- a/dist/steps/index.wxml
+++ b/dist/steps/index.wxml
@@ -1,15 +1,15 @@
-<template name="zui-steps">
-  <view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }} {{ className }}">
+<template name="zan-steps">
+  <view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
     <view
       wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
-      class="zui-steps__step {{ hasDesc ? 'zui-steps__step--db-title' : '' }} {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}"
+      class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
     >
-      <view class="zui-steps__title">{{ step.text }}</view>
-      <view wx:if="{{ hasDesc && step.desc }}" class="zui-steps__title zui-steps__title--desc">{{ step.desc }}</view>
-      <view class="zui-steps__icons">
-        <view class="zui-steps__circle"></view>
+      <view class="zan-steps__title">{{ step.text }}</view>
+      <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
+      <view class="zan-steps__icons">
+        <view class="zan-steps__circle"></view>
       </view>
-      <view class="zui-steps__line"></view>
+      <view class="zan-steps__line"></view>
     </view>
   </view>
 </template>
diff --git a/dist/steps/index.wxss b/dist/steps/index.wxss
index 06f71e31..14532034 100644
--- a/dist/steps/index.wxss
+++ b/dist/steps/index.wxss
@@ -1,6 +1,6 @@
 @import "wxss/step.wxss";
 @import "wxss/vstep.wxss";
 
-.zui-steps {
+.zan-steps {
   position: relative;
 }
diff --git a/dist/steps/wxss/step.wxss b/dist/steps/wxss/step.wxss
index bad8cd10..cdfe0a35 100644
--- a/dist/steps/wxss/step.wxss
+++ b/dist/steps/wxss/step.wxss
@@ -1,29 +1,29 @@
-.zui-steps--steps.zui-steps--5 .zui-steps__step {
+.zan-steps--steps.zan-steps--5 .zan-steps__step {
   width: 25%;
 }
 
-.zui-steps--steps.zui-steps--4 .zui-steps__step {
+.zan-steps--steps.zan-steps--4 .zan-steps__step {
   width: 33%;
 }
 
-.zui-steps--steps.zui-steps--3 .zui-steps__step {
+.zan-steps--steps.zan-steps--3 .zan-steps__step {
   width: 50%;
 }
 
-.zui-steps--steps .zui-steps__step {
+.zan-steps--steps .zan-steps__step {
   position: relative;
   float: left;
   padding-bottom: 25px;
   color: #b1b1b1;
 }
 
-.zui-steps--steps .zui-steps__title {
+.zan-steps--steps .zan-steps__title {
   transform: translateX(-50%);
   font-size: 10px;
   text-align: center;
 }
 
-.zui-steps--steps .zui-steps__icons {
+.zan-steps--steps .zan-steps__icons {
   position: absolute;
   top: 30px;
   left: -10px;
@@ -32,7 +32,7 @@
   z-index: 10;
 }
 
-.zui-steps--steps .zui-steps__circle {
+.zan-steps--steps .zan-steps__circle {
   display: block;
   position: relative;
   width: 5px;
@@ -41,7 +41,7 @@
   border-radius: 50%;
 }
 
-.zui-steps--steps .zui-steps__line {
+.zan-steps--steps .zan-steps__line {
   position: absolute;
   left: 0px;
   top: 32px;
@@ -52,82 +52,82 @@
 
 
 /* 已完成的steps */
-.zui-steps--steps .zui-steps__step--done {
+.zan-steps--steps .zan-steps__step--done {
   color: #333;
 }
 
-.zui-steps--steps .zui-steps__step--done .zui-steps__line {
+.zan-steps--steps .zan-steps__step--done .zan-steps__line {
   background-color: #06bf04;
 }
 
-.zui-steps--steps .zui-steps__step--done .zui-steps__circle {
+.zan-steps--steps .zan-steps__step--done .zan-steps__circle {
   width: 5px;
   height: 5px;
   background-color: #09bb07;
 }
 
 /* 正在进行中的steps */
-.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
+.zan-steps--steps .zan-steps__step--cur .zan-steps__icons {
   top: 25px;
   left: -14px;
 }
 
-.zui-steps--steps .zui-steps__step--cur .zui-steps__circle {
+.zan-steps--steps .zan-steps__step--cur .zan-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--steps .zui-steps__step--cur .zui-steps__line {
+.zan-steps--steps .zan-steps__step--cur .zan-steps__line {
   background-color: #e5e5e5;
 }
 
 /* 各种不同位置的 */
-.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
+.zan-steps--steps .zan-steps__step--first-child .zan-steps__title {
   margin-left: 0;
   transform: none;
   text-align: left;
 }
 
-.zui-steps--steps .zui-steps__step--first-child .zui-steps__icons {
+.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons {
   left: -7px;
 }
 
-.zui-steps--steps .zui-steps__step--last-child {
+.zan-steps--steps .zan-steps__step--last-child {
   position: absolute;
   right: 0;
   top: 0;
   text-align: right;
 }
 
-.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
+.zan-steps--steps .zan-steps__step--last-child .zan-steps__title {
   transform: none;
   text-align: right;
 }
 
-.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
+.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons {
   left: auto;
   right: -6px;
 }
 
-.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
+.zan-steps--steps .zan-steps__step--last-child .zan-steps__line {
   display: none;
 }
 
 /* 有描述的step */
-.zui-steps--steps .zui-steps__step--db-title {
+.zan-steps--steps .zan-steps__step--db-title {
   min-height: 29px;
 }
 
-.zui-steps--steps .zui-steps__step--db-title .zui-steps__line {
+.zan-steps--steps .zan-steps__step--db-title .zan-steps__line {
   top: 45px;
 }
 
-.zui-steps--steps .zui-steps__step--db-title .zui-steps__icons {
+.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons {
   top: 43px;
 }
 
-.zui-steps--steps .zui-steps__step--db-title.zui-steps__step--cur .zui-steps__icons {
+.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons {
   top: 39px;
 }
diff --git a/dist/steps/wxss/vstep.wxss b/dist/steps/wxss/vstep.wxss
index fdb39cee..70d89473 100644
--- a/dist/steps/wxss/vstep.wxss
+++ b/dist/steps/wxss/vstep.wxss
@@ -1,18 +1,18 @@
-.zui-steps--vsteps {
+.zan-steps--vsteps {
   color: #999;
   font-size: 14px;
 }
 
-.zui-steps--vsteps .zui-steps__step {
+.zan-steps--vsteps .zan-steps__step {
   position: relative;
   padding: 15px 0;
 }
 
-.zui-steps--vsteps .zui-steps__step--done {
+.zan-steps--vsteps .zan-steps__step--done {
   color: #44BB00;
 }
 
-.zui-steps--vsteps .zui-steps__line {
+.zan-steps--vsteps .zan-steps__line {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -21,17 +21,17 @@
   background-color: #e5e5e5;
 }
 
-.zui-steps--vsteps .zui-steps__title {
+.zan-steps--vsteps .zan-steps__title {
   display: inline-block;
   line-height: 20px;
   padding-left: 27px;
 }
 
-.zui-steps--vsteps .zui-steps__title--desc {
+.zan-steps--vsteps .zan-steps__title--desc {
   padding-left: 3px;
 }
 
-.zui-steps--vsteps .zui-steps__icons {
+.zan-steps--vsteps .zan-steps__icons {
   position: absolute;
   left: 7px;
   top: 50%;
@@ -41,14 +41,14 @@
   background-color: #fff;
 }
 
-.zui-steps--vsteps .zui-steps__circle {
+.zan-steps--vsteps .zan-steps__circle {
   width: 5px;
   height: 5px;
   background-color: #cacaca;
   border-radius: 10px;
 }
 
-.zui-steps--vsteps .zui-steps__step--done .zui-steps__circle {
+.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle {
   width: 13px;
   height: 13px;
   background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
@@ -56,12 +56,12 @@
   border-radius:0;
 }
 
-.zui-steps--vsteps .zui-steps__icon--active {
+.zan-steps--vsteps .zan-steps__icon--active {
   width: 13px;
   height: 13px;
 }
 
-.zui-steps--vsteps .zui-steps__step--first-child .zui-steps__title::before {
+.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before {
   content: '';
   position: absolute;
   top: 0;
@@ -72,7 +72,7 @@
   z-index: 1;
 }
 
-.zui-steps--vsteps .zui-steps__step--last-child .zui-steps__title::before {
+.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::before {
   content: '';
   position: absolute;
   top: 50%;
diff --git a/dist/tab/index.js b/dist/tab/index.js
index 4420cbc9..98be2947 100644
--- a/dist/tab/index.js
+++ b/dist/tab/index.js
@@ -1,15 +1,15 @@
 var Tab = {
-  _handleZuiTabChange(e) {
+  _handleZanTabChange(e) {
     var dataset = e.currentTarget.dataset;
     var componentId = dataset.componentId;
     var selectedId = dataset.itemId;
     var data = { componentId, selectedId };
 
-    console.info('[zui:tab:change]', data);
-    if (this.handleZuiTabChange) {
-      this.handleZuiTabChange(data);
+    console.info('[zan:tab:change]', data);
+    if (this.handleZanTabChange) {
+      this.handleZanTabChange(data);
     } else {
-      console.warn('页面缺少 handleZuiTabChange 回调函数');
+      console.warn('页面缺少 handleZanTabChange 回调函数');
     }
   }
 };
diff --git a/dist/tab/index.wxml b/dist/tab/index.wxml
index beb4670b..8b6fd6f9 100644
--- a/dist/tab/index.wxml
+++ b/dist/tab/index.wxml
@@ -1,27 +1,27 @@
-<template name="zui-tab">
-  <view class="zui-tab">
+<template name="zan-tab">
+  <view class="zan-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="zui-tab-list" data="{{ tab, componentId }}"></template>
+        <scroll-view class="zan-tab__bd zan-tab__bd--scroll {{fixed ? 'zan-tab__bd--fixed' : ''}}" scroll-x="true">
+          <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
         </scroll-view>
       </block>
       <block wx:else>
-        <view class="zui-tab__bd {{fixed ? 'zui-tab__bd--fixed' : ''}}">
-          <template is="zui-tab-list" data="{{ tab, componentId }}"></template>
+        <view class="zan-tab__bd {{fixed ? 'zan-tab__bd--fixed' : ''}}">
+          <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
         </view>
       </block>
   </view>
 </template>
 
-<template name="zui-tab-list">
+<template name="zan-tab-list">
   <view
     wx:for="{{tab.list}}"
     wx:key="id"
-    class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}"
+    class="zan-tab__item {{tab.selectedId == item.id ? 'zan-tab__item--selected' : ''}}"
     data-component-id="{{componentId}}"
     data-item-id="{{item.id}}"
-    bindtap="_handleZuiTabChange"
+    bindtap="_handleZanTabChange"
   >
-    <view class="zui-tab__title">{{item.title}}</view>
+    <view class="zan-tab__title">{{item.title}}</view>
   </view>
 </template>
diff --git a/dist/tab/index.wxss b/dist/tab/index.wxss
index 70a6cabe..5b1e18e1 100644
--- a/dist/tab/index.wxss
+++ b/dist/tab/index.wxss
@@ -1,26 +1,26 @@
-.zui-tab {
+.zan-tab {
   height: 45px;
 }
-.zui-tab__bd {
+.zan-tab__bd {
   width: 750rpx;
   display: flex;
   flex-direction: row;
   border-bottom: 1rpx solid #e5e5e5;
   background: #fff;
 }
-.zui-tab__bd--fixed {
+.zan-tab__bd--fixed {
   position: fixed;
   top: 0;
   z-index: 2;
 }
-.zui-tab__item {
+.zan-tab__item {
   flex: 1;
   display: inline-block;
   text-align: center;
   box-sizing: border-box;
 }
 
-.zui-tab__title {
+.zan-tab__title {
   font-size: 14px;
   display: inline-block;
   color: #666;
@@ -31,18 +31,18 @@
   word-break: keep-all;
 }
 
-.zui-tab__item--selected .zui-tab__title {
+.zan-tab__item--selected .zan-tab__title {
   color: #f44;
   border-bottom: 2px solid #f44;
 }
 
-.zui-tab__bd--scroll {
+.zan-tab__bd--scroll {
   display: block;
   white-space: nowrap;
 }
-.zui-tab__bd--scroll .zui-tab__item {
+.zan-tab__bd--scroll .zan-tab__item {
   min-width: 80px;
 }
-.zui-tab__bd--scroll .zui-tab__text {
+.zan-tab__bd--scroll .zan-tab__text {
   margin: 0 20px;
 }
diff --git a/dist/toast/index.js b/dist/toast/index.js
index 68d8ee8a..57b1c9fe 100644
--- a/dist/toast/index.js
+++ b/dist/toast/index.js
@@ -1,32 +1,32 @@
 module.exports = {
-  showZuiToast(title, timeout) {
-    var zuiToast = this.data.zuiToast || {};
-    clearTimeout(zuiToast.timer);
+  showZanToast(title, timeout) {
+    var zanToast = this.data.zanToast || {};
+    clearTimeout(zanToast.timer);
 
     // 弹层设置~
-    zuiToast = {
+    zanToast = {
       show: true,
       title
     };
     this.setData({
-      zuiToast
+      zanToast
     });
 
     var timer = setTimeout(() => {
-      this.clearZuiToast();
+      this.clearZanToast();
     }, timeout || 3000);
 
     this.setData({
-      'zuiToast.timer': timer
+      'zanToast.timer': timer
     });
   },
 
-  clearZuiToast() {
-    var zuiToast = this.data.zuiToast || {};
-    clearTimeout(zuiToast.timer);
+  clearZanToast() {
+    var zanToast = this.data.zanToast || {};
+    clearTimeout(zanToast.timer);
 
     this.setData({
-      'zuiToast.show': false
+      'zanToast.show': false
     });
   }
 };
diff --git a/dist/toast/index.wxml b/dist/toast/index.wxml
index e97fb888..ccf0e8d0 100644
--- a/dist/toast/index.wxml
+++ b/dist/toast/index.wxml
@@ -1,3 +1,3 @@
-<template name="zui-toast">
-  <view class="zui-toast" wx:if="{{ zuiToast.show }}" bindtap="clearZuiToast">{{ zuiToast.title }}</view>
+<template name="zan-toast">
+  <view class="zan-toast" wx:if="{{ zanToast.show }}" bindtap="clearZanToast">{{ zanToast.title }}</view>
 </template>
diff --git a/dist/toast/index.wxss b/dist/toast/index.wxss
index ef1d5ce1..a3bc3ceb 100644
--- a/dist/toast/index.wxss
+++ b/dist/toast/index.wxss
@@ -1,4 +1,4 @@
-.zui-toast {
+.zan-toast {
   position: fixed;
   top: 35%;
   left: 20%;
diff --git a/dist/toptips/index.js b/dist/toptips/index.js
index 526be4a6..a45d4fbf 100644
--- a/dist/toptips/index.js
+++ b/dist/toptips/index.js
@@ -1,7 +1,7 @@
 var timer = undefined;
 
 module.exports = {
-  showZuiTopTips(content = '', options = {}) {
+  showZanTopTips(content = '', options = {}) {
     // 如果已经有一个计时器在了，就清理掉先
     if (timer) {
       clearTimeout(timer);
@@ -21,7 +21,7 @@ module.exports = {
 
     // 展示出topTips
     this.setData({
-      zuiTopTips: {
+      zanTopTips: {
         show: true,
         content,
         options
@@ -31,7 +31,7 @@ module.exports = {
     // 设置定时器，定时关闭topTips
     timer = setTimeout(() => {
       this.setData({
-        'zuiTopTips.show': false
+        'zanTopTips.show': false
       });
       timer = undefined;
     }, options.duration);
diff --git a/dist/toptips/index.wxml b/dist/toptips/index.wxml
index 9e00584b..fe089460 100644
--- a/dist/toptips/index.wxml
+++ b/dist/toptips/index.wxml
@@ -1,3 +1,3 @@
-<template name="zui-toptips">
-  <view class="zui-toptips {{ zuiTopTips.show ? 'zui-toptips--show' : '' }}">{{ zuiTopTips.content }}</view>
+<template name="zan-toptips">
+  <view class="zan-toptips {{ zanTopTips.show ? 'zan-toptips--show' : '' }}">{{ zanTopTips.content }}</view>
 </template>
diff --git a/dist/toptips/index.wxss b/dist/toptips/index.wxss
index a541db5b..07c9a2fb 100644
--- a/dist/toptips/index.wxss
+++ b/dist/toptips/index.wxss
@@ -1,4 +1,4 @@
-.zui-toptips {
+.zan-toptips {
   display: block;
   position: fixed;
   -webkit-transform: translateZ(0) translateY(-100%);
@@ -17,6 +17,6 @@
   transition: all 0.4s ease;
 }
 
-.zui-toptips--show {
+.zan-toptips--show {
   -webkit-transform: translateZ(0) translateY(0);
 }
diff --git a/example/badge/index.wxml b/example/badge/index.wxml
index 4a7df4a1..997b3556 100644
--- a/example/badge/index.wxml
+++ b/example/badge/index.wxml
@@ -4,22 +4,22 @@
 
   <view class="demo">
     <view class="demo__item">
-      <view class="demo__icon zui-badge">
+      <view class="demo__icon zan-badge">
       </view>
     </view>
     <view class="demo__item">
-      <view class="demo__icon zui-badge">
-        <view class="zui-badge__count">9</view>
+      <view class="demo__icon zan-badge">
+        <view class="zan-badge__count">9</view>
       </view>
     </view>
     <view class="demo__item">
-      <view class="demo__icon zui-badge">
-        <view class="zui-badge__count">19</view>
+      <view class="demo__icon zan-badge">
+        <view class="zan-badge__count">19</view>
       </view>
     </view>
     <view class="demo__item">
-      <view class="demo__icon zui-badge">
-        <view class="zui-badge__count">99+</view>
+      <view class="demo__icon zan-badge">
+        <view class="zan-badge__count">99+</view>
       </view>
     </view>
   </view>
diff --git a/example/btn/index.wxml b/example/btn/index.wxml
index 33c3a7b3..7006b5c3 100644
--- a/example/btn/index.wxml
+++ b/example/btn/index.wxml
@@ -2,54 +2,54 @@
 
   <view class="doc-title">BUTTON</view>
 
-  <view class="zui-panel-title">普通按钮</view>
-  <view class="zui-panel">
-    <view class="zui-btns">
-      <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 class="zan-panel-title">普通按钮</view>
+  <view class="zan-panel">
+    <view class="zan-btns">
+      <button class="zan-btn">取消订单</button>
+      <button class="zan-btn zan-btn--primary">确认付款</button>
+      <button class="zan-btn zan-btn--danger">确认付款</button>
+      <button class="zan-btn zan-btn--warn zan-btn--last-child">确认付款</button>
     </view>
   </view>
 
-  <view class="zui-panel-title">大号按钮，没有边框线及圆角</view>
-  <view class="zui-panel">
-    <button class="zui-btn zui-btn--large zui-btn--primary">确认付款</button>
-    <button class="zui-btn zui-btn--large zui-btn--warn">立即购买</button>
-    <button class="zui-btn zui-btn--large zui-btn--danger">立即购买</button>
+  <view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
+  <view class="zan-panel">
+    <button class="zan-btn zan-btn--large zan-btn--primary">确认付款</button>
+    <button class="zan-btn zan-btn--large zan-btn--warn">立即购买</button>
+    <button class="zan-btn zan-btn--large zan-btn--danger">立即购买</button>
   </view>
 
-  <view class="zui-panel-title">小号按钮</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 class="zan-panel-title">小号按钮</view>
+  <view class="zan-panel" style="padding: 15px;">
+    <button class="zan-btn zan-btn--small">取消订单</button>
+    <button class="zan-btn zan-btn--small zan-btn--primary">确认付款</button>
   </view>
 
-  <view class="zui-panel-title">迷你按钮</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 class="zan-panel-title">迷你按钮</view>
+  <view class="zan-panel" style="padding: 15px;">
+    <button class="zan-btn zan-btn--mini zan-btn--plain">取消订单</button>
+    <button class="zan-btn zan-btn--mini zan-btn--primary zan-btn--plain">确认付款</button>
+    <button class="zan-btn zan-btn--mini zan-btn--warn zan-btn--plain">确认付款</button>
+    <button class="zan-btn zan-btn--mini zan-btn--danger zan-btn--plain">确认付款</button>
   </view>
 
-  <view class="zui-panel-title">Loading</view>
-  <view class="zui-panel">
-    <view class="zui-btns">
-      <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 class="zan-panel-title">Loading</view>
+  <view class="zan-panel">
+    <view class="zan-btns">
+      <button class="zan-btn zan-btn--loading">取消订单</button>
+      <button class="zan-btn zan-btn--loading zan-btn--primary">确认付款</button>
+      <button class="zan-btn zan-btn--loading zan-btn--danger">确认付款</button>
+      <button class="zan-btn zan-btn--loading zan-btn--warn zan-btn--last-child">确认付款</button>
     </view>
   </view>
 
-  <view class="zui-panel-title">Disabled</view>
-  <view class="zui-panel">
-    <view class="zui-btns">
-      <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 class="zan-panel-title">Disabled</view>
+  <view class="zan-panel">
+    <view class="zan-btns">
+      <button class="zan-btn zan-btn--disabled" disabled>取消订单</button>
+      <button class="zan-btn zan-btn--disabled zan-btn--primary" disabled>确认付款</button>
+      <button class="zan-btn zan-btn--disabled zan-btn--danger" disabled>确认付款</button>
+      <button class="zan-btn zan-btn--disabled zan-btn--warn zan-btn--last-child" disabled>确认付款</button>
     </view>
   </view>
 
diff --git a/example/card/index.wxml b/example/card/index.wxml
index abf8fca8..cc796b29 100644
--- a/example/card/index.wxml
+++ b/example/card/index.wxml
@@ -2,31 +2,31 @@
 
   <view class="doc-title">CARD</view>
 
-  <view class="zui-panel">
-    <view class="zui-card">
-      <view class="zui-card__thumb">
-        <image class="zui-card__img"
+  <view class="zan-panel">
+    <view class="zan-card">
+      <view class="zan-card__thumb">
+        <image class="zan-card__img"
           src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
           mode="aspectFit"
         ></image>
       </view>
-      <view class="zui-card__detail">
-        <view class="zui-card__detail-row">
-          <view class="zui-card__right-col">¥ 999.99</view>
-          <view class="zui-card__left-col zui-ellipsis--l2">
+      <view class="zan-card__detail">
+        <view class="zan-card__detail-row">
+          <view class="zan-card__right-col">¥ 999.99</view>
+          <view class="zan-card__left-col zan-ellipsis--l2">
              红烧牛肉【虚拟商品】【有库存】【有sku】
           </view>
         </view>
 
-        <view class="zui-card__detail-row zui-c-gray-darker">
-          <view class="zui-card__right-col">x2</view>
-          <view class="zui-card__left-col">
+        <view class="zan-card__detail-row zan-c-gray-darker">
+          <view class="zan-card__right-col">x2</view>
+          <view class="zan-card__left-col">
             3000克 50%
           </view>
         </view>
 
-        <view class="zui-card__detail-row zui-c-gray-darker">
-          <view class="zui-card__left-col zui-c-red">已发货</view>
+        <view class="zan-card__detail-row zan-c-gray-darker">
+          <view class="zan-card__left-col zan-c-red">已发货</view>
         </view>
       </view>
     </view>
diff --git a/example/cell/index.wxml b/example/cell/index.wxml
index 299d12dc..6272b0f3 100644
--- a/example/cell/index.wxml
+++ b/example/cell/index.wxml
@@ -2,87 +2,87 @@
 
   <view class="doc-title">CELL</view>
 
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">单行列表</view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">单行列表</view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">单行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">单行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell--last-child zui-cell--access">
-      <view class="zui-cell__bd">单行列表</view>
-      <view class="zui-cell__ft"></view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child zan-cell--access">
+      <view class="zan-cell__bd">单行列表</view>
+      <view class="zan-cell__ft"></view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell--last-child zui-cell--access">
-      <view class="zui-cell__bd">单行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child zan-cell--access">
+      <view class="zan-cell__bd">单行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell">
-      <view class="zui-cell__bd">多行列表</view>
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">多行列表</view>
     </view>
-    <view class="zui-cell">
-      <view class="zui-cell__bd">多行列表</view>
+    <view class="zan-cell">
+      <view class="zan-cell__bd">多行列表</view>
     </view>
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">多行列表</view>
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">多行列表</view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
-    <view class="zui-cell">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+    <view class="zan-cell">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell--access">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft"></view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--access">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft"></view>
     </view>
-    <view class="zui-cell zui-cell--access">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft"></view>
+    <view class="zan-cell zan-cell--access">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft"></view>
     </view>
-    <view class="zui-cell zui-cell--access zui-cell--last-child">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft"></view>
+    <view class="zan-cell zan-cell--access zan-cell--last-child">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft"></view>
     </view>
   </view>
 
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell--access">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--access">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
-    <view class="zui-cell zui-cell--access">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+    <view class="zan-cell zan-cell--access">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
-    <view class="zui-cell zui-cell--access zui-cell--last-child">
-      <view class="zui-cell__bd">多行列表</view>
-      <view class="zui-cell__ft">详细信息</view>
+    <view class="zan-cell zan-cell--access zan-cell--last-child">
+      <view class="zan-cell__bd">多行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
     </view>
   </view>
 
diff --git a/example/dashboard/index.wxml b/example/dashboard/index.wxml
index da521050..25d38001 100644
--- a/example/dashboard/index.wxml
+++ b/example/dashboard/index.wxml
@@ -2,10 +2,10 @@
 
   <image class="logo" src="https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png"></image>
 
-  <view class="zui-panel">
-    <navigator wx:for="{{ list }}" wx:key="name" class="zui-cell zui-cell--access" url="{{ item.path }}">
-      <view class="zui-cell__bd">{{ item.name }}</view>
-      <view class="zui-cell__ft"></view>
+  <view class="zan-panel">
+    <navigator wx:for="{{ list }}" wx:key="name" class="zan-cell zan-cell--access" url="{{ item.path }}">
+      <view class="zan-cell__bd">{{ item.name }}</view>
+      <view class="zan-cell__ft"></view>
     </navigator>
   </view>
 
diff --git a/example/dialog/index.wxml b/example/dialog/index.wxml
index f74e82ea..314c2ca5 100644
--- a/example/dialog/index.wxml
+++ b/example/dialog/index.wxml
@@ -2,15 +2,15 @@
 
   <view class="doc-title">DIALOG</view>
 
-  <view class="zui-btns" style="margin-top: 30vh;">
-    <button class="zui-btn" bindtap="toggleDialog">
+  <view class="zan-btns" style="margin-top: 30vh;">
+    <button class="zan-btn" bindtap="toggleDialog">
       显示Dialog
     </button>
   </view>
 
-  <view class="zui-dialog {{ showDialog ? 'zui-dialog--show' : '' }}">
-    <view class="zui-dialog__mask" bindtap="toggleDialog" />
-    <view class="zui-dialog__container">
+  <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">
+    <view class="zan-dialog__mask" bindtap="toggleDialog" />
+    <view class="zan-dialog__container">
       <view style="padding: 100px 0; text-align: center;">Dialog内容</view>
     </view>
   </view>
diff --git a/example/form/index.wxml b/example/form/index.wxml
index 18aebb49..ec6640b3 100644
--- a/example/form/index.wxml
+++ b/example/form/index.wxml
@@ -2,26 +2,26 @@
 
   <view class="doc-title">FORM</view>
 
-  <view class="zui-form">
-    <view class="zui-cell zui-form__item">
-      <text class="zui-form__title">收货人</text>
+  <view class="zan-form">
+    <view class="zan-cell zan-form__item">
+      <text class="zan-form__title">收货人</text>
       <input
-        class="zui-form__input zui-cell__bd"
+        class="zan-form__input zan-cell__bd"
         placeholder="名字"
       />
     </view>
-    <view class="zui-cell zui-form__item">
-      <text class="zui-form__title">联系电话</text>
+    <view class="zan-cell zan-form__item">
+      <text class="zan-form__title">联系电话</text>
       <input
-        class="zui-form__input zui-cell__bd"
+        class="zan-form__input zan-cell__bd"
         type="number"
         maxlength="20"
         placeholder="手机或固定电话"
       />
     </view>
-    <view class="zui-cell zui-form__item zui-cell--last-child">
-      <text class="zui-form__title">选择区域</text>
-      <view class="zui-form__input zui-cell__bd">
+    <view class="zan-cell zan-form__item zan-cell--last-child">
+      <text class="zan-form__title">选择区域</text>
+      <view class="zan-form__input zan-cell__bd">
         <picker
           mode="selector"
           range="{{ area }}"
diff --git a/example/helper/index.wxml b/example/helper/index.wxml
index 0c5a21df..a40f3a54 100644
--- a/example/helper/index.wxml
+++ b/example/helper/index.wxml
@@ -1,71 +1,71 @@
 <view class="container">
 
-  <view class="zui-panel">
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <view class="zui-pull-right">zui-pull-right: 往右靠</view>
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <view class="zan-pull-right">zan-pull-right: 往右靠</view>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <view class="zui-text-deleted">zui-text-deleted：被删除的效果</view>
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
         <view>
-          <view class="zui-font-12">zui-font-12：字号12</view>
-          <view class="zui-font-12 zui-font-bold">zui-font-bold：再来个加粗</view>
+          <view class="zan-font-12">zan-font-12：字号12</view>
+          <view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
         </view>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
         <view>
-          <view class="zui-font-16">zui-font-16：字号16</view>
-          <view class="zui-font-16 zui-font-bold">zui-font-bold：再来个加粗</view>
+          <view class="zan-font-16">zan-font-16：字号16</view>
+          <view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
         </view>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
         <view class="">
           <view>字体颜色</view>
-          <view class="zui-c-red">zui-c-red: 红色</view>
-          <view class="zui-c-gray">zui-c-gray: 灰色</view>
-          <view class="zui-c-gray-dark">zui-c-gray-dark: 再灰一点点</view>
-          <view class="zui-c-gray-darker">zui-c-gray-darker: 更深的灰色</view>
-          <view class="zui-c-black">zui-c-black: 黑色</view>
-          <view class="zui-c-blue">zui-c-blue: 蓝色</view>
-          <view class="zui-c-green">zui-c-green: 绿色</view>
+          <view class="zan-c-red">zan-c-red: 红色</view>
+          <view class="zan-c-gray">zan-c-gray: 灰色</view>
+          <view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
+          <view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
+          <view class="zan-c-black">zan-c-black: 黑色</view>
+          <view class="zan-c-blue">zan-c-blue: 蓝色</view>
+          <view class="zan-c-green">zan-c-green: 绿色</view>
         </view>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <view>zui-arrow：箭头</view>
-        <view class="zui-arrow"></view>
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <view>zan-arrow：箭头</view>
+        <view class="zan-arrow"></view>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <view class="zui-ellipsis" style="width: 300px;">
-          zui-ellipsis：单行点点点
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <view class="zan-ellipsis" style="width: 300px;">
+          zan-ellipsis：单行点点点
           ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
         </view>
       </view>
     </view>
 
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">
-        <view class="zui-ellipsis--l2">
-          zui-ellipsis--l2：单行点点点
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">
+        <view class="zan-ellipsis--l2">
+          zan-ellipsis--l2：单行点点点
           ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
         </view>
       </view>
diff --git a/example/icon/index.wxml b/example/icon/index.wxml
index 87df64f2..294a3edd 100644
--- a/example/icon/index.wxml
+++ b/example/icon/index.wxml
@@ -2,16 +2,16 @@
 
   <view class="doc-title">ICON</view>
 
-  <view class="zui-panel">
+  <view class="zan-panel">
     <view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
-      <view class="zui-icon zui-icon-{{ icon }}"  style="font-size: 20px; color: #ff4343;"></view>
-      <view class="icon-classname">zui-icon-{{ icon }}</view>
+      <view class="zan-icon zan-icon-{{ icon }}"  style="font-size: 20px; color: #ff4343;"></view>
+      <view class="icon-classname">zan-icon-{{ icon }}</view>
     </view>
   </view>
-  <view class="zui-panel" style="margin-bottom: 40px;">
+  <view class="zan-panel" style="margin-bottom: 40px;">
     <view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
-      <view class="zui-icon zui-icon-{{ icon }}" style="font-size: 40px;"></view>
-      <view class="icon-classname">zui-icon-{{ icon }}</view>
+      <view class="zan-icon zan-icon-{{ icon }}" style="font-size: 40px;"></view>
+      <view class="icon-classname">zan-icon-{{ icon }}</view>
     </view>
   </view>
 </view>
diff --git a/example/icon/index.wxss b/example/icon/index.wxss
index 4f9436cd..da297c69 100644
--- a/example/icon/index.wxss
+++ b/example/icon/index.wxss
@@ -8,7 +8,7 @@
   color: #999;
   font-size: 10px;
 }
-.zui-icon {
+.zan-icon {
   font-size: 40px;
   margin: 20px;
 }
diff --git a/example/label/index.wxml b/example/label/index.wxml
index 309ed007..7afcf997 100644
--- a/example/label/index.wxml
+++ b/example/label/index.wxml
@@ -2,24 +2,24 @@
 
   <view class="doc-title">LABEL</view>
 
-  <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 class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-label">蓝色</view>
+      <view class="zan-label zan-label--primary">红色</view>
+      <view class="zan-label zan-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 class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-label zan-label--primary zan-label--small">会员折扣</view>
+      <view class="zan-label zan-label--primary zan-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 class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-label zan-label--primary zan-label--small zan-label--plain">会员折扣</view>
+      <view class="zan-label zan-label--primary zan-label--small zan-label--plain">返现</view>
     </view>
   </view>
 </view>
diff --git a/example/loadmore/index.wxml b/example/loadmore/index.wxml
index 61a57774..4665aab4 100644
--- a/example/loadmore/index.wxml
+++ b/example/loadmore/index.wxml
@@ -3,7 +3,7 @@
 
   <view class="doc-title">LOADMORE</view>
 
-  <template is="zui-loadmore" data="{{loading: true}}" />
-  <template is="zui-loadmore" data="{{nodata: true}}" />
-  <template is="zui-loadmore" data="{{nomore: true}}" />
+  <template is="zan-loadmore" data="{{loading: true}}" />
+  <template is="zan-loadmore" data="{{nodata: true}}" />
+  <template is="zan-loadmore" data="{{nomore: true}}" />
 </view>
diff --git a/example/panel/index.wxml b/example/panel/index.wxml
index b2e38abb..62f1fcef 100644
--- a/example/panel/index.wxml
+++ b/example/panel/index.wxml
@@ -2,16 +2,16 @@
 
   <view class="doc-title">PANEL</view>
 
-  <view class="zui-panel-title">标题</view>
-  <view class="zui-panel">
+  <view class="zan-panel-title">标题</view>
+  <view class="zan-panel">
     <view style="padding: 15px;">内容</view>
   </view>
 
-  <view class="zui-panel">
+  <view class="zan-panel">
     <view style="padding: 15px;">内容</view>
   </view>
 
-  <view class="zui-panel">
+  <view class="zan-panel">
     <view style="padding: 15px;">内容</view>
   </view>
 
diff --git a/example/quantity/index.js b/example/quantity/index.js
index 4406c270..8d118410 100644
--- a/example/quantity/index.js
+++ b/example/quantity/index.js
@@ -1,6 +1,6 @@
-var ZUI = require('../../dist/index');
+var Zan = require('../../dist/index');
 
-Page(Object.assign({}, ZUI.Quantity, {
+Page(Object.assign({}, Zan.Quantity, {
   data: {
     quantity1: {
       quantity: 10,
@@ -19,7 +19,7 @@ Page(Object.assign({}, ZUI.Quantity, {
     }
   },
 
-  handleZuiQuantityChange(e) {
+  handleZanQuantityChange(e) {
     var componentId = e.componentId;
     var quantity = e.quantity;
 
diff --git a/example/quantity/index.wxml b/example/quantity/index.wxml
index 3975ca89..c51f001c 100644
--- a/example/quantity/index.wxml
+++ b/example/quantity/index.wxml
@@ -5,16 +5,16 @@
   <view class="doc-title">QUANTITY</view>
 
   <view style="padding: 40px 15px">
-    <template is="zui-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
+    <template is="zan-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
   </view>
 
   <!-- 当最大值等于最小值时，组件不可用 -->
   <view style="padding: 40px 15px ">
-    <template is="zui-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
+    <template is="zan-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
   </view>
 
   <!-- small size -->
   <view style="padding: 40px 15px ">
-    <template is="zui-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" />
+    <template is="zan-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" />
   </view>
 </view>
diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index 991fdc7e..cac69719 100644
--- a/example/steps/index.wxml
+++ b/example/steps/index.wxml
@@ -4,66 +4,66 @@
 
   <view class="doc-title">STEPS</view>
 
-  <view class="zui-panel">
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'horizon', steps: steps }}"></template>
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
       </view>
     </view>
 
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
       </view>
     </view>
   </view>
 
-  <view class="zui-panel-title">有描述的steps</view>
-  <view class="zui-panel">
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
+  <view class="zan-panel-title">有描述的steps</view>
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
       </view>
     </view>
 
-    <view class="zui-cell">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
       </view>
     </view>
 
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
       </view>
     </view>
   </view>
 
-  <view class="zui-panel-title">垂直方向的steps</view>
-  <view class="zui-panel">
-    <view class="zui-cell zui-cell">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
+  <view class="zan-panel-title">垂直方向的steps</view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
       </view>
     </view>
 
-    <view class="zui-cell zui-cell--last-child">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'vertical', steps }}"></template>
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-cell__bd">
+        <template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
       </view>
     </view>
   </view>
 
-  <view class="zui-panel-title">可自定义class</view>
-  <view class="zui-panel">
-    <view class="zui-cell__bd">
-      <template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
+  <view class="zan-panel-title">可自定义class</view>
+  <view class="zan-panel">
+    <view class="zan-cell__bd">
+      <template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
     </view>
   </view>
 
diff --git a/example/steps/index.wxss b/example/steps/index.wxss
index 5ac16b57..1a313e5f 100644
--- a/example/steps/index.wxss
+++ b/example/steps/index.wxss
@@ -1,6 +1,6 @@
 .my-class {
   padding: 10px;
 }
-.my-class .zui-steps__step--done {
+.my-class .zan-steps__step--done {
   color: #f44;
 }
diff --git a/example/tab/index.js b/example/tab/index.js
index 3cb9fcc8..691f5a80 100644
--- a/example/tab/index.js
+++ b/example/tab/index.js
@@ -1,6 +1,6 @@
-var ZUI = require('../../dist/index');
+var Zan = require('../../dist/index');
 
-Page(Object.assign({}, ZUI.Tab, {
+Page(Object.assign({}, Zan.Tab, {
   data: {
     tab1: {
       list: [{
@@ -70,7 +70,7 @@ Page(Object.assign({}, ZUI.Tab, {
     }
   },
 
-  handleZuiTabChange(e) {
+  handleZanTabChange(e) {
     var componentId = e.componentId;
     var selectedId = e.selectedId;
 
diff --git a/example/tab/index.wxml b/example/tab/index.wxml
index 2aa1e49c..b606274d 100644
--- a/example/tab/index.wxml
+++ b/example/tab/index.wxml
@@ -5,12 +5,12 @@
   <view class="doc-title">TAB</view>
 
   <view style="margin: 20px 0">
-    <template is="zui-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
+    <template is="zan-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="zui-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
+    <template is="zan-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="zui-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
+    <template is="zan-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
   </view>
 </view>
diff --git a/example/toast/index.js b/example/toast/index.js
index 8f68611e..74d15942 100644
--- a/example/toast/index.js
+++ b/example/toast/index.js
@@ -1,9 +1,9 @@
-var ZUI = require('../../dist/index');
+var Zan = require('../../dist/index');
 
-Page(Object.assign({}, ZUI.Toast, {
+Page(Object.assign({}, Zan.Toast, {
   data: {},
 
   showToast() {
-    this.showZuiToast('toast的内容');
+    this.showZanToast('toast的内容');
   }
 }));
diff --git a/example/toast/index.wxml b/example/toast/index.wxml
index c55fb7c0..f9018fef 100644
--- a/example/toast/index.wxml
+++ b/example/toast/index.wxml
@@ -4,11 +4,11 @@
 
   <view class="doc-title">TOAST</view>
 
-  <view class="zui-btns" style="margin-top: 30vh;">
-    <button class="zui-btn" bindtap="showToast">
+  <view class="zan-btns" style="margin-top: 30vh;">
+    <button class="zan-btn" bindtap="showToast">
       显示toast
     </button>
   </view>
 </view>
 
-<template is="zui-toast" data="{{ zuiToast }}"></template>
+<template is="zan-toast" data="{{ zanToast }}"></template>
diff --git a/example/toptips/index.js b/example/toptips/index.js
index 552e6b38..62926a82 100644
--- a/example/toptips/index.js
+++ b/example/toptips/index.js
@@ -1,9 +1,9 @@
-var ZUI = require('../../dist/index');
+var Zan = require('../../dist/index');
 
-Page(Object.assign({}, ZUI.TopTips, {
+Page(Object.assign({}, Zan.TopTips, {
   data: {},
 
   showTopTips() {
-    this.showZuiTopTips('toptips的内容');
+    this.showZanTopTips('toptips的内容');
   }
 }));
diff --git a/example/toptips/index.wxml b/example/toptips/index.wxml
index b613e137..f3f44383 100644
--- a/example/toptips/index.wxml
+++ b/example/toptips/index.wxml
@@ -4,11 +4,11 @@
 
   <view class="doc-title">TOPTIPS</view>
 
-  <view class="zui-btns" style="margin-top: 30vh;">
-    <button class="zui-btn" bindtap="showTopTips">
+  <view class="zan-btns" style="margin-top: 30vh;">
+    <button class="zan-btn" bindtap="showTopTips">
       显示toptips
     </button>
   </view>
 </view>
 
-<template is="zui-toptips" data="{{ zuiTopTips }}"></template>
+<template is="zan-toptips" data="{{ zanTopTips }}"></template>