diff --git a/README.md b/README.md
index e69de29bb..cb6383067 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,35 @@
+## 下载项目
+```bash
+git@gitlab.qima-inc.com:fe/oxygen.git
+cd oxygen
+```
+
+## 安装组件依赖库
+```bash
+ynpm i
+```
+
+## 新建组件（以waterfall为例）
+新建一个Vue组件，比如  waterfall
+```bash
+make init waterfall
+```
+就可以在 packages目录 里面看到waterfall初始化的组件代码了。记得更新package.json和README.md里的组件描述信息
+
+## 示例预览（以waterfall为例）
+在 docs/nav.config.json 文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分
+在 docs/examples 目录里新建 同名的md文件，如 waterfall.md
+在项目的根目录下执行以下命令，启动server
+```
+make dev
+```
+浏览器访问 http://localhost:8080/#/ 就可以看到所有组件的示例了
+
+
+
+
+
+
+
+
+
diff --git a/docs/examples/button.md b/docs/examples/button.md
index e7d0e761c..512e3af6c 100644
--- a/docs/examples/button.md
+++ b/docs/examples/button.md
@@ -66,7 +66,7 @@
 
 ### 自定义按钮标签
 
-:::demo 有时按钮需要是一个a标签
+:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
 ```html 
 <div class="z-button-group">
   <div class="z-button-1-1">
diff --git a/packages/button/src/button.js b/packages/button/src/button.js
index b3d912e3c..fa62244c4 100644
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@@ -42,6 +42,12 @@ export default {
     }
   },
 
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  },
+
   render(h) {
     let { type, nativeType, size, disabled, loading, block } = this;
     let Tag = this.tag;
@@ -60,6 +66,7 @@ export default {
             'is-block': block
           }
         ]}
+        onClick={this.handleClick}
       >
         {
           loading ? <i class="z-icon-loading"></i> : null
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index 2a14bbaba..5f6c48e72 100644
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@@ -2,15 +2,15 @@
   <transition name="dialog-bounce">
     <div class="z-dialog-wrapper">
       <div class="z-dialog" v-show="value">
-        <div class="z-dialog-header" v-if="title">
-          <div class="z-dialog-title" v-text="title"></div>
+        <div class="z-dialog__header" v-if="title">
+          <div class="z-dialog__title" v-text="title"></div>
         </div>
-        <div class="z-dialog-content" v-if="message">
-          <div class="z-dialog-message" v-html="message"></div>
+        <div class="z-dialog__content" v-if="message">
+          <div class="z-dialog__message" v-html="message"></div>
         </div>
-        <div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
         </div>
       </div>
     </div>
diff --git a/packages/zanui-css/src/button.pcss b/packages/zanui-css/src/button.pcss
index 3ccfa629a..77da7b848 100644
--- a/packages/zanui-css/src/button.pcss
+++ b/packages/zanui-css/src/button.pcss
@@ -63,6 +63,9 @@
       font-size: 12px;
     }
 
+    /*
+      mini图标默认宽度50px，文字不能超过4个
+     */
     @m mini {
       display: inline-block;
       width: 50px;
diff --git a/packages/zanui-css/src/dialog.pcss b/packages/zanui-css/src/dialog.pcss
index 724cf7ff7..dabf78197 100644
--- a/packages/zanui-css/src/dialog.pcss
+++ b/packages/zanui-css/src/dialog.pcss
@@ -1,11 +1,11 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component dialog-wrapper {
+  @b dialog-wrapper {
     position: absolute;
   }
 
-  @component dialog {
+  @b dialog {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -18,11 +18,11 @@
     backface-visibility: hidden;
     transition: .2s;
 
-    @descendent header {
+    @e header {
       padding: 15px 0 0;
     }
 
-    @descendent content {
+    @e content {
       padding: 15px 20px;
       min-height: 36px;
       position: relative;
@@ -32,7 +32,7 @@
       }
     }
 
-    @descendent title {
+    @e title {
       text-align: center;
       padding-left: 0;
       margin-bottom: 0;
@@ -40,31 +40,31 @@
       color: #333;
     }
 
-    @descendent message {
+    @e message {
       color: #999;
       margin: 0;
       font-size: 14px;
       line-height: 1.5;
     }
 
-    @descendent footer {
+    @e footer {
       font-size: 14px;
       overflow: hidden;
-    }
 
-    .is-twobtn {
-      .z-dialog-btn {
-        width: 50%;
-      }
+      @when twobtn {
+        .z-dialog__btn {
+          width: 50%;
+        }
 
-      .z-dialog-cancel {
-        &::after {
-          @mixin border-retina (right);
+        .z-dialog__cancel {
+          &::after {
+            @mixin border-retina (right);
+          }
         }
       }
     }
 
-    @descendent btn {
+    @e btn {
       line-height: 40px;
       border: 0;
       background-color: #fff;
@@ -74,11 +74,11 @@
       position: relative;
     }
 
-    @descendent cancel {
+    @e cancel {
       color: #333;
     }
 
-    @descendent confirm {
+    @e confirm {
       color: #00C000;
       width: 100%;
     }
diff --git a/packages/zanui-css/src/popup.pcss b/packages/zanui-css/src/popup.pcss
index 6be7d483a..11338d2c4 100644
--- a/packages/zanui-css/src/popup.pcss
+++ b/packages/zanui-css/src/popup.pcss
@@ -8,7 +8,7 @@
 }
 
 @component-namespace z {
-  @component popup {
+  @b popup {
     position: fixed;
     background-color: #fff;
     top: 50%;
@@ -17,7 +17,7 @@
     backface-visibility: hidden;
     transition: .2s ease-out;
 
-    @modifier top {
+    @m top {
       top: 0;
       right: auto;
       bottom: auto;
@@ -25,7 +25,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @modifier right {
+    @m right {
       top: 50%;
       right: 0;
       bottom: auto;
@@ -33,7 +33,7 @@
       transform: translate3d(0, -50%, 0);
     }
 
-    @modifier bottom {
+    @m bottom {
       top: auto;
       bottom: 0;
       right: auto;
@@ -41,7 +41,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @modifier left {
+    @m left {
       top: 50%;
       right: auto;
       bottom: auto;