From e9807c1ad36893bcfaf2c56b04cb84c6046f2921 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Tue, 18 Apr 2017 18:02:33 +0800
Subject: [PATCH] fix wap ui

---
 build/genExamples.js                   | 10 ++++++----
 docs/examples-dist/actionsheet.vue     |  2 +-
 docs/examples-dist/badge.vue           |  2 +-
 docs/examples-dist/button.vue          |  4 ++--
 docs/examples-dist/card.vue            |  2 +-
 docs/examples-dist/cell.vue            |  2 +-
 docs/examples-dist/checkbox.vue        |  2 +-
 docs/examples-dist/datetime-picker.vue |  2 +-
 docs/examples-dist/dialog.vue          | 11 ++++++++++-
 docs/examples-dist/field.vue           |  2 +-
 docs/examples-dist/icon.vue            |  2 +-
 docs/examples-dist/image-preview.vue   |  2 +-
 docs/examples-dist/layout.vue          |  2 +-
 docs/examples-dist/lazyload.vue        |  2 +-
 docs/examples-dist/loading.vue         |  2 +-
 docs/examples-dist/panel.vue           |  2 +-
 docs/examples-dist/picker.vue          |  2 +-
 docs/examples-dist/popup.vue           |  2 +-
 docs/examples-dist/progress.vue        |  2 +-
 docs/examples-dist/quantity.vue        |  2 +-
 docs/examples-dist/radio.vue           |  2 +-
 docs/examples-dist/search.vue          |  2 +-
 docs/examples-dist/steps.vue           |  2 +-
 docs/examples-dist/swipe.vue           |  2 +-
 docs/examples-dist/switch.vue          |  2 +-
 docs/examples-dist/tab.vue             |  2 +-
 docs/examples-dist/tag.vue             |  2 +-
 docs/examples-dist/toast.vue           |  2 +-
 docs/examples-dist/uploader.vue        |  8 +-------
 docs/examples-dist/waterfall.vue       |  2 +-
 docs/examples-docs/button.md           |  2 +-
 docs/src/ExamplesApp.vue               | 21 +++++++++++----------
 docs/src/components/demo-list.vue      |  8 ++++++--
 docs/src/components/mobile-nav.vue     |  2 ++
 docs/src/nav.config.js                 |  1 +
 35 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/build/genExamples.js b/build/genExamples.js
index 3152b4f4d..44e8bf33d 100644
--- a/build/genExamples.js
+++ b/build/genExamples.js
@@ -12,7 +12,7 @@ var parser = markdownIt('default', {
   html: true
 });
 
