From 674084534f21e9659375d96705f360c95a60c41a Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Tue, 18 Apr 2017 20:43:01 +0800
Subject: [PATCH] fix wap style

---
 build/genExamples.js                 |  3 +-
 docs/examples-dist/actionsheet.vue   | 14 +++------
 docs/examples-dist/badge.vue         | 41 ++++++++++++++++++--------
 docs/examples-dist/image-preview.vue |  2 +-
 docs/examples-dist/loading.vue       |  4 +--
 docs/examples-dist/popup.vue         | 20 ++++++-------
 docs/examples-dist/quantity.vue      |  2 +-
 docs/examples-dist/switch.vue        | 15 +++++++---
 docs/examples-dist/uploader.vue      |  2 +-
 docs/examples-docs/actionsheet.md    | 12 ++------
 docs/examples-docs/badge.md          | 43 ++++++++++++++++++++--------
 docs/examples-docs/image-preview.md  |  2 +-
 docs/examples-docs/loading.md        |  4 +--
 docs/examples-docs/popup.md          | 20 ++++++-------
 docs/examples-docs/quantity.md       |  2 +-
 docs/examples-docs/switch.md         | 15 +++++++---
 docs/examples-docs/uploader.md       |  2 +-
 docs/src/ExamplesApp.vue             |  8 +++---
 docs/src/nav.config.js               |  2 +-
 package.json                         |  1 +
 packages/zanui-css/src/cell.css      |  2 +-
 packages/zanui-css/src/field.css     |  4 ++-
 22 files changed, 127 insertions(+), 93 deletions(-)

diff --git a/build/genExamples.js b/build/genExamples.js
index 44e8bf33d..ac4eebe59 100644
--- a/build/genExamples.js
+++ b/build/genExamples.js
@@ -4,6 +4,7 @@ var fs = require('fs');
 var path = require('path');
 var cheerio = require('cheerio');
 var chalk = require('chalk');
+var decamelize = require('decamelize');
 var striptags = require('./strip-tags');
 var navs = require('../docs/src/nav.config.js');
 navs = navs['zh-CN'];
@@ -37,7 +38,7 @@ var renderVueTemplate = function(html, componentTitle) {
   }
 
   var componentName = componentTitle.split(' ')[0];
