diff --git a/build/genExamples.js b/build/genExamples.js
new file mode 100644
index 000000000..36aa3bac1
--- /dev/null
+++ b/build/genExamples.js
@@ -0,0 +1,93 @@
+var markdownIt = require('markdown-it');
+var markdownItContainer = require('markdown-it-container');
+var fs = require('fs');
+var path = require('path');
+var cheerio = require('cheerio');
+var striptags = require('./strip-tags');
+var Components = require('../components.json');
+
+var parser = markdownIt('default', {
+  html: true
+});
+
+var renderVueTemplate = function (html, componentName) {
+  var $ = cheerio.load(html, {
+    decodeEntities: false,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false
+  })
+
+  var output = {
+    style: $.html('style'),
+    script: $.html('script'),
+    'example-block': $.html('example-block')
+  }
+  var result
+
+  $('style').remove()
+  $('script').remove()
+
+  var script = '';
+  if (output.script) {
+    script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);');
+  } else {
+    script = '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>';
+  }
+
+  result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentName}</h1>` + output['example-block'] + '</section></template>\n' +
+    output.style + '\n' +
+    script;
+
+  return result
+}
+
+function convert(str) {
+  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
+    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
+  });
+  return str;
+}
+
+parser.use(markdownItContainer, 'demo', {
+  validate: function(params) {
+    return params.trim().match(/^demo\s*(.*)$/);
+  },
+
+  render: function(tokens, idx) {
+    var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+    if (tokens[idx].nesting === 1) {
+      var description = (m && m.length > 1) ? m[1] : '';
+      var content = tokens[idx + 1].content;
+      var html = convert(striptags.strip(content, ['script', 'style']));
+
+      return `<example-block title="${description}">
+                ${html}
+              </example-block>\n`;
+    }
+    return '';
+  }
+});
+
+var docsDir = path.resolve(__dirname, '../docs');
+for (var item in Components) {
+  var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
+  if (!fs.existsSync(itemMdFile)) {
+    continue;
+  }
+
+  var itemMd = fs.readFileSync(`${docsDir}/examples-docs/${item}.md`).toString();
+  var content = parser.render(itemMd);
+  var result = renderVueTemplate(content, item);
+
+  var exampleVueName = `${docsDir}/examples/${item}.vue`;
+
+  if (!fs.existsSync(exampleVueName)) {
+    fs.closeSync(fs.openSync(exampleVueName, 'w'));
+  }
+  fs.writeFileSync(exampleVueName, result, {
+    encoding: 'utf8'
+  });
+}
+
+console.log('generate examples success!');
+
diff --git a/docs/ExamplesApp.vue b/docs/ExamplesApp.vue
index d939f4f6e..d252e9614 100644
--- a/docs/ExamplesApp.vue
+++ b/docs/ExamplesApp.vue
@@ -64,7 +64,7 @@ export default {
     }
   }
 
-  .page-title {
+  .demo-title {
     font-size: 20px;
     margin: 20px auto;
     text-align: center;
@@ -72,8 +72,8 @@ export default {
     line-height: 1;
   }
 
-  .page-sub-title {
+  .demo-sub-title {
     font-size: 16px;
-    padding: 10px 0;
+    padding: 10px 15px;
   }
 </style>
diff --git a/docs/components/example-block.vue b/docs/components/example-block.vue
new file mode 100644
index 000000000..742290f02
--- /dev/null
+++ b/docs/components/example-block.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="example-block">
+    <h2 class="demo-sub-title" v-text="title"></h2>
+    <slot></slot>
+  </div>  
+</template>
+
+<script>
+export default {
+  props: {
+    title: String
+  }
+};
+</script>
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index 7490ccc20..5178c8a06 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -2,7 +2,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-badge-group active-key="2">
   <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index b4de07f6d..8f69387e6 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -39,7 +39,7 @@
 
 ### 禁用状态
 
-:::demo
+:::demo 禁用状态
 ```html
 <zan-row>
   <zan-col span="24">
@@ -53,7 +53,7 @@
 
 只接受large, normal, small, mini四种尺寸，默认normal。
 
-:::demo
+:::demo 按钮尺寸
 ```html 
 <zan-row>
   <zan-col span="24">
@@ -78,7 +78,7 @@
 
 按钮默认是button标签，可以使用tag属性修改为一个a标签。
 
-:::demo
+:::demo 自定义按钮标签
 ```html 
 <zan-row>
   <zan-col span="24">
@@ -92,7 +92,7 @@
 
 表示loading状态
 
-:::demo
+:::demo loading按钮
 ```html 
 <zan-row>
   <zan-col span="24">
@@ -109,7 +109,7 @@
 
 一组按钮。
 
-:::demo
+:::demo button group
 ```html 
 <div class="button-group">
   <zan-button type="primary" size="small">确认付款</zan-button>
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 5220232bc..281fc69a1 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -4,7 +4,7 @@
 
 当没有底部按钮时，右侧内容会居中显示。
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
@@ -18,7 +18,7 @@
 
 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 
-:::demo
+:::demo 高级用法
 ```html
 <zan-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index 4ca79030f..8c2f6ed9d 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -20,7 +20,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-cell-group>
   <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
@@ -33,7 +33,7 @@ export default {
 
 传入`label`属性，属性值为描述信息的值。
 
-:::demo
+:::demo 标题带描述信息
 ```html
 <zan-cell-group>
   <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