-var renderVueTemplate = function (html, componentName) {
+var renderVueTemplate = function(html, componentTitle) {
   var $ = cheerio.load(html, {
     decodeEntities: false,
     lowerCaseAttributeNames: false,
@@ -36,12 +36,14 @@ var renderVueTemplate = function (html, componentName) {
     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' +
+  var componentName = componentTitle.split(' ')[0];
+  componentName = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);
+  result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentTitle}</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) {
@@ -94,7 +96,7 @@ for (var i = 0; i < components.length; i++) {
 
   var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
   var content = parser.render(itemMd);
-  var result = renderVueTemplate(content, item.path.slice(1));
+  var result = renderVueTemplate(content, item.title);
 
   var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
 
diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
index 8fe60d92a..5914e6434 100644
--- a/docs/examples-dist/actionsheet.vue
+++ b/docs/examples-dist/actionsheet.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-actionsheet"><h1 class="demo-title">actionsheet</h1><example-block title="基础用法">
+<template><section class="demo-actionSheet"><h1 class="demo-title">ActionSheet 行动按钮</h1><example-block title="基础用法">
                 <div class="zan-row">
   <zan-button @click="show1 = true">弹出actionsheet</zan-button>
 </div>
diff --git a/docs/examples-dist/badge.vue b/docs/examples-dist/badge.vue
index 9d0eba259..4f7bc5c45 100644
--- a/docs/examples-dist/badge.vue
+++ b/docs/examples-dist/badge.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
+<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
                 <zan-badge-group>
   <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
   <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index 2a3051d39..2c1aea4b3 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
+<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>
@@ -77,7 +77,7 @@
 @component-namespace demo {
   @b button {
     .zan-row {
-      padding: 0 20px;
+      padding: 0 15px;
     }
     .zan-col {
       margin-bottom: 10px;
diff --git a/docs/examples-dist/card.vue b/docs/examples-dist/card.vue
index df1e123ae..061790da3 100644
--- a/docs/examples-dist/card.vue
+++ b/docs/examples-dist/card.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
+<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>
 
diff --git a/docs/examples-dist/cell.vue b/docs/examples-dist/cell.vue
index 4561a5ec0..b6848b9ee 100644
--- a/docs/examples-dist/cell.vue
+++ b/docs/examples-dist/cell.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
+<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>
diff --git a/docs/examples-dist/checkbox.vue b/docs/examples-dist/checkbox.vue
index 531edf027..302e1893b 100644
--- a/docs/examples-dist/checkbox.vue
+++ b/docs/examples-dist/checkbox.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
+<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>
diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue
index 9a0e2ced4..6f099f3e2 100644
--- a/docs/examples-dist/datetime-picker.vue
+++ b/docs/examples-dist/datetime-picker.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-datetime-picker"><h1 class="demo-title">datetime-picker</h1><example-block title="基础用法">
+<template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
                 <zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
 </zan-datetime-picker>
 
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
index cc543fd0b..a9e030938 100644
--- a/docs/examples-dist/dialog.vue
+++ b/docs/examples-dist/dialog.vue
@@ -1,5 +1,6 @@
-<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="消息提示">
+<template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
                 <zan-button @click="handleAlertClick">alert</zan-button>
+<zan-button @click="handleAlert2Click">无标题alert</zan-button>
 
 
 
@@ -36,6 +37,14 @@ export default {
       });
     },
 
+    handleAlert2Click() {
+      Dialog.alert({
+        message: '无标题alert'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
     handleConfirmClick() {
       Dialog.confirm({
         title: 'confirm标题',
diff --git a/docs/examples-dist/field.vue b/docs/examples-dist/field.vue
index 45aa9d939..320ebfdd6 100644
--- a/docs/examples-dist/field.vue
+++ b/docs/examples-dist/field.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
+<template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
                 <zan-cell-group>
   <zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
   <zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
index bae34702c..e0cf80c4c 100644
--- a/docs/examples-dist/icon.vue
+++ b/docs/examples-dist/icon.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
+<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
                 <zan-row>
   <zan-col span="8">
    <zan-icon name="qr-invalid"></zan-icon>
diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 37d71469b..3e4f0d49e 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1><example-block title="">
+<template><section class="demo-imagePreview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="">
                 <zan-button @click="handleImagePreview">预览图片</zan-button>
 
 
diff --git a/docs/examples-dist/layout.vue b/docs/examples-dist/layout.vue
index 2b5799282..188cdb028 100644
--- a/docs/examples-dist/layout.vue
+++ b/docs/examples-dist/layout.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
+<template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
                 <zan-row>
   <zan-col span="8">
     <div class="gray">span: 8</div>
diff --git a/docs/examples-dist/lazyload.vue b/docs/examples-dist/lazyload.vue
index 637093324..bab9e763d 100644
--- a/docs/examples-dist/lazyload.vue
+++ b/docs/examples-dist/lazyload.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-lazyload"><h1 class="demo-title">lazyload</h1><example-block title="基础用法">
+<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
                 <ul class="image-list" ref="container">
   <li v-for="img in imageList">
     <img class="lazy-img" v-lazy="img">
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
index e2fc134ae..293a18fdc 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="渐变深色spinner">
+<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
                 <zan-loading class="some-customized-class"></zan-loading>
 
               </example-block><example-block title="">
diff --git a/docs/examples-dist/panel.vue b/docs/examples-dist/panel.vue
index aaca6e5a5..21624675d 100644
--- a/docs/examples-dist/panel.vue
+++ b/docs/examples-dist/panel.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
+<template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
                 <zan-panel title="标题" desc="标题描述" status="状态">
   <div class="panel-content">
     panel内容
diff --git a/docs/examples-dist/picker.vue b/docs/examples-dist/picker.vue
index 5e33b9d9f..c36b8e07a 100644
--- a/docs/examples-dist/picker.vue
+++ b/docs/examples-dist/picker.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
+<template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
                 <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 
 
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index 6850c194f..7528c8163 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
+<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
                 <zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
 <zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
   从中间弹出popup
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index a98a61dff..cf1d4e170 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-progress"><h1 class="demo-title">progress</h1><example-block title="基础用法">
+<template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
                 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
 </div>
diff --git a/docs/examples-dist/quantity.vue b/docs/examples-dist/quantity.vue
index 939fa032b..07581c865 100644
--- a/docs/examples-dist/quantity.vue
+++ b/docs/examples-dist/quantity.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-quantity"><h1 class="demo-title">quantity</h1><example-block title="基础用法">
+<template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
                 <zan-quantity v-model="quantity1"></zan-quantity>
 <p class="curr-quantity">当前值：{{ quantity1 }}</p>
 
diff --git a/docs/examples-dist/radio.vue b/docs/examples-dist/radio.vue
index cb9c96633..c003e4f2c 100644
--- a/docs/examples-dist/radio.vue
+++ b/docs/examples-dist/radio.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
+<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>
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
index 0a53909e3..0f9c82a9d 100644
--- a/docs/examples-dist/search.vue
+++ b/docs/examples-dist/search.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
+<template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
                 <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
 
 
diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue
index 110976069..d8fb6b1d8 100644
--- a/docs/examples-dist/steps.vue
+++ b/docs/examples-dist/steps.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
+<template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
                 <zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
   <zan-step>商家接单</zan-step>
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index 79e12508b..d0f978832 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
+<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
                 <zan-swipe>
   <zan-swipe-item v-for="img in images">
     <img v-lazy="img" alt="">
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index cb89d3c1d..de57f39af 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
+<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
                 <zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
 <div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
 
diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue
index ab3ce0697..52feae671 100644
--- a/docs/examples-dist/tab.vue
+++ b/docs/examples-dist/tab.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-tab"><h1 class="demo-title">tab</h1><example-block title="基础用法">
+<template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
                 <zan-tabs>
   <zan-tab title="选项一">内容一</zan-tab>
   <zan-tab title="选项二">内容二</zan-tab>
diff --git a/docs/examples-dist/tag.vue b/docs/examples-dist/tag.vue
index d8d23cb0c..6ab4dfb6d 100644
--- a/docs/examples-dist/tag.vue
+++ b/docs/examples-dist/tag.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
+<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="">返现</zan-tag>
diff --git a/docs/examples-dist/toast.vue b/docs/examples-dist/toast.vue
index 405b649bc..584389b92 100644
--- a/docs/examples-dist/toast.vue
+++ b/docs/examples-dist/toast.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-toast"><h1 class="demo-title">toast</h1><example-block title="基础用法">
+<template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
                 <zan-button @click="showSimpleToast">普通文字提示</zan-button>
 <zan-button @click="showLoadingToast">加载Toast</zan-button>
 <zan-button @click="showSuccessToast">成功</zan-button>
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index 76221e4c2..1b2476d2c 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -1,10 +1,4 @@
-<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
-                <div class="uploader-container">
-    <zan-uploader :before-read="logContent" :after-read="logContent">
-    </zan-uploader>
-</div>
-
-              </example-block><example-block title="自定义上传图标">
+<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="">
                 <div class="uploader-container">
   <zan-uploader :after-read="logContent">
     <zan-icon name="photograph"></zan-icon>
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
index 204e79aa3..1d05dcfe6 100644
--- a/docs/examples-dist/waterfall.vue
+++ b/docs/examples-dist/waterfall.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
+<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;">
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 513b2acf5..16c66bf66 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -2,7 +2,7 @@
 @component-namespace demo {
   @b button {
     .zan-row {
-      padding: 0 20px;
+      padding: 0 15px;
     }
     .zan-col {
       margin-bottom: 10px;
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index 4fb1514b6..2903ba9d5 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="examples-container">
-    <router-link class="page-back" v-if="visible" :to="'/'">
-      <i class="zan-icon zan-icon-arrow"></i>
-    </router-link>
     <router-view></router-view>
     <div class="footer">
-      <img src="https://b.yzcdn.cn/v2/image/wap/zanui-logo.png" alt="logo" class="zanui-logo">
+      <img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
     </div>
   </div>
 </template>
@@ -51,7 +48,7 @@ export default {
   }
 
   .examples-container {
-    padding-bottom: 10px;
+    padding-bottom: 54px;
     height: 100%;
     overflow: auto;
     background: #f9fafb;
@@ -76,22 +73,26 @@ export default {
   }
 
   .demo-title {
-    font-size: 20px;
-    margin: 20px auto;
-    text-align: center;
+    font-size: 16px;
     display: block;
     line-height: 1;
+    padding: 20px 15px 10px;
   }
 
   .demo-sub-title {
-    font-size: 16px;
+    font-size: 14px;
+    color: #999;
     padding: 10px 15px;
   }
 
   .footer {
     margin-top: 30px;
     width: 100%;
-    padding-bottom: 15px;
+    padding: 10px 0 20px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #f9fafb;
   }
 
   .zanui-logo {
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index 3369229e4..fb4ee5d8f 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -47,8 +47,12 @@ export default {
     }
 
     .zanui-title {
-      font-size: 26px;
-      color: #333;
+      padding-top: 40px;
+      height: 0;
+      overflow: hidden;
+      background: url(https://img.yzcdn.cn/upload_files/2017/04/18/FveNmX6aFsQm1jUhcvBBZn6UrZFi.png) center center no-repeat;
+      background-size: 156px 40px;
+      margin-bottom: 10px;
     }
 
     .zanui-desc {
diff --git a/docs/src/components/mobile-nav.vue b/docs/src/components/mobile-nav.vue
index b188ff135..cc7e98843 100644
--- a/docs/src/components/mobile-nav.vue
+++ b/docs/src/components/mobile-nav.vue
@@ -59,6 +59,7 @@ export default {
       color: #333;
       line-height: 56px;
       position: relative;
+      user-select: none;
 
       @m open {
         color: #999;
@@ -68,6 +69,7 @@ export default {
         color: #333;
         display: block;
         border-top: 1px solid #e5e5e5;
+        user-select: none;
       }
 
       .zan-icon-arrow {
diff --git a/docs/src/nav.config.js b/docs/src/nav.config.js
index 133eddd40..6ddda4ec8 100644
--- a/docs/src/nav.config.js
+++ b/docs/src/nav.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 module.exports = {
   "zh-CN": [
     {