-  componentName = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);
+  componentName = decamelize(componentName, '-');
   result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentTitle}</h1>` + output['example-block'] + '</section></template>\n' +
     output.style + '\n' +
     script;
diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
index 5914e6434..3a84da330 100644
--- a/docs/examples-dist/actionsheet.vue
+++ b/docs/examples-dist/actionsheet.vue
@@ -1,25 +1,19 @@
-<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>
+<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
+                <zan-button @click="show1 = true">弹出actionsheet</zan-button>
 <zan-actionsheet v-model="show1" :actions="actions1">
 </zan-actionsheet>
 
 
 
               </example-block><example-block title="带取消按钮的ActionSheet">
-                <div class="zan-row">
-  <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
-</div>
+                <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
 <zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
 </zan-actionsheet>
 
 
 
               </example-block><example-block title="带标题的ActionSheet">
-                <div class="zan-row">
-  <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
-</div>
+                <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
 <zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
   <p>一些内容</p>
 </zan-actionsheet>
diff --git a/docs/examples-dist/badge.vue b/docs/examples-dist/badge.vue
index 4f7bc5c45..af5a506a3 100644
--- a/docs/examples-dist/badge.vue
+++ b/docs/examples-dist/badge.vue
@@ -1,21 +1,38 @@
 <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>
-  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-</zan-badge-group>
+                <div class="badge-group-wrapper">
+  <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>
+    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+  </zan-badge-group>
+</div>
 
               </example-block><example-block title="选中某个badge">
-                <zan-badge-group :active-key="2">
-  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-</zan-badge-group>
+                <div class="badge-group-wrapper">
+  <zan-badge-group :active-key="2">
+    <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+    <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+  </zan-badge-group>
+</div>
 
               </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b badge {
+    .badge-group-wrapper {
+      padding: 30px 20px;
+      background-color: #fff;
+    }
 
+    .zan-badge-group {
+      margin: 0 auto;
+    }
+  }
+}
+</style>
 <script>
 import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
   export default {
diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 3e4f0d49e..900a26e58 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-imagePreview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="">
+<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
                 <zan-button @click="handleImagePreview">预览图片</zan-button>
 
 
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
index 293a18fdc..e112e69d3 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -1,12 +1,12 @@
 <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="">
+              </example-block><example-block title="渐变浅色spinner">
                 <div class="demo-loading__example demo-loading__example--with-bg">
   <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
 </div>
 
-              </example-block><example-block title="">
+              </example-block><example-block title="单色spinner">
                 <zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
 <zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
 
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index 7528c8163..aade7cef3 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
-                <zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
+                <zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
 <zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
   从中间弹出popup
 </zan-popup>
@@ -7,22 +7,23 @@
 
 
               </example-block><example-block title="从不同位置弹出菜单">
-                <zan-button block="" @click="popupShow2 = true;">从下方弹出popup</zan-button>
+                <zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
 <zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
   <zan-button @click="showDialog">弹出dialog</zan-button>
 </zan-popup>
 
-<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
+<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
 <zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
   更新成功
 </zan-popup>
 
-<zan-button block="" @click="popupShow4 = true">从右方弹出popup</zan-button>
+<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
 <zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
   <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
 </zan-popup>
 
-<zan-button block="" @click="popupShow5 = true">从左方弹出popup</zan-button>
+
+<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
 <zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
   <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
 </zan-popup>
@@ -33,9 +34,8 @@
 <style>
 @component-namespace demo {
   @b popup {
-    .examples,
-    .example-block {
-      padding: 0 15px;
+    .zan-button {
+      margin: 10px 15px;
     }
 
     .zan-popup-1 {
@@ -65,10 +65,6 @@
       width: 100%;
       height: 100%;
     }
-
-    .zan-button {
-      margin: 10px 0;
-    }
   }
 }
 </style>
diff --git a/docs/examples-dist/quantity.vue b/docs/examples-dist/quantity.vue
index 07581c865..c61855fa3 100644
--- a/docs/examples-dist/quantity.vue
+++ b/docs/examples-dist/quantity.vue
@@ -14,7 +14,7 @@
 @component-namespace demo {
   @b quantity {
     .zan-quantity {
-      margin: 15px;
+      margin-left: 15px;
     }
 
     .curr-quantity {
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index de57f39af..249bf6dd3 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -5,14 +5,14 @@
 
 
 
-              </example-block><example-block title="基础用法">
+              </example-block><example-block title="">
                 <zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
 <div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
 
 
 
 
-              </example-block><example-block title="">
+              </example-block><example-block title="禁用状态">
                 <zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
 <div class="demo-switch__text">ON, DISABLED</div>
 
@@ -21,7 +21,7 @@
 
 
 
-              </example-block><example-block title="">
+              </example-block><example-block title="loading状态">
                 <zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
 <div class="demo-switch__text">ON, LOADING</div>
 
@@ -34,10 +34,17 @@
 <style>
   @component-namespace demo {
     @b switch {
-      .examples {
+      .examples,
+      .example-block  {
         text-align: center;
       }
 
+      .example-block {
+        .demo-sub-title {
+          text-align: left;
+        }
+      }
+
       @e text {
         margin: 20px auto;
       }
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index 1b2476d2c..5aed1da63 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -1,4 +1,4 @@
-<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><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-docs/actionsheet.md b/docs/examples-docs/actionsheet.md
index 2cc93ce17..c44233bd1 100644
--- a/docs/examples-docs/actionsheet.md
+++ b/docs/examples-docs/actionsheet.md
@@ -99,9 +99,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<div class="zan-row">
-  <zan-button @click="show1 = true">弹出actionsheet</zan-button>
-</div>
+<zan-button @click="show1 = true">弹出actionsheet</zan-button>
 <zan-actionsheet v-model="show1" :actions="actions1">
 </zan-actionsheet>
 
@@ -150,9 +148,7 @@ export default {
 
 :::demo 带取消按钮的ActionSheet
 ```html