@@ -46,7 +46,7 @@ export default {
 
 传入`icon`属性。
 
-:::demo
+:::demo 带图标
 ```html
 <zan-cell-group>
   <zan-cell title="起码运动馆" icon="home"></zan-cell>
@@ -59,7 +59,7 @@ export default {
 
 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
 
-:::demo
+:::demo 可点击的链接
 ```html
 <zan-cell-group>
   <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
@@ -72,7 +72,7 @@ export default {
 
 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 
-:::demo
+:::demo 高级用法
 ```html
 <zan-cell-group>
   <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index c8cabae7e..a1d07b536 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -39,7 +39,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="zan-checkbox-wrapper">
   <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
@@ -59,7 +59,7 @@ export default {
 
 ### 禁用状态
 
-:::demo
+:::demo 禁用状态
 ```html
 <div class="zan-checkbox-wrapper">
   <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
@@ -79,7 +79,7 @@ export default {
 
 ### Checkbox组
 
-:::demo
+:::demo Checkbox组
 ```html
 <div class="zan-checkbox-wrapper">
   <zan-checkbox-group v-model="result">
@@ -112,7 +112,7 @@ export default {
 
 ### 禁用Checkbox组
 
-:::demo
+:::demo 禁用Checkbox组
 ```html
 <div class="zan-checkbox-wrapper">
   <zan-checkbox-group v-model="result" disabled>
@@ -139,7 +139,7 @@ export default {
 
 ### 与Cell组件一起使用
 
-:::demo
+:::demo 与Cell组件一起使用
 ```html
 <zan-checkbox-group v-model="result">
   <zan-cell-group>
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index da4a96912..aa9c2e495 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -30,7 +30,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-button @click="handleAlertClick">alert</zan-button>
 
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index 8516c48a2..bf78de558 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -6,7 +6,7 @@
 
 根据`type`属性显示不同的输入框。
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-cell-group>
   <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
@@ -20,7 +20,7 @@
 
 不传入`label`属性即可。
 
-:::demo
+:::demo 无label的输入框
 ```html
 <zan-cell-group>
   <zan-field type="text" placeholder="请输入用户名"></zan-field>
@@ -32,7 +32,7 @@
 
 监听组件的`change`事件。
 
-:::demo
+:::demo 监听change事件
 ```html
 <zan-cell-group>
   <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index 46aabee91..bb3458293 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -21,7 +21,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="demo-loading">
   <h2 class="demo-sub-title">渐变深色spinner</h2>
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index f33211c0c..543292b01 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -35,7 +35,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-panel title="标题" desc="标题描述" status="状态">
   <div class="panel-content">
@@ -49,7 +49,7 @@
 
 使用具名`slot`自定义内容。
 
-:::demo
+:::demo 高级用法
 ```html
 <zan-panel title="标题" desc="标题描述" status="状态">
   <zan-card
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index 2fcac8901..10ef86410 100644
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -35,7 +35,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 ```
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index f28fe762d..c8096ab65 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -2,7 +2,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="zan-button-1">
   <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index 92e66068b..41685985a 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -29,7 +29,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="zan-radios">
   <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
@@ -50,7 +50,7 @@ export default {
 
 ### 禁用状态
 
-:::demo
+:::demo 禁用状态
 ```html
 <div class="zan-radios">
   <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
@@ -71,7 +71,7 @@ export default {
 
 ### radio组
 
-:::demo
+:::demo radio组
 ```html
 <div class="zan-radios">
   <zan-radio-group v-model="radio3">
@@ -94,7 +94,7 @@ export default {
 
 ### 与Cell组件一起使用
 
-:::demo
+:::demo 与Cell组件一起使用
 ```html
 <zan-radio-group v-model="radio4">
   <zan-cell-group>
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index af2d6505e..db18c7e76 100644
--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -12,7 +12,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
 <script>
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index 255cae703..462243697 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -32,7 +32,7 @@ export default {
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
@@ -63,7 +63,7 @@ export default {
 
 ### 只显示步骤条
 
-:::demo
+:::demo 只显示步骤条
 ```html
 <zan-steps :active="active">
   <zan-step>买家下单</zan-step>
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 4316d1c96..a1869317d 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -21,7 +21,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="demo-switch__wrapper">
   <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index acdbbb8e4..382b1220d 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -12,7 +12,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="tags-container">
   <zan-tag>返现</zan-tag>
@@ -28,7 +28,7 @@
 
 ### 高级用法
 
-:::demo
+:::demo 高级用法
 ```html
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 0ef76c06d..4bb5f9422 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -2,7 +2,7 @@
 
 ### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <div class="waterfall">
   <div
diff --git a/docs/examples/badge.vue b/docs/examples/badge.vue
index 27b6f12b1..659e1fbee 100644
--- a/docs/examples/badge.vue
+++ b/docs/examples/badge.vue
@@ -1,18 +1,12 @@
-<template>
-  <div class="page-badge">
-    <h1 class="page-title">Badge</h1>
-    
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-badge-group active-key="2">
-      <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
-      <zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
-      <zan-badge mark="2" title="火炽寿司"></zan-badge>
-      <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
-    </zan-badge-group>
-  </div>
-</template>
-<style>
-  .page-badge {
-    padding: 0 15px;
-  }
-</style>
\ No newline at end of file
+<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
+                <zan-badge-group active-key="2">
+  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
+  <zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
+  <zan-badge mark="2" title="火炽寿司"></zan-badge>
+  <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
+</zan-badge-group>
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/button.vue b/docs/examples/button.vue
index 0c31c3bf1..ecbc26d0f 100644
--- a/docs/examples/button.vue
+++ b/docs/examples/button.vue
@@ -1,82 +1,81 @@
-<template>
-  <div class="page-button">
-    <h1 class="page-title">Button</h1>
-    <h2 class="page-sub-title">按钮功能</h2>
-    <zan-row>
-      <zan-col span="24">
-        <zan-button block>default</zan-button>
-      </zan-col>
-      <zan-col span="24">
-        <zan-button type="primary" block>primary</zan-button>
-      </zan-col>
-      <zan-col span="24">
-        <zan-button type="danger" block>danger</zan-button>
-      </zan-col>
-    </zan-row>
+<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button block="">default</zan-button>
+  </zan-col>
+  <zan-col span="24">
+    <zan-button type="primary" block="">primary</zan-button>
+  </zan-col>
+  <zan-col span="24">
+    <zan-button type="danger" block="">danger</zan-button>
+  </zan-col>
+</zan-row>
 
-    <h2 class="page-sub-title">禁用状态</h2>
-    <zan-row>
-      <zan-col span="24">
-        <zan-button disabled block>diabled</zan-button>
-      </zan-col>
-    </zan-row>
+              </example-block><example-block title="禁用状态">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button disabled block="">diabled</zan-button>
+  </zan-col>
+</zan-row>
 
-    <h2 class="page-sub-title">按钮尺寸</h2>
-    <zan-row>
-      <zan-col span="24">
-        <zan-button size="large">large</zan-button>
-      </zan-col>
-    </zan-row>
-    <zan-row gutter="10">
-      <zan-col span="8">
-        <zan-button type="primary" block>normal</zan-button>
-      </zan-col>
-      <zan-col span="8">
-        <zan-button size="small" block>small</zan-button>
-      </zan-col>
-      <zan-col span="8">
-        <zan-button size="mini" block>mini</zan-button>
-      </zan-col>
-    </zan-row>
+              </example-block><example-block title="按钮尺寸">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button size="large">large</zan-button>
+  </zan-col>
+</zan-row>
+<zan-row gutter="10">
+  <zan-col span="8">
+    <zan-button type="primary" block="">normal</zan-button>
+  </zan-col>
+  <zan-col span="8">
+    <zan-button size="small" block="">small</zan-button>
+  </zan-col>
+  <zan-col span="8">
+    <zan-button size="mini" block="">mini</zan-button>
+  </zan-col>
+</zan-row>
 
-    <h2 class="page-sub-title">自定义按钮标签</h2>
-    <zan-row>
-      <zan-col span="24">
-        <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
-      </zan-col>
-    </zan-row>
+              </example-block><example-block title="自定义按钮标签">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
+  </zan-col>
+</zan-row>
 
-    <h2 class="page-sub-title">loading</h2>
-    <zan-row>
-      <zan-col span="24">
-        <zan-button type="primary" loading block>loading</zan-button>
-      </zan-col>
-      <zan-col span="24">
-        <zan-button loading block></zan-button>
-      </zan-col>
-    </zan-row>
+              </example-block><example-block title="loading按钮">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button type="primary" loading="" block="">loading</zan-button>
+  </zan-col>
+  <zan-col span="24">
+    <zan-button loading="" block=""></zan-button>
+  </zan-col>
+</zan-row>
 
-    <h2 class="page-sub-title">button group</h2>
-    <div class="button-group">
-      <zan-button type="primary" size="small">确认付款</zan-button>
-      <zan-button size="small">确认收货</zan-button>
-      <zan-button size="small">取消订单</zan-button>
-    </div>
-  </div>
-</template>
+              </example-block><example-block title="button group">
+                <div class="button-group">
+  <zan-button type="primary" size="small">确认付款</zan-button>
+  <zan-button size="small">确认收货</zan-button>
+  <zan-button size="small">取消订单</zan-button>
+</div>
 
+              </example-block></section></template>
 <style>
-  @component-namespace page {
-    @b button {
+@component-namespace demo {
+  @b button {
+    .zan-row {
+      padding: 0 20px;
+    }
+    .zan-col {
+      margin-bottom: 10px;
+    }
+    .button-group {
+      font-size: 0;
       padding: 0 20px;
     }
   }
-  @component-namespace zan {
-    @b col {
-      margin-bottom: 10px;
-    }
-  }
-  .button-group {
-    font-size: 0;
-  }
+}
 </style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/card.vue b/docs/examples/card.vue
index 8dbe6a4f0..e3ae90791 100644
--- a/docs/examples/card.vue
+++ b/docs/examples/card.vue
@@ -1,37 +1,24 @@
-<template>
-  <div class="page-card">
-    <h1 class="page-title">Card</h1>
+<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
+                <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</zan-card>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-card
-      title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
-      desc="描述"
-      thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    </zan-card>
-
-    <h2 class="page-sub-title">高级用法</h2>
-    <zan-card
-      title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
-      desc="商品SKU1，商品SKU2"
-      thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-      <div class="zan-card__row" slot="title">
-        <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-        <span class="zan-card__price">¥ 2.00</span>
-      </div>
-      <div class="zan-card__row" slot="desc">
-        <h4 class="zan-card__desc">商品sku</h4>
-        <span class="zan-card__num">x 2</span>
-      </div>
-      <div class="zan-card__footer" slot="footer">
-        <zan-button size="mini">按钮一</zan-button>
-        <zan-button size="mini">按钮二</zan-button>
-      </div>
-    </zan-card>
+              </example-block><example-block title="高级用法">
+                <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="zan-card__row" slot="title">
+    <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="zan-card__price">¥ 2.00</span>
   </div>
-</template>
+  <div class="zan-card__row" slot="desc">
+    <h4 class="zan-card__desc">商品sku</h4>
+    <span class="zan-card__num">x 2</span>
+  </div>
+  <div class="zan-card__footer" slot="footer">
+    <zan-button size="mini">按钮一</zan-button>
+    <zan-button size="mini">按钮二</zan-button>
+  </div>
+</zan-card>
 
-<style>
-.page-sub-title {
-  padding: 15px;
-}
-</style>
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/cell.vue b/docs/examples/cell.vue
index 5180d5ccb..8973ac33d 100644
--- a/docs/examples/cell.vue
+++ b/docs/examples/cell.vue
@@ -1,45 +1,48 @@
-<template>
-  <div class="page-cell">
-    <h1 class="page-title">Cell</h1>
-    
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-cell-group>
-      <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
-      <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
-    </zan-cell-group>
+<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
+                <zan-cell-group>
+  <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+  <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">标题带描述信息</h2>
-    <zan-cell-group>
-      <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
-      <zan-cell title="单元格2" label="描述信息"></zan-cell>
-    </zan-cell-group>
+              </example-block><example-block title="标题带描述信息">
+                <zan-cell-group>
+  <zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
+  <zan-cell title="单元格2" label="描述信息"></zan-cell>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">带图标</h2>
-    <zan-cell-group>
-      <zan-cell title="起码运动馆" icon="home"></zan-cell>
-      <zan-cell title="线下门店" icon="location"></zan-cell>
-    </zan-cell-group>
+              </example-block><example-block title="带图标">
+                <zan-cell-group>
+  <zan-cell title="起码运动馆" icon="home"></zan-cell>
+  <zan-cell title="线下门店" icon="location"></zan-cell>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">可点击的链接</h2>
-    <zan-cell-group>
-      <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
-      <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
-    </zan-cell-group>
+              </example-block><example-block title="可点击的链接">
+                <zan-cell-group>
+  <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">高级用法</h2>
-    <zan-cell-group>
-      <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
-        <template slot="title">
-          <span class="zan-cell-text">起码运动馆</span>
-          <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
-        </template>
-      </zan-cell>
-      <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
-    </zan-cell-group>
-  </div>
-</template>
+              </example-block><example-block title="高级用法">
+                <zan-cell-group>
+  <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
+    <template slot="title">
+      <span class="zan-cell-text">起码运动馆</span>
+      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+    </template>
+  </zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
+</zan-cell-group>
 
+              </example-block></section></template>
+<style>
+.official-img {
+  width: 31px;
+  vertical-align: middle;
+  border: 0;
+}
+</style>
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     handleClick() {
@@ -47,16 +50,4 @@ export default {
     }
   }
 };
-</script>
-
-<style>
-.official-img {
-  width: 31px;
-  vertical-align: middle;
-  border: 0;
-}
-
-.page-sub-title {
-  padding: 25px 15px;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/docs/examples/checkbox.vue b/docs/examples/checkbox.vue
index e4ac8b63f..d784aee41 100644
--- a/docs/examples/checkbox.vue
+++ b/docs/examples/checkbox.vue
@@ -1,38 +1,62 @@
-<template>
-  <div class="page-checkbox">
-    <h1 class="page-title">Checkbox</h1>
+<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+</div>
 
-    <div class="checkbox-demo-wrapper">
-      <h2 class="page-sub-title">基础用法</h2>
-      <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
 
-      <h2 class="page-sub-title">禁用状态</h2>
-      <zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
 
-      <h2 class="page-sub-title">Checkbox组</h2>
-      <zan-checkbox-group v-model="result">
-        <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-      </zan-checkbox-group>
+              </example-block><example-block title="禁用状态">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+</div>
 
-      <h2 class="page-sub-title">禁用Checkbox组</h2>
-      <zan-checkbox-group v-model="result" disabled>
-        <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-      </zan-checkbox-group>
 
-      <h2 class="page-sub-title">与Cell组件一起使用</h2>
-    </div>
 
-    <zan-checkbox-group v-model="result">
-      <zan-cell-group>
-        <zan-cell v-for="item in list">
-          <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
-        </zan-cell>
-      </zan-cell-group>
-    </zan-checkbox-group>
-  </div>  
-</template>
+              </example-block><example-block title="Checkbox组">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result">
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
 
+
+
+              </example-block><example-block title="禁用Checkbox组">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result" disabled>
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
+
+
+
+              </example-block><example-block title="与Cell组件一起使用">
+                <zan-checkbox-group v-model="result">
+  <zan-cell-group>
+    <zan-cell v-for="item in list">
+      <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
+    </zan-cell>
+  </zan-cell-group>
+</zan-checkbox-group>
+
+
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b checkbox {
+    .zan-checkbox-wrapper {
+      padding: 0 20px;
+
+      .zan-checkbox {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
@@ -53,14 +77,4 @@ export default {
     }
   }
 };
-</script>
-
-<style>
-.checkbox-demo-wrapper {
-  padding: 0 15px;
-
-  .zan-checkbox {
-    margin: 10px 0;
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/docs/examples/dialog.vue b/docs/examples/dialog.vue
index c4766c7c4..84234f0c7 100644
--- a/docs/examples/dialog.vue
+++ b/docs/examples/dialog.vue
@@ -1,19 +1,14 @@
-<template>
-  <div class="page-dialog">
-    <h1 class="page-title">Dialog</h1>
+<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
+                <zan-button @click="handleAlertClick">alert</zan-button>
 
-    <div class="zan-button-1">
-      <zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
-    </div>
+<zan-button @click="handleConfirmClick">confirm</zan-button>
 
-    <div class="zan-button-1">
-      <zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
-    </div>
 
-  </div>
-</template>
+
+              </example-block></section></template>
 
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 import { Dialog } from 'src/index';
 
 export default {
@@ -39,16 +34,4 @@ export default {
     }
   }
 };
-</script>
-
-<style>
-@component-namespace page {
-  @b dialog {
-    padding: 0 15px;
-
-    .zan-button-1 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/docs/examples/field.vue b/docs/examples/field.vue
index 265090b22..af4575e8e 100644
--- a/docs/examples/field.vue
+++ b/docs/examples/field.vue
@@ -1,44 +1,21 @@
-<template>
-  <div class="page-field">
-    <h1 class="page-title">Field</h1>
+<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
+                <zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+  <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
+  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-cell-group>
-      <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
-      <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
-      <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
-    </zan-cell-group>
+              </example-block><example-block title="无label的输入框">
+                <zan-cell-group>
+  <zan-field type="text" placeholder="请输入用户名"></zan-field>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">无label的输入框</h2>
-    <zan-cell-group>
-      <zan-field type="text" placeholder="请输入用户名"></zan-field>
-    </zan-cell-group>
+              </example-block><example-block title="监听change事件">
+                <zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+</zan-cell-group>
 
-    <h2 class="page-sub-title">监听change事件</h2>
-    <zan-cell-group>
-      <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
-    </zan-cell-group>
-  </div>
-</template>
+              </example-block></section></template>
 
 <script>
-export default {
-  data() {
-    return {
-      name: ''
-    };
-  },
-
-  methods: {
-    handleChange() {
-      console.log(this.name);
-    }
-  }
-};
-</script>
-
-<style>
-.page-sub-title {
-  padding: 20px 15px;
-}
-</style>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/image-preview.vue b/docs/examples/image-preview.vue
index c7be82c6f..24e5d5956 100644
--- a/docs/examples/image-preview.vue
+++ b/docs/examples/image-preview.vue
@@ -1,30 +1,4 @@
-<template>
-  <div class="page-image-pewview">
-    <h1 class="page-title">Image Preview</h1>
-
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-button @click="previewImage">click me</zan-button>
-    <zan-button @click="previewImage2">click me</zan-button>
-  </div>
-</template>
+<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
 
 <script>
-import { ImagePreview } from 'src/index';
-
-export default {
-  data() {
-    return {
-      preview: true
-    };
-  },
-
-  methods: {
-    previewImage() {
-      ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FjVBWm29JBob2gj9RC86MOD38RNf.jpg');
-    },
-    previewImage2() {
-      ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FseigsLj7DceULRKWhXsIsrkq1vT.jpg');
-    }
-  }
-};
-</script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/layout.vue b/docs/examples/layout.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/docs/examples/loading.vue b/docs/examples/loading.vue
index 35d406d04..ff83d7b07 100644
--- a/docs/examples/loading.vue
+++ b/docs/examples/loading.vue
@@ -1,28 +1,26 @@
-<template>
-  <div class="page-loading">
-    <h1 class="page-title">Loading</h1>
-    <h2 class="page-sub-title">渐变深色spinner</h2>
-    <div class="page-loading__example">
-      <zan-loading class="some-customized-class"></zan-loading>
-    </div>
-    <h2 class="page-sub-title">渐变浅色spinner</h2>
-    <div class="page-loading__example page-loading__example--with-bg">
-      <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
-    </div>
-    <h2 class="page-sub-title">单色spinner</h2>
-    <div class="page-loading__example">
-      <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
-    </div>
-    <h2 class="page-sub-title">单色spinner</h2>
-    <div class="page-loading__example">
-      <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
-    </div>
+<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
+                <div class="demo-loading">
+  <h2 class="demo-sub-title">渐变深色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class"></zan-loading>
   </div>
-</template>
-
+  <h2 class="demo-sub-title">渐变浅色spinner</h2>
+  <div class="demo-loading__example demo-loading__example--with-bg">
+    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">单色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">单色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
+  </div>
+</div>
 
+              </example-block></section></template>
 <style>
-.page-loading__example{
+.demo-loading__example{
   width: 30px;
   height: 30px;
   padding: 20px;
@@ -31,11 +29,13 @@
   border: 1px solid transparent;
 }
 
-.page-loading__example--with-bg {
+.demo-loading__example--with-bg {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.page-loading {
+.demo-loading {
   padding: 0 20px;
 }
 </style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/panel.vue b/docs/examples/panel.vue
index f3bb9a73e..bdce2d348 100644
--- a/docs/examples/panel.vue
+++ b/docs/examples/panel.vue
@@ -1,80 +1,65 @@
-<template>
-  <div class="page-panel">
-    <h1 class="page-title">Panel</h1>
+<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
+                <zan-panel title="标题" desc="标题描述" status="状态">
+  <div class="panel-content">
+    panel内容
+  </div>
+</zan-panel>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-panel title="标题" desc="标题描述" status="状态">
-      <zan-card
-        title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
-        desc="商品SKU1，商品SKU2"
-        thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-        <div class="zan-card__row" slot="title">
-          <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-          <span class="zan-card__price">¥ 2.00</span>
-        </div>
-        <div class="zan-card__row" slot="desc">
-          <h4 class="zan-card__desc">商品sku</h4>
-          <span class="zan-card__num">x 2</span>
-        </div>
-        <div class="zan-card__footer" slot="footer">
-          <zan-button size="mini">按钮一</zan-button>
-          <zan-button size="mini">按钮二</zan-button>
-        </div>
-      </zan-card>
-      <div class="zan-panel-sum">
-        合计：<span>¥ 1999.90</span>
-      </div>
-    </zan-panel>
-
-    <h2 class="page-sub-title">高级用法</h2>
-    <zan-panel title="标题" desc="标题描述" status="状态">
-      <zan-card
-        title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
-        desc="商品SKU1，商品SKU2"
-        thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-        <div class="zan-card__row" slot="title">
-          <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-          <span class="zan-card__price">¥ 2.00</span>
-        </div>
-        <div class="zan-card__row" slot="desc">
-          <h4 class="zan-card__desc">商品sku</h4>
-          <span class="zan-card__num">x 2</span>
-        </div>
-        <div class="zan-card__footer" slot="footer">
-          <zan-button size="mini">按钮一</zan-button>
-          <zan-button size="mini">按钮二</zan-button>
-        </div>
-      </zan-card>
-      <div class="zan-panel-sum">
-        合计：<span>¥ 1999.90</span>
-      </div>
-      <div class="zan-panel-buttons" slot="footer">
-        <zan-button size="small">按钮一</zan-button>
-        <zan-button size="small" type="danger">按钮二</zan-button>
-      </div>
-    </zan-panel>
-  </div>  
-</template>
+              </example-block><example-block title="高级用法">
+                <zan-panel title="标题" desc="标题描述" status="状态">
+  <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="zan-card__row" slot="title">
+      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="zan-card__price">¥ 2.00</span>
+    </div>
+    <div class="zan-card__row" slot="desc">
+      <h4 class="zan-card__desc">商品sku</h4>
+      <span class="zan-card__num">x 2</span>
+    </div>
+    <div class="zan-card__footer" slot="footer">
+      <zan-button size="mini">按钮一</zan-button>
+      <zan-button size="mini">按钮二</zan-button>
+    </div>
+  </zan-card>
+  <div class="zan-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+  <div class="zan-panel-buttons" slot="footer">
+    <zan-button size="small">按钮一</zan-button>
+    <zan-button size="small" type="danger">按钮二</zan-button>
+  </div>
+</zan-panel>
 
+              </example-block></section></template>
 <style>
-.zan-panel-sum {
-  background: #fff;
-  text-align: right;
-  font-size: 14px;
-  color: #333;
-  line-height: 30px;
-  padding-right: 15px;
+@component-namespace demo {
+  @b panel {
+    .zan-panel-sum {
+      background: #fff;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+      line-height: 30px;
+      padding-right: 15px;
 
-  span {
-    color: red;
-  }
-}
+      span {
+        color: red;
+      }
+    }
 
-.zan-panel-buttons {
-  text-align: right;
+    .zan-panel-buttons {
+      text-align: right;
 
-  .zan-button {
-    margin-left: 5px;
+      .zan-button {
+        margin-left: 5px;
+      }
+    }
+
+    .panel-content {
+      padding: 20px;
+    }
   }
 }
 </style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/picker.vue b/docs/examples/picker.vue
index d9d41f34b..8ba5993fe 100644
--- a/docs/examples/picker.vue
+++ b/docs/examples/picker.vue
@@ -1,13 +1,10 @@
-<template>
-  <div class="page-picker">
-    <h1 class="page-title">Picker</h1>
+<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
+                <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
-  </div>  
-</template>
+              </example-block></section></template>
 
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 const citys = {
   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
@@ -36,4 +33,4 @@ export default {
     }
   }
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/docs/examples/popup.vue b/docs/examples/popup.vue
index 5fce33dd5..b7ca322c1 100644
--- a/docs/examples/popup.vue
+++ b/docs/examples/popup.vue
@@ -1,93 +1,35 @@
-<template>
-  <div class="page-popup">
-    <h1 class="page-title">Popup</h1>
+<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
+                <div class="zan-button-1">
+  <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
+  xxxx
+</zan-popup>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <div class="zan-button-1">
-      <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
-    </div>
-    <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-      xxxx
-    </zan-popup>
+<div class="zan-button-1">
+  <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
+  更新成功
+</zan-popup>
 
-    <div class="zan-button-1">
-      <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
-    </div>
-    <zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
-      更新成功
-    </zan-popup>
+<div class="zan-button-1">
+  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
+  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+</zan-popup>
 
-    <div class="zan-button-1">
-      <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
-    </div>
-    <zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
-      <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
-    </zan-popup>
+<div class="zan-button-1">
+  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
+  一些内容
+</zan-popup>
 
-    <div class="zan-button-1">
-      <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
-    </div>
-    <zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
-      一些内容
-    </zan-popup>
-  </div>
-</template>
+
+
+              </example-block></section></template>
 
 <script>
-export default {
-  data() {
-    return {
-      popupShow1: false,
-      popupShow2: false,
-      popupShow3: false,
-      popupShow4: false
-    }
-  },
-
-  watch: {
-    popupShow2(val) {
-      if (val) {
-        setTimeout(() => {
-          this.popupShow2 = false;
-        }, 2000);
-      }
-    }
-  }
-};
-</script>
-
-<style>
-.zan-popup-1 {
-  width: 100%;
-  height: 200px;
-}
-
-.zan-popup-2 {
-  width: 100%;
-  line-height: 44px;
-  background-color: rgba(0, 0, 0, 0.701961);
-  text-align: center;
-  color: #fff;
-}
-
-.zan-popup-3 {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.zan-popup-4 {
-  width: 50%;
-  height: 200px;
-  background: #fff;
-  border-radius: 10px;
-}
-
-.page-popup .zan-button-1 {
-  margin-bottom: 10px;
-}
-
-.page-sub-title {
-  padding: 20px 15px;
-}
-</style>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/radio.vue b/docs/examples/radio.vue
index 780c71f39..c6e78c9b1 100644
--- a/docs/examples/radio.vue
+++ b/docs/examples/radio.vue
@@ -1,41 +1,55 @@
-<template>
-  <div class="page-radio">
-    <h1 class="page-title">Radio</h1>
+<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
+                <div class="zan-radios">
+  <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+  <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+</div>
 
-    <div class="radio-demo-wrapper">
-      <h2 class="page-sub-title">基础用法</h2>
-      <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
-      <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
 
-      <h2 class="page-sub-title">禁用状态</h2>
-      <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
-      <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
 
-      <h2 class="page-sub-title">radio组</h2>
-      <zan-radio-group v-model="radio3">
-        <zan-radio name="1">单选框1</zan-radio>
-        <zan-radio name="2">单选框2</zan-radio>
-      </zan-radio-group>
+              </example-block><example-block title="禁用状态">
+                <div class="zan-radios">
+  <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+  <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+</div>
 
-      <h2 class="page-sub-title">禁用radio组</h2>
-      <zan-radio-group v-model="radio3" disabled>
-        <zan-radio name="1">单选框1</zan-radio>
-        <zan-radio name="2">单选框2</zan-radio>
-      </zan-radio-group>
 
-      <h2 class="page-sub-title">与Cell组件一起使用</h2>
-    </div>
 
-    <zan-radio-group v-model="radio4">
-      <zan-cell-group>
-        <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
-        <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
-      </zan-cell-group>
-    </zan-radio-group>
-  </div>
-</template>
+              </example-block><example-block title="radio组">
+                <div class="zan-radios">
+  <zan-radio-group v-model="radio3">
+    <zan-radio name="1">单选框1</zan-radio>
+    <zan-radio name="2">单选框2</zan-radio>
+  </zan-radio-group>
+</div>
+  
 
+
+              </example-block><example-block title="与Cell组件一起使用">
+                <zan-radio-group v-model="radio4">
+  <zan-cell-group>
+    <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
+    <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
+  </zan-cell-group>
+</zan-radio-group>
+
+
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b radio {
+    .zan-radios {
+      padding: 0 20px;
+
+      .zan-radio {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
@@ -46,14 +60,4 @@ export default {
     };
   }
 };
-</script>
-
-<style>
-.radio-demo-wrapper {
-  padding: 0 15px;
-
-  .zan-radio {
-    margin: 10px 0;
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/docs/examples/search.vue b/docs/examples/search.vue
index 4f3893c13..0debad168 100644
--- a/docs/examples/search.vue
+++ b/docs/examples/search.vue
@@ -1,4 +1,11 @@
+<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
+                <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+
+
+              </example-block></section></template>
+
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     goSearch(value) {
@@ -6,20 +13,4 @@ export default {
     }
   }
 };
-</script>
-
-<template>
-  <div class="page-search">
-    <h1 class="page-title">Search</h1>
-    
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-search placeholder="商品名称" @search="goSearch">
-    </zan-search>
-  </div>
-</template>
-
-<style>
-  .page-badge {
-    padding: 0 15px;
-  }
-</style>
+</script>
\ No newline at end of file
diff --git a/docs/examples/steps.vue b/docs/examples/steps.vue
index 7c122680b..a9fc11a45 100644
--- a/docs/examples/steps.vue
+++ b/docs/examples/steps.vue
@@ -1,27 +1,39 @@
-<template>
-  <div class="page-steps">
-    <h1 class="page-title">Steps</h1>
+<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
+                <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
-      <zan-step>买家下单</zan-step>
-      <zan-step>商家接单</zan-step>
-      <zan-step>买家提货</zan-step>
-      <zan-step>交易完成</zan-step>
-    </zan-steps>
-    <zan-button @click="nextStep">下一步</zan-button>
+<zan-button @click="nextStep">下一步</zan-button>
 
-    <h2 class="page-sub-title">只显示步骤条</h2>
-    <zan-steps :active="active">
-      <zan-step>买家下单</zan-step>
-      <zan-step>商家接单</zan-step>
-      <zan-step>买家提货</zan-step>
-      <zan-step>交易完成</zan-step>
-    </zan-steps>
-  </div>
-</template>
 
+
+              </example-block><example-block title="只显示步骤条">
+                <zan-steps :active="active">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b steps {
+    .steps-success {
+      color: #06bf04;
+    }
+
+    .zan-button {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
 <script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
@@ -35,20 +47,4 @@ export default {
     }
   }
 }
-</script>
-
-<style>
-.steps-success {
-  color: #06bf04;
-}
-
-.page-steps {
-  .page-sub-title {
-    padding: 20px 15px;
-  }
-
-  .zan-button {
-    margin-left: 15px;
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/docs/examples/switch.vue b/docs/examples/switch.vue
index 87c399acf..cf6776b7f 100644
--- a/docs/examples/switch.vue
+++ b/docs/examples/switch.vue
@@ -1,67 +1,44 @@
-<template>
-  <div class="page-switch">
-    <h1 class="page-title">Switch</h1>
+<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
+                <div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+  <div class="demo-switch__text">{{switchStateText}}</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+  <div class="demo-switch__text">ON, DISABLED</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+  <div class="demo-switch__text">OFF, DISABLED</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+  <div class="demo-switch__text">ON, LOADING</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+  <div class="demo-switch__text">OFF, LOADING</div>
+</div>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <div class="page-switch">
-      <div class="page-switch__wrapper">
-        <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
-        <div class="page-switch__text">{{switchStateText}}</div>
-      </div>
-      <div class="page-switch__wrapper">
-        <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
-        <div class="page-switch__text">ON, DISABLED</div>
-      </div>
-      <div class="page-switch__wrapper">
-        <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
-        <div class="page-switch__text">OFF, DISABLED</div>
-      </div>
-      <div class="page-switch__wrapper">
-        <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
-        <div class="page-switch__text">ON, LOADING</div>
-      </div>
-      <div class="page-switch__wrapper">
-        <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
-        <div class="page-switch__text">OFF, LOADING</div>
-      </div>
-    </div>
-  </div>
-</template>
 
-<script>
-export default {
-  data() {
-    return {
-      switchState: true
-    };
-  },
-  computed: {
-    switchStateText() {
-      return this.switchState ? 'ON' : 'OFF';
-    }
-  },
-  methods: {
-    updateState(newState) {
-      this.switchState = newState;
-    }
-  }
-};
-</script>
 
+              </example-block></section></template>
 <style>
-  @component-namespace page {
-    @component switch {
+  @component-namespace demo {
+    @b switch {
       padding: 0 15px 15px;
 
-      @descendent wrapper {
+      @e wrapper {
         width: 33.33%;
         float: left;
         text-align: center;
       }
 
-      @descendent text {
+      @e text {
         margin: 20px 0;
       }
     }
   }
 </style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/tag.vue b/docs/examples/tag.vue
index 0bcc78040..717c19bdc 100644
--- a/docs/examples/tag.vue
+++ b/docs/examples/tag.vue
@@ -1,47 +1,33 @@
-<template>
-  <div class="page-cell">
-    <h1 class="page-title">Tag</h1>
+<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
+                <div class="tags-container">
+  <zan-tag>返现</zan-tag>
+  <zan-tag :plain="true">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="danger">返现</zan-tag>
+  <zan-tag type="danger">四字标签</zan-tag>
+  <zan-tag type="danger">一</zan-tag>
+</div>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <div>
-      <div class="tags-container">
-        <zan-tag>返现</zan-tag>
-        <zan-tag :plain="true">返现</zan-tag>
-      </div>
-      <div class="tags-container">
-        <zan-tag type="danger">返现</zan-tag>
-        <zan-tag type="danger">四字标签</zan-tag>
-        <zan-tag type="danger">一</zan-tag>
-      </div>
-      <div class="tags-container">
-        <zan-tag type="danger">返现</zan-tag>
-        <zan-tag :plain="true" type="danger">返现</zan-tag>
-      </div>
-      <div class="tags-container">
-        <zan-tag type="primary">返现</zan-tag>
-        <zan-tag :plain="true" type="primary">返现</zan-tag>
-      </div>
-      <div class="tags-container">
-        <zan-tag type="success">返现</zan-tag>
-        <zan-tag :plain="true" type="success">返现</zan-tag>
-      </div>
-      <div class="tags-container">
-        <zan-tag type="danger" :mark="true">返现</zan-tag>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {}
-};
-</script>
+              </example-block><example-block title="高级用法">
+                <div class="tags-container">
+  <zan-tag type="danger">返现</zan-tag>
+  <zan-tag :plain="true" type="danger">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="primary">返现</zan-tag>
+  <zan-tag :plain="true" type="primary">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="success">返现</zan-tag>
+  <zan-tag :plain="true" type="success">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="danger" :mark="true">返现</zan-tag>
+</div>
 
+              </example-block></section></template>
 <style>
-.page-sub-title {
-  padding: 25px 15px;
-}
 .tags-container {
   padding: 5px 15px;
 
@@ -50,3 +36,5 @@ export default {
   }
 }
 </style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples/waterfall.vue b/docs/examples/waterfall.vue
index 71b84f287..683d2b7ac 100644
--- a/docs/examples/waterfall.vue
+++ b/docs/examples/waterfall.vue
@@ -1,64 +1,18 @@
-<template>
-  <div class="page-card">
-    <h1 class="page-title">Waterfall</h1>
-
-    <h2 class="page-sub-title">基础用法</h2>
-    <div>
-      <div
-        v-waterfall-lower="loadMore"
-        v-waterfall-upper="loadMoreUpper"
-        waterfall-disabled="isWaterfallDisabled"
-        waterfall-offset="400"
-      >
-        <div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
-        <!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
-        <div style="text-align: center;">loading</div>
-      </div>
+<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
+                <div class="waterfall">
+  <div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
+    <div class="waterfall-item" v-for="item in list" style="text-align: center;">
+      {{ item }}
+    </div>
+    <div v-if="loading" style="text-align: center;">
+      loading
     </div>
   </div>
-</template>
+</div>
+
+
+
+              </example-block></section></template>
 
 <script>
-export default {
-  data() {
-    return {
-      list: [1, 2, 3, 4, 5],
-      loading: false,
-      finished: false
-    };
-  },
-  methods: {
-    loadMore() {
-      if (this.list.length >= 200) {
-        this.finished = true;
-        return;
-      }
-
-      this.loading = true;
-      setTimeout(() => {
-        let lastNumber = this.list[this.list.length - 1];
-        for (let i = 0; i < 5; i++) {
-          lastNumber += 1;
-          this.list.push(lastNumber);
-        }
-        this.loading = false;
-      }, 2500);
-    },
-    loadMoreUpper() {
-      if (this.list[0] < 0) return;
-      this.list.unshift(-1);
-    }
-  },
-  computed: {
-    isWaterfallDisabled: function() {
-      return this.loading || this.finished;
-    }
-  }
-};
-</script>
-
-<style>
-.page-sub-title {
-  padding: 15px;
-}
-</style>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file