-<div class="zan-row">
-  <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
-</div>
+<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
 <zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
 </zan-actionsheet>
 
@@ -195,9 +191,7 @@ export default {
 
 :::demo 带标题的ActionSheet
 ```html
-<div class="zan-row">
-  <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
-</div>
+<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
 <zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
   <p>一些内容</p>
 </zan-actionsheet>
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index c0035bc63..16df3057e 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -1,3 +1,18 @@
+<style>
+@component-namespace demo {
+  @b badge {
+    .badge-group-wrapper {
+      padding: 30px 20px;
+      background-color: #fff;
+    }
+
+    .zan-badge-group {
+      margin: 0 auto;
+    }
+  }
+}
+</style>
+
 <script>
   export default {
     data() {
@@ -55,12 +70,14 @@ export default {
 
 :::demo 基础用法
 ```html
-<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>
-  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-</zan-badge-group>
+<div class="badge-group-wrapper">
+  <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>
+    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+  </zan-badge-group>
+</div>
 ```
 :::
 
@@ -70,12 +87,14 @@ export default {
 
 :::demo 选中某个badge
 ```html
-<zan-badge-group :active-key="2">
-  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-</zan-badge-group>
+<div class="badge-group-wrapper">
+  <zan-badge-group :active-key="2">
+    <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+    <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+  </zan-badge-group>
+</div>
 ```
 :::
 
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index 49ca32bba..bc1b63f81 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -41,7 +41,7 @@ import { ImagePreview } from '@youzan/zanui-vue';
 
 #### 基础用法
 
-:::demo
+:::demo 基础用法
 ```html
 <zan-button @click="handleImagePreview">预览图片</zan-button>
 
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index f9ee38fff..a5f41f19b 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -64,7 +64,7 @@ export default {
 
 #### 渐变浅色spinner
 
-:::demo
+:::demo 渐变浅色spinner
 ```html
 <div class="demo-loading__example demo-loading__example--with-bg">
   <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
@@ -74,7 +74,7 @@ export default {
 
 #### 单色spinner
 
-:::demo
+:::demo 单色spinner
 ```html
 <zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
 <zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 85ae0135a..824a1b034 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -1,9 +1,8 @@
 <style>
 @component-namespace demo {
   @b popup {
-    .examples,
-    .example-block {
-      padding: 0 15px;
+    .zan-button {
+      margin: 10px 15px;
     }
 
     .zan-popup-1 {
@@ -33,10 +32,6 @@
       width: 100%;
       height: 100%;
     }
-
-    .zan-button {
-      margin: 10px 0;
-    }
   }
 }
 </style>
@@ -123,7 +118,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-button block @click="popupShow1 = true">从中间弹出popup</zan-button>
+<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
 <zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
   从中间弹出popup
 </zan-popup>
@@ -146,22 +141,23 @@ export default {
 
 :::demo 从不同位置弹出菜单
 ```html
-<zan-button block @click="popupShow2 = true;">从下方弹出popup</zan-button>
+<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
 <zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
   <zan-button @click="showDialog">弹出dialog</zan-button>
 </zan-popup>
 
-<zan-button block @click="popupShow3 = true">从上方弹出popup</zan-button>
+<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
 <zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
   更新成功
 </zan-popup>
 
-<zan-button block @click="popupShow4 = true">从右方弹出popup</zan-button>
+<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
 <zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
   <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
 </zan-popup>
 
-<zan-button block @click="popupShow5 = true">从左方弹出popup</zan-button>
+
+<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
 <zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
   <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
 </zan-popup>
diff --git a/docs/examples-docs/quantity.md b/docs/examples-docs/quantity.md
index a496d9b7d..95aad3a41 100644
--- a/docs/examples-docs/quantity.md
+++ b/docs/examples-docs/quantity.md
@@ -2,7 +2,7 @@
 @component-namespace demo {
   @b quantity {
     .zan-quantity {
-      margin: 15px;
+      margin-left: 15px;
     }
 
     .curr-quantity {
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 4ebdd4949..1c3824325 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -1,10 +1,17 @@
 <style>
   @component-namespace demo {
     @b switch {
-      .examples {
+      .examples,
+      .example-block  {
         text-align: center;
       }
 
+      .example-block {
+        .demo-sub-title {
+          text-align: left;
+        }
+      }
+
       @e text {
         margin: 20px auto;
       }
@@ -92,7 +99,7 @@ export default {
 ```
 :::
 
-:::demo 基础用法
+:::demo
 ```html
 <zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
 <div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
@@ -129,7 +136,7 @@ export default {
 
 设置`disabled`属性为`true`，此时开关不可点击。
 
-:::demo
+:::demo 禁用状态
 ```html
 <zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
 <div class="demo-switch__text">ON, DISABLED</div>
@@ -154,7 +161,7 @@ export default {
 
 设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
 
-:::demo
+:::demo loading状态
 ```html
 <zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
 <div class="demo-switch__text">ON, LOADING</div>
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index b68520b9a..42e3a69d4 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -49,7 +49,7 @@ export default {
 
 #### 基础用法
 
-:::demo 
+:::demo 基础用法
 ```html
 <div class="uploader-container">
   <zan-uploader :after-read="logContent">
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index 2903ba9d5..975e7458b 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -51,7 +51,7 @@ export default {
     padding-bottom: 54px;
     height: 100%;
     overflow: auto;
-    background: #f9fafb;
+    background: #f8f8f8;
     position: relative;
   }
 
@@ -76,13 +76,13 @@ export default {
     font-size: 16px;
     display: block;
     line-height: 1;
-    padding: 20px 15px 10px;
+    padding: 20px 15px 0;
   }
 
   .demo-sub-title {
     font-size: 14px;
     color: #999;
-    padding: 10px 15px;
+    padding: 30px 15px 10px;
   }
 
   .footer {
@@ -92,7 +92,7 @@ export default {
     position: fixed;
     bottom: 0;
     left: 0;
-    background: #f9fafb;
+    background: #f8f8f8;
   }
 
   .zanui-logo {
diff --git a/docs/src/nav.config.js b/docs/src/nav.config.js
index 6ddda4ec8..661a5d631 100644
--- a/docs/src/nav.config.js
+++ b/docs/src/nav.config.js
@@ -133,7 +133,7 @@ module.exports = {
           "list": [
             {
               "path": "/actionsheet",
-              "title": "ActionSheet 行动按钮"
+              "title": "Actionsheet 行动按钮"
             },
             {
               "path": "/toast",
diff --git a/package.json b/package.json
index 7ef2b5063..f50c858ab 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
     "css-loader": "^0.24.0",
+    "decamelize": "^1.2.0",
     "eslint-loader": "^1.7.1",
     "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "felint": "^0.5.0-alpha.3",
diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css
index b29e716c4..7a8d20c19 100644
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -18,7 +18,7 @@
     position: relative;
     padding: 10px 15px 10px 0;
     box-sizing: border-box;
-    line-height: 22px;
+    line-height: 24px;
     background-color: $c-white;
     color: $c-black;
     font-size: 14px;
diff --git a/packages/zanui-css/src/field.css b/packages/zanui-css/src/field.css
index 13622bcc6..9e2d8f1a8 100644
--- a/packages/zanui-css/src/field.css
+++ b/packages/zanui-css/src/field.css
@@ -77,7 +77,9 @@
     @e control {
       border: 0;
       font-size: 14px;
-      line-height: 22px;
+      line-height: 24px;
+      height: 24px;
+      padding: 0;
       display: block;
       width: 100%;
       resize: none;