From ea663a4e2624dd05f7d1395f063ca425d5f02555 Mon Sep 17 00:00:00 2001
From: hcoder <5213606@qq.com>
Date: Sun, 11 Nov 2018 16:48:34 +0800
Subject: [PATCH 01/22] =?UTF-8?q?=E5=88=98=E6=B5=B7=E5=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tag 页面结构更新
---
 .../hello-uniapp/pages/template/tag/tag.vue   | 184 +++++++++---------
 1 file changed, 89 insertions(+), 95 deletions(-)

diff --git a/examples/hello-uniapp/pages/template/tag/tag.vue b/examples/hello-uniapp/pages/template/tag/tag.vue
index b9c0e848cef..39416ecd714 100644
--- a/examples/hello-uniapp/pages/template/tag/tag.vue
+++ b/examples/hello-uniapp/pages/template/tag/tag.vue
@@ -1,103 +1,97 @@
 <template>
-    <view class="page">
+    <view>
         <page-head :title="title"></page-head>
-        <view class="page-body">
-            <view class="page-section">
-                <view class="page-section-title">实心标签</view>
-                <view class="page-section">
-                    <view class="tag-view">
-                        <uni-tag text="标签"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="primary"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="success"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="warning"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="danger" :circle="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="royal" :circle="true"></uni-tag>
-                    </view>
-                </view>
-            </view>
-            <view class="page-section">
-                <view class="page-section-title">空心标签</view>
-                <view class="page-section">
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="primary"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="success"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="danger" :circle="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="royal" :circle="true"></uni-tag>
-                    </view>
-                </view>
+        <view class="uni-padding-wrap uni-common-mt">
+            <view>
+            	<view class="uni-title">实心标签</view>
+				<view class="tag-view">
+					<uni-tag text="标签"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="primary"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="success"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="warning"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="danger" :circle="true"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="royal" :circle="true"></uni-tag>
+				</view>
             </view>
-            <view class="page-section">
-                <view class="page-section-title">点击事件</view>
-                <view class="page-section">
-                    <view class="tag-view">
-                        <uni-tag text="标签" :type="type" @click="setType"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="primary" :circle="true" :inverted="inverted" @click="setInverted"></uni-tag>
-                    </view>
-                </view>
-            </view>
-            <view class="page-section">
-                <view class="page-section-title">小标签</view>
-                <view class="page-section">
-                    <view class="tag-view">
-                        <uni-tag text="标签" size="small"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="primary" size="small"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="success" size="small"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="warning" size="small"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="danger" size="small" :circle="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="royal" size="small" :circle="true"></uni-tag>
-                    </view>
-                </view>
+            
+			<view class="uni-title uni-common-mt">空心标签</view>
+			<view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="primary"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="success"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="danger" :circle="true"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="royal" :circle="true"></uni-tag>
+				</view>
+			</view>
+			
+            <view class="uni-title uni-common-mt">点击事件</view>
+            <view>
+            	<view class="tag-view">
+            		<uni-tag text="标签" :type="type" @click="setType"></uni-tag>
+            	</view>
+            	<view class="tag-view">
+            		<uni-tag text="标签" type="primary" :circle="true" :inverted="inverted" @click="setInverted"></uni-tag>
+            	</view>
             </view>
+			
+			<view class="uni-title uni-common-mt">小标签</view>
+			<view>
+				<view class="tag-view">
+					<uni-tag text="标签" size="small"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="primary" size="small"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" type="success" size="small"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="warning" size="small"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="danger" size="small" :circle="true"></uni-tag>
+				</view>
+				<view class="tag-view">
+					<uni-tag text="标签" inverted="true" type="royal" size="small" :circle="true"></uni-tag>
+				</view>
+			</view>
+            
+            <view class="uni-title uni-common-mt">不可点击状态</view>
             <view class="page-section">
-                <view class="page-section-title">不可点击状态</view>
-                <view class="page-section">
-                    <view class="tag-view">
-                        <uni-tag text="标签" :disabled="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" type="primary" :disabled="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="danger" size="small" :disabled="true"></uni-tag>
-                    </view>
-                    <view class="tag-view">
-                        <uni-tag text="标签" inverted="true" type="royal" size="small" :circle="true" :disabled="true"></uni-tag>
-                    </view>
-                </view>
+            	<view class="tag-view">
+            		<uni-tag text="标签" :disabled="true"></uni-tag>
+            	</view>
+            	<view class="tag-view">
+            		<uni-tag text="标签" type="primary" :disabled="true"></uni-tag>
+            	</view>
+            	<view class="tag-view">
+            		<uni-tag text="标签" inverted="true" type="danger" size="small" :disabled="true"></uni-tag>
+            	</view>
+            	<view class="tag-view">
+            		<uni-tag text="标签" inverted="true" type="royal" size="small" :circle="true" :disabled="true"></uni-tag>
+            	</view>
             </view>
         </view>
     </view>

From 072cbc026b184f899862e3dbcba04432ffb1999b Mon Sep 17 00:00:00 2001
From: hcoder <5213606@qq.com>
Date: Sun, 11 Nov 2018 16:57:45 +0800
Subject: [PATCH 02/22] =?UTF-8?q?=E9=87=8D=E6=9E=84=20hello-uniapp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/App.vue                 | 241 +---------
 examples/hello-uniapp/README.md               |   4 +-
 examples/hello-uniapp/common/uni.css          | 415 +++++++++---------
 .../hello-uniapp/components/number-box.vue    |  73 ++-
 .../hello-uniapp/components/page-head.vue     |   5 +-
 .../components/segmented-control.vue          |  24 +-
 .../components/tab-nvue/mediaList.nvue        |   2 +-
 .../components/tab-nvue/mediaList.vue         |   2 +-
 examples/hello-uniapp/components/uni-icon.vue |   2 +-
 .../hello-uniapp/components/uni-nav-bar.vue   |   4 +
 .../pages/API/action-sheet/action-sheet.vue   |   4 +-
 .../pages/API/animation/animation.vue         |  40 +-
 .../API/background-audio/background-audio.vue |  20 +-
 .../hello-uniapp/pages/API/canvas/canvas.vue  |  18 +-
 .../API/choose-location/choose-location.vue   |  38 +-
 .../pages/API/clipboard/clipboard.vue         |  24 +-
 .../pages/API/download-file/download-file.vue |  29 +-
 examples/hello-uniapp/pages/API/file/file.vue |  55 +--
 .../pages/API/get-location/get-location.vue   |  55 +--
 .../API/get-network-type/get-network-type.vue |  37 +-
 .../API/get-system-info/get-system-info.vue   |  92 ++--
 .../pages/API/get-user-info/get-user-info.vue |  52 +--
 .../hello-uniapp/pages/API/image/image.vue    |  92 ++--
 .../hello-uniapp/pages/API/login/login.vue    |  47 +-
 .../API/make-phone-call/make-phone-call.vue   |  30 +-
 .../hello-uniapp/pages/API/modal/modal.vue    |   6 +-
 .../pages/API/navigator/navigator.vue         |   4 +-
 .../on-accelerometer-change.vue               |  34 +-
 .../on-compass-change/on-compass-change.vue   |  21 +-
 .../pages/API/open-location/open-location.vue |  89 ++--
 .../pull-down-refresh/pull-down-refresh.vue   |  76 ++--
 .../API/request-payment/request-payment.vue   |  38 +-
 .../pages/API/request/request.vue             |  19 +-
 .../pages/API/scan-code/scan-code.vue         |  11 +-
 .../set-navigation-bar-title.vue              |  28 +-
 .../hello-uniapp/pages/API/share/share.vue    |  90 ++--
 .../pages/API/show-loading/show-loading.vue   |  13 +-
 .../pages/API/storage/storage.vue             |  36 +-
 .../hello-uniapp/pages/API/toast/toast.vue    |  24 +-
 .../pages/API/upload-file/upload-file.vue     |  42 +-
 .../hello-uniapp/pages/API/video/video.vue    |  53 +--
 .../hello-uniapp/pages/API/voice/voice.vue    |  98 ++---
 .../pages/component/audio/audio.vue           |   6 +-
 .../pages/component/button/button.vue         |  54 ++-
 .../pages/component/checkbox/checkbox.vue     |  55 +--
 .../pages/component/form/form.vue             |  69 +--
 .../pages/component/icon/icon.vue             |  25 +-
 .../pages/component/image/image.vue           |  31 +-
 .../pages/component/input/input.vue           | 156 ++-----
 .../pages/component/label/label.vue           |  89 ++--
 .../hello-uniapp/pages/component/map/map.vue  |   4 +-
 .../component/movable-view/movable-view.vue   | 103 ++---
 .../pages/component/navigator/navigator.vue   |   8 +-
 .../component/picker-view/picker-view.vue     |  13 +-
 .../pages/component/picker/picker.vue         |  84 ++--
 .../pages/component/progress/progress.vue     |  33 +-
 .../pages/component/radio/radio.vue           |  31 +-
 .../pages/component/rich-text/rich-text.vue   |  29 +-
 .../component/scroll-view/scroll-view.vue     |  63 ++-
 .../pages/component/slider/slider.vue         |  36 +-
 .../pages/component/swiper/swiper.vue         |  86 ++--
 .../pages/component/switch/switch.vue         |  35 +-
 .../pages/component/text/text.vue             |  18 +-
 .../pages/component/textarea/textarea.vue     |  35 +-
 .../pages/component/video/video.vue           |  46 +-
 .../pages/component/view/view.vue             | 105 +++--
 .../pages/component/web-view/web-view.vue     |   8 +-
 examples/hello-uniapp/pages/index/index.vue   |  33 ++
 .../hello-uniapp/pages/tabBar/API/API.vue     |  33 +-
 .../pages/tabBar/component/component.vue      |  38 +-
 .../pages/tabBar/template/template.vue        | 101 ++---
 .../pages/template/badge/badge.vue            |  59 ++-
 .../pages/template/comments/comments.vue      | 123 +++---
 .../pages/template/countdown/countdown.vue    |  21 +-
 .../template/datachecker/datachecker.vue      |  33 +-
 .../pages/template/echarts/echarts.vue        | 227 +++++-----
 .../template/gesture-lock/gesture-lock.vue    |  25 +-
 .../hello-uniapp/pages/template/grid/grid.vue |   6 +-
 .../pages/template/lazy-load/lazy-load.vue    |   2 +-
 .../list-triplex-row/list-triplex-row.vue     |   7 -
 .../list-with-badges/list-with-badges.vue     |   7 -
 .../list-with-collapses.vue                   |   6 -
 .../list2detail-detail/list2detail-detail.vue |   2 +-
 .../pages/template/load-more/load-more.vue    |  17 +-
 .../pages/template/mdparse/mdparse.vue        |   2 +-
 .../pages/template/media-list/media-list.vue  |  10 +-
 .../template/mpvue-picker/mpvue-picker.vue    |  48 +-
 .../pages/template/nav-button/nav-button.vue  |   5 +-
 .../template/nav-default/nav-default.vue      |  15 +-
 .../nav-transparent/nav-transparent.vue       |  26 +-
 .../pages/template/number-box/number-box.vue  | 156 ++-----
 .../pages/template/popup/popup.vue            |  14 +-
 .../template/product-list/product-list.vue    |   5 +-
 .../pages/template/qrcode/qrcode.vue          |  55 +--
 .../pages/template/sbanner/sbanner.vue        |   8 +-
 .../pages/template/scrollmsg/scrollmsg.vue    |  34 +-
 .../segmented-control/segmented-control.vue   |  44 +-
 .../pages/template/steps/steps.vue            |  22 +-
 .../pages/template/tabbar/detail/detail.vue   |  22 +-
 .../platforms/app-plus/about/about.vue        |   2 +-
 .../platforms/app-plus/feedback/feedback.vue  |   6 +-
 .../app-plus/orientation/orientation.vue      |  26 +-
 .../app-plus/proximity/proximity.vue          |  36 +-
 .../platforms/app-plus/push/push.vue          |  27 +-
 .../platforms/app-plus/speech/speech.vue      |  24 +-
 105 files changed, 1890 insertions(+), 2746 deletions(-)
 create mode 100644 examples/hello-uniapp/pages/index/index.vue

diff --git a/examples/hello-uniapp/App.vue b/examples/hello-uniapp/App.vue
index 6e8a30776d2..766e123ba90 100644
--- a/examples/hello-uniapp/App.vue
+++ b/examples/hello-uniapp/App.vue
@@ -41,229 +41,36 @@
 		}
 	}
 </script>
-
 <style>
-	/* 这是页面的公用css */
-	
+	/* uni.css - 通用组件、模板样式库，可以在创建项目后应用，当作一套ui库 */
 	@import "./common/uni.css";
-		
+	
+	/* 以下样式用于 hello uni-app 演示所需，新版本已经简化 */
 	page {
-		background-color: #F8F8F8;
+		background-color:#F4F5F6;
 		height: 100%;
-		font-size: 32upx;
-		line-height: 1.6;
-	}
-
-	checkbox,
-	radio {
-		margin-right: 10upx;
-	}
-
-	button {
-		margin-top: 20upx;
-		margin-bottom: 20upx;
-	}
-
-	form {
-		width: 100%;
-	}
-	/* page */
-
-	.container {
-		display: flex;
-		flex-direction: column;
-		min-height: 100%;
-		justify-content: space-between;
-		font-size: 32upx;
-		font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
-	}
-	.page-head {
-		padding: 60upx 50upx 80upx;
-		text-align: center;
-		line-height: initial;
-		height: 60upx;
-	}
-
-	.page-head-title {
-		display: inline-block;
-		padding: 0 40upx;
-		font-size: 30upx;
-		height: 60upx;
-		line-height: 60upx;
-		color: #BEBEBE;
-		box-sizing: border-box;
-		border-bottom: 2upx solid #D8D8D8;
-	}
-
-	.page-head-desc {
-		padding-top: 20upx;
-		color: #9B9B9B;
-		font-size: 32upx;
-	}
-
-	.page-body {
-		width: 100%;
-		flex-grow: 1;
-		overflow-x: hidden;
-	}
-
-	.page-body-wrapper {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 100%;
-	}
-
-	.page-body-wording {
-		text-align: center;
-		padding: 200upx 100upx;
-	}
-
-	.page-body-info {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		background-color: #fff;
-		width: 100%;
-		padding: 50upx 0 150upx 0;
-	}
-
-	.page-body-title {
-		margin-bottom: 100upx;
-		font-size: 32upx;
-	}
-
-	.page-body-text {
-		font-size: 30upx;
-		line-height: 52upx;
-		color: #ccc;
-	}
-
-	.page-body-text-small {
-		font-size: 24upx;
-		color: #000;
-		margin-bottom: 100upx;
-	}
-
-	.page-foot {
-		margin: 100upx 0 30upx 0;
-		text-align: center;
-		color: #1aad19;
-		font-size: 0;
-	}
-
-	.icon-foot {
-		width: 152upx;
-		height: 23upx;
-	}
-
-	.page-section {
-		width: 100%;
-		margin-bottom: 60upx;
-	}
-
-	.page-section_center {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.page-section:last-child {
-		margin-bottom: 0;
-	}
-
-	.page-section-gap {
-		box-sizing: border-box;
-		padding: 0 30upx;
-	}
-
-	.page-section-spacing {
-		box-sizing: border-box;
-		padding: 0 80upx;
-	}
-
-	.page-section-title {
-		font-size: 28upx;
-		color: #999999;
-		margin-top: 10upx;
-		margin-bottom: 10upx;
-		padding-left: 30upx;
-		padding-right: 30upx;
-	}
-
-	.page-section-gap .page-section-title {
-		padding-left: 0;
-		padding-right: 0;
-	}
-	/* example */
-
-	.index-hd {
-		padding: 90upx;
-		text-align: center;
-	}
-
-	.index-logo {
+		font-size:28upx;
+		line-height: 1.8;
+	},
+	.uni-header-logo{
+		padding:30upx;
+		text-align:center;
+		margin-top:10upx;
+	}
+	.uni-header-logo image{
 		width: 140upx;
 		height: 140upx;
 	}
-
-	.btn-area {
-		margin-top: 60upx;
-		box-sizing: border-box;
-		width: 100%;
-		padding: 0 30upx;
-	}
-
-	.image-plus {
-		width: 150upx;
-		height: 150upx;
-		border: 2upx solid #D9D9D9;
-		position: relative;
-	}
-
-	.image-plus-nb {
-		border: 0;
-	}
-
-	.image-plus-text {
-		color: #888888;
-		font-size: 28upx;
-	}
-
-	.image-plus-horizontal {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		background-color: #d9d9d9;
-		width: 4upx;
-		height: 80upx;
-		transform: translate(-50%, -50%);
-		-webkit-transform: translate(-50%, -50%);
-	}
-
-	.image-plus-vertical {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		background-color: #d9d9d9;
-		width: 80upx;
-		height: 4upx;
-		transform: translate(-50%, -50%);
-		-webkit-transform: translate(-50%, -50%);
-	}
-
-	.color1 {
-		background-color: #1AAD19;
-		color: #FFFFFF;
-	}
-
-	.color2 {
-		background-color: #2782D7;
-		color: #FFFFFF;
+	.uni-hello-text{
+		color:#7A7E83;
 	}
-
-	.color3 {
-		background-color: #F1F1F1;
-		color: #353535;
+	.uni-hello-addfile{
+		text-align:center; 
+		line-height:300upx;
+		background:#FFF;
+		padding:50upx;
+		margin-top:10px;
+		font-size:38upx;
+		color:#808080;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/README.md b/examples/hello-uniapp/README.md
index 315d9936f82..a69e98c1554 100644
--- a/examples/hello-uniapp/README.md
+++ b/examples/hello-uniapp/README.md
@@ -1,5 +1,5 @@
 # hello-uniapp
 
 ## 注意事项
-* 运行本示例需要HBuilderX 1.1.0.20181030版本（或以上版本）
-* [uni-app 尺寸单位更改及历史版本兼容说明](http://ask.dcloud.net.cn/article/35014)
+* 运行本示例需要HBuilderX 0.1.49版本（或以上版本）
+* [uni-app 尺寸单位更改及历史版本兼容说明](http://ask.dcloud.net.cn/article/35014)
\ No newline at end of file
diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index 4e28af18c1c..f988e79d8db 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -5,84 +5,172 @@
 	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
 }
 
-
-
-
 /*通用 */
-
+view{
+	font-size:28upx; 
+	line-height:1.8;
+}
+progress, checkbox-group{
+	width: 100%;
+}
+form {
+	width: 100%;
+}
 .uni-flex {
 	display: flex;
 	flex-direction: row;
 }
-
 .uni-flex-item {
 	flex: 1;
 }
-
 .uni-row {
 	flex-direction: row;
 }
-
 .uni-column {
 	flex-direction: column;
 }
-
-.uni-h6 {
-	font-size: 24upx;
-	color: #8f8f94;
+.uni-link{
+	color:#576B95;
+	font-size:26upx;
 }
-
-.uni-h5 {
-	font-size: 28upx;
-	color: #8f8f94;
+.uni-center{
+	text-align:center;
 }
-
-.uni-h4 {
-	font-size: 36upx;
+.uni-inline-item{
+	display: flex;
+	flex-direction: row;
 }
 
-.uni-h3 {
-	font-size: 48upx;
-	font-weight: 600;
+/* page */
+.uni-page-head{
+	padding:35upx; 
+	text-align: center;
 }
-
-.uni-h2 {
-	font-size: 60upx;
-	font-weight: 600;
+.uni-page-head-title {
+	display: inline-block;
+	padding: 0 40upx;
+	font-size: 30upx;
+	height: 88upx;
+	line-height: 88upx;
+	color: #BEBEBE;
+	box-sizing: border-box;
+	border-bottom: 2upx solid #D8D8D8;
 }
-
-.uni-h1 {
-	font-size: 72upx;
-	font-weight: 600;
+.uni-page-body {
+	width: 100%;
+	flex-grow: 1;
+	overflow-x: hidden;
 }
-
-.uni-ellipsis {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+.uni-padding-wrap{
+	width:690upx;
+	padding:0 30upx;
+}
+.uni-word {
+	text-align: center;
+	padding:200upx 100upx;
 }
+.uni-title {
+	font-size:30upx;
+	font-weight:500;
+	padding:20upx 0;
+	line-height:1.5;
+}
+.uni-title text{font-size:24upx; color:#888;}
+.uni-text-gray{
+	color: #ccc;
+}
+.uni-text-small {
+	font-size:24upx;
+}
+.uni-common-mb{
+	margin-bottom:30upx;
+}
+.uni-common-pb{
+	padding-bottom:30upx;
+}
+.uni-common-pl{
+	padding-left:30upx;
+}
+.uni-common-mt{
+	margin-top:30upx;
+}
+/* 背景色 */
+.uni-bg-red{
+	background:#F76260; color:#FFF;
+}
+.uni-bg-green{
+	background:#09BB07; color:#FFF;
+}
+.uni-bg-blue{
+	background:#007AFF; color:#FFF;
+}
+/* 标题 */
+.uni-h1 {font-size: 80upx; font-weight:700;}
+.uni-h2 {font-size: 60upx; font-weight:700;}
+.uni-h3 {font-size: 48upx; font-weight:700;}
+.uni-h4 {font-size: 36upx; font-weight:700;}
+.uni-h5 {font-size: 28upx; color: #8f8f94;}
+.uni-h6 {font-size: 24upx; color: #8f8f94;}
+.uni-bold{font-weight:bold;}
 
-.uni-input {
-	height: 50upx;
-	min-height: 50upx;
-	padding: 15upx 0;
-	line-height: 50upx;
+/* 文本溢出隐藏 */
+.uni-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
+
+/* 竖向百分百按钮 */
+.uni-btn-v{
+	padding:10upx 0;
 }
+.uni-btn-v button{margin:20upx 0;}
 
+/* 表单 */
+.uni-form-item{
+	display:flex;
+	width:100%;
+	padding:10upx 0;
+}
+.uni-form-item .title{
+	padding:10upx 25upx;
+}
 .uni-label {
 	width: 210upx;
 	word-wrap: break-word;
 	word-break: break-all;
+	text-indent:20upx;
+}
+.uni-input {
+	height: 50upx;
+	padding: 15upx 25upx;
+	line-height:50upx;
+	font-size:28upx;
+	background:#FFF;
+	flex: 1;
+}
+radio-group, checkbox-group{
+	width:100%;
+}
+radio-group label, checkbox-group label{
+	padding-right:20upx;
+}
+.uni-form-item .with-fun{
+	display:flex; 
+	flex-wrap:nowrap; 
+	background:#FFFFFF;
+}
+.uni-form-item .with-fun .uni-icon{
+	width:40px; 
+	height:80upx; 
+	line-height:80upx; 
+	flex-shrink:0;
 }
 
-
-
-
-
-
-
+/* loadmore */
+.uni-loadmore{
+	height:80upx;
+	line-height:80upx;
+	text-align:center;
+	padding-bottom:30upx;
+}
 /*数字角标*/
-
 .uni-badge,
 .uni-badge-default {
 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
@@ -94,115 +182,86 @@
 	border-radius: 100px;
 	background-color: rgba(0, 0, 0, .15);
 }
-
 .uni-badge.uni-badge-inverted {
 	padding: 0 5px 0 0;
 	color: #929292;
 	background-color: transparent
 }
-
 .uni-badge-primary {
 	color: #fff;
 	background-color: #007aff
 }
-
 .uni-badge-blue.uni-badge-inverted,
 .uni-badge-primary.uni-badge-inverted {
 	color: #007aff;
 	background-color: transparent
 }
-
 .uni-badge-green,
 .uni-badge-success {
 	color: #fff;
 	background-color: #4cd964;
 }
-
 .uni-badge-green.uni-badge-inverted,
 .uni-badge-success.uni-badge-inverted {
 	color: #4cd964;
 	background-color: transparent
 }
-
 .uni-badge-warning,
 .uni-badge-yellow {
 	color: #fff;
 	background-color: #f0ad4e
 }
-
 .uni-badge-warning.uni-badge-inverted,
 .uni-badge-yellow.uni-badge-inverted {
 	color: #f0ad4e;
 	background-color: transparent
 }
-
 .uni-badge-danger,
 .uni-badge-red {
 	color: #fff;
 	background-color: #dd524d
 }
-
 .uni-badge-danger.uni-badge-inverted,
 .uni-badge-red.uni-badge-inverted {
 	color: #dd524d;
 	background-color: transparent
 }
-
 .uni-badge-purple,
 .uni-badge-royal {
 	color: #fff;
 	background-color: #8a6de9
 }
-
 .uni-badge-purple.uni-badge-inverted,
 .uni-badge-royal.uni-badge-inverted {
 	color: #8a6de9;
 	background-color: transparent
 }
 
-
-
-
-
-
-
 /*折叠面板 */
-
 .uni-collapse-content {
 	height: 0;
 	width: 100%;
 	overflow: hidden;
 }
-
 .uni-collapse-content.uni-active {
 	height: auto;
 }
 
-
-
-
-
-
-
 /*卡片视图 */
-
 .uni-card {
 	background: #fff;
 	border-radius: 8upx;
-	margin: 20upx;
+	margin:20upx 0;
 	position: relative;
 	box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
 }
-
 .uni-card-content {
 	font-size: 30upx;
 }
-
 .uni-card-content-inner {
 	position: relative;
 	padding: 30upx;
 }
-
 .uni-card-footer,
 .uni-card-header {
 	position: relative;
@@ -212,15 +271,12 @@
 	justify-content: space-between;
 	align-items: center;
 }
-
 .uni-card-header {
 	font-size: 36upx;
 }
-
 .uni-card-footer {
 	color: #6d6d72;
 }
-
 .uni-card-footer:before,
 .uni-card-header:after {
 	position: absolute;
@@ -233,22 +289,18 @@
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
-
 .uni-card-header:after {
 	top: auto;
 	bottom: 0;
 }
-
 .uni-card-media {
 	justify-content: flex-start;
 }
-
 .uni-card-media-logo {
 	height: 84upx;
 	width: 84upx;
 	margin-right: 20upx;
 }
-
 .uni-card-media-body {
 	height: 84upx;
 	display: flex;
@@ -256,27 +308,20 @@
 	justify-content: space-between;
 	align-items: flex-start;
 }
-
 .uni-card-media-text-top {
 	line-height: 36upx;
 	font-size: 34upx;
 }
-
 .uni-card-media-text-bottom {
 	line-height: 30upx;
 	font-size: 28upx;
 	color: #8f8f94;
 }
-
 .uni-card-link {
 	color: #007AFF;
 }
 
-
-
-
 /* 列表 */
-
 .uni-list {
 	background-color: #FFFFFF;
 	position: relative;
@@ -284,7 +329,6 @@
 	display: flex;
 	flex-direction: column;
 }
-
 .uni-list:after {
 	position: absolute;
 	z-index: 10;
@@ -297,7 +341,6 @@
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
-
 .uni-list:before {
 	position: absolute;
 	z-index: 10;
@@ -310,7 +353,6 @@
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
-
 .uni-list-cell {
 	position: relative;
 	display: flex;
@@ -318,24 +360,20 @@
 	justify-content: space-between;
 	align-items: center;
 }
-
 .uni-list-cell-hover {
 	background-color: #eee;
 }
-
 .uni-list-cell-pd {
 	padding: 22upx 30upx;
 }
-
 .uni-list-cell-left {
+	font-size:28upx;
 	padding: 0 30upx;
 }
-
 .uni-list-cell-db,
 .uni-list-cell-right {
 	flex: 1;
 }
-
 .uni-list-cell:after {
 	position: absolute;
 	right: 0;
@@ -347,23 +385,19 @@
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
-
 .uni-list .uni-list-cell:last-child:after {
 	height: 0upx;
 }
-
 .uni-list-cell-last.uni-list-cell:after {
 	height: 0upx;
 }
-
 .uni-list-cell-divider {
 	position: relative;
 	display: flex;
 	color: #999;
 	background-color: #f7f7f7;
-	padding: 10upx 20upx;
+	padding:15upx 20upx;
 }
-
 .uni-list-cell-divider:before {
 	position: absolute;
 	right: 0;
@@ -375,7 +409,6 @@
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
-
 .uni-list-cell-divider:after {
 	position: absolute;
 	right: 0;
@@ -387,8 +420,8 @@
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
-
 .uni-list-cell-navigate {
+	font-size:30upx;
 	padding: 22upx 30upx;
 	line-height: 48upx;
 	position: relative;
@@ -399,15 +432,12 @@
 	justify-content: space-between;
 	align-items: center;
 }
-
 .uni-list-cell-navigate {
 	padding-right: 36upx;
 }
-
 .uni-navigate-badge {
 	padding-right: 50upx;
 }
-
 .uni-list-cell-navigate.uni-navigate-right:after {
 	font-family: uniicons;
 	content: '\e583';
@@ -418,7 +448,6 @@
 	-webkit-transform: translateY(-50%);
 	transform: translateY(-50%);
 }
-
 .uni-list-cell-navigate.uni-navigate-bottom:after {
 	font-family: uniicons;
 	content: '\e581';
@@ -429,7 +458,6 @@
 	-webkit-transform: translateY(-50%);
 	transform: translateY(-50%);
 }
-
 .uni-list-cell-navigate.uni-navigate-bottom.uni-active:after {
 	font-family: uniicons;
 	content: '\e580';
@@ -440,40 +468,28 @@
 	-webkit-transform: translateY(-50%);
 	transform: translateY(-50%);
 }
-
 .uni-collapse.uni-list-cell {
 	flex-direction: column;
 }
-
 .uni-list-cell-navigate.uni-active {
 	background: #eee;
 }
-
 .uni-list.uni-collapse {
 	box-sizing: border-box;
 	height: 0;
 	overflow: hidden;
 }
-
 .uni-collapse .uni-list-cell {
-	padding-left: 36upx;
+	padding-left: 20upx;
 }
-
 .uni-collapse .uni-list-cell:after {
 	left: 52upx;
 }
-
 .uni-list.uni-active {
 	height: auto;
 }
 
-
-
-
-
-
 /* 三行列表 */
-
 .uni-triplex-row {
 	display: flex;
 	flex: 1;
@@ -482,29 +498,20 @@
 	flex-direction: row;
 	padding: 22upx 30upx;
 }
-
 .uni-triplex-right,
 .uni-triplex-left {
 	display: flex;
 	flex-direction: column;
 }
-
 .uni-triplex-left {
 	width: 84%;
 }
-
 .uni-triplex-right {
 	width: 16%;
 	text-align: right;
 }
 
-
-
-
-
-
 /* 图文列表 */
-
 .uni-media-list {
 	padding: 22upx 30upx;
 	box-sizing: border-box;
@@ -512,31 +519,25 @@
 	width: 100%;
 	flex-direction: row;
 }
-
 .uni-navigate-right.uni-media-list {
 	padding-right: 74upx;
 }
-
 .uni-pull-right {
 	flex-direction: row-reverse;
 }
-
 .uni-pull-right>.uni-media-list-logo {
 	margin-right: 0upx;
 	margin-left: 20upx;
 }
-
 .uni-media-list-logo {
 	height: 84upx;
 	width: 84upx;
 	margin-right: 20upx;
 }
-
 .uni-media-list-logo image {
 	height: 100%;
 	width: 100%;
 }
-
 .uni-media-list-body {
 	height: 84upx;
 	display: flex;
@@ -546,13 +547,11 @@
 	align-items: flex-start;
 	overflow: hidden;
 }
-
 .uni-media-list-text-top {
 	width: 100%;
 	line-height: 36upx;
 	font-size: 34upx;
 }
-
 .uni-media-list-text-bottom {
 	width: 100%;
 	line-height: 30upx;
@@ -560,12 +559,7 @@
 	color: #8f8f94;
 }
 
-
-
-
-
 /* 九宫格 */
-
 .uni-grid-9 {
 	background: #f2f2f2;
 	width: 750upx;
@@ -574,7 +568,6 @@
 	flex-wrap: wrap;
 	border-top: 2upx solid #eee;
 }
-
 .uni-grid-9-item {
 	width: 250upx;
 	height: 200upx;
@@ -587,16 +580,13 @@
 	border-color: #eee;
 	box-sizing: border-box;
 }
-
 .no-border-right {
 	border-right: none;
 }
-
 .uni-grid-9-image {
 	width: 100upx;
 	height: 100upx;
 }
-
 .uni-grid-9-text {
 	width: 250upx;
 	line-height: 4upx;
@@ -604,64 +594,48 @@
 	text-align: center;
 	font-size: 30upx;
 }
-
 .uni-grid-9-item-hover {
 	background: rgba(0, 0, 0, 0.1);
 }
 
-
-
-
-
 /* 上传 */
-
 .uni-uploader {
 	flex: 1;
 	flex-direction: column;
 }
-
 .uni-uploader-head {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 }
-
 .uni-uploader-info {
 	color: #B2B2B2;
 }
-
 .uni-uploader-body {
 	margin-top: 16upx;
 }
-
 .uni-uploader__files {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 }
-
 .uni-uploader__file {
-	float: left;
-	margin-right: 18upx;
-	margin-bottom: 18upx;
+	margin: 10upx;
+	width: 210upx;
+	height: 210upx;
 }
-
 .uni-uploader__img {
 	display: block;
-	width: 158upx;
-	height: 158upx;
+	width: 210upx;
+	height: 210upx;
 }
-
 .uni-uploader__input-box {
-	float: left;
 	position: relative;
-	margin-right: 18upx;
-	margin-bottom: 18upx;
-	width: 154upx;
-	height: 154upx;
+	margin:10upx;
+	width: 208upx;
+	height: 208upx;
 	border: 2upx solid #D9D9D9;
 }
-
 .uni-uploader__input-box:before,
 .uni-uploader__input-box:after {
 	content: " ";
@@ -672,26 +646,21 @@
 	transform: translate(-50%, -50%);
 	background-color: #D9D9D9;
 }
-
 .uni-uploader__input-box:before {
 	width: 4upx;
 	height: 79upx;
 }
-
 .uni-uploader__input-box:after {
 	width: 79upx;
 	height: 4upx;
 }
-
 .uni-uploader__input-box:active {
 	border-color: #999999;
 }
-
 .uni-uploader__input-box:active:before,
 .uni-uploader__input-box:active:after {
 	background-color: #999999;
 }
-
 .uni-uploader__input {
 	position: absolute;
 	z-index: 1;
@@ -702,12 +671,7 @@
 	opacity: 0;
 }
 
-
-
-
-
 /*问题反馈*/
-
 .feedback-title {
 	display: flex;
 	flex-direction: row;
@@ -717,17 +681,14 @@
 	color: #8f8f94;
 	font-size: 28upx;
 }
-
 .feedback-star-view.feedback-title {
 	justify-content: flex-start;
 	margin: 0;
 }
-
 .feedback-quick {
 	position: relative;
 	padding-right: 40upx;
 }
-
 .feedback-quick:after {
 	font-family: uniicons;
 	font-size: 40upx;
@@ -739,11 +700,9 @@
 	-webkit-transform: translateY(-50%);
 	transform: translateY(-50%);
 }
-
 .feedback-body {
 	background: #fff;
 }
-
 .feedback-textare {
 	height: 200upx;
 	font-size: 34upx;
@@ -752,7 +711,6 @@
 	box-sizing: border-box;
 	padding: 20upx 30upx 0;
 }
-
 .feedback-input {
 	font-size: 34upx;
 	height: 50upx;
@@ -760,35 +718,98 @@
 	padding: 15upx 20upx;
 	line-height: 50upx;
 }
-
 .feedback-uploader {
 	padding: 22upx 20upx;
 }
-
 .feedback-star {
 	font-family: uniicons;
 	font-size: 40upx;
 	margin-left: 6upx;
 }
-
 .feedback-star-view {
 	margin-left: 20upx;
 }
-
 .feedback-star:after {
 	content: '\e408';
 }
-
 .feedback-star.active {
 	color: #FFB400;
 }
-
 .feedback-star.active:after {
 	content: '\e438';
 }
-
 .feedback-submit {
 	background: #007AFF;
 	color: #FFFFFF;
 	margin: 20upx;
-}
+}
+
+/* input group */
+.uni-input-group {
+	position: relative;
+	padding: 0;
+	border: 0;
+	background-color: #fff;
+}
+
+.uni-input-group:before {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 2upx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-group:after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 2upx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-row {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	font-size:28upx;
+}
+
+.uni-input-group .uni-input-row:after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 30upx;
+	height: 2upx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-row {
+	padding: 22upx 30upx;
+	justify-content: space-between;
+}
+
+.uni-input-row label {
+	line-height: 70upx;
+}
+
+/* textarea */
+.uni-textarea{
+	width:100%;
+	background:#FFF;
+}
+.uni-textarea textarea{
+	width:96%;
+	padding:18upx 2%;
+	line-height:1.6;
+	font-size:28upx;
+	height:150upx;
+}
\ No newline at end of file
diff --git a/examples/hello-uniapp/components/number-box.vue b/examples/hello-uniapp/components/number-box.vue
index 790af5cbd87..a35722c98ad 100644
--- a/examples/hello-uniapp/components/number-box.vue
+++ b/examples/hello-uniapp/components/number-box.vue
@@ -1,8 +1,8 @@
 <template>
 	<view class="uni-numbox">
-		<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">-</view>
-		<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
-		<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+</view>
+		<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="subtract">-</view>
+		<input class="uni-numbox-value" type="number" :disabled="disabled" v-model="value" @blur="handleBlur">
+		<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="add">+</view>
 	</view>
 </template>
 <script>
@@ -30,11 +30,6 @@
 				default: false
 			}
 		},
-		data() {
-			return {
-				inputValue: this.value
-			}
-		},
 		computed: {
 			disableSubtract() {
 				return this.value <= this.min
@@ -43,42 +38,35 @@
 				return this.value >= this.max
 			}
 		},
-		watch: {
-			value(val) {
-				this.inputValue = val;
-			},
-			inputValue(val) {
-				this.$emit('change', val);
-			}
+		onUnload() {
+			this.value = 0,
+				this.step = 1,
+				this.max = Infinity,
+				this.min = -Infinity;
 		},
 		methods: {
-			_calcValue(type) {
-				const scale = this._getDecimalScale();
-				let value = this.inputValue * scale;
-				let step = this.step * scale;
-
+			subtract(evt) {
+				this._handleStep('subtract');
+			},
+			add(evt) {
+				this._handleStep('add');
+			},
+			_handleStep(type) {
+				let value = this.value;
 				if (type === 'subtract') {
-					value -= step
+					value -= this.step
 				} else if (type === 'add') {
-					value += step
+					value += this.step
 				}
 				if (value < this.min || value > this.max) {
 					return
 				}
-				this.inputValue = value / scale;
-			},
-			_getDecimalScale() {
-				let scale = 1;
-				// 浮点型
-				if (~~this.step !== this.step) {
-					scale = Math.pow(10, (this.step + '').split('.')[1].length);
-				}
-				return scale;
+				this.value = value
 			},
-			_onBlur(event) {
-				let value = event.detail.value;
+			handleBlur(evt) {
+				let value = evt.detail.value;
 				if (!value) {
-					this.inputValue = 0;
+					this.value = 0;
 					return
 				}
 				value = +value;
@@ -87,7 +75,12 @@
 				} else if (value < this.min) {
 					value = this.min
 				}
-				this.inputValue = value
+				this.value = value
+			}
+		},
+		watch: {
+			value(val) {
+				this.$emit('update', val);
 			}
 		}
 	}
@@ -97,16 +90,16 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-start;
-		height: 70upx;
+		height: 60upx;
 	}
 
 	.uni-numbox-minus,
 	.uni-numbox-plus {
 		margin: 0;
 		background-color: #f9f9f9;
-		width: 80upx;
+		width: 60upx;
 		height: 100%;
-		line-height: 70upx;
+		line-height: 60upx;
 		text-align: center;
 		color: #555555;
 	}
@@ -128,7 +121,7 @@
 	.uni-numbox-value {
 		border: 2upx solid #cccccc;
 		background-color: #ffffff;
-		width: 80upx;
+		width: 60upx;
 		height: 100%;
 		text-align: center;
 	}
@@ -136,4 +129,4 @@
 	.uni-numbox-disabled {
 		color: #c0c0c0;
 	}
-</style>
+</style>
diff --git a/examples/hello-uniapp/components/page-head.vue b/examples/hello-uniapp/components/page-head.vue
index ba25c005a58..c27806473d1 100644
--- a/examples/hello-uniapp/components/page-head.vue
+++ b/examples/hello-uniapp/components/page-head.vue
@@ -1,9 +1,8 @@
 <template name="page-head">
-	<view class="page-head">
-		<view class="page-head-title">{{title}}</view>
+	<view class="uni-page-head">
+		<view class="uni-page-head-title">{{title}}</view>
 	</view>
 </template>
-
 <script>
 	export default {
 		name: "page-head",
diff --git a/examples/hello-uniapp/components/segmented-control.vue b/examples/hello-uniapp/components/segmented-control.vue
index 6a4b55b25f1..067e1417771 100644
--- a/examples/hello-uniapp/components/segmented-control.vue
+++ b/examples/hello-uniapp/components/segmented-control.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="segmented-control" :class="styleType" :style="wrapStyle">
-		<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === currentIndex ? activeStyle : itemStyle"
-		 @click="onClick(index)">
+		<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === current ? activeStyle : itemStyle"
+		    @click="onClick(index)">
 			{{item}}
 		</view>
 	</view>
@@ -30,18 +30,6 @@
 				default: 'button'
 			}
 		},
-		data() {
-			return {
-				currentIndex: this.current
-			}
-		},
-		watch: {
-			current(val) {
-				if (val !== this.currentIndex) {
-					this.currentIndex = val;
-				}
-			}
-		},
 		computed: {
 			wrapStyle() {
 				let styleString = '';
@@ -82,8 +70,8 @@
 		},
 		methods: {
 			onClick(index) {
-				if (this.currentIndex !== index) {
-					this.currentIndex = index;
+				if (this.current !== index) {
+					this.current = index;
 					this.$emit('clickItem', index);
 				}
 			}
@@ -110,7 +98,7 @@
 
 	.segmented-control.text {
 		border: 0;
-		border-radius: 0upx;
+        border-radius: 0upx;
 	}
 
 
@@ -132,4 +120,4 @@
 	.segmented-control-item:first-child {
 		border-left-width: 0;
 	}
-</style>
+</style>
diff --git a/examples/hello-uniapp/components/tab-nvue/mediaList.nvue b/examples/hello-uniapp/components/tab-nvue/mediaList.nvue
index 09501711dff..6916c736fdb 100644
--- a/examples/hello-uniapp/components/tab-nvue/mediaList.nvue
+++ b/examples/hello-uniapp/components/tab-nvue/mediaList.nvue
@@ -145,7 +145,7 @@
     .info-text {
         margin-right: 20px;
         color: #999999;
-        font-size: 28px;
+        font-size: 24px;
     }
 
     .media-foot {
diff --git a/examples/hello-uniapp/components/tab-nvue/mediaList.vue b/examples/hello-uniapp/components/tab-nvue/mediaList.vue
index fda8485c694..79de80a78d6 100644
--- a/examples/hello-uniapp/components/tab-nvue/mediaList.vue
+++ b/examples/hello-uniapp/components/tab-nvue/mediaList.vue
@@ -151,7 +151,7 @@
     .info-text {
         margin-right: 20upx;
         color: #999999;
-        font-size: 28upx;
+        font-size: 24upx;
     }
 
     .media-foot {
diff --git a/examples/hello-uniapp/components/uni-icon.vue b/examples/hello-uniapp/components/uni-icon.vue
index ca0b9b61885..4f78454f654 100644
--- a/examples/hello-uniapp/components/uni-icon.vue
+++ b/examples/hello-uniapp/components/uni-icon.vue
@@ -16,7 +16,7 @@
             /**
              * 图标大小
              */
-            size: [Number, String]
+            size: Number
         },
         computed: {
             fontSize() {
diff --git a/examples/hello-uniapp/components/uni-nav-bar.vue b/examples/hello-uniapp/components/uni-nav-bar.vue
index 90f1e374cef..88cd2dc7840 100644
--- a/examples/hello-uniapp/components/uni-nav-bar.vue
+++ b/examples/hello-uniapp/components/uni-nav-bar.vue
@@ -160,6 +160,10 @@
         background-color: #FFFFFF;
         overflow: hidden;
     }
+	
+	.uni-navbar view{
+		line-height:2.75em;
+	}
 
     .uni-navbar-shadow {
         box-shadow: 0 1px 6px #ccc;
diff --git a/examples/hello-uniapp/pages/API/action-sheet/action-sheet.vue b/examples/hello-uniapp/pages/API/action-sheet/action-sheet.vue
index d9e7ccf72a7..f2ba9d6af2a 100644
--- a/examples/hello-uniapp/pages/API/action-sheet/action-sheet.vue
+++ b/examples/hello-uniapp/pages/API/action-sheet/action-sheet.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area">
+		<view class="uni-padding-wrap">
+			<view class="uni-btn-v">
 				<button type="default" @tap="actionSheetTap">弹出action sheet</button>
 			</view>
 		</view>
diff --git a/examples/hello-uniapp/pages/API/animation/animation.vue b/examples/hello-uniapp/pages/API/animation/animation.vue
index 99bd4e4c053..f364fc72d84 100644
--- a/examples/hello-uniapp/pages/API/animation/animation.vue
+++ b/examples/hello-uniapp/pages/API/animation/animation.vue
@@ -1,25 +1,22 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="animation-element-wrapper">
-					<view class="animation-element" :animation="animationData"></view>
-				</view>
-				<scroll-view class="animation-buttons" scroll-y="true">
-					<button class="animation-button" @tap="rotate">旋转</button>
-					<button class="animation-button" @tap="scale">缩放</button>
-					<button class="animation-button" @tap="translate">移动</button>
-					<button class="animation-button" @tap="skew">倾斜</button>
-					<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
-					<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
-					<button class="animation-button" @tap="all">同时展示全部</button>
-					<button class="animation-button" @tap="allInQueue">顺序展示全部</button>
-					<button class="animation-button animation-button-reset" @tap="reset">还原</button>
-				</scroll-view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="animation-element-wrapper">
+				<view class="animation-element" :animation="animationData"></view>
 			</view>
+			<scroll-view class="animation-buttons" scroll-y="true">
+				<button class="animation-button" @tap="rotate">旋转</button>
+				<button class="animation-button" @tap="scale">缩放</button>
+				<button class="animation-button" @tap="translate">移动</button>
+				<button class="animation-button" @tap="skew">倾斜</button>
+				<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
+				<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
+				<button class="animation-button" @tap="all">同时展示全部</button>
+				<button class="animation-button" @tap="allInQueue">顺序展示全部</button>
+				<button class="animation-button animation-button-reset" @tap="reset">还原</button>
+			</scroll-view>
 		</view>
-
 	</view>
 </template>
 <script>
@@ -111,20 +108,19 @@
 	}
 
 	.animation-buttons {
-		padding: 30upx 50upx 10upx;
+		padding:30upx 0;
 		width: 100%;
 		height: 360upx;
-		box-sizing: border-box;
 	}
 
 	.animation-button {
 		float: left;
 		line-height: 2;
-		width: 300upx;
-		margin: 15upx 12upx;
+		width: 44%;
+		margin: 15upx 3%;
 	}
 
 	.animation-button-reset {
-		width: 620upx;
+		width: 94%;
 	}
 </style>
diff --git a/examples/hello-uniapp/pages/API/background-audio/background-audio.vue b/examples/hello-uniapp/pages/API/background-audio/background-audio.vue
index 29744cf744a..ffd328d62fb 100644
--- a/examples/hello-uniapp/pages/API/background-audio/background-audio.vue
+++ b/examples/hello-uniapp/pages/API/background-audio/background-audio.vue
@@ -1,16 +1,18 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-section">
-			<view class="page-body-info">
+		<view class="uni-padding-wrap">
+			<view class="uni-center">
 				<text class="time-big">{{formatedPlayTime}}</text>
+			</view>
+			<view class="uni-common-mt">
 				<slider class="slider" min="0" max="21" step="1" :value="playTime" @change="seek"></slider>
-				<view class="play-time">
-					<text>00:00</text>
-					<text>00:21</text>
-				</view>
 			</view>
-			<view class="page-body-text">注意：离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
+			<view class="play-time">
+				<text>00:00</text>
+				<text>00:21</text>
+			</view>
+			<view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
 			<view class="page-body-buttons">
 				<block v-if="playing">
 					<view class="page-body-button" @tap="stop">
@@ -136,12 +138,12 @@
 	}
 
 	.slider {
-		width: 650upx;
+		width:630upx;
 	}
 
 	.play-time {
 		font-size: 28upx;
-		width: 700upx;
+		width:100%;
 		padding: 20upx 0;
 		display: flex;
 		justify-content: space-between;
diff --git a/examples/hello-uniapp/pages/API/canvas/canvas.vue b/examples/hello-uniapp/pages/API/canvas/canvas.vue
index 524c84c4039..eb6af965268 100644
--- a/examples/hello-uniapp/pages/API/canvas/canvas.vue
+++ b/examples/hello-uniapp/pages/API/canvas/canvas.vue
@@ -1,16 +1,14 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<canvas class="canvas-element" canvas-id="canvas"></canvas>
-				<scroll-view class="canvas-buttons" scroll-y="true">
-					<block v-for="(name, index) in names" :key="index">
-						<button class="canvas-button" @tap="handleCanvasButton(name)">{{name}}</button>
-					</block>
-					<button class="canvas-button" @tap="toTempFilePath" type="primary">toTempFilePath</button>
-				</scroll-view>
-			</view>
+		<view class="uni-common-mt">
+			<canvas class="canvas-element" canvas-id="canvas"></canvas>
+			<scroll-view class="canvas-buttons" scroll-y="true">
+				<block v-for="(name, index) in names" :key="index">
+					<button class="canvas-button" @tap="handleCanvasButton(name)">{{name}}</button>
+				</block>
+				<button class="canvas-button" @tap="toTempFilePath" type="primary">toTempFilePath</button>
+			</scroll-view>
 		</view>
 	</view>
 </template>
diff --git a/examples/hello-uniapp/pages/API/choose-location/choose-location.vue b/examples/hello-uniapp/pages/API/choose-location/choose-location.vue
index b709585eb29..8ee6d2f8c33 100644
--- a/examples/hello-uniapp/pages/API/choose-location/choose-location.vue
+++ b/examples/hello-uniapp/pages/API/choose-location/choose-location.vue
@@ -1,25 +1,25 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-info">
-					<text class="page-body-text-small">当前位置信息</text>
-					<block v-if="hasLocation === false">
-						<text class="page-body-text">未选择位置</text>
-					</block>
-					<block v-if="hasLocation === true">
-						<text class="page-body-text">{{locationAddress}}</text>
-						<view class="page-body-text-location">
-							<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
-							<text>N: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
-						</view>
-					</block>
-				</view>
-				<view class="btn-area">
-					<button type="primary" @tap="chooseLocation">选择位置</button>
-					<button @tap="clear">清空</button>
-				</view>
+		<view class="uni-padding-wrap">
+			<view style="background:#FFFFFF; padding:40upx;">
+				<view class="uni-hello-text uni-center">当前位置信息</view>
+				<block v-if="hasLocation === false">
+					<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
+				</block>
+				<block v-if="hasLocation === true">
+					<view class="uni-hello-text uni-center" style="margin-top:10px;">
+						{{locationAddress}}
+					</view>
+					<view class="uni-h2 uni-center uni-common-mt">
+						<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
+						<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
+					</view>
+				</block>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @tap="chooseLocation">选择位置</button>
+				<button @tap="clear">清空</button>
 			</view>
 		</view>
 	</view>
diff --git a/examples/hello-uniapp/pages/API/clipboard/clipboard.vue b/examples/hello-uniapp/pages/API/clipboard/clipboard.vue
index a065339649d..9cb09630471 100644
--- a/examples/hello-uniapp/pages/API/clipboard/clipboard.vue
+++ b/examples/hello-uniapp/pages/API/clipboard/clipboard.vue
@@ -1,19 +1,17 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">请输入剪贴板内容</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"></input>
-					</view>
-				</view>
-				<view class="btn-area">
-					<button type="primary" @click="setClipboard">存储数据</button>
-					<button @tap="getClipboard">读取数据</button>
+		<view class="uni-padding-wrap">
+			<view class="uni-title">请输入剪贴板内容</view>
+			<view class="uni-list">
+				<view class="uni-list-cell">
+					<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"></input>
 				</view>
 			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setClipboard">存储数据</button>
+				<button @tap="getClipboard">读取数据</button>
+			</view>
 		</view>
 	</view>
 </template>
@@ -78,7 +76,5 @@
 </script>
 
 <style>
-	.uni-list-cell {
-		padding: 0upx 30upx;
-	}
+	
 </style>
diff --git a/examples/hello-uniapp/pages/API/download-file/download-file.vue b/examples/hello-uniapp/pages/API/download-file/download-file.vue
index 9fc709e49ff..a1196d3503c 100644
--- a/examples/hello-uniapp/pages/API/download-file/download-file.vue
+++ b/examples/hello-uniapp/pages/API/download-file/download-file.vue
@@ -1,15 +1,13 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<image v-if="imageSrc" :src="imageSrc" mode="center" />
+		<view class="uni-padding-wrap uni-common-mt">
+			<image class="img" v-if="imageSrc" :src="imageSrc" mode="center" />
 			<block v-else>
-				<view class="page-body-wording">
-					<text class="page-body-text">
-						点击按钮下载服务端示例图片
-					</text>
+				<view class="uni-hello-text">
+					点击按钮下载服务端示例图片
 				</view>
-				<view class="btn-area">
+				<view class="uni-btn-v">
 					<button type="primary" @tap="downloadImage">下载</button>
 				</view>
 			</block>
@@ -29,12 +27,16 @@
 		},
 		methods: {
 			downloadImage: function () {
+				uni.showLoading({
+					title:'下载中'
+				})
 				var self = this
 				uni.downloadFile({
 					url: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
 					success: (res) => {
 						console.log('downloadFile success, res is', res)
-						self.imageSrc = res.tempFilePath
+						self.imageSrc = res.tempFilePath;
+						uni.hideLoading();
 					},
 					fail: (err) => {
 						console.log('downloadFile fail, err is:', err)
@@ -46,10 +48,9 @@
 </script>
 
 <style>
-	.page-body image {
-		width: 600upx;
-		height: 600upx;
-
-		margin: 0 75upx;
-	}
+.img {
+	width: 500upx;
+	height: 500upx;
+	margin: 0 95upx;
+}
 </style>
diff --git a/examples/hello-uniapp/pages/API/file/file.vue b/examples/hello-uniapp/pages/API/file/file.vue
index cd9153169b7..dad0037f71c 100644
--- a/examples/hello-uniapp/pages/API/file/file.vue
+++ b/examples/hello-uniapp/pages/API/file/file.vue
@@ -1,32 +1,24 @@
 <template>
     <view>
         <page-head :title="title"></page-head>
-        <view class="page-body">
-            <view class="page-section">
-                <view class="page-body-info">
-                    <block v-if="tempFilePath != ''">
-                        <image :src="tempFilePath" class="image" mode="aspectFit"></image>
-                    </block>
-                    <block v-if="tempFilePath === '' && savedFilePath != ''">
-                        <image :src="savedFilePath" class="image" mode="aspectFit"></image>
-                    </block>
-                    <block v-if="tempFilePath === '' && savedFilePath === ''">
-                        <view class="image-plus image-plus-nb" @tap="chooseImage">
-                            <view class="image-plus-horizontal"></view>
-                            <view class="image-plus-vertical"></view>
-                        </view>
-                        <view class="image-plus-text">请选择文件</view>
-                    </block>
-                </view>
-                <view class="btn-area">
-                    <button class="btn-savefile" @tap="saveFile">保存文件</button>
-                    <button @tap="clear">删除文件</button>
-                </view>
-				<view class="btn-area">
-					<button @tap="openDocument">打开pdf文件</button>
-				</view>
-            </view>
-        </view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<block v-if="tempFilePath != ''">
+				<image :src="tempFilePath" class="image" mode="aspectFit"></image>
+			</block>
+			<block v-if="tempFilePath === '' && savedFilePath != ''">
+				<image :src="savedFilePath" class="image" mode="aspectFit"></image>
+			</block>
+			<block v-if="tempFilePath === '' && savedFilePath === ''">
+				<view class="uni-hello-addfile" @tap="chooseImage">+ 请选择文件</view>
+			</block>
+			<view class="uni-btn-v">
+				<button class="btn-savefile" @tap="saveFile">保存文件</button>
+				<button @tap="clear">删除文件</button>
+			</view>
+			<view class="btn-area">
+				<button @tap="openDocument">打开pdf文件</button>
+			</view>
+		</view>
     </view>
 </template>
 <script>
@@ -111,17 +103,6 @@
         height: 360upx;
     }
 
-    .page-body-info {
-        display: flex;
-        box-sizing: border-box;
-        padding: 30upx;
-        height: 420upx;
-        border-top: 1upx solid #D9D9D9;
-        border-bottom: 1upx solid #D9D9D9;
-        align-items: center;
-        justify-content: center;
-    }
-
     .btn-savefile {
         background-color: #007aff;
         color: #ffffff;
diff --git a/examples/hello-uniapp/pages/API/get-location/get-location.vue b/examples/hello-uniapp/pages/API/get-location/get-location.vue
index 62d95856dd2..f53ddd6ea0b 100644
--- a/examples/hello-uniapp/pages/API/get-location/get-location.vue
+++ b/examples/hello-uniapp/pages/API/get-location/get-location.vue
@@ -1,24 +1,22 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-info">
-					<text class="page-body-text-small">当前位置经纬度</text>
-					<block v-if="hasLocation === false">
-						<text class="page-body-text">未获取</text>
-					</block>
-					<block v-if="hasLocation === true">
-						<view class="page-body-text-location">
-							<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
-							<text>N: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
-						</view>
-					</block>
-				</view>
-				<view class="btn-area">
-					<button type="primary" @tap="getLocation">获取位置</button>
-					<button @tap="clear">清空</button>
-				</view>
+		<view class="uni-padding-wrap">
+			<view style="background:#FFFFFF; padding:40upx;">
+				<view class="uni-hello-text uni-center">当前位置经纬度</view>
+				<block v-if="hasLocation === false">
+					<view class="uni-h2 uni-center uni-common-mt">未获取</view>
+				</block>
+				<block v-if="hasLocation === true">
+					<view class="uni-h2 uni-center uni-common-mt">
+						<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
+						<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
+					</view>
+				</block>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @tap="getLocation">获取位置</button>
+				<button @tap="clear">清空</button>
 			</view>
 		</view>
 	</view>
@@ -52,22 +50,5 @@
 </script>
 
 <style>
-	.page-body-info {
-		height: 250upx;
-	}
-
-	.page-body-text-small {
-		font-size: 24upx;
-		color: #000;
-		margin-bottom: 100upx;
-	}
-
-	.page-body-text-location {
-		display: flex;
-		font-size: 50upx;
-	}
-
-	.page-body-text-location text {
-		margin: 10upx;
-	}
-</style>
+	
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/API/get-network-type/get-network-type.vue b/examples/hello-uniapp/pages/API/get-network-type/get-network-type.vue
index 3949c851f1e..b8b8ea49c2a 100644
--- a/examples/hello-uniapp/pages/API/get-network-type/get-network-type.vue
+++ b/examples/hello-uniapp/pages/API/get-network-type/get-network-type.vue
@@ -1,22 +1,20 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-info">
-					<view class="page-body-title">网络状态</view>
-					<block v-if="hasNetworkType === false">
-						<text class="page-body-text">未获取</text>
-						<text class="page-body-text">点击绿色按钮可获取网络状态</text>
-					</block>
-					<block v-if="hasNetworkType === true">
-						<text class="page-body-text-network-type">{{networkType}}</text>
-					</block>
-				</view>
-				<view class="btn-area">
-					<button type="primary" @tap="getNetworkType">获取手机网络状态</button>
-					<button @tap="clear">清空</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view style="background:#FFFFFF; padding:40upx;">
+				<view class="uni-hello-text uni-center">网络状态</view>
+				<block v-if="hasNetworkType === false">
+					<view class="uni-h2 uni-center uni-common-mt">未获取</view>
+					<view class="uni-hello-text uni-center uni-common-mt">请点击下面按钮获取网络状态</view>
+				</block>
+				<block v-if="hasNetworkType === true">
+					<view class="uni-h2 uni-center uni-common-mt">{{networkType}}</view>
+				</block>
+			</view>
+			<view class="uni-btn-v uni-common-mt">
+				<button type="primary" @tap="getNetworkType">获取手机网络状态</button>
+				<button @tap="clear">清空</button>
 			</view>
 		</view>
 	</view>
@@ -51,12 +49,5 @@
 </script>
 
 <style>
-	.page-body-info {
-		height: 200upx;
-	}
 
-	.page-body-text-network-type {
-		font-size: 80upx;
-		font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/API/get-system-info/get-system-info.vue b/examples/hello-uniapp/pages/API/get-system-info/get-system-info.vue
index 2bc1fdb681e..44c2d0699a3 100644
--- a/examples/hello-uniapp/pages/API/get-system-info/get-system-info.vue
+++ b/examples/hello-uniapp/pages/API/get-system-info/get-system-info.vue
@@ -1,59 +1,59 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="uni-pd">
-							<view class="uni-label">手机型号</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.model"></input>
-						</view>
+		<view class="uni-common-mt">
+			<view class="uni-list">
+				<view class="uni-list-cell">
+					<view class="uni-pd">
+						<view class="uni-label">手机型号</view>
 					</view>
-					<view class="uni-list-cell">
-						<view class="uni-pd">
-							<view class="uni-label">语言</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.language"></input>
-						</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.model"></input>
 					</view>
-					<view class="uni-list-cell">
-						<view class="uni-pd">
-							<view class="uni-label">版本</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.version"></input>
-						</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-pd">
+						<view class="uni-label">语言</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.language"></input>
+					</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-pd">
+						<view class="uni-label">版本</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.version"></input>
+					</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-pd">
+						<view class="uni-label">屏幕宽度</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowWidth"></input>
+					</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-pd">
+						<view class="uni-label">屏幕高度</view>
 					</view>
-					<view class="uni-list-cell">
-						<view class="uni-pd">
-							<view class="uni-label">屏幕宽度</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowWidth"></input>
-						</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowHeight"></input>
 					</view>
-					<view class="uni-list-cell">
-						<view class="uni-pd">
-							<view class="uni-label">屏幕高度</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowHeight"></input>
-						</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-pd">
+						<view class="uni-label">DPI</view>
 					</view>
-					<view class="uni-list-cell">
-						<view class="uni-pd">
-							<view class="uni-label">DPI</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.pixelRatio"></input>
-						</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.pixelRatio"></input>
 					</view>
 				</view>
-				<view class="btn-area">
+			</view>
+			<view class="uni-padding-wrap">
+				<view class="uni-btn-v">
 					<button type="primary" @tap="getSystemInfo">获取手机系统信息</button>
 				</view>
 			</view>
diff --git a/examples/hello-uniapp/pages/API/get-user-info/get-user-info.vue b/examples/hello-uniapp/pages/API/get-user-info/get-user-info.vue
index e539de48c58..6f8c63fda2b 100644
--- a/examples/hello-uniapp/pages/API/get-user-info/get-user-info.vue
+++ b/examples/hello-uniapp/pages/API/get-user-info/get-user-info.vue
@@ -1,28 +1,28 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-info">
-					<view class="page-body-title">用户信息</view>
-					<block v-if="hasUserInfo === false">
-						<text class="page-body-text">未获取</text>
-						<text class="page-body-text">点击蓝色按钮可获取用户头像及昵称</text>
-					</block>
-					<block v-if="hasUserInfo === true">
+		<view class="uni-padding-wrap">
+			<view style="background:#FFF; padding:40upx;">
+				<block v-if="hasUserInfo === false">
+					<view class="uni-hello-text uni-center">
+						<text>请点击蓝色按钮获取用户头像及昵称</text>
+					</view>
+				</block>
+				<block v-if="hasUserInfo === true">
+					<view class="uni-h4 uni-center uni-common-mt">{{userInfo.nickName}}</view>
+					<view style="padding:30upx 0; text-align:center;">
 						<image class="userinfo-avatar" :src="userInfo.avatarUrl"></image>
-						<text class="userinfo-nickname">{{userInfo.nickName}}</text>
-					</block>
-				</view>
-				<view class="btn-area">
-					<!-- #ifdef APP-PLUS -->
-					<button type="primary" @tap="getUserInfo">获取用户信息</button>
-					<!-- #endif -->
-					<!-- #ifdef MP-WEIXIN -->
-					<button type="primary" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">获取用户信息</button>
-					<!-- #endif -->
-					<button @tap="clear">清空</button>
-				</view>
+					</view>
+				</block>
+			</view>
+			<view class="uni-btn-v">
+				<!-- #ifdef APP-PLUS -->
+				<button type="primary" @tap="getUserInfo">获取用户信息</button>
+				<!-- #endif -->
+				<!-- #ifdef MP-WEIXIN -->
+				<button type="primary" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">获取用户信息</button>
+				<!-- #endif -->
+				<button @tap="clear">清空</button>
 			</view>
 		</view>
 	</view>
@@ -92,19 +92,9 @@
 </script>
 
 <style>
-	.page-body-info {
-		padding-bottom: 0;
-		height: 460upx;
-	}
-
 	.userinfo-avatar {
 		border-radius: 128upx;
 		width: 128upx;
 		height: 128upx;
 	}
-
-	.userinfo-nickname {
-		margin-top: 20upx;
-		font-size: 38upx;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/API/image/image.vue b/examples/hello-uniapp/pages/API/image/image.vue
index 2690e5083da..0f85b3dbb68 100644
--- a/examples/hello-uniapp/pages/API/image/image.vue
+++ b/examples/hello-uniapp/pages/API/image/image.vue
@@ -1,67 +1,65 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
+		<view class="uni-common-mt">
 			<form>
-				<view class="page-section">
-					<view class="uni-list">
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">图片来源</view>
-							</view>
-							<view class="uni-list-cell-right">
-								<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
-									<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
-								</picker>
-							</view>
+				<view class="uni-list">
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">图片来源</view>
 						</view>
+						<view class="uni-list-cell-right">
+							<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
+								<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
+							</picker>
+						</view>
+					</view>
 
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">图片质量</view>
-							</view>
-							<view class="uni-list-cell-right">
-								<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
-									<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
-								</picker>
-							</view>
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">图片质量</view>
 						</view>
+						<view class="uni-list-cell-right">
+							<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
+								<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
+							</picker>
+						</view>
+					</view>
 
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">数量限制</view>
-							</view>
-							<view class="uni-list-cell-right">
-								<picker :range="count" @change="countChange" mode="selector">
-									<view class="uni-input">{{count[countIndex]}}</view>
-								</picker>
-							</view>
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">数量限制</view>
+						</view>
+						<view class="uni-list-cell-right">
+							<picker :range="count" @change="countChange" mode="selector">
+								<view class="uni-input">{{count[countIndex]}}</view>
+							</picker>
 						</view>
 					</view>
+				</view>
+					
 
-					<view class="uni-list list-pd">
-						<view class="uni-list-cell cell-pd">
-							<view class="uni-uploader">
-								<view class="uni-uploader-head">
-									<view class="uni-uploader-title">点击可预览选好的图片</view>
-									<view class="uni-uploader-info">{{imageList.length}}/9</view>
-								</view>
-								<view class="uni-uploader-body">
-									<view class="uni-uploader__files">
-										<block v-for="(image,index) in imageList" :key="index">
-											<view class="uni-uploader__file">
-												<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
-											</view>
-										</block>
-										<view class="uni-uploader__input-box">
-											<view class="uni-uploader__input" @tap="chooseImage"></view>
+				<view class="uni-list list-pd">
+					<view class="uni-list-cell cell-pd">
+						<view class="uni-uploader">
+							<view class="uni-uploader-head">
+								<view class="uni-uploader-title">点击可预览选好的图片</view>
+								<view class="uni-uploader-info">{{imageList.length}}/9</view>
+							</view>
+							<view class="uni-uploader-body">
+								<view class="uni-uploader__files">
+									<block v-for="(image,index) in imageList" :key="index">
+										<view class="uni-uploader__file">
+											<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
 										</view>
+									</block>
+									<view class="uni-uploader__input-box">
+										<view class="uni-uploader__input" @tap="chooseImage"></view>
 									</view>
 								</view>
 							</view>
 						</view>
 					</view>
-
 				</view>
 			</form>
 		</view>
diff --git a/examples/hello-uniapp/pages/API/login/login.vue b/examples/hello-uniapp/pages/API/login/login.vue
index 21428a70f10..76de25c9126 100644
--- a/examples/hello-uniapp/pages/API/login/login.vue
+++ b/examples/hello-uniapp/pages/API/login/login.vue
@@ -1,17 +1,24 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
+		<view class="uni-padding-wrap">
+			<view style="background:#FFF; padding:40upx;">
 				<block v-if="hasLogin === true">
-					<text class="page-body-title">已登录</text>
-					<text class="page-body-text">每个帐号仅需登录 1 次，后续每次进入页面即可自动拉取用户信息</text>
+					<view class="uni-h3 uni-center uni-common-mt">已登录</view>
+					<view class="uni-hello-text uni-center">
+						<text>每个帐号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
+					</view>
 				</block>
 				<block v-if="hasLogin === false">
-					<text class="page-body-text">每个帐号仅需登录一次</text>
-					<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @tap="bindLogin(value)" :key="key">{{value.name}}</button>
+					<view class="uni-h3 uni-center uni-common-mt">未登录</view>
+					<view class="uni-hello-text uni-center">
+						请点击按钮登录
+					</view>
 				</block>
 			</view>
+			<view class="uni-btn-v uni- uni-common-mt">
+				<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @tap="bindLogin(value)" :key="key">{{value.name}}</button>
+			</view>
 		</view>
 	</view>
 </template>
@@ -84,34 +91,6 @@
 </script>
 
 <style>
-	.page-section {
-		margin-top: 200upx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		padding: 0 50upx;
-		box-sizing: border-box;
-	}
-
-	.page-body-title {
-		font-size: 60upx;
-		line-height: 200upx;
-	}
-
-	.page-body-text {
-		color: #bbb;
-		font-size: 28upx;
-		line-height: 40upx;
-		margin: 0 0 100upx 0;
-		text-align: center;
-	}
-
-	.page-body-button {
-		width: 100%;
-	}
-
 	button {
 		background-color: #007aff;
 		color: #ffffff;
diff --git a/examples/hello-uniapp/pages/API/make-phone-call/make-phone-call.vue b/examples/hello-uniapp/pages/API/make-phone-call/make-phone-call.vue
index 7f792dfaa82..9c362c32cad 100644
--- a/examples/hello-uniapp/pages/API/make-phone-call/make-phone-call.vue
+++ b/examples/hello-uniapp/pages/API/make-phone-call/make-phone-call.vue
@@ -1,13 +1,11 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="desc">请在下方输入电话号码</view>
-				<input class="input" type="number" name="input" @input="bindInput" />
-				<view class="btn-area">
-					<button @tap="makePhoneCall" type="primary" :disabled="disabled">拨打</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-hello-text uni-center">请在下方输入电话号码</view>
+			<input class="input uni-common-mt" type="number" name="input" @input="bindInput" />
+			<view class="uni-btn-v uni-common-mt">
+				<button @tap="makePhoneCall" type="primary" :disabled="disabled">拨打</button>
 			</view>
 		</view>
 	</view>
@@ -42,27 +40,11 @@
 </script>
 
 <style>
-	.page-section {
-		width: auto;
-		margin: 30upx;
-		padding: 44upx 60upx 60upx;
-		background-color: #fff;
-		font-size: 28upx;
-	}
-
-	.desc {
-		margin-bottom: 20upx;
-	}
-
 	.input {
 		height: 119upx;
 		line-height: 119upx;
 		font-size: 78upx;
 		border-bottom: 1upx solid #E2E2E2;
+		text-align:center;
 	}
-
-	.btn-area {
-		padding: 0;
-	}
-
 </style>
diff --git a/examples/hello-uniapp/pages/API/modal/modal.vue b/examples/hello-uniapp/pages/API/modal/modal.vue
index 311647d96dc..c442459d575 100644
--- a/examples/hello-uniapp/pages/API/modal/modal.vue
+++ b/examples/hello-uniapp/pages/API/modal/modal.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-btn-v">
 				<button type="default" @tap="modalTap">有标题的modal</button>
 				<button type="default" @tap="noTitlemodalTap">无标题的modal</button>
 			</view>
@@ -37,4 +37,4 @@
 			}
 		}
 	}
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/API/navigator/navigator.vue b/examples/hello-uniapp/pages/API/navigator/navigator.vue
index e11ad8c8d51..4507a7d4d7a 100644
--- a/examples/hello-uniapp/pages/API/navigator/navigator.vue
+++ b/examples/hello-uniapp/pages/API/navigator/navigator.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-btn-v">
 				<button @tap="navigateTo">跳转新页面，并传递数据</button>
 				<button @tap="navigateBack">返回上一页</button>
 				<button @tap="redirectTo">在当前页面打开</button>
diff --git a/examples/hello-uniapp/pages/API/on-accelerometer-change/on-accelerometer-change.vue b/examples/hello-uniapp/pages/API/on-accelerometer-change/on-accelerometer-change.vue
index cc0642ae5c4..7946b1ea1af 100644
--- a/examples/hello-uniapp/pages/API/on-accelerometer-change/on-accelerometer-change.vue
+++ b/examples/hello-uniapp/pages/API/on-accelerometer-change/on-accelerometer-change.vue
@@ -1,22 +1,18 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<!-- #ifdef APP-PLUS -->
-				<view class="page-section-spacing">
-					<button class="shake" @tap="shake">摇一摇</button>
-				</view>
-				<!-- #endif -->
-				<view class="page-section-spacing">
-					<button type="primary" @tap="watchAcce">监听设备的加速度变化</button>
-					<button type="primary" @tap="stopAcce">停止监听设备的加速度变化</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<!-- #ifdef APP-PLUS -->
+			<view class="uni-btn-v">
+				<button class="shake" @tap="shake">摇一摇</button>
 			</view>
-			<view class="page-section">
-				<view class="page-section-spacing">
-					<textarea :value="value" />
-				</view>
+			<!-- #endif -->
+			<view class="uni-btn-v">
+				<button type="primary" @tap="watchAcce">监听设备的加速度变化</button>
+				<button type="primary" @tap="stopAcce">停止监听设备的加速度变化</button>
+			</view>
+			<view class="uni-textarea uni-common-mt">
+				<textarea :value="value" />
 			</view>
 		</view>
 	</view>
@@ -60,12 +56,4 @@
 		color: #ffffff;
 		margin-bottom: 50upx;
 	}
-
-	textarea {
-		border: 2upx solid #7A7E83;
-		box-sizing: border-box;
-		width: 100%;
-		height: 288upx;
-		padding: 20upx;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/API/on-compass-change/on-compass-change.vue b/examples/hello-uniapp/pages/API/on-compass-change/on-compass-change.vue
index ee7341bd4c3..ae13d4eafad 100644
--- a/examples/hello-uniapp/pages/API/on-compass-change/on-compass-change.vue
+++ b/examples/hello-uniapp/pages/API/on-compass-change/on-compass-change.vue
@@ -1,16 +1,16 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section_center">
-				<text class="page-body-text">旋转手机即可获取方位信息</text>
-				<view class="direction">
-					<view class="bg-compass-line"></view>
-					<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
-					<view class="direction-value">
-						<text>{{direction}}</text>
-						<text class="direction-degree">o</text>
-					</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-hello-text uni-center" style="padding-bottom:50upx;">
+				旋转手机即可获取方位信息
+			</view>
+			<view class="direction">
+				<view class="bg-compass-line"></view>
+				<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
+				<view class="direction-value">
+					<text>{{direction}}</text>
+					<text class="direction-degree">o</text>
 				</view>
 			</view>
 		</view>
@@ -45,6 +45,7 @@
 		height: 540upx;
 		align-items: center;
 		justify-content: center;
+		margin:0 auto;
 	}
 
 	.direction-value {
diff --git a/examples/hello-uniapp/pages/API/open-location/open-location.vue b/examples/hello-uniapp/pages/API/open-location/open-location.vue
index 480fb1c5921..7bf801d78e5 100644
--- a/examples/hello-uniapp/pages/API/open-location/open-location.vue
+++ b/examples/hello-uniapp/pages/API/open-location/open-location.vue
@@ -1,48 +1,48 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<form @submit="openLocation">
-					<view class="uni-list">
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">经度</view>
-							</view>
-							<view class="uni-list-cell-db">
-								<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"></input>
-							</view>
+		<view class="uni-common-mt">
+			<form @submit="openLocation">
+				<view class="uni-list">
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">经度</view>
 						</view>
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">纬度</view>
-							</view>
-							<view class="uni-list-cell-db">
-								<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"></input>
-							</view>
+						<view class="uni-list-cell-db">
+							<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"></input>
 						</view>
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">位置名称</view>
-							</view>
-							<view class="uni-list-cell-db">
-								<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"></input>
-							</view>
+					</view>
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">纬度</view>
+						</view>
+						<view class="uni-list-cell-db">
+							<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"></input>
+						</view>
+					</view>
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">位置名称</view>
 						</view>
-						<view class="uni-list-cell">
-							<view class="uni-list-cell-left">
-								<view class="uni-label">详细位置</view>
-							</view>
-							<view class="uni-list-cell-db">
-								<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"></input>
-							</view>
+						<view class="uni-list-cell-db">
+							<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"></input>
 						</view>
 					</view>
-					<view class="btn-area">
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							<view class="uni-label">详细位置</view>
+						</view>
+						<view class="uni-list-cell-db">
+							<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"></input>
+						</view>
+					</view>
+				</view>
+				<view class="uni-padding-wrap">
+					<view class="uni-btn-v uni-common-mt">
 						<button type="primary" formType="submit">查看位置</button>
 					</view>
-				</form>
-			</view>
+				</view>
+			</form>
 		</view>
 	</view>
 </template>
@@ -69,25 +69,6 @@
 </script>
 
 <style>
-	.page-body-info {
-		height: 250upx;
-	}
-
-	.page-body-text-small {
-		font-size: 24upx;
-		color: #000;
-		margin-bottom: 100upx;
-	}
-
-	.page-body-text-location {
-		display: flex;
-		font-size: 50upx;
-	}
-
-	.page-body-text-location text {
-		margin: 10upx;
-	}
-
 	.uni-list-cell-left {
 		padding: 0 30upx;
 	}
diff --git a/examples/hello-uniapp/pages/API/pull-down-refresh/pull-down-refresh.vue b/examples/hello-uniapp/pages/API/pull-down-refresh/pull-down-refresh.vue
index 77b5286df34..acbb4ef9a79 100644
--- a/examples/hello-uniapp/pages/API/pull-down-refresh/pull-down-refresh.vue
+++ b/examples/hello-uniapp/pages/API/pull-down-refresh/pull-down-refresh.vue
@@ -1,16 +1,9 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-info">
-					<text class="page-body-text">下拉页面加载数据</text>
-				</view>
-				<view class="page-body-content">
-					<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view>
-					<view class="loadMore" v-if="showLoadMore">{{loadMoreText}}</view>
-				</view>
-			</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view>
+			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
 		</view>
 	</view>
 </template>
@@ -18,17 +11,20 @@
 	export default {
 		data() {
 			return {
-				title: 'on/stopPullDownRefresh',
+				title: '下拉刷新 + 加载更多',
 				data: [],
-				loadMoreText: "加载更多...",
+				loadMoreText: "加载中...",
 				showLoadMore: false,
 				max: 0
 			}
 		},
+		onLoad() {
+			this.initData();
+		},
 		onUnload() {
 			this.max = 0,
 			this.data = [],
-			this.loadMoreText = "加载更多...",
+			this.loadMoreText = "加载更多",
 			this.showLoadMore = false;
 		},
 		onReachBottom() {
@@ -44,30 +40,22 @@
 		},
 		onPullDownRefresh() {
 			console.log('onPullDownRefresh');
-			if(this.max > 40){
-				this.loadMoreText = "没有更多数据了!";
-				uni.showToast({
-					title:"没有新内容了",
-					icon:"none",
-				})
-				uni.stopPullDownRefresh();
-				return;
-			}
-			setTimeout(() => {
-				if(this.max === 0){
-					this.setDate()
-				}else{
-					let data = []
-					this.max += 3;
-					for (var i = this.max + 1 ; i > this.max - 2; i--) {
-						data.push(i)
-					}
-					this.data.splice(0, 0, ...data);
-				}
-				uni.stopPullDownRefresh();
-			}, 300);
+			this.initData();
 		},
 		methods: {
+			initData(){
+				setTimeout(() => {
+					this.max = 0;
+					this.data = [];
+					let data = [];
+					this.max += 10;
+					for (var i = this.max - 9; i < this.max + 1; i++) {
+						data.push(i)
+					}
+					this.data = this.data.concat(data);
+					uni.stopPullDownRefresh();
+				}, 300);
+			},
 			setDate() {
 				let data = [];
 				this.max += 10;
@@ -81,26 +69,14 @@
 </script>
 
 <style>
-	.page-body-info {
-		background-color: transparent;
-	}
-
-	.page-body-content {
-		padding: 0 30upx;
-	}
-
 	.text {
 		margin: 16upx 0;
-		width: 690upx;
+		width:100%;
 		background-color: #fff;
-		height: 90upx;
-		line-height: 90upx;
+		height: 120upx;
+		line-height: 120upx;
 		text-align: center;
 		color: #555;
 		border-radius: 8upx;
 	}
-
-	.loadMore {
-		text-align: center;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/API/request-payment/request-payment.vue b/examples/hello-uniapp/pages/API/request-payment/request-payment.vue
index 8abb49e552a..534a9cad78f 100644
--- a/examples/hello-uniapp/pages/API/request-payment/request-payment.vue
+++ b/examples/hello-uniapp/pages/API/request-payment/request-payment.vue
@@ -1,12 +1,13 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view>支付金额</view>
-				<view class="price"><text class="rmbLogo">￥</text>0.01</view>
-				<view class="desc">实际应用中可自定义金额</view>
-				<view class="btn-area">
+			<view class="uni-padding-wrap">
+				<view style="background:#FFF; padding:50upx 0;">
+					<view class="uni-hello-text uni-center">支付金额</text></view>
+					<view class="uni-h1 uni-center uni-common-mt"><text class="rmbLogo">￥</text>0.01</view>
+					<view class="uni-hello-text uni-center uni-common-mt">实际应用中可自定义金额</text></view>
+				</view>
+				<view class="uni-btn-v uni-common-mt">
 					<!-- #ifdef MP-WEIXIN -->
 					<button type="primary" @tap="weixinPay" :loading="loading">微信支付</button>
 					<!-- #endif -->
@@ -181,33 +182,8 @@
 </script>
 
 <style>
-	.page-section {
-		width: auto;
-		margin: 30upx;
-		padding: 64upx 30upx;
-		background-color: #fff;
-		text-align: center;
-		font-size: 28upx;
-	}
-
-	.desc {
-		color: #B2B2B2;
-	}
-
-	.price {
-		margin-top: 30upx;
-		margin-bottom: 25upx;
-		position: relative;
-		display: inline-block;
-		font-size: 78upx;
-		line-height: 1;
-	}
-
 	.rmbLogo {
-		position: absolute;
 		font-size: 40upx;
-		top: 8upx;
-		left: -40upx;
 	}
 
 	button {
diff --git a/examples/hello-uniapp/pages/API/request/request.vue b/examples/hello-uniapp/pages/API/request/request.vue
index 929bf7e33c5..351012c1c48 100644
--- a/examples/hello-uniapp/pages/API/request/request.vue
+++ b/examples/hello-uniapp/pages/API/request/request.vue
@@ -1,14 +1,15 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-body-wording">
-				<text class="page-body-text">
-					点击向服务器发起请求
-				</text>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-hello-text">
+				请点击按钮向服务器发起请求
 			</view>
-			<view class="btn-area">
-				<button type="primary" @tap="makeRequest" :loading="loading">request</button>
+			<view class="uni-textarea uni-common-mt">
+				<textarea :value="res"></textarea>
+			</view>
+			<view class="uni-btn-v uni-common-mt">
+				<button type="primary" @tap="makeRequest" :loading="loading">发起请求</button>
 			</view>
 		</view>
 	</view>
@@ -20,7 +21,8 @@
 		data() {
 			return {
 				title: 'request',
-				loading: false
+				loading: false,
+				res:""
 			}
 		},
 		methods: {
@@ -38,6 +40,7 @@
 							mask: true,
 							duration: duration
 						})
+						this.res = '请求结果 : ' + JSON.stringify(res);
 						console.log('request success', res)
 					},
 					fail: (err) => {
diff --git a/examples/hello-uniapp/pages/API/scan-code/scan-code.vue b/examples/hello-uniapp/pages/API/scan-code/scan-code.vue
index 51fa326bbd5..3542fff1a20 100644
--- a/examples/hello-uniapp/pages/API/scan-code/scan-code.vue
+++ b/examples/hello-uniapp/pages/API/scan-code/scan-code.vue
@@ -1,14 +1,14 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section-title">扫码结果</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">扫码结果</view>
 			<view class="uni-list">
 				<view class="uni-cell">
 					<view class="uni-input">{{result}}</view>
 				</view>
 			</view>
-			<view class="btn-area">
+			<view class="uni-btn-v">
 				<button type="primary" @tap="scanCode">扫一扫</button>
 			</view>
 		</view>
@@ -40,8 +40,5 @@
 </script>
 
 <style>
-	.uni-input {
-		padding: 15upx 30upx;
-		word-break: break-all;
-	}
+
 </style>
diff --git a/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue b/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
index db0f0f58c32..b2a00a51812 100644
--- a/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
+++ b/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
@@ -1,21 +1,25 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<form class="page-body" @submit="setNaivgationBarTitle">
-			<view class="uni-list">
-				<view class="uni-list-cell">
-					<view class="uni-list-cell-left">
-						页面标题
+		<view>
+			<form @submit="setNaivgationBarTitle">
+				<view class="uni-list">
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							页面标题
+						</view>
+						<view class="uni-list-cell-db">
+							<input class="uni-input" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>
+						</view>
 					</view>
-					<view class="uni-list-cell-db">
-						<input class="uni-input" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>
+				</view>
+				<view class="uni-padding-wrap">
+					<view class="uni-btn-v">
+						<button type="primary" formType="submit">设置</button>
 					</view>
 				</view>
-			</view>
-			<view class="btn-area">
-				<button type="primary" formType="submit">设置</button>
-			</view>
-		</form>
+			</form>
+		</view>
 	</view>
 </template>
 <script>
diff --git a/examples/hello-uniapp/pages/API/share/share.vue b/examples/hello-uniapp/pages/API/share/share.vue
index 2faf4cfe38a..729650f558f 100644
--- a/examples/hello-uniapp/pages/API/share/share.vue
+++ b/examples/hello-uniapp/pages/API/share/share.vue
@@ -1,53 +1,46 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section-title">分享内容</view>
-			<view class="page-section">
-				<view class="textarea-wrp">
-					<textarea class="textarea" v-model="shareText" />
-				</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-title">分享内容</view>
+			<view class="uni-textarea">
+				<textarea class="textarea" v-model="shareText" />
 			</view>
-			<view class="page-section-title">分享图片：</view>
-			<view class="page-section">
-				<view class="uni-uploader-body">
-					<view class="uni-uploader__input-box" v-if="!image" @tap="chooseImage"></view>
-					<image class="uni-uploader__img" v-if="image" :src="image"></image>
-				</view>
+			<view class="uni-title">分享图片：</view>
+			<view class="uni-uploader" style="padding:15upx; background:#FFF;">
+				<view class="uni-uploader__input-box" v-if="!image" @tap="chooseImage"></view>
+				<image class="uni-uploader__img" v-if="image" :src="image"></image>
 			</view>
 			<!-- #ifdef APP-PLUS -->
-			<view class="page-section-title">分享类型：</view>
-			<view class="page-section">
-				<view class="uni-uploader-body">
-					<radio-group @change="radioChange">
-						<label class="radio">
-							<radio value="1" checked="true"/>文字
-						</label>
-						<label class="radio">
-							<radio value="2" />图片
-						</label>
-						<label class="radio">
-							<radio value="0" />图文
-						</label>
-						<label class="radio">
-							<radio value="5" />小程序
-						</label>
-					</radio-group>
-				</view>
+			<view class="uni-title">分享类型：</view>
+			<view>
+				<radio-group @change="radioChange">
+					<label class="radio">
+						<radio value="1" checked="true"/>文字
+					</label>
+					<label class="radio">
+						<radio value="2" />图片
+					</label>
+					<label class="radio">
+						<radio value="0" />图文
+					</label>
+					<label class="radio">
+						<radio value="5" />小程序
+					</label>
+				</radio-group>
 			</view>
-			<view class="btn-area" v-if="providerList.length > 0">
+			<view class="uni-btn-v uni-common-mt" v-if="providerList.length > 0">
 				<block v-for="(value,index) in providerList" :key="index">
 					<button type="primary" v-if="value" :disabled="shareType === 5 && value.name !== '分享到微信好友'" @tap="share(value)">{{value.name}}</button>
 				</block>
 			</view>
 			<!-- #endif -->
 			<!-- #ifdef MP-WEIXIN -->
-			<view class="btn-area">
+			<view class="uni-btn-v uni-common-mt">
 				<button type="primary" open-type="share">分享</button>
 			</view>
 			<!-- #endif -->
 		</view>
-
 	</view>
 </template>
 <script>
@@ -263,32 +256,5 @@
 </script>
 
 <style>
-	.textarea-wrp {
-		padding: 0 20upx;
-	}
-	.page-section{
-		margin-bottom: 20upx;
-	}
-	.textarea {
-		border: 2upx solid #D8D8D8;
-		padding: 10upx;
-		height: 90upx;
-		width: 690upx;
-	}
-	.uni-input{
-		border: 2upx solid #D8D8D8;
-		padding: 0 10upx;
-		width: 690upx;
-	}
-	.uni-uploader-body {
-		display: flex;
-		justify-content: center;
-	}
-	radio-group{
-		box-sizing: border-box;
-		width: 100%;
-		padding: 0 30upx;
-		display: flex;
-		justify-content: space-between;
-	}
-</style>
+
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/API/show-loading/show-loading.vue b/examples/hello-uniapp/pages/API/show-loading/show-loading.vue
index 10c282df15b..855b0317b1f 100644
--- a/examples/hello-uniapp/pages/API/show-loading/show-loading.vue
+++ b/examples/hello-uniapp/pages/API/show-loading/show-loading.vue
@@ -1,9 +1,9 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area">
-				<button class="btn-load" @tap="showLoading">显示 loading 提示框</button>
+		<view class="uni-padding-wrap">
+			<view class="uni-btn-v">
+				<button class="btn-load" type="primary" @tap="showLoading">显示 loading 提示框</button>
 				<button @tap="hideLoading">隐藏 loading 提示框</button>
 			</view>
 		</view>
@@ -28,8 +28,5 @@
 </script>
 
 <style>
-	.btn-load {
-		background-color: #007aff;
-		color: #ffffff;
-	}
-</style>
+	
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/API/storage/storage.vue b/examples/hello-uniapp/pages/API/storage/storage.vue
index 4314092c1a0..017e414edeb 100644
--- a/examples/hello-uniapp/pages/API/storage/storage.vue
+++ b/examples/hello-uniapp/pages/API/storage/storage.vue
@@ -1,27 +1,27 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">key</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange"></input>
-						</view>
+		<view class="uni-common-mt">
+			<view class="uni-list">
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left">
+						<view class="uni-label">key</view>
 					</view>
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">value</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange"></input>
-						</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange"></input>
 					</view>
 				</view>
-				<view class="btn-area">
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left">
+						<view class="uni-label">value</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange"></input>
+					</view>
+				</view>
+			</view>
+			<view class="uni-padding-wrap">
+				<view class="uni-btn-v">
 					<button type="primary" class="btn-setstorage" @tap="setStorage">存储数据</button>
 					<button @tap="getStorage">读取数据</button>
 					<button @tap="clearStorage">清理数据</button>
diff --git a/examples/hello-uniapp/pages/API/toast/toast.vue b/examples/hello-uniapp/pages/API/toast/toast.vue
index 1128a004330..8c1cd986e0e 100644
--- a/examples/hello-uniapp/pages/API/toast/toast.vue
+++ b/examples/hello-uniapp/pages/API/toast/toast.vue
@@ -1,23 +1,13 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area">
-				<view class="body-view">
-					<button type="default" @tap="toast1Tap">点击弹出默认toast</button>
-				</view>
-				<view class="body-view">
-					<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
-				</view>
-				<view class="body-view">
-					<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
-				</view>
-				<view class="body-view">
-					<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
-				</view>
-				<view class="body-view">
-					<button type="default" @tap="hideToast">点击隐藏toast</button>
-				</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-btn-v">
+				<button type="default" @tap="toast1Tap">点击弹出默认toast</button>
+				<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
+				<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
+				<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
+				<button type="default" @tap="hideToast">点击隐藏toast</button>
 			</view>
 		</view>
 	</view>
diff --git a/examples/hello-uniapp/pages/API/upload-file/upload-file.vue b/examples/hello-uniapp/pages/API/upload-file/upload-file.vue
index 1b0420b8689..7e1fd5854e8 100644
--- a/examples/hello-uniapp/pages/API/upload-file/upload-file.vue
+++ b/examples/hello-uniapp/pages/API/upload-file/upload-file.vue
@@ -1,22 +1,14 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-info">
-
-					<block v-if="imageSrc">
-						<image :src="imageSrc" class="image" mode="aspectFit"></image>
-					</block>
-
-					<block v-else>
-						<view class="image-plus image-plus-nb" @tap="chooseImage">
-							<view class="image-plus-horizontal"></view>
-							<view class="image-plus-vertical"></view>
-						</view>
-						<view class="image-plus-text">选择图片</view>
-					</block>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="demo">
+				<block v-if="imageSrc">
+					<image :src="imageSrc" class="image" mode="widthFix"></image>
+				</block>
+				<block v-else>
+					<view class="uni-hello-addfile" @tap="chooseImage">+ 选择图片</view>
+				</block>
 			</view>
 		</view>
 	</view>
@@ -34,6 +26,7 @@
 		},
 		methods: {
 			chooseImage: function () {
+				uni.showLoading({});
 				uni.chooseImage({
 					count: 1,
 					sizeType: ['compressed'],
@@ -59,7 +52,8 @@
 								uni.showModal({
 									content:err.errMsg,
 									showCancel:false
-								})
+								});
+								uni.hideLoading();
 							},
 							complete: () => {
 								console.log("complate")
@@ -69,6 +63,7 @@
 					},
 					fail: (err) => {
 						console.log('chooseImage fail', err)
+						uni.hideLoading();
 					}
 				})
 			}
@@ -79,17 +74,10 @@
 <style>
 	.image {
 		width: 100%;
-		height: 360upx;
 	}
 
-	.page-body-info {
-		display: flex;
-		box-sizing: border-box;
-		padding: 30upx;
-		height: 420upx;
-		border-top: 1upx solid #D9D9D9;
-		border-bottom: 1upx solid #D9D9D9;
-		align-items: center;
-		justify-content: center;
+	.demo{
+		background:#FFF;
+		padding:50upx;
 	}
 </style>
diff --git a/examples/hello-uniapp/pages/API/video/video.vue b/examples/hello-uniapp/pages/API/video/video.vue
index 66bf18ff5bb..842cedb14bb 100644
--- a/examples/hello-uniapp/pages/API/video/video.vue
+++ b/examples/hello-uniapp/pages/API/video/video.vue
@@ -1,34 +1,26 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">视频来源</view>
-						</view>
-						<view class="uni-list-cell-right">
-							<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex">
-								<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
-							</picker>
-						</view>
+		<view class="uni-common-mt">
+			<view class="uni-list">
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left">
+						<view class="uni-label">视频来源</view>
+					</view>
+					<view class="uni-list-cell-right">
+						<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex">
+							<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
+						</picker>
 					</view>
-				</view>
-				<view class="page-body-info">
-					<template v-if="!src">
-						<view class="image-plus image-plus-nb" @tap="chooseVideo">
-							<view class="image-plus-horizontal"></view>
-							<view class="image-plus-vertical"></view>
-						</view>
-						<view class="image-plus-text">添加视频</view>
-					</template>
-					<template v-else>
-						<video :src="src" class="video"></video>
-					</template>
 				</view>
 			</view>
 		</view>
+		<template v-if="!src">
+			<view class="uni-hello-addfile" @tap="chooseVideo">+ 添加视频</view>
+		</template>
+		<template v-else>
+			<video :src="src" class="video"></video>
+		</template>
 	</view>
 </template>
 <script>
@@ -68,14 +60,5 @@
 </script>
 
 <style>
-	.page-body-info {
-		display: flex;
-		margin-top: 40upx;
-		padding: 0;
-		height: 360upx;
-		border-top: 1upx solid #D9D9D9;
-		border-bottom: 1upx solid #D9D9D9;
-		align-items: center;
-		justify-content: center;
-	}
-</style>
+	.video{width:100%;}
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/API/voice/voice.vue b/examples/hello-uniapp/pages/API/voice/voice.vue
index e7152cd89b1..190a26e1a3b 100644
--- a/examples/hello-uniapp/pages/API/voice/voice.vue
+++ b/examples/hello-uniapp/pages/API/voice/voice.vue
@@ -1,62 +1,60 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<block v-if="recording === false && playing === false && hasRecord === false">
-					<view class="page-body-time">
-						<text class="time-big">{{formatedRecordTime}}</text>
+		<view class="uni-padding-wrap">
+			<block v-if="recording === false && playing === false && hasRecord === false">
+				<view class="page-body-time">
+					<text class="time-big">{{formatedRecordTime}}</text>
+				</view>
+				<view class="page-body-buttons">
+					<view class="page-body-button"></view>
+					<view class="page-body-button" @tap="startRecord">
+						<image src="../../../static/record.png"></image>
 					</view>
-					<view class="page-body-buttons">
-						<view class="page-body-button"></view>
-						<view class="page-body-button" @tap="startRecord">
-							<image src="../../../static/record.png"></image>
-						</view>
-						<view class="page-body-button"></view>
+					<view class="page-body-button"></view>
+				</view>
+			</block>
+			<block v-if="recording === true">
+				<view class="page-body-time">
+					<text class="time-big">{{formatedRecordTime}}</text>
+				</view>
+				<view class="page-body-buttons">
+					<view class="page-body-button"></view>
+					<view class="page-body-button" @tap="stopRecord">
+						<view class="button-stop-record"></view>
 					</view>
-				</block>
-				<block v-if="recording === true">
-					<view class="page-body-time">
-						<text class="time-big">{{formatedRecordTime}}</text>
+					<view class="page-body-button"></view>
+				</view>
+			</block>
+			<block v-if="hasRecord === true && playing === false">
+				<view class="page-body-time">
+					<text class="time-big">{{formatedPlayTime}}</text>
+					<text class="time-small">{{formatedRecordTime}}</text>
+				</view>
+				<view class="page-body-buttons">
+					<view class="page-body-button"></view>
+					<view class="page-body-button" @tap="playVoice">
+						<image src="../../../static/play.png"></image>
 					</view>
-					<view class="page-body-buttons">
-						<view class="page-body-button"></view>
-						<view class="page-body-button" @tap="stopRecord">
-							<view class="button-stop-record"></view>
-						</view>
-						<view class="page-body-button"></view>
+					<view class="page-body-button" @tap="clear">
+						<image src="../../../static/trash.png"></image>
 					</view>
-				</block>
-				<block v-if="hasRecord === true && playing === false">
-					<view class="page-body-time">
-						<text class="time-big">{{formatedPlayTime}}</text>
-						<text class="time-small">{{formatedRecordTime}}</text>
+				</view>
+			</block>
+			<block v-if="hasRecord === true && playing === true">
+				<view class="page-body-time">
+					<text class="time-big">{{formatedPlayTime}}</text>
+					<text class="time-small">{{formatedRecordTime}}</text>
+				</view>
+				<view class="page-body-buttons">
+					<view class="page-body-button" @tap="stopVoice">
+						<image src="../../../static/stop.png"></image>
 					</view>
-					<view class="page-body-buttons">
-						<view class="page-body-button"></view>
-						<view class="page-body-button" @tap="playVoice">
-							<image src="../../../static/play.png"></image>
-						</view>
-						<view class="page-body-button" @tap="clear">
-							<image src="../../../static/trash.png"></image>
-						</view>
+					<view class="page-body-button" @tap="clear">
+						<image src="../../../static/trash.png"></image>
 					</view>
-				</block>
-				<block v-if="hasRecord === true && playing === true">
-					<view class="page-body-time">
-						<text class="time-big">{{formatedPlayTime}}</text>
-						<text class="time-small">{{formatedRecordTime}}</text>
-					</view>
-					<view class="page-body-buttons">
-						<view class="page-body-button" @tap="stopVoice">
-							<image src="../../../static/stop.png"></image>
-						</view>
-						<view class="page-body-button" @tap="clear">
-							<image src="../../../static/trash.png"></image>
-						</view>
-					</view>
-				</block>
-			</view>
+				</view>
+			</block>
 		</view>
 	</view>
 </template>
diff --git a/examples/hello-uniapp/pages/component/audio/audio.vue b/examples/hello-uniapp/pages/component/audio/audio.vue
index aa8b8f9bd54..b8bb6a607c5 100644
--- a/examples/hello-uniapp/pages/component/audio/audio.vue
+++ b/examples/hello-uniapp/pages/component/audio/audio.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap" style="text-align: center;">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-center">
 				<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author"
 				    :action="audioAction" controls></audio>
 			</view>
@@ -26,4 +26,4 @@
 			}
 		}
 	}
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/button/button.vue b/examples/hello-uniapp/pages/component/button/button.vue
index 5f0a430debb..9a9f2cb570b 100644
--- a/examples/hello-uniapp/pages/component/button/button.vue
+++ b/examples/hello-uniapp/pages/component/button/button.vue
@@ -1,34 +1,32 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area" id="buttonContainer">
-				<button type="primary">页面主操作 Normal</button>
-				<button type="primary" loading="true">页面主操作 Loading</button>
-				<button type="primary" disabled="true">页面主操作 Disabled</button>
-
-				<button type="default">页面次要操作 Normal</button>
-				<button type="default" disabled="true">页面次要操作 Disabled</button>
-
-				<button type="warn">警告类操作 Normal</button>
-				<button type="warn" disabled="true">警告类操作 Disabled</button>
-
-				<view class="button-sp-area">
-					<button type="primary" plain="true">按钮</button>
-					<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
-
-					<button type="default" plain="true">按钮</button>
-					<button type="default" disabled="true" plain="true">按钮</button>
-
-					<button class="mini-btn" type="primary" size="mini">按钮</button>
-					<button class="mini-btn" type="default" size="mini">按钮</button>
-					<button class="mini-btn" type="warn" size="mini">按钮</button>
-				</view>
-				<!-- #ifdef MP-WEIXIN -->
-				<button open-type="launchApp" app-parameter="uni-app" binderror="launchAppError">打开APP</button>
-				<!-- #endif -->
-				<button open-type="feedback">意见反馈</button>
+		<view class="uni-padding-wrap uni-common-mt">
+			<button type="primary">页面主操作 Normal</button>
+			<button type="primary" loading="true">页面主操作 Loading</button>
+			<button type="primary" disabled="true">页面主操作 Disabled</button>
+
+			<button type="default">页面次要操作 Normal</button>
+			<button type="default" disabled="true">页面次要操作 Disabled</button>
+
+			<button type="warn">警告类操作 Normal</button>
+			<button type="warn" disabled="true">警告类操作 Disabled</button>
+
+			<view class="button-sp-area">
+				<button type="primary" plain="true">按钮</button>
+				<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
+
+				<button type="default" plain="true">按钮</button>
+				<button type="default" disabled="true" plain="true">按钮</button>
+
+				<button class="mini-btn" type="primary" size="mini">按钮</button>
+				<button class="mini-btn" type="default" size="mini">按钮</button>
+				<button class="mini-btn" type="warn" size="mini">按钮</button>
 			</view>
+			<!-- #ifdef MP-WEIXIN -->
+			<button open-type="launchApp" app-parameter="uni-app" binderror="launchAppError">打开APP</button>
+			<button open-type="feedback">意见反馈</button>
+			<!-- #endif -->
 		</view>
 	</view>
 </template>
@@ -57,4 +55,4 @@
 	.mini-btn {
 		margin-right: 10upx;
 	}
-</style>
+</style>
diff --git a/examples/hello-uniapp/pages/component/checkbox/checkbox.vue b/examples/hello-uniapp/pages/component/checkbox/checkbox.vue
index 924c9a4c3f9..b6386f42e23 100644
--- a/examples/hello-uniapp/pages/component/checkbox/checkbox.vue
+++ b/examples/hello-uniapp/pages/component/checkbox/checkbox.vue
@@ -1,31 +1,36 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">默认样式</view>
-				<label class="checkbox">
-					<checkbox value="cb" checked="true" />选中
-				</label>
-				<label class="checkbox">
-					<checkbox value="cb" />未选中
-				</label>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title uni-common-mt">默认样式</view>
+			<view>
+				<checkbox-group>
+					<label>
+						<checkbox value="cb" checked="true" />选中
+					</label>
+					<label>
+						<checkbox value="cb" />未选中
+					</label>
+				</checkbox-group>
 			</view>
-
-			<view class="page-section">
-				<view class="page-section-title">推荐展示样式</view>
-				<view class="uni-list">
-					<checkbox-group @change="checkboxChange">
-						<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
-							<view>
-								<checkbox :value="item.value" :checked="item.checked" />
-							</view>
-							<view>{{item.name}}</view>
-						</label>
-					</checkbox-group>
-				</view>
+		</view>
+		
+		<view class="uni-padding-wrap">
+			<view class="uni-title uni-common-mt">
+				推荐展示样式
+				<text>\n使用 uni-list 布局</text>
 			</view>
 		</view>
+		<view class="uni-list">
+			<checkbox-group @change="checkboxChange">
+				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
+					<view>
+						<checkbox :value="item.value" :checked="item.checked" />
+					</view>
+					<view>{{item.name}}</view>
+				</label>
+			</checkbox-group>
+		</view>
 	</view>
 </template>
 <script>
@@ -80,7 +85,7 @@
 </script>
 
 <style>
-	.uni-list-cell {
-		justify-content: flex-start
-	}
+.uni-list-cell {
+	justify-content: flex-start
+}
 </style>
diff --git a/examples/hello-uniapp/pages/component/form/form.vue b/examples/hello-uniapp/pages/component/form/form.vue
index 108fe798446..fb0c367b196 100644
--- a/examples/hello-uniapp/pages/component/form/form.vue
+++ b/examples/hello-uniapp/pages/component/form/form.vue
@@ -1,49 +1,36 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
+		<view class="uni-padding-wrap uni-common-mt">
 			<form @submit="formSubmit" @reset="formReset">
-				<view class="page-section page-section-gap">
-					<view class="page-section-title">switch</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">switch</view>
 					<switch name="switch" />
 				</view>
-
-				<view class="page-section page-section-gap">
-					<view class="page-section-title">radio</view>
-					<radio-group class="uni-flex" name="radio">
-						<label>
-							<radio value="radio1" />选项一</label>
-						<label>
-							<radio value="radio2" />选项二</label>
+				<view class="uni-form-item uni-column">
+					<view class="title">radio</view>
+					<radio-group name="radio">
+						<label><radio value="radio1" />选项一</label>
+						<label><radio value="radio2" />选项二</label>
 					</radio-group>
 				</view>
-
-				<view class="page-section page-section-gap">
-					<view class="page-section-title">checkbox</view>
-					<checkbox-group class="uni-flex" name="checkbox">
-						<label>
-							<checkbox value="checkbox1" />选项一</label>
-						<label>
-							<checkbox value="checkbox2" />选项二</label>
+				<view class="uni-form-item uni-column">
+					<view class="title">checkbox</view>
+					<checkbox-group name="checkbox">
+						<label><checkbox value="checkbox1" />选项一</label>
+						<label><checkbox value="checkbox2" />选项二</label>
 					</checkbox-group>
 				</view>
-
-				<view class="page-section page-section-gap">
-					<view class="page-section-title">slider</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">slider</view>
 					<slider value="50" name="slider" show-value></slider>
 				</view>
-
-				<view class="page-section">
-					<view class="page-section-title">input</view>
-					<view class="uni-list">
-						<view class="uni-list-cell">
-							<input class="uni-input" name="input" placeholder="这是一个输入框" />
-						</view>
-					</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">input</view>
+					<input class="uni-input" name="input" placeholder="这是一个输入框" />
 				</view>
-
-				<view class="btn-area">
-					<button class="btn-submit" formType="submit">Submit</button>
+				<view class="uni-btn-v">
+					<button formType="submit">Submit</button>
 					<button type="default" formType="reset">Reset</button>
 				</view>
 			</form>
@@ -82,19 +69,5 @@
 </script>
 
 <style>
-	label {
-		display: flex;
-		flex-direction: row;
-		min-width: 270upx;
-		margin-right: 20upx;
-	}
-
-	.btn-submit {
-		background-color: #007aff;
-		color: #ffffff;
-	}
-	.uni-input{
-		width: 100%;
-		padding-left: 30upx;
-	}
+	.title{padding:10px 0 !important;}
 </style>
diff --git a/examples/hello-uniapp/pages/component/icon/icon.vue b/examples/hello-uniapp/pages/component/icon/icon.vue
index 9daf9dfecf2..886fb30c004 100644
--- a/examples/hello-uniapp/pages/component/icon/icon.vue
+++ b/examples/hello-uniapp/pages/component/icon/icon.vue
@@ -1,9 +1,9 @@
 <template>
     <view class="page">
         <page-head :title="title"></page-head>
-        <view class="flex-container">
+        <view class="uni-padding-wrap">
             <view class="icon-item" v-for="(item,index) in iconClassList" :key="index">
-                <uni-icon :type="item" :color="activeIndex === index?'#007aff':'#8f8f94'" @click="switchActive(index)"></uni-icon>
+                <uni-icon size="40" :type="item" :color="activeIndex === index?'#007aff':'#8f8f94'" @click="switchActive(index)"></uni-icon>
             </view>
         </view>
     </view>
@@ -11,7 +11,6 @@
 
 <script>
     import uniIcon from '../../../components/uni-icon.vue'
-
     export default {
         data() {
             return {
@@ -122,22 +121,12 @@
 
 <style>
     @import "../../../common/icon.css";
-    .flex-container {
-        padding: 20upx;
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: space-between;
-        text-align: center;
-    }
-
-    .flex-container .icon-item {
+    .icon-item {
         display: inline-flex;
-        width: 100upx;
-        height: 100upx;
-        border: 2upx solid #dddddd;
-        border-radius: 50upx;
-        margin: 6upx;
-        flex-direction: column;
+        width: 105upx;
+        height: 105upx;
+        margin: 5upx;
         justify-content: center;
     }
+	
 </style>
diff --git a/examples/hello-uniapp/pages/component/image/image.vue b/examples/hello-uniapp/pages/component/image/image.vue
index 3c6634a1d5c..2eefe93eb9f 100644
--- a/examples/hello-uniapp/pages/component/image/image.vue
+++ b/examples/hello-uniapp/pages/component/image/image.vue
@@ -1,18 +1,19 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">Local Image</view>
-				<view class="page-section-ctn">
-					<image class="image" src="../../../static/uni@2x.png" />
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
+				示例1 <text>\n本地图片</text>
 			</view>
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">Internet Image</view>
-				<view class="page-section-ctn">
-					<image class="image" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" />
-				</view>
+			<view class="uni-center" style="background:#FFFFFF; font-size:0;">
+				<image class="image" mode="widthFix" src="../../../static/uni@2x.png" />
+			</view>
+			
+			<view class="uni-title uni-common-mt">
+				示例2 <text>\n网络图片</text>
+			</view>
+			<view class="uni-center" style="background:#FFFFFF; font-size:0;">
+				<image class="image" mode="widthFix" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" />
 			</view>
 		</view>
 	</view>
@@ -26,15 +27,9 @@
 		}
 	}
 </script>
-
 <style>
-	.page-section-ctn {
-		text-align: center;
-	}
-
 	.image {
-		margin-top: 30upx;
+		margin:40upx 0;
 		width: 200upx;
-		height: 200upx;
 	}
 </style>
diff --git a/examples/hello-uniapp/pages/component/input/input.vue b/examples/hello-uniapp/pages/component/input/input.vue
index 80a1006190b..fa87315377b 100644
--- a/examples/hello-uniapp/pages/component/input/input.vue
+++ b/examples/hello-uniapp/pages/component/input/input.vue
@@ -1,111 +1,63 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">可自动聚焦的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" focus placeholder="自动获得焦点" />
-					</view>
-				</view>
+		<view class="uni-common-mt">
+			<view class="uni-form-item uni-column">
+				<view class="title">可自动聚焦的input</view>
+				<input class="uni-input" focus placeholder="自动获得焦点" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">键盘右下角按钮显示为搜索</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">键盘右下角按钮显示为搜索</view>
+				<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">控制最大输入长度的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">控制最大输入长度的input</view>
+				<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">实时获取输入值：{{inputValue}}</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" @input="bindKeyInput" placeholder="输入同步到view中" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">实时获取输入值：{{inputValue}}</view>
+				<input class="uni-input" @input="bindKeyInput" placeholder="输入同步到view中" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">控制输入的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" @input="bindReplaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">控制输入的input</view>
+				<input class="uni-input" @input="bindReplaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">控制键盘的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" ref="input1" @input="bindHideKeyboard" placeholder="输入123自动收起键盘" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">控制键盘的input</view>
+				<input class="uni-input" ref="input1" @input="bindHideKeyboard" placeholder="输入123自动收起键盘" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">数字输入的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">数字输入的input</view>
+				<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">密码输入的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">密码输入的input</view>
+				<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">带小数点的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">带小数点的input</view>
+				<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">身份证输入的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">身份证输入的input</view>
+				<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">控制占位符颜色的input</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
-					</view>
-				</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">控制占位符颜色的input</view>
+				<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">带清除按钮的输入框</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput" />
-						<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
-					</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">带清除按钮的输入框</view>
+				<view class="with-fun">
+					<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput" />
+					<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
 				</view>
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">可查看密码的输入框</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
-						<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
-					</view>
+			<view class="uni-form-item uni-column">
+				<view class="title">可查看密码的输入框</view>
+				<view class="with-fun">
+					<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
+					<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
 				</view>
 			</view>
 		</view>
@@ -162,23 +114,5 @@
 
 <style>
 	@import "../../../common/icon.css";
-	.page-section {
-		margin-bottom: 20upx;
-	}
-
-	.page-body {
-		padding-bottom: 40upx;
-	}
-
-	.uni-list-cell {
-		padding: 0 30upx;
-	}
-
-	.uni-input {
-		flex: 1;
-	}
-
-	.uni-icon {
-		color: #999;
-	}
+	.title{padding:10upx 25upx;}
 </style>
diff --git a/examples/hello-uniapp/pages/component/label/label.vue b/examples/hello-uniapp/pages/component/label/label.vue
index 4707c6ea7fe..b8f6ed7bb7c 100644
--- a/examples/hello-uniapp/pages/component/label/label.vue
+++ b/examples/hello-uniapp/pages/component/label/label.vue
@@ -1,39 +1,57 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">表单组件在label内</view>
-				<checkbox-group class="group" @change="checkboxChange">
-					<view class="label-1" v-for="item in checkboxItems" :key="item.name">
-						<label>
-							<checkbox :value="item.name" :checked="item.checked"></checkbox>
-							<text class="label-1-text">{{item.value}}</text>
+		<view class="uni-common-mt">
+			<view class="uni-form-item uni-column">
+				<view class="title">表单组件在label内</view>
+				<view class="uni-list">
+					<checkbox-group @change="checkboxChange">
+						<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
+							<view>
+								<checkbox :value="item.name" :checked="item.checked"></checkbox>
+							</view>
+							<view>{{item.value}}</view>
 						</label>
-					</view>
-				</checkbox-group>
+					</checkbox-group>
+				</view>
 			</view>
-
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">label用for标识表单组件</view>
-				<radio-group class="group" @change="radioChange">
-					<view class="label-2" v-for="(item,index) in radioItems" :key="index">
-						<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
-						<label class="label-2-text" :for="item.name">
-							<text>{{item.name}}</text>
+			
+			<view class="uni-form-item uni-column">
+				<view class="title">label用for标识表单组件</view>
+				<view class="uni-list">
+					<radio-group @change="radioChange">
+						<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
+							<view>
+								<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
+							</view>
+							<view>
+								<label class="label-2-text" :for="item.name">
+									<text>{{item.value}}</text>
+								</label>
+							</view>
 						</label>
-					</view>
-				</radio-group>
+					</radio-group>
+				</view>
+				
 			</view>
 
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">label内有多个时选中第一个</view>
-				<label class="label-3">
-					<checkbox class="checkbox-3">选项一</checkbox>
-					<checkbox class="checkbox-3">选项二</checkbox>
-					<view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
-				</label>
+			<view class="uni-form-item uni-column">
+				<view class="title">label内有多个时选中第一个</view>
+				<view class="uni-list">
+					<checkbox-group @change="checkboxChange">
+						<label class="label-3">
+							<view class="uni-list-cell uni-list-cell-pd">
+								<checkbox class="checkbox-3">选项一</checkbox>
+							</view>
+							<view class="uni-list-cell uni-list-cell-pd">
+								<checkbox class="checkbox-3">选项二</checkbox>
+							</view>
+							<view class="uni-link uni-center" style="margin-top:20upx;">点击该label下的文字默认选中第一个checkbox</view>
+						</label>
+					</checkbox-group>
+				</view>
 			</view>
+
 		</view>
 	</view>
 </template>
@@ -96,18 +114,7 @@
 </script>
 
 <style>
-	.label-1,
-	.label-2 {
-		margin: 30upx 0;
-	}
-
-	.label-3-text {
-		color: #576B95;
-		font-size: 28upx;
-	}
-
-	.checkbox-3 {
-		display: block;
-		margin: 30upx 0;
-	}
+.uni-list-cell {
+	justify-content: flex-start
+}
 </style>
diff --git a/examples/hello-uniapp/pages/component/map/map.vue b/examples/hello-uniapp/pages/component/map/map.vue
index e71e12ef5d7..222cf9173b6 100644
--- a/examples/hello-uniapp/pages/component/map/map.vue
+++ b/examples/hello-uniapp/pages/component/map/map.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
+		<view class="uni-common-mt">
+			<view>
 				<map :latitude="latitude" :longitude="longitude" :markers="covers">
 				</map>
 			</view>
diff --git a/examples/hello-uniapp/pages/component/movable-view/movable-view.vue b/examples/hello-uniapp/pages/component/movable-view/movable-view.vue
index b266922ca16..ff92555dc9f 100644
--- a/examples/hello-uniapp/pages/component/movable-view/movable-view.vue
+++ b/examples/hello-uniapp/pages/component/movable-view/movable-view.vue
@@ -1,59 +1,62 @@
 <template>
 	<view class="page-body">
-		<view class="page-section">
-			<view class="page-section-title">movable-view区域小于movable-area</view>
+		<page-head title="movable-view"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title uni-common-mt">
+				示例 1
+				<text>\nmovable-view 区域小于 movable-area</text>
+			</view>
 			<movable-area>
 				<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
 			</movable-area>
-		</view>
-		<view class="btn-area">
-			<button @tap="tap" class="page-body-button" type="default">click me to move to (30px, 30px)</button>
-		</view>
-
-		<view class="page-section">
-			<view class="page-section-title">movable-view区域大于movable-area</view>
+			<view @tap="tap" class="uni-link uni-center uni-common-mt">
+				点击这里移动至 (30px, 30px)
+			</view>
+			<view class="uni-title uni-common-mt">
+				示例 2
+				<text>\nmovable-view区域大于movable-area</text>
+			</view>
 			<movable-area>
 				<movable-view class="max" direction="all">text</movable-view>
 			</movable-area>
-		</view>
-
-		<view class="page-section">
-			<view class="page-section-title">只可以横向移动</view>
+			<view class="uni-title uni-common-mt">
+				示例 3
+				<text>\n只可以横向移动</text>
+			</view>
 			<movable-area>
 				<movable-view direction="horizontal">text</movable-view>
 			</movable-area>
-		</view>
-
-		<view class="page-section">
-			<view class="page-section-title">只可以纵向移动</view>
+			<view class="uni-title uni-common-mt">
+				示例 4
+				<text>\n只可以纵向移动</text>
+			</view>
 			<movable-area>
 				<movable-view direction="vertical">text</movable-view>
 			</movable-area>
-		</view>
-
-		<view class="page-section">
-			<view class="page-section-title">可超出边界</view>
+			<view class="uni-title uni-common-mt">
+				示例 5
+				<text>\n可超出边界</text>
+			</view>
 			<movable-area>
 				<movable-view direction="all" out-of-bounds>text</movable-view>
 			</movable-area>
-		</view>
-
-		<view class="page-section">
-			<view class="page-section-title">带有惯性</view>
+			<view class="uni-title uni-common-mt">
+				示例 6
+				<text>\n带有惯性</text>
+			</view>
 			<movable-area>
 				<movable-view direction="all" inertia>text</movable-view>
 			</movable-area>
-		</view>
-
-		<view class="page-section">
-			<view class="page-section-title">可放缩</view>
+			<view class="uni-title uni-common-mt">
+				示例 7
+				<text>\n可放缩</text>
+			</view>
 			<movable-area scale-area>
 				<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
 			</movable-area>
-		</view>
-
-		<view class="btn-area">
-			<button @tap="tap2" class="page-body-button" type="default">click me to scale to 3.0</button>
+			<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80upx;">
+				点击这里放大3倍
+			</view>
 		</view>
 	</view>
 </template>
@@ -106,39 +109,21 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: 100rpx;
-		width: 100rpx;
+		height: 150upx;
+		width: 150upx;
 		background-color: #007AFF;
 		color: #fff;
 	}
 
 	movable-area {
-		height: 400rpx;
-		width: 400rpx;
-		margin: 50rpx;
-		background-color: #ccc;
+		height: 300upx;
+		width: 100%;
+		background-color: #D8D8D8;
 		overflow: hidden;
 	}
 
 	.max {
-		width: 600rpx;
-		height: 600rpx;
-	}
-
-	.page-section {
-		width: 100%;
-		margin-bottom: 60rpx;
-	}
-
-	.page-section:last-child {
-		margin-bottom: 0;
-	}
-
-	.page-section-title {
-		font-size: 28rpx;
-		color: #999999;
-		margin-bottom: 10rpx;
-		padding-left: 30rpx;
-		padding-right: 30rpx;
+		width:500upx;
+		height: 500upx;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/navigator/navigator.vue b/examples/hello-uniapp/pages/component/navigator/navigator.vue
index 599f22cf71a..3a67d20e8e6 100644
--- a/examples/hello-uniapp/pages/component/navigator/navigator.vue
+++ b/examples/hello-uniapp/pages/component/navigator/navigator.vue
@@ -1,12 +1,12 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="btn-area">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-btn-v">
 				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
 					<button type="default">跳转到新页面</button>
 				</navigator>
-				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
+				<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
 					<button type="default">在当前页打开</button>
 				</navigator>
 			</view>
@@ -21,4 +21,4 @@
 			}
 		}
 	}
-</script>
+</script>
diff --git a/examples/hello-uniapp/pages/component/picker-view/picker-view.vue b/examples/hello-uniapp/pages/component/picker-view/picker-view.vue
index 0b091485d87..78de852c921 100644
--- a/examples/hello-uniapp/pages/component/picker-view/picker-view.vue
+++ b/examples/hello-uniapp/pages/component/picker-view/picker-view.vue
@@ -1,7 +1,11 @@
 <template>
     <view>
         <page-head :title="title"></page-head>
-        <view class="title">日期：{{year}}年{{month}}月{{day}}日</view>
+        <view class="uni-padding-wrap">
+			<view class="uni-title">
+				日期：{{year}}年{{month}}月{{day}}日
+			</view>
+		</view>
         <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
             <picker-view-column>
                 <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
@@ -66,14 +70,11 @@
 </script>
 
 <style>
-    .title {
-        padding: 0 50upx;
-    }
-
+	
     picker-view {
         width: 100%;
         height: 600upx;
-        margin-top: 50upx;
+        margin-top:20upx;
     }
 
     .item {
diff --git a/examples/hello-uniapp/pages/component/picker/picker.vue b/examples/hello-uniapp/pages/component/picker/picker.vue
index f0885828d2e..4100eedeab0 100644
--- a/examples/hello-uniapp/pages/component/picker/picker.vue
+++ b/examples/hello-uniapp/pages/component/picker/picker.vue
@@ -1,52 +1,47 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">地区选择器</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="list-left">
-							当前选择
-						</view>
-						<view class="uni-list-cell-db">
-							<picker @change="bindPickerChange" :value="index" :range="array">
-								<view class="uni-input">{{array[index]}}</view>
-							</picker>
-						</view>
-					</view>
+		<view class="uni-title uni-common-pl">地区选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
 				</view>
-
-				<view class="page-section-title">时间选择器</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="list-left">
-							当前选择
-						</view>
-						<view class="uni-list-cell-db">
-							<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
-								<view class="uni-input">{{time}}</view>
-							</picker>
-						</view>
-					</view>
+				<view class="uni-list-cell-db">
+					<picker @change="bindPickerChange" :value="index" :range="array">
+						<view class="uni-input">{{array[index]}}</view>
+					</picker>
 				</view>
+			</view>
+		</view>
 
-				<view class="page-section-title">日期选择器</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="list-left">
-							当前选择
-						</view>
-						<view class="uni-list-cell-db">
-							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
-								<view class="uni-input">{{date}}</view>
-							</picker>
-						</view>
-					</view>
+		<view class="uni-title uni-common-pl">时间选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
+				</view>
+				<view class="uni-list-cell-db">
+					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
+						<view class="uni-input">{{time}}</view>
+					</picker>
 				</view>
 			</view>
 		</view>
 
+		<view class="uni-title uni-common-pl">日期选择器</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">
+					当前选择
+				</view>
+				<view class="uni-list-cell-db">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
+						<view class="uni-input">{{date}}</view>
+					</picker>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 <script>
@@ -104,12 +99,5 @@
 </script>
 
 <style>
-	.uni-list-cell {
-		justify-content: flex-start;
-	}
-
-	.uni-list-cell-db,
-	.list-left {
-		padding: 0 24upx;
-	}
-</style>
+	
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/progress/progress.vue b/examples/hello-uniapp/pages/component/progress/progress.vue
index 93a070e41ee..58f45bc45ae 100644
--- a/examples/hello-uniapp/pages/component/progress/progress.vue
+++ b/examples/hello-uniapp/pages/component/progress/progress.vue
@@ -1,21 +1,19 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
-				<view class="progress-box">
-					<progress percent="20" show-info stroke-width="3" />
-				</view>
-				<view class="progress-box">
-					<progress percent="40" active stroke-width="3" />
-					<uni-icon type="close" class="progress-cancel" color="#dd524d"></uni-icon>
-				</view>
-				<view class="progress-box">
-					<progress percent="60" active stroke-width="3" />
-				</view>
-				<view class="progress-box">
-					<progress percent="80" color="#10AEFF" active stroke-width="3" />
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="progress-box">
+				<progress percent="20" show-info stroke-width="3" />
+			</view>
+			<view class="progress-box">
+				<progress percent="40" active stroke-width="3" />
+				<uni-icon type="close" class="progress-cancel" color="#dd524d"></uni-icon>
+			</view>
+			<view class="progress-box">
+				<progress percent="60" active stroke-width="3" />
+			</view>
+			<view class="progress-box">
+				<progress percent="80" color="#10AEFF" active stroke-width="3" />
 			</view>
 		</view>
 	</view>
@@ -35,16 +33,11 @@
 </script>
 
 <style>
-	progress {
-		width: 100%;
-	}
-
 	.progress-box {
 		display: flex;
 		height: 50upx;
 		margin-bottom: 60upx;
 	}
-
 	.progress-cancel {
 		margin-left: 40upx;
 	}
diff --git a/examples/hello-uniapp/pages/component/radio/radio.vue b/examples/hello-uniapp/pages/component/radio/radio.vue
index 02345ba1573..68643cd82c4 100644
--- a/examples/hello-uniapp/pages/component/radio/radio.vue
+++ b/examples/hello-uniapp/pages/component/radio/radio.vue
@@ -1,9 +1,9 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">默认样式</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-title">默认样式</view>
+			<view>
 				<label class="radio">
 					<radio value="r1" checked="true" />选中
 				</label>
@@ -11,19 +11,18 @@
 					<radio value="r2" />未选中
 				</label>
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">推荐展示样式</view>
-				<view class="uni-list">
-					<radio-group @change="radioChange">
-						<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
-							<view>
-								<radio :value="item.value" checked="true" />
-							</view>
-							<view>{{item.name}}</view>
-						</label>
-					</radio-group>
-				</view>
-			</view>
+		</view>
+			
+		<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
+		<view class="uni-list">
+			<radio-group @change="radioChange">
+				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
+					<view>
+						<radio :value="item.value" checked="true" />
+					</view>
+					<view>{{item.name}}</view>
+				</label>
+			</radio-group>
 		</view>
 	</view>
 </template>
diff --git a/examples/hello-uniapp/pages/component/rich-text/rich-text.vue b/examples/hello-uniapp/pages/component/rich-text/rich-text.vue
index 86506bfa491..0fe8923c59c 100644
--- a/examples/hello-uniapp/pages/component/rich-text/rich-text.vue
+++ b/examples/hello-uniapp/pages/component/rich-text/rich-text.vue
@@ -1,23 +1,24 @@
 <template>
     <view class="content">
         <page-head :title="title"></page-head>
-        <view class="page-body">
-            <view class="page-section page-section-gap">
-                <view class="page-section-title">nodes属性为Aarry</view>
-                <view class="page-section-ctn">
-                    <rich-text class="richText" :nodes="nodes" @tap="tap"></rich-text>
-                </view>
+        <view class="uni-padding-wrap">
+			<view class="uni-title uni-common-mt">
+				数组类型
+				<text>\nnodes属性为Aarry</text>
+			</view>
+            <view class="uni-common-mt" style="background:#FFF; padding:20upx;">
+            	<rich-text :nodes="nodes" @tap="tap"></rich-text>
             </view>
-            <view class="page-section page-section-gap">
-                <view class="page-section-title">nodes属性为String</view>
-                <view class="page-section-ctn">
-                    <rich-text class="richText" :nodes="strings" @tap="tap"></rich-text>
-                </view>
+			<view class="uni-title uni-common-mt">
+				字符串类型
+				<text>\nnodes属性为String</text>
+			</view>
+            <view class="uni-common-mt" style="background:#FFF; padding:20upx;">
+            	<rich-text :nodes="strings" @tap="tap"></rich-text>
             </view>
         </view>
     </view>
 </template>
-
 <script>
     export default {
         data() {
@@ -27,7 +28,7 @@
                     name: 'div',
                     attrs: {
                         class: 'div_class',
-                        style: 'line-height: 60px; color: red;text-align:center;'
+                        style: 'line-height: 60px; color: red; text-align:center;'
                     },
                     children: [{
                         type: 'text',
@@ -38,4 +39,4 @@
             }
         }
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/scroll-view/scroll-view.vue b/examples/hello-uniapp/pages/component/scroll-view/scroll-view.vue
index 91cef44e0f2..24966159496 100644
--- a/examples/hello-uniapp/pages/component/scroll-view/scroll-view.vue
+++ b/examples/hello-uniapp/pages/component/scroll-view/scroll-view.vue
@@ -1,34 +1,33 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>Vertical Scroll\n纵向滚动</text>
-				</view>
-				<view class="page-section-spacing">
-					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
-					 @scroll="scroll">
-						<view id="demo1" class="scroll-view-item color1">A</view>
-						<view id="demo2" class="scroll-view-item color2">B</view>
-						<view id="demo3" class="scroll-view-item color3">C</view>
-					</scroll-view>
-				</view>
-				<view class="btn-area">
-					<button @tap="goTop" class="page-body-button" type="default">返回顶部</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title uni-common-mt">
+				Vertical Scroll
+				<text>\n纵向滚动</text>
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>Horizontal Scroll\n横向滚动</text>
-				</view>
-				<view class="page-section-spacing">
-					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
-						<view id="demo1" class="scroll-view-item_H color1">A</view>
-						<view id="demo2" class="scroll-view-item_H color2">B</view>
-						<view id="demo3" class="scroll-view-item_H color3">C</view>
-					</scroll-view>
-				</view>
+			<view>
+				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
+				@scroll="scroll">
+					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
+					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
+					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
+				</scroll-view>
+			</view>
+			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
+				点击这里返回顶部
+			</view>
+			
+			<view class="uni-title uni-common-mt">
+				Horizontal Scroll
+				<text>\n横向滚动</text>
+			</view>
+			<view>
+				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
+					<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
+					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
+					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
+				</scroll-view>
 			</view>
 		</view>
 	</view>
@@ -60,6 +59,10 @@
 				this.scrollTop = this.old.scrollTop
 				this.$nextTick(function() {
 					this.scrollTop = 0
+				});
+				uni.showToast({
+					icon:"none",
+					title:"纵向滚动 scrollTop 值已被修改为 0"
 				})
 			}
 		}
@@ -71,10 +74,6 @@
 		height: 300upx;
 	}
 
-	.page-section-spacing {
-		margin-top: 60upx;
-	}
-
 	.scroll-view_H {
 		white-space: nowrap;
 		width: 100%;
@@ -95,4 +94,4 @@
 		text-align: center;
 		font-size: 36upx;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/slider/slider.vue b/examples/hello-uniapp/pages/component/slider/slider.vue
index 50d9f0592c5..87ae815190a 100644
--- a/examples/hello-uniapp/pages/component/slider/slider.vue
+++ b/examples/hello-uniapp/pages/component/slider/slider.vue
@@ -1,27 +1,21 @@
 <template>
     <view>
         <page-head :title="title"></page-head>
-        <view class="page-body">
-            <view class="page-section page-section-gap">
-                <view class="page-section-title">设置step</view>
-                <view class="body-view">
-                    <slider value="60" @change="sliderChange" step="5" />
-                </view>
-            </view>
-
-            <view class="page-section page-section-gap">
-                <view class="page-section-title">显示当前value</view>
-                <view class="body-view">
-                    <slider value="50" @change="sliderChange" show-value />
-                </view>
-            </view>
-
-            <view class="page-section page-section-gap">
-                <view class="page-section-title">设置最小/最大值</view>
-                <view class="body-view">
-                    <slider value="100" @change="sliderChange" min="50" max="200" show-value />
-                </view>
-            </view>
+        <view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">设置step</view>
+			<view>
+				<slider value="60" @change="sliderChange" step="5" />
+			</view>
+			
+			<view class="uni-title">显示当前value</view>
+			<view>
+				<slider value="50" @change="sliderChange" show-value />
+			</view>
+            
+			<view class="uni-title">设置最小/最大值</view>
+			<view>
+				<slider value="100" @change="sliderChange" min="50" max="200" show-value />
+			</view>
         </view>
     </view>
 </template>
diff --git a/examples/hello-uniapp/pages/component/swiper/swiper.vue b/examples/hello-uniapp/pages/component/swiper/swiper.vue
index 94800f443ce..ddcde22da87 100644
--- a/examples/hello-uniapp/pages/component/swiper/swiper.vue
+++ b/examples/hello-uniapp/pages/component/swiper/swiper.vue
@@ -1,45 +1,46 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-spacing swiper">
-				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
-					<swiper-item>
-						<view class="swiper-item color1">A</view>
-					</swiper-item>
-					<swiper-item>
-						<view class="swiper-item color2">B</view>
-					</swiper-item>
-					<swiper-item>
-						<view class="swiper-item color3">C</view>
-					</swiper-item>
-				</swiper>
-			</view>
-			<view class="page-section swiper-list">
-				<view class="uni-list">
-					<view class="uni-list-cell uni-list-cell-pd">
-						<view class="uni-list-cell-db">指示点</view>
-						<switch :checked="indicatorDots" @change="changeIndicatorDots" />
-					</view>
-					<view class="uni-list-cell uni-list-cell-pd">
-						<view class="uni-list-cell-db">自动播放</view>
-						<switch :checked="autoplay" @change="changeAutoplay" />
-					</view>
+		<view class="uni-padding-wrap">
+			<view class="page-section swiper">
+				<view class="page-section-spacing">
+					<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
+						<swiper-item>
+							<view class="swiper-item uni-bg-red">A</view>
+						</swiper-item>
+						<swiper-item>
+							<view class="swiper-item uni-bg-green">B</view>
+						</swiper-item>
+						<swiper-item>
+							<view class="swiper-item uni-bg-blue">C</view>
+						</swiper-item>
+					</swiper>
 				</view>
 			</view>
+		</view>
+		
+		<view class="swiper-list">
+			<view class="uni-list-cell uni-list-cell-pd">
+				<view class="uni-list-cell-db">指示点</view>
+				<switch :checked="indicatorDots" @change="changeIndicatorDots" />
+			</view>
+			<view class="uni-list-cell uni-list-cell-pd">
+				<view class="uni-list-cell-db">自动播放</view>
+				<switch :checked="autoplay" @change="changeAutoplay" />
+			</view>
+		</view>
 
-			<view class="page-section page-section-spacing">
-				<view class="page-section-title">
-					<text>幻灯片切换时长(ms)</text>
-					<text class="info">{{duration}}</text>
-				</view>
-				<slider @change="durationChange" :value="duration" min="500" max="2000" />
-				<view class="page-section-title">
-					<text>自动播放间隔时长(ms)</text>
-					<text class="info">{{interval}}</text>
-				</view>
-				<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
+		<view class="uni-padding-wrap">
+			<view class="uni-common-mt">
+				<text>幻灯片切换时长(ms)</text>
+				<text class="info">{{duration}}</text>
+			</view>
+			<slider @change="durationChange" :value="duration" min="500" max="2000" />
+			<view class="uni-common-mt">
+				<text>自动播放间隔时长(ms)</text>
+				<text class="info">{{interval}}</text>
 			</view>
+			<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
 		</view>
 	</view>
 </template>
@@ -84,17 +85,14 @@
 		margin-top: 40upx;
 		margin-bottom: 0;
 	}
-
-	.page-section-title {
-		padding: 0;
-		margin-top: 60upx;
-		position: relative;
+	
+	.uni-common-mt{
+		margin-top:60upx;
+		position:relative;
 	}
-
+	
 	.info {
 		position: absolute;
-		right: 0;
-		color: #353535;
-		font-size: 30upx;
+		right:20upx;
 	}
 </style>
diff --git a/examples/hello-uniapp/pages/component/switch/switch.vue b/examples/hello-uniapp/pages/component/switch/switch.vue
index f01f67f73de..2a9120741d5 100644
--- a/examples/hello-uniapp/pages/component/switch/switch.vue
+++ b/examples/hello-uniapp/pages/component/switch/switch.vue
@@ -1,26 +1,23 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-gap">
-				<view class="page-section-title">默认样式</view>
-				<view class="body-view">
-					<switch checked @change="switch1Change" />
-					<switch @change="switch2Change" />
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">默认样式</view>
+			<view>
+				<switch checked @change="switch1Change" />
+				<switch @change="switch2Change" />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">推荐展示样式</view>
-				<view class="uni-list">
-					<view class="uni-list-cell uni-list-cell-pd">
-						<view class="uni-list-cell-db">开启中</view>
-						<switch checked />
-					</view>
-					<view class="uni-list-cell uni-list-cell-pd">
-						<view class="uni-list-cell-db">关闭</view>
-						<switch />
-					</view>
-				</view>
+
+			<view class="uni-title">推荐展示样式</view>
+		</view>
+		<view class="uni-list">
+			<view class="uni-list-cell uni-list-cell-pd">
+				<view class="uni-list-cell-db">开启中</view>
+				<switch checked />
+			</view>
+			<view class="uni-list-cell uni-list-cell-pd">
+				<view class="uni-list-cell-db">关闭</view>
+				<switch />
 			</view>
 		</view>
 	</view>
diff --git a/examples/hello-uniapp/pages/component/text/text.vue b/examples/hello-uniapp/pages/component/text/text.vue
index 8f3b8bbd9f9..e82c13e740f 100644
--- a/examples/hello-uniapp/pages/component/text/text.vue
+++ b/examples/hello-uniapp/pages/component/text/text.vue
@@ -1,13 +1,13 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section page-section-spacing">
-				<view class="text-box" scroll-y="true">
-					<text>{{text}}</text>
-				</view>
-				<button :disabled="!canAdd" @tap="add">add line</button>
-				<button :disabled="!canRemove" @tap="remove">remove line</button>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="text-box" scroll-y="true">
+				<text>{{text}}</text>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" :disabled="!canAdd" @tap="add">add line</button>
+				<button type="warn" :disabled="!canRemove" @tap="remove">remove line</button>
 			</view>
 		</view>
 	</view>
@@ -59,7 +59,7 @@
 
 <style>
 	.text-box {
-		margin-bottom: 70upx;
+		margin-bottom:40upx;
 		padding: 40upx 0;
 		display: flex;
 		min-height: 300upx;
@@ -69,6 +69,6 @@
 		text-align: center;
 		font-size: 30upx;
 		color: #353535;
-		line-height: 46upx;
+		line-height:1.8;
 	}
 </style>
diff --git a/examples/hello-uniapp/pages/component/textarea/textarea.vue b/examples/hello-uniapp/pages/component/textarea/textarea.vue
index a5d4bd51990..c276a16b577 100644
--- a/examples/hello-uniapp/pages/component/textarea/textarea.vue
+++ b/examples/hello-uniapp/pages/component/textarea/textarea.vue
@@ -1,21 +1,17 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
-				<view class="textarea-wrp">
-					<textarea @blur="bindTextAreaBlur" auto-height />
-				</view>
+		
+			<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
+			<view class="uni-textarea">
+				<textarea @blur="bindTextAreaBlur" auto-height />
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">占位符字体是红色的textarea</view>
-				<view class="textarea-wrp">
-					<textarea class="textare" placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
-				</view>
+			
+			<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
+			<view class="uni-textarea">
+				<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
 			</view>
 		</view>
-	</view>
 </template>
 <script>
 	export default {
@@ -34,19 +30,4 @@
 </script>
 
 <style>
-	textarea {
-		width: 700upx;
-		padding: 25upx 0;
-		height: 34upx;
-		line-height: 34upx;
-		font-size: 32upx;
-	}
-	.textare {
-		height: 102upx;
-	}
-
-	.textarea-wrp {
-		padding: 0 25upx;
-		background-color: #fff;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/component/video/video.vue b/examples/hello-uniapp/pages/component/video/video.vue
index 43c9298928c..a55acd885ae 100644
--- a/examples/hello-uniapp/pages/component/video/video.vue
+++ b/examples/hello-uniapp/pages/component/video/video.vue
@@ -1,25 +1,26 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view>
 				<video id="myVideo" src="https://www.dcloud.io/uniapp/wap2appvsnative.mp4" @error="videoErrorCallback" :danmu-list="danmuList"
 				    enable-danmu danmu-btn controls></video>
+			</view>
 
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view>
-							<view class="uni-label">弹幕内容</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
-						</view>
+			<view class="uni-list uni-common-mt">
+				<view class="uni-list-cell">
+					<view>
+						<view class="uni-label">弹幕内容</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
 					</view>
-				</view>
-				<view class="btn-area">
-					<button @tap="bindSendDanmu" class="page-body-button">发送弹幕</button>
 				</view>
 			</view>
+			<view class="uni-btn-v">
+				<button @tap="bindSendDanmu" class="page-body-button">发送弹幕</button>
+			</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -77,20 +78,5 @@
 </script>
 
 <style>
-	button {
-		background-color: #007aff;
-		color: #ffffff;
-	}
-
-	.uni-list {
-		margin-top: 40upx;
-	}
-
-	.uni-input {
-		text-align: left;
-	}
-
-	.page-section {
-		text-align: center;
-	}
-</style>
+	video{width:690upx;}
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/view/view.vue b/examples/hello-uniapp/pages/component/view/view.vue
index 1dd9f0386c5..dc7493f5ed3 100644
--- a/examples/hello-uniapp/pages/component/view/view.vue
+++ b/examples/hello-uniapp/pages/component/view/view.vue
@@ -1,43 +1,38 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>
-						Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app默认全局使用flex布局(在App.vue里预设了)。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
-					</text>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-hello-text">
+				Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app默认全局使用flex布局(在App.vue里预设了)。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>flex-direction: row\n横向布局</text>
-				</view>
-				<view class="page-section-spacing">
-					<view class="uni-flex uni-row" style="margin-top: 60upx;">
-						<view class="flex-item color1">A</view>
-						<view class="flex-item color2">B</view>
-						<view class="flex-item color3">C</view>
-					</view>
-				</view>
+			
+			<view class="uni-title uni-common-mt">
+				flex-direction: row
+				<text>\n横向布局</text>
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>flex-direction: column\n纵向布局</text>
-				</view>
-				<view class="uni-flex uni-column" style="margin-top: 60upx;">
-					<view class="flex-item flex-item-V color1">A</view>
-					<view class="flex-item flex-item-V color2">B</view>
-					<view class="flex-item flex-item-V color3">C</view>
-				</view>
+			<view class="uni-flex uni-row">
+				<view class="flex-item uni-bg-red">A</view>
+				<view class="flex-item uni-bg-green">B</view>
+				<view class="flex-item uni-bg-blue">C</view>
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>更多布局示例</text>
-				</view>
+			
+			<view class="uni-title uni-common-mt">
+				flex-direction: column
+				<text>\n纵向布局</text>
+			</view>
+			<view class="uni-flex uni-column">
+				<view class="flex-item flex-item-V uni-bg-red">A</view>
+				<view class="flex-item flex-item-V uni-bg-green">B</view>
+				<view class="flex-item flex-item-V uni-bg-blue">C</view>
+			</view>
+			
+			<view class="uni-title uni-common-mt">
+				更多布局示例
+				<text>\nflex布局演示</text>
+			</view>
+			<view>
 				<view class="text">纵向布局-自动宽度</view>
 				<view class="text" style="width: 300upx;">纵向布局-固定宽度</view>
-				
 				<view class="uni-flex uni-row">
 					<view class="text">横向布局-自动宽度</view>
 					<view class="text">横向布局-自动宽度</view>
@@ -84,22 +79,22 @@
 					</view>
 				</view>
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">
-					<text>组合示例：</text>
+			
+			<view class="uni-title uni-common-mt">
+				组合示例
+				<text>\nflex布局演示</text>
+			</view>
+			<view class="uni-flex uni-row">
+				<view class="text" style="width: 200upx;height: 220upx;display: flex; justify-content: center;align-items: center;">
+					<image src="../../../static/plus.png" style="width: 150upx;height: 150upx;"></image>
 				</view>
-				<view class="uni-flex uni-row">
-					<view class="text" style="width: 200upx;height: 220upx;display: flex; justify-content: center;align-items: center;">
-						<image src="../../../static/plus.png" style="width: 150upx;height: 150upx;"></image>
+				<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
+					<view class="text" style="height: 120upx;text-align: left;padding-left: 20upx;padding-top: 10upx;">
+						文字居左，留出左间距
 					</view>
-					<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
-						<view class="text" style="height: 120upx;text-align: left;padding-left: 20upx;padding-top: 10upx;">
-							文字居左，留出左间距
-						</view>
-						<view class="uni-flex uni-row">
-							<view class="text" style="flex: 1;">剩余数量</view>
-							<view class="text" style="flex: 1;">立即购买</view>
-						</view>
+					<view class="uni-flex uni-row">
+						<view class="text" style="flex: 1;">剩余数量</view>
+						<view class="text" style="flex: 1;">立即购买</view>
 					</view>
 				</view>
 			</view>
@@ -118,28 +113,26 @@
 
 <style>
 	.flex-item {
-		width: 200upx;
-		height: 300upx;
+		width: 33.3%;
+		height: 200upx;
 		text-align: center;
-		line-height: 300upx;
-		font-size: 26upx;
+		line-height: 200upx;
 	}
 
 	.flex-item-V {
-		margin: 0 auto;
-		width: 300upx;
-		height: 200upx;
+		width: 100%;
+		height: 150upx;
 		text-align: center;
-		line-height: 200upx;
+		line-height: 150upx;
 	}
 	.text{
-		margin: 10upx;
+		margin:15upx 10upx;
 		padding: 0 20upx;
 		background-color: #ebebeb;
 		height: 70upx;
 		line-height: 70upx;
 		text-align: center;
-		color: #cfcfcf;
+		color: #777;
 		font-size: 26upx;
 	}
 	.desc{
diff --git a/examples/hello-uniapp/pages/component/web-view/web-view.vue b/examples/hello-uniapp/pages/component/web-view/web-view.vue
index ff1bdaf641c..dcba0e19152 100644
--- a/examples/hello-uniapp/pages/component/web-view/web-view.vue
+++ b/examples/hello-uniapp/pages/component/web-view/web-view.vue
@@ -1,11 +1,11 @@
 <template>
-	<view>
-		<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
-	</view>
+    <view>
+        <web-view src="https://uniapp.dcloud.io"></web-view>
+    </view>
 </template>
 
 <script>
-	export default {}
+    export default {}
 </script>
 
 <style>
diff --git a/examples/hello-uniapp/pages/index/index.vue b/examples/hello-uniapp/pages/index/index.vue
new file mode 100644
index 00000000000..4b81b2c79d2
--- /dev/null
+++ b/examples/hello-uniapp/pages/index/index.vue
@@ -0,0 +1,33 @@
+<template>
+	<view class="content">
+		<view class="uni-h1">HI...</view>
+		<view class="uni-h2">HI...</view>
+		<view class="uni-h3">HI...</view>
+		<view class="uni-h4">HI...</view>
+		<view class="uni-h5">HI...</view>
+		<view class="uni-h6">HI...</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'Hello'
+			};
+		}
+	}
+</script>
+
+<style>
+	.content {
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.title {
+		font-size: 36upx;
+		color: #8f8f94;
+	}
+</style>
diff --git a/examples/hello-uniapp/pages/tabBar/API/API.vue b/examples/hello-uniapp/pages/tabBar/API/API.vue
index fe688fbd6da..74d20c47f90 100644
--- a/examples/hello-uniapp/pages/tabBar/API/API.vue
+++ b/examples/hello-uniapp/pages/tabBar/API/API.vue
@@ -1,8 +1,10 @@
 <template>
-	<view class="index">
-		<view class="index-hd">
-			<image class="index-logo" src="../../../static/apiIndex.png"></image>
-			<view class="page-section-title">以下将演示uni-app接口能力，具体属性参数详见uni-app开发文档。</view>
+	<view class="uni-padding-wrap uni-common-pb">
+		<view class="uni-header-logo">
+			<image src="../../../static/apiIndex.png"></image>
+		</view>
+		<view class="uni-hello-text uni-common-pb">
+			以下将演示uni-app接口能力，具体属性参数详见uni-app开发文档。
 		</view>
 		<view class="uni-card" v-for="(list,index) in lists" :key="index">
 			<view class="uni-list">
@@ -235,18 +237,13 @@
 </script>
 
 <style>
-	.index{
-		padding-bottom: 1upx;
-	}
-	.uni-card {
-		box-shadow: none;
-	}
-
-	.uni-list:after {
-		height: 0;
-	}
-
-	.uni-list:before {
-		height: 0;
-	}
+.uni-card {
+	box-shadow: none;
+}
+.uni-list:after {
+	height: 0;
+}
+.uni-list:before {
+	height: 0;
+}
 </style>
diff --git a/examples/hello-uniapp/pages/tabBar/component/component.vue b/examples/hello-uniapp/pages/tabBar/component/component.vue
index c0d9a2208ca..cb38206b404 100644
--- a/examples/hello-uniapp/pages/tabBar/component/component.vue
+++ b/examples/hello-uniapp/pages/tabBar/component/component.vue
@@ -1,11 +1,11 @@
 <template>
-    <view class="index">
-        <view class="index-hd">
-            <image class="index-logo" src="../../../static/componentIndex.png"></image>
-            <view class="page-section-title">
-                以下将展示uni-app官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见uni-app开发文档。
-            </view>
-        </view>
+    <view class="uni-padding-wrap uni-common-pb">
+        <view class="uni-header-logo">
+            <image src="../../../static/componentIndex.png"></image>
+		</view>
+		<view class="uni-hello-text uni-common-pb">
+			以下将展示uni-app官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见uni-app开发文档。
+		</view>
         <view class="uni-card" v-for="(list,index) in lists" :key="index">
             <view class="uni-list">
                 <view class="uni-list-cell uni-collapse">
@@ -125,19 +125,13 @@
 </script>
 
 <style>
-    .index {
-        padding-bottom: 1upx;
-    }
-
-    .uni-card {
-        box-shadow: none;
-    }
-
-    .uni-list:after {
-        height: 0;
-    }
-
-    .uni-list:before {
-        height: 0;
-    }
+.uni-card {
+	box-shadow: none;
+}
+.uni-list:after {
+	height: 0;
+}
+.uni-list:before {
+	height: 0;
+}
 </style>
diff --git a/examples/hello-uniapp/pages/tabBar/template/template.vue b/examples/hello-uniapp/pages/tabBar/template/template.vue
index 670705e6ba6..3f4a7dd429a 100644
--- a/examples/hello-uniapp/pages/tabBar/template/template.vue
+++ b/examples/hello-uniapp/pages/tabBar/template/template.vue
@@ -1,8 +1,10 @@
 <template>
-	<view class="index">
-		<view class="index-hd">
-			<image class="index-logo" src="../../../static/templateIndex.png"></image>
-			<view class="page-section-title">以下是uni-app的部分模板示例，欢迎大家积极分享更多的模板，一起完善uni-app生态。</view>
+	<view class="uni-padding-wrap uni-common-pb">
+		<view class="uni-header-logo">
+			<image src="../../../static/templateIndex.png"></image>
+		</view>
+		<view class="uni-hello-text uni-common-pb">
+			以下是uni-app的部分模板示例，欢迎大家积极分享更多的模板，一起完善uni-app生态。
 		</view>
 		<view class="uni-card" v-for="(list,index) in lists" :key="index">
 			<view class="uni-list">
@@ -21,23 +23,22 @@
 		</view>
 	</view>
 </template>
-
 <script>
 	export default {
 		data() {
 			return {
 				lists: [
 					{
-						name: '数字角标badge',
+						name: '数字角标 badge',
 						url: 'badge'
 					}, {
-						name: '数字选择框number-box',
+						name: '数字选择框 number-box',
 						url: 'number-box'
 					}, {
-						name: '弹出层popup',
+						name: '弹出层 popup',
 						url: 'popup'
 					}, {
-						name: '多列选择picker',
+						name: '多列选择 picker',
 						url: 'mpvue-picker'
 					}, {
 						id: 'navbar',
@@ -58,7 +59,7 @@
 						}]
 					}, {
 						id: 'tabbar',
-						name: '可拖动顶部选项卡',
+						name: '顶部选项卡',
 						// #ifdef MP-WEIXIN 
 						url: 'tabbar',
 						// #endif
@@ -73,10 +74,10 @@
 						}]
 						// #endif
 					}, {
-						name: '顶部分段器segment',
+						name: '顶部分段器 segment',
 						url: 'segmented-control'
 					}, {
-						name: '抽屉侧滑菜单drawer',
+						name: '抽屉侧滑菜单 drawer',
 						url: 'drawer'
 					}, {
 						name: '折叠面板',
@@ -110,7 +111,7 @@
 							url: 'list-triplex-row'
 						}]
 					}, {
-						name: '右侧索引列表indexList',
+						name: '右侧索引列表 indexList',
 						url: 'index-list'
 					}, {
 						name: '图文列表',
@@ -119,10 +120,10 @@
 						name: '商品列表',
 						url: 'product-list'
 					}, {
-						name: '加载更多load-more',
+						name: '加载更多 load-more',
 						url: 'load-more'
 					}, {
-						name: '懒加载lazy-load',
+						name: '懒加载 lazy-load',
 						open: false,
 						pages: [{
 							name: '默认',
@@ -134,14 +135,14 @@
 					},{
 						name: '时间轴 timeline',
 						url: 'timeline'
+					}, {
+						name: '标签 tag',
+						url: 'tag'
 					}, {
-						name: '标签 tag',
-						url: 'tag'
-					}, {
-						name: 'ECharts图表',
+						name: 'ECharts 图表',
 						url: 'echarts'
 					}, {
-						name: 'markdown富文本渲染',
+						name: 'markdown 富文本渲染',
 						url: 'mdparse'
 					}, {
 						name: '手势图案锁屏',
@@ -163,33 +164,33 @@
 						name: '图片裁剪',
 						url: 'crop'
 					}, {
-						name: 'markdown富文本编辑器',
+						name: 'markdown 富文本编辑器',
 						url: 'md-editor'
 					}, {
 						name: '侧边分类导航',
 						url: 'left-category'
-					}, {
-						name: '步骤提示',
-						url: 'steps'
-					}, {
-						name: '评论列表',
-						url: 'comments'
-					}, {
-						name: '滚动公告',
-						url: 'scrollmsg'
-					},{
-						name: '表单验证',
-						url: 'datachecker'
-					},{
-						name: '插屏弹窗',
-						url: 'sbanner'
+					}, {
+						name: '步骤提示',
+						url: 'steps'
+					}, {
+						name: '评论列表',
+						url: 'comments'
+					}, {
+						name: '滚动公告',
+						url: 'scrollmsg'
+					},{
+						name: '表单验证',
+						url: 'datachecker'
+					},{
+						name: '插屏弹窗',
+						url: 'sbanner'
 					},{
 						name: '倒计时',
 						url: 'countdown'
 					}
 					// #ifdef APP-PLUS 
 					, {
-						name: '聊天窗口chat',
+						name: '聊天窗口 chat',
 						url: 'im-chat'
 					}
 					// #endif
@@ -230,19 +231,13 @@
 </script>
 
 <style>
-	.index {
-		padding-bottom: 1upx;
-	}
-
-	.uni-card {
-		box-shadow: none;
-	}
-
-	.uni-list:after {
-		height: 0;
-	}
-
-	.uni-list:before {
-		height: 0;
-	}
-</style>
+.uni-card {
+	box-shadow: none;
+}
+.uni-list:after {
+	height: 0;
+}
+.uni-list:before {
+	height: 0;
+}
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/badge/badge.vue b/examples/hello-uniapp/pages/template/badge/badge.vue
index dd29adbe086..558d3018bf0 100644
--- a/examples/hello-uniapp/pages/template/badge/badge.vue
+++ b/examples/hello-uniapp/pages/template/badge/badge.vue
@@ -1,27 +1,29 @@
 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class='title'>
-			<text>有底色</text>
-		</view>
-		<view>
-			<uni-badge text="1"></uni-badge>
-			<uni-badge text="12" type="primary"></uni-badge>
-			<uni-badge text="123" type="success"></uni-badge>
-			<uni-badge text="3" type="warning"></uni-badge>
-			<uni-badge text="45" type="danger"></uni-badge>
-			<uni-badge text="456" type="purple"></uni-badge>
-		</view>
-		<view class='title'>
-			<text>无底色</text>
-		</view>
-		<view>
-			<uni-badge text="1" :inverted="true"></uni-badge>
-			<uni-badge text="12" type="primary" :inverted="true"></uni-badge>
-			<uni-badge text="123" type="success" :inverted="true"></uni-badge>
-			<uni-badge text="3" type="warning" :inverted="true"></uni-badge>
-			<uni-badge text="45" type="danger" :inverted="true"></uni-badge>
-			<uni-badge text="456" type="purple" :inverted="true"></uni-badge>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
+				有底色
+			</view>
+			<view style="background:#FFF; padding:20upx;">
+				<uni-badge text="1"></uni-badge>
+				<uni-badge text="12" type="primary"></uni-badge>
+				<uni-badge text="123" type="success"></uni-badge>
+				<uni-badge text="3" type="warning"></uni-badge>
+				<uni-badge text="45" type="danger"></uni-badge>
+				<uni-badge text="456" type="purple"></uni-badge>
+			</view>
+			<view class="uni-title uni-common-mt">
+				无底色
+			</view>
+			<view style="background:#FFF; padding:20upx;">
+				<uni-badge text="1" :inverted="true"></uni-badge>
+				<uni-badge text="12" type="primary" :inverted="true"></uni-badge>
+				<uni-badge text="123" type="success" :inverted="true"></uni-badge>
+				<uni-badge text="3" type="warning" :inverted="true"></uni-badge>
+				<uni-badge text="45" type="danger" :inverted="true"></uni-badge>
+				<uni-badge text="456" type="purple" :inverted="true"></uni-badge>
+			</view>
 		</view>
 	</view>
 </template>
@@ -41,16 +43,5 @@
 </script>
 
 <style>
-	.page {
-		padding-top: 60upx;
-	}
-
-	page {
-		background: #efeff4;
-	}
-
-	.uni-badge,
-	.title {
-		margin: 20upx;
-	}
-</style>
+	.uni-badge{margin: 20upx;}
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/comments/comments.vue b/examples/hello-uniapp/pages/template/comments/comments.vue
index eec844bb37c..10bb4df34ef 100755
--- a/examples/hello-uniapp/pages/template/comments/comments.vue
+++ b/examples/hello-uniapp/pages/template/comments/comments.vue
@@ -1,59 +1,62 @@
 <template>
-	<view class="grace-padding">
-		<!-- 评论区 start -->
-		<view class="grace-comment">
-			<view class="grace-comment-list">
-				<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
-				<view class="grace-comment-body">
-					<view class="grace-comment-top">
-						<text>刘美丽</text>
-						<text class="grace-iconfont icon-zan"></text>
+	<view>
+	<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap">
+			<!-- 评论区 start -->
+			<view class="uni-comment">
+				<view class="uni-comment-list">
+					<view class="uni-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
+					<view class="uni-comment-body">
+						<view class="uni-comment-top">
+							<text>刘美丽</text>
+							<text class="uni-iconfont icon-zan"></text>
+						</view>
+						<view class="uni-comment-date">
+							<text>08/10 08:12</text>
+							<text>102</text>
+						</view>
+						<view class="uni-comment-content">上天呀！我渴望与你相知相惜，长存此心永不褪减。</view>
 					</view>
-					<view class="grace-comment-date">
-						<text>08/10 08:12</text>
-						<text>102</text>
-					</view>
-					<view class="grace-comment-content">上天呀！我渴望与你相知相惜，长存此心永不褪减。</view>
 				</view>
-			</view>
-			<view class="grace-comment-list">
-				<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
-				<view class="grace-comment-body">
-					<view class="grace-comment-top">
-						<text>马克一天</text>
-						<text class="grace-iconfont icon-zan grace-comment-zan"> 100</text>
+				<view class="uni-comment-list">
+					<view class="uni-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
+					<view class="uni-comment-body">
+						<view class="uni-comment-top">
+							<text>马克一天</text>
+							<text class="uni-iconfont icon-zan uni-comment-zan"> 100</text>
+						</view>
+						<view class="uni-comment-content">除非巍巍群山消逝不见，除非滔滔江水干涸枯竭。除非凛凛寒冬雷声翻滚，除非炎炎酷暑白雪纷飞，除非天地相交聚合连接，直到这样的事情全都发生时，我才敢将对你的情意抛弃决绝！</view>
 					</view>
-					<view class="grace-comment-content">除非巍巍群山消逝不见，除非滔滔江水干涸枯竭。除非凛凛寒冬雷声翻滚，除非炎炎酷暑白雪纷飞，除非天地相交聚合连接，直到这样的事情全都发生时，我才敢将对你的情意抛弃决绝！</view>
 				</view>
-			</view>
-			<view class="grace-comment-list">
-				<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
-				<view class="grace-comment-body">
-					<view class="grace-comment-top">
-						<text>今生缘</text>
-						<text class="grace-iconfont icon-zan"> 66</text>
-					</view>
-					<view class="grace-comment-content">人面不知何处去，桃花依旧笑春风。</view>
-					<view class="grace-comment-date">
-						<text>08/10 07:55</text>
+				<view class="uni-comment-list">
+					<view class="uni-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
+					<view class="uni-comment-body">
+						<view class="uni-comment-top">
+							<text>今生缘</text>
+							<text class="uni-iconfont icon-zan"> 66</text>
+						</view>
+						<view class="uni-comment-content">人面不知何处去，桃花依旧笑春风。</view>
+						<view class="uni-comment-date">
+							<text>08/10 07:55</text>
+						</view>
 					</view>
 				</view>
-			</view>
-			<view class="grace-comment-list">
-				<view class="grace-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
-				<view class="grace-comment-body">
-					<view class="grace-comment-top">
-						<text>小猫咪</text>
-						<text class="grace-iconfont icon-zan"> 120</text>
-					</view>
-					<view class="grace-comment-content">海上生明月，天涯共此时。。</view>
-					<view class="grace-comment-date">
-						<text>2天前<text class="grace-comment-replay-btn">5回复</text></text>
+				<view class="uni-comment-list">
+					<view class="uni-comment-face"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
+					<view class="uni-comment-body">
+						<view class="uni-comment-top">
+							<text>小猫咪</text>
+							<text class="uni-iconfont icon-zan"> 120</text>
+						</view>
+						<view class="uni-comment-content">海上生明月，天涯共此时。。</view>
+						<view class="uni-comment-date">
+							<text>2天前<text class="uni-comment-replay-btn">5回复</text></text>
+						</view>
 					</view>
 				</view>
 			</view>
+			<!-- 评论区 end -->
 		</view>
-		<!-- 评论区 end -->
 	</view>
 </template>
 
@@ -65,20 +68,18 @@ export default {
 }
 </script>
 
-<style>
-view{display:flex; flex-wrap:wrap; font-size:28upx; width:100%; height:auto; align-items:flex-start;}
-.grace-padding{padding:2%; width:96%;}
-.grace-comment{padding:5rpx 0;}
-.grace-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0;}
-.grace-comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden;}
-.grace-comment-face image{width:100%; border-radius:100%;}
-.grace-comment-body{width:100%;}
-.grace-comment-top{line-height:1.5em; justify-content:space-between;}
-.grace-comment-top text{color:#0A98D5; font-size:24upx;}
-.grace-comment-top text:last-child{color:#666666;}
-.grace-comment-date{line-height:1.5em; justify-content:space-between;}
-.grace-comment-date text{color:#666666; font-size:24upx;}
-.grace-comment-content{line-height:1.6em; font-size:28upx; padding:8rpx 0;}
-.grace-comment-zan{color:#0A98D5 !important;}
-.grace-comment-replay-btn{background:#F4F5F6; font-size:24upx; padding:8rpx 15upx; border-radius:30upx; color:#333 !important; margin:0 10upx;}
+<style>
+.uni-comment{padding:5rpx 0; display: flex; flex-grow:1; flex-direction: column;}
+.uni-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0; width:100%; display: flex;}
+.uni-comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden;}
+.uni-comment-face image{width:100%; border-radius:100%;}
+.uni-comment-body{width:100%;}
+.uni-comment-top{line-height:1.5em; justify-content:space-between;}
+.uni-comment-top text{color:#0A98D5; font-size:24upx;}
+.uni-comment-top text:last-child{color:#666666;}
+.uni-comment-date{line-height:1.5em; justify-content:space-between;}
+.uni-comment-date text{color:#666666; font-size:24upx;}
+.uni-comment-content{line-height:1.6em; font-size:28upx; padding:8rpx 0;}
+.uni-comment-zan{color:#0A98D5 !important;}
+.uni-comment-replay-btn{background:#F4F5F6; font-size:24upx; padding:8rpx 15upx; border-radius:30upx; color:#333 !important; margin:0 10upx;}
 </style>
diff --git a/examples/hello-uniapp/pages/template/countdown/countdown.vue b/examples/hello-uniapp/pages/template/countdown/countdown.vue
index 555bda97bc9..a6ad2a1b31d 100755
--- a/examples/hello-uniapp/pages/template/countdown/countdown.vue
+++ b/examples/hello-uniapp/pages/template/countdown/countdown.vue
@@ -1,15 +1,15 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="grace-text-small grace-center" style="margin:80upx 0 20upx 0;">示例1</view>
+		<view class="uni-text-small uni-center" style="margin:80upx 0 20upx 0;">示例1</view>
 		<view style="justify-content:center;">
 			<graceCountd :timer="timer1"></graceCountd>
 		</view>
-		<view class="grace-text-small grace-center" style="margin:80rpx 0 20rpx 0;">示例2</view>
+		<view class="uni-text-small uni-center" style="margin:80rpx 0 20rpx 0;">示例2</view>
 		<view style="justify-content:center; background:#00B26A; padding:50rpx 0;">
 			<graceCountd :timer="timer2" borderColor="#FFFFFF" splitorColor="#FFF" fontColor="#FFFFFF" bgrColor="none"></graceCountd>
 		</view>
-		<view class="grace-text-small grace-center" style="margin:80rpx 0 20rpx 0;">示例3</view>
+		<view class="uni-text-small uni-center" style="margin:80rpx 0 20rpx 0;">示例3</view>
 		<view style="justify-content:center;">
 			<graceCountd fontColor="#FFFFFF" bgrColor="#000000" :timer="timer3"></graceCountd>
 		</view>
@@ -20,9 +20,9 @@
 	//模拟3个时间
 	var dateObj = new Date();
 	var currentTime = dateObj.getTime();
-	var timer1 = formatDateTime((currentTime + 1000 * 10));
-	var timer2 = formatDateTime((currentTime + 1000 * 38));
-	var timer3 = formatDateTime((currentTime + 1000 * 120));
+	var timer1 = formatDateTime((currentTime + 1000 * 200));
+	var timer2 = formatDateTime((currentTime + 1000 * 300));
+	var timer3 = formatDateTime((currentTime + 1000 * 500));
 	//时间戳 转 YY-mm-dd HH:ii:ss 
 	function formatDateTime(inputTime){
 		  var date = new Date(inputTime);
@@ -55,9 +55,8 @@
 </script>
 
 <style>
-.grace-center{justify-content: center;}
-view{display:flex; width:100%; flex-wrap:wrap;}
-.grace-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
-.grace-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
-.grace-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
+view{display:flex; width:100%; flex-wrap:wrap; justify-content:center;}
+.uni-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
+.uni-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
+.uni-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
 </style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/datachecker/datachecker.vue b/examples/hello-uniapp/pages/template/datachecker/datachecker.vue
index 3c0066fef19..a25ced47978 100755
--- a/examples/hello-uniapp/pages/template/datachecker/datachecker.vue
+++ b/examples/hello-uniapp/pages/template/datachecker/datachecker.vue
@@ -1,18 +1,18 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
+		<view class="uni-padding-wrap">
 			<form @submit="formSubmit" @reset="formReset">
-				<view class="page-section">
-					<view class="page-section-title">姓名</view>
+				<view>
+					<view class="uni-title">姓名</view>
 					<view class="uni-list">
 						<view class="uni-list-cell">
 							<input class="uni-input" name="nickname" placeholder="请填写您的昵称" />
 						</view>
 					</view>
 				</view>
-				<view class="page-section page-section-gap">
-					<view class="page-section-title">性别</view>
+				<view>
+					<view class="uni-title">性别</view>
 					<radio-group class="uni-flex" name="gender">
 						<label>
 							<radio value="男" />男</label>
@@ -20,8 +20,8 @@
 							<radio value="女" />女</label>
 					</radio-group>
 				</view>
-				<view class="page-section page-section-gap">
-					<view class="page-section-title">爱好</view>
+				<view>
+					<view class="uni-title">爱好</view>
 					<checkbox-group class="uni-flex" name="loves">
 						<label>
 							<checkbox value="读书" />读书</label>
@@ -29,8 +29,8 @@
 							<checkbox value="写字" />写字</label>
 					</checkbox-group>
 				</view>
-				<view class="btn-area">
-					<button class="btn-submit" formType="submit">Submit</button>
+				<view class="uni-btn-v uni-common-mt">
+					<button class="btn-submit" formType="submit" type="primary">Submit</button>
 					<button type="default" formType="reset">Reset</button>
 				</view>
 			</form>
@@ -73,19 +73,4 @@
 </script>
 
 <style>
-	label {
-		display: flex;
-		flex-direction: row;
-		min-width: 270upx;
-		margin-right: 20upx;
-	}
-
-	.btn-submit {
-		background-color: #007aff;
-		color: #ffffff;
-	}
-	.uni-input{
-		width: 100%;
-		padding-left: 30upx;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/template/echarts/echarts.vue b/examples/hello-uniapp/pages/template/echarts/echarts.vue
index 1bc8a43805a..fcd112954a2 100644
--- a/examples/hello-uniapp/pages/template/echarts/echarts.vue
+++ b/examples/hello-uniapp/pages/template/echarts/echarts.vue
@@ -1,147 +1,138 @@
 <template>
-	<div class="container">
-		<view class="page-section-title" style="display: block;">
+	<view class="container">
+		<view style="display: block; padding:30upx;">
 			<text>这是uni-app集成mpvue-echarts的图表示例，mpvue-echarts组件的用法参考：</text>
-			<text class="navigate" @click="goBrowser" selectable>https://github.com/F-loat/mpvue-echarts</text>
+			<text class="navigate" @tap="goBrowser" selectable>https://github.com/F-loat/mpvue-echarts</text>
 		</view>
 		<view class="canvasView">
-			<view class="canvas-bar">
-				<view class="title">饼图示例</view>
-				<button class="update-btn" type="primary" size="mini" @click="updatePie">修改饼状图数据</button>
-			</view>
-			<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
+			<view class="title">饼图示例</view>
+			<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" />
 		</view>
 		<view class="canvasView">
 			<view class="title">折线图示例</view>
-			<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
+			<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" />
 		</view>
-	</div>
+	</view>
 </template>
 
 <script>
 	import * as echarts from '../../../components/echarts/echarts.simple.min.js';
 	import mpvueEcharts from '../../../components/mpvue-echarts/src/echarts.vue';
 
-	let pieOption = {
-		animation: false,
-		backgroundColor: '#F8F8F8',
-		color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
-		series: [{
-			label: {
-				normal: {
-					fontSize: 14
+	function getPieOption() {
+		return {
+			animation: false,
+			backgroundColor: '#F8F8F8',
+			color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
+			series: [{
+				label: {
+					normal: {
+						fontSize: 14
+					}
+				},
+				type: 'pie',
+				center: ['50%', '50%'],
+				radius: [0, '60%'],
+				data: [{
+					value: 55,
+					name: '北京'
+				}, {
+					value: 20,
+					name: '武汉'
+				}, {
+					value: 10,
+					name: '杭州'
+				}, {
+					value: 20,
+					name: '广州'
+				}, {
+					value: 38,
+					name: '上海'
+				}],
+				itemStyle: {
+					emphasis: {
+						shadowBlur: 10,
+						shadowOffsetX: 0,
+						shadowColor: 'rgba(0, 2, 2, 0.3)'
+					}
 				}
+			}]
+		}
+	}
+
+	function getLineOption() {
+		return {
+			animation: false,
+			color: ['#37A2DA', '#9FE6B8'],
+			legend: {
+				data: ['蒸发量', '降水量']
 			},
-			type: 'pie',
-			center: ['50%', '50%'],
-			radius: [0, '60%'],
-			data: [{
-				value: 55,
-				name: '北京'
-			}, {
-				value: 38,
-				name: '上海'
-			}, {
-				value: 20,
-				name: '广州'
+			grid: {
+				x: 35,
+				x2: 10,
+				y: 30,
+				y2: 25
+			},
+			calculable: false,
+			xAxis: [{
+				type: 'category',
+				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 			}],
-			itemStyle: {
-				emphasis: {
-					shadowBlur: 10,
-					shadowOffsetX: 0,
-					shadowColor: 'rgba(0, 2, 2, 0.3)'
+			yAxis: [{
+				type: 'value',
+				splitArea: {
+					show: true
 				}
-			}
-		}]
-	};
-
-	let lineOption = {
-		animation: false,
-		color: ['#37A2DA', '#9FE6B8'],
-		grid: {
-			x: 35,
-			x2: 10,
-			y: 30,
-			y2: 25
-		},
-		calculable: false,
-		xAxis: [{
-			type: 'category',
-			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-		}],
-		yAxis: [{
-			type: 'value',
-			splitArea: {
-				show: true
-			}
-		}],
-		series: [{
-			name: '蒸发量',
-			type: 'line',
-			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
-		}, {
-			name: '降水量',
-			type: 'line',
-			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
-		}]
-	};
+			}],
+			series: [{
+				name: '蒸发量',
+				type: 'line',
+				data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+			}, {
+				name: '降水量',
+				type: 'line',
+				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+			}]
+		}
+	}
 
 	export default {
 		data() {
 			return {
-				echarts: echarts,
-				updateStatus: false
+				echarts,
+				pieInit: function (canvas, width, height) {
+					let pieChart = echarts.init(canvas, null, {
+						width: width,
+						height: height
+					})
+					canvas.setChart(pieChart)
+
+					pieChart.setOption(getPieOption())
+					return pieChart
+				},
+				lineInit: function (canvas, width, height) {
+					let lineChart = echarts.init(canvas, null, {
+						width: width,
+						height: height
+					})
+					canvas.setChart(lineChart)
+
+					lineChart.setOption(getLineOption())
+					return lineChart
+				}
 			}
 		},
 		methods: {
 			goBrowser() {
 				// #ifdef APP-PLUS
-				plus.runtime.openURL('https://github.com/F-loat/mpvue-echarts');
+				plus.runtime.openURL("https://github.com/F-loat/mpvue-echarts");
 				// #endif
 				// #ifdef MP-WEIXIN
 				uni.showModal({
-					content: '请复制链接在浏览器里打开',
-					showCancel: false
+					content:"请复制链接在浏览器里打开",
+					showCancel:false
 				})
 				// #endif
-			},
-			updatePie() {
-				// 参考 mpvue-charts 的懒加载示例
-				// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue
-
-				if (this.updateStatus) {
-					return;
-				}
-				pieOption.series[0].data.push({
-					value: 20,
-					name: '武汉'
-				});
-				pieOption.series[0].data.push({
-					value: 10,
-					name: '杭州'
-				});
-				this.$refs.pieChart.init();
-				this.updateStatus = true;
-			},
-			pieInit(canvas, width, height) {
-				let pieChart = echarts.init(canvas, null, {
-					width: width,
-					height: height
-				})
-				canvas.setChart(pieChart)
-
-				pieChart.setOption(pieOption)
-				return pieChart
-			},
-			lineInit(canvas, width, height) {
-				let lineChart = echarts.init(canvas, null, {
-					width: width,
-					height: height
-				})
-				canvas.setChart(lineChart)
-
-				lineChart.setOption(lineOption)
-				return lineChart
 			}
 		},
 		components: {
@@ -164,7 +155,6 @@
 	.title {
 		margin-left: 30upx;
 		color: #8f8f94;
-		line-height: 3;
 	}
 
 	.container {
@@ -181,13 +171,4 @@
 	.navigate {
 		color: #007AFF;
 	}
-	.canvas-bar {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-	.update-btn {
-		line-height: 3;
-		margin-right: 30upx;
-	}
-</style>
+</style>
diff --git a/examples/hello-uniapp/pages/template/gesture-lock/gesture-lock.vue b/examples/hello-uniapp/pages/template/gesture-lock/gesture-lock.vue
index d2411528310..fa1206149d7 100644
--- a/examples/hello-uniapp/pages/template/gesture-lock/gesture-lock.vue
+++ b/examples/hello-uniapp/pages/template/gesture-lock/gesture-lock.vue
@@ -1,8 +1,13 @@
 <template>
-    <view class="index-page">
-        <mpvue-gesture-lock :containerWidth="600" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
-        <view class="result">{{text}}</view>
-    </view>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view>
+				<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
+			</view>
+			<view class="uni-helllo-text uni-common-mt uni-center">{{text}}</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -14,6 +19,7 @@
         },
         data() {
             return {
+				title : "手势图案",
                 password: [],
                 text: '请设定手势'
             }
@@ -38,15 +44,4 @@
 </script>
 
 <style>
-    .index-page {
-        box-sizing: border-box;
-        padding-top: 30px;
-        height: 100vh;
-        width: 100vw;
-    }
-
-    .index-page .result {
-        text-align: center;
-        margin-top: 30px;
-    }
 </style>
diff --git a/examples/hello-uniapp/pages/template/grid/grid.vue b/examples/hello-uniapp/pages/template/grid/grid.vue
index d90ea5d3846..bea8201d466 100644
--- a/examples/hello-uniapp/pages/template/grid/grid.vue
+++ b/examples/hello-uniapp/pages/template/grid/grid.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="page">
         <page-head :title="title"></page-head>
-        <view class="uni-grid-9">
+        <view class="uni-grid-9 uni-common-mt">
             <view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in grids" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
                 <image class="uni-grid-9-image" :src="item"></image>
                 <text class="uni-grid-9-text">grid</text>
@@ -28,8 +28,4 @@
     .page {
         padding-top: 60upx;
     }
-
-    page {
-        background: #efeff4;
-    }
 </style>
diff --git a/examples/hello-uniapp/pages/template/lazy-load/lazy-load.vue b/examples/hello-uniapp/pages/template/lazy-load/lazy-load.vue
index 0f4051832ab..ab0a39fc80a 100644
--- a/examples/hello-uniapp/pages/template/lazy-load/lazy-load.vue
+++ b/examples/hello-uniapp/pages/template/lazy-load/lazy-load.vue
@@ -52,7 +52,7 @@
     }
 
     .content>.title {
-        font-size: 32upx;
+        font-size:28upx;
         text-indent: 2em;
     }
 
diff --git a/examples/hello-uniapp/pages/template/list-triplex-row/list-triplex-row.vue b/examples/hello-uniapp/pages/template/list-triplex-row/list-triplex-row.vue
index 82df981381f..6927a054e90 100644
--- a/examples/hello-uniapp/pages/template/list-triplex-row/list-triplex-row.vue
+++ b/examples/hello-uniapp/pages/template/list-triplex-row/list-triplex-row.vue
@@ -39,11 +39,4 @@
 </script>
 
 <style>
-    .page {
-        padding-top: 60upx;
-    }
-
-    page {
-        background: #efeff4;
-    }
 </style>
diff --git a/examples/hello-uniapp/pages/template/list-with-badges/list-with-badges.vue b/examples/hello-uniapp/pages/template/list-with-badges/list-with-badges.vue
index f20578d0057..ebb6f537417 100644
--- a/examples/hello-uniapp/pages/template/list-with-badges/list-with-badges.vue
+++ b/examples/hello-uniapp/pages/template/list-with-badges/list-with-badges.vue
@@ -66,11 +66,4 @@
 </script>
 
 <style>
-	.page {
-		padding-top: 60upx;
-	}
-
-	page {
-		background: #efeff4;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/template/list-with-collapses/list-with-collapses.vue b/examples/hello-uniapp/pages/template/list-with-collapses/list-with-collapses.vue
index 66b920893ce..5a2a2fa7450 100644
--- a/examples/hello-uniapp/pages/template/list-with-collapses/list-with-collapses.vue
+++ b/examples/hello-uniapp/pages/template/list-with-collapses/list-with-collapses.vue
@@ -58,11 +58,5 @@
 </script>
 
 <style>
-    .page {
-        padding-top: 60upx;
-    }
 
-    page {
-        background: #efeff4;
-    }
 </style>
diff --git a/examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue b/examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue
index 3436c2750c5..6806000240b 100644
--- a/examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue
+++ b/examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue
@@ -46,7 +46,7 @@
 					url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
 					success: (data) => {
 						if (data.statusCode == 200) {
-							this.htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g,"<img width='100%'");
+							this.htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
 						}
 					},
 					fail: () => {
diff --git a/examples/hello-uniapp/pages/template/load-more/load-more.vue b/examples/hello-uniapp/pages/template/load-more/load-more.vue
index cca50e5d205..5efc1580063 100644
--- a/examples/hello-uniapp/pages/template/load-more/load-more.vue
+++ b/examples/hello-uniapp/pages/template/load-more/load-more.vue
@@ -1,14 +1,12 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-title">
-					这是load-more组件使用示例，配置loadingType改变组件状态，配置contentText改变文字内容，配置showImage改变loading时是否显示loading图标，配置color改变文字和loading图标颜色。
-				</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-helllo-text">
+				这是load-more组件使用示例，配置loadingType改变组件状态，配置contentText改变文字内容，配置showImage改变loading时是否显示loading图标，配置color改变文字和loading图标颜色。
 			</view>
-			<view class="page-section">
-				<view class="page-section-title">在列表中使用</view>
+			<view class="uni-title">在列表中使用</view>
+			<view>
 				<view class="list-view">
 					<view class="list-item" v-for="(value,index) in list" :key="index">list - {{value}}</view>
 				</view>
@@ -68,16 +66,17 @@
 
 <style>
 	.list-view {
-		padding: 0 30upx;
+		padding:10upx 0;
 	}
 
 	.list-item {
-		margin: 10upx 0;
+		margin: 20upx 0;
 		height: 100upx;
 		line-height: 100upx;
 		width: 100%;
 		border-radius: 10upx;
 		border: 1upx solid #eee;
 		text-align: center;
+		background:#FFF;
 	}
 </style>
diff --git a/examples/hello-uniapp/pages/template/mdparse/mdparse.vue b/examples/hello-uniapp/pages/template/mdparse/mdparse.vue
index 0ddab93c0f5..220f78d1c31 100644
--- a/examples/hello-uniapp/pages/template/mdparse/mdparse.vue
+++ b/examples/hello-uniapp/pages/template/mdparse/mdparse.vue
@@ -1,5 +1,5 @@
 <template>
-	<view style="margin-left: 15upx;margin-right: 15upx;">
+	<view class="uni-padding-wrap">
 		<wxParse :content="article" @preview="preview" @navigate="navigate" />
 	</view>
 </template>
diff --git a/examples/hello-uniapp/pages/template/media-list/media-list.vue b/examples/hello-uniapp/pages/template/media-list/media-list.vue
index 31362038592..63038d132b3 100644
--- a/examples/hello-uniapp/pages/template/media-list/media-list.vue
+++ b/examples/hello-uniapp/pages/template/media-list/media-list.vue
@@ -94,11 +94,7 @@
 </script>
 
 <style>
-	.page {
-		background: #efeff4;
-	}
-
-	.title {
-		padding: 20upx;
-	}
+.title {
+	padding: 20upx;
+}
 </style>
diff --git a/examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue b/examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
index d5a748ec395..fa9ce1669c1 100644
--- a/examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
+++ b/examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
@@ -1,14 +1,16 @@
 <template>
 	<view class="mvpue-picker">
-		<view class="page-hd">
-			<view class="page-title">mvpue-picker 使用示例</view>
-			<view class="page__desc">选中的值:</view>
-			<view class="picker-text">{{pickerText}}</view>
-		</view>
-		<view class="page-bd">
-			<button type="default" @click="showSinglePicker">单列选择</button>
-			<button type="default" @click="showMulLinkageTwoPicker">二级联动</button>
-			<button type="default" @click="showMulLinkageThreePicker">三级城市联动</button>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view style="uni-title">选中的值 : </view>
+			<view class="uni-textarea uni-common-mt">
+				<textarea :value="pickerText" disabled placeholder="请点击下面的按钮进行选择"></textarea>
+			</view>
+			<view class="uni-btn-v">
+				<button type="default" @click="showSinglePicker">单列选择</button>
+				<button type="default" @click="showMulLinkageTwoPicker">二级联动</button>
+				<button type="default" @click="showMulLinkageThreePicker">三级城市联动</button>
+			</view>
 		</view>
 		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
 		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
@@ -31,6 +33,7 @@
 		},
 		data() {
 			return {
+				title : "mvpue-picker 使用示例",
 				pickerValueDefault: [0, 0],
 				pickerSingleArray: [{
 						label: '中国',
@@ -108,28 +111,5 @@
 </script>
 
 <style>
-	.page-hd {
-		padding: 80upx;
-	}
-
-	.page-title {
-		font-size: 40upx;
-		font-weight: 800upx;
-	}
-
-	.page-bd {
-		padding: 30upx;
-	}
-
-	.page__desc {
-		margin-top: 20upx;
-	}
-
-	.picker-text {
-		color: #6D6D6D;
-	}
-
-	button {
-		margin-top: 30upx;
-	}
-</style>
+	
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/nav-button/nav-button.vue b/examples/hello-uniapp/pages/template/nav-button/nav-button.vue
index b298f424df2..51faf3fe9fb 100644
--- a/examples/hello-uniapp/pages/template/nav-button/nav-button.vue
+++ b/examples/hello-uniapp/pages/template/nav-button/nav-button.vue
@@ -1,15 +1,14 @@
 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section-title">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
 				<view>在App端可在pages.json里配置buttons，暂不支持动态改变buttons的样式，使用onNavigationBarButtonTap可监听buttons的点击事件。</view>
 				<view>在微信小程序端，不支持配置buttons，故按钮不见了。</view>
 			</view>
 		</view>
 	</view>
 </template>
-
 <script>
 	export default {
 		data() {
diff --git a/examples/hello-uniapp/pages/template/nav-default/nav-default.vue b/examples/hello-uniapp/pages/template/nav-default/nav-default.vue
index 53f6aa83d77..3a9e17eb3ab 100644
--- a/examples/hello-uniapp/pages/template/nav-default/nav-default.vue
+++ b/examples/hello-uniapp/pages/template/nav-default/nav-default.vue
@@ -1,13 +1,13 @@
 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section-title">
+		<view class="uni-padding-wrap">
+			<view class="uni-helllo-text">
 				本页标题栏是uni-app的默认配置，开发者可在pages.json里配置文字内容及标题颜色，也可通过api接口将其改变。
 			</view>
-			<view class="page-body-buttons">
+			<view class="uni-btn-v">
 				<button type="default" @click="setText">改变标题栏文字</button>
-				<button type="default" @click="setBg">改变标题栏颜色</button>
+				<button type="primary" @click="setBg">改变标题栏颜色</button>
 			</view>
 		</view>
 	</view>
@@ -41,11 +41,4 @@
 </script>
 
 <style>
-	.page {
-		padding-top: 60upx;
-	}
-	.page-body-buttons{
-		margin-top: 50upx;
-		padding: 0 30upx;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/template/nav-transparent/nav-transparent.vue b/examples/hello-uniapp/pages/template/nav-transparent/nav-transparent.vue
index a438590bba5..a01434c2427 100644
--- a/examples/hello-uniapp/pages/template/nav-transparent/nav-transparent.vue
+++ b/examples/hello-uniapp/pages/template/nav-transparent/nav-transparent.vue
@@ -8,22 +8,22 @@
 				<image :src="img" />
 			</swiper-item>
 		</swiper>
-		<view class="page-section">
-			<view class="page-section-title">
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
 				<view>在App端默认为标题栏透明，当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。</view>
 				<view>在微信小程序端，导航栏始终为不透明样式。</view>
 			</view>
-			<view class="page-section-title">图片类型</view>
-			<view class="uni-list">
-				<radio-group @change="radioChange">
-					<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in items" :key="index">
-						<view>{{item.name}}</view>
-						<view>
-							<radio :value="item.value" :checked="item.checked" />
-						</view>
-					</label>
-				</radio-group>
-			</view>
+			<view class="uni-title uni-common-mt">图片类型</view>
+		</view>
+		<view class="uni-list">
+			<radio-group @change="radioChange">
+				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in items" :key="index">
+					<view>{{item.name}}</view>
+					<view>
+						<radio :value="item.value" :checked="item.checked" />
+					</view>
+				</label>
+			</radio-group>
 		</view>
 		<view style="height: 1000upx;"></view>
 	</view>
diff --git a/examples/hello-uniapp/pages/template/number-box/number-box.vue b/examples/hello-uniapp/pages/template/number-box/number-box.vue
index 3b979302c36..7e35296eee0 100644
--- a/examples/hello-uniapp/pages/template/number-box/number-box.vue
+++ b/examples/hello-uniapp/pages/template/number-box/number-box.vue
@@ -1,38 +1,44 @@
 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="item">
-			<text class="item-title">默认</text>
-			<number-box></number-box>
-		</view>
-		<view class="item">
-			<text class="item-title">限定最小值和最大值（0~9）</text>
-			<number-box :min="0" :max="9"></number-box>
-		</view>
-		<view class="item">
-			<text class="item-title">设定步长值（步长10）</text>
-			<number-box :step="10"></number-box>
-		</view>
-		<view class="item">
-			<text class="item-title">获取输入框的值</text>
-			<view class="inline-item">
-				<number-box v-on:change="onNumberChange"></number-box>
-				<text class="item-label-right">当前的值为：{{numberValue}}</text>
-			</view>
-		</view>
-		<view class="item">
-			<text class="item-title">输入框只读</text>
-			<number-box :disabled="true"></number-box>
-		</view>
-		<view class="item">
-			<text class="item-title">在行内</text>
-			<view class="inline-item">
-				<text class="item-label">购买数量：</text>
+		<view class="uni-padding-wrap">
+			<view class="uni-hello-text uni-common-mt">默认</view>
+			<view class="uni-hello-items">
 				<number-box></number-box>
 			</view>
-		</view>
-		<view class="item">
-			<text class="item-title">在表单中</text>
+			
+			<view class="uni-hello-text uni-common-mt">限定最小值和最大值（0~9）</view>
+			<view class="uni-hello-items">
+				<number-box :min="0" :max="9"></number-box>
+			</view>
+			
+			<view class="uni-hello-text uni-common-mt">设定步长值（步长10）</view>
+			<view class="uni-hello-items">
+				<number-box :step="10"></number-box>
+			</view>
+			
+			<view class="uni-hello-text uni-common-mt">获取输入框的值</view>
+			<view class="uni-hello-items">
+				<view class="uni-inline-item">
+					<number-box v-on:update="numberUpdate"></number-box>
+					<text class="item-label-right">当前的值为：{{numberValue}}</text>
+				</view>
+			</view>
+			
+			<view class="uni-hello-text uni-common-mt">输入框只读</view>
+			<view class="uni-hello-items">
+				<number-box :disabled="true"></number-box>
+			</view>
+			
+			<view class="uni-hello-text uni-common-mt">在行内</view>
+			<view class="uni-hello-items">
+				<view class="uni-inline-item">
+					<text class="item-label">购买数量：</text>
+					<number-box></number-box>
+				</view>
+			</view>
+			
+			<view class="uni-hello-text uni-common-mt">在表单中</view>
 			<view class="uni-input-group">
 				<view class="uni-input-row">
 					<label>数字框一</label>
@@ -44,6 +50,7 @@
 				</view>
 			</view>
 		</view>
+		<view style="height:80upx;"></view>
 	</view>
 </template>
 <script>
@@ -60,102 +67,25 @@
 			numberBox
 		},
 		methods: {
-			onNumberChange(value) {
+			numberUpdate(value) {
 				this.numberValue = value;
 			}
 		}
 	}
 </script>
 <style>
-	page {
-		background: #efeff4;
+	.uni-hello-items{
+		padding:10upx 0;
 	}
-
-	.page {
-		background: #efeff4;
-		font-size: 34upx;
-		padding-bottom: 70upx;
-	}
-
-	.item {
-		margin: 20upx;
-		margin-top: 30upx;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.item-title {
-		color: #8f8f94;
-		font-size: 28upx;
-		font-weight: 400;
-	}
-
+	
 	.item-label {
 		line-height: 70upx;
+		font-size:28upx;
 	}
 
 	.item-label-right {
+		font-size:28upx;
 		line-height: 70upx;
 		margin-left: 20upx;
 	}
-
-	.inline-item {
-		display: flex;
-		flex-direction: row;
-	}
-
-	.uni-input-group {
-		position: relative;
-		padding: 0;
-		border: 0;
-		background-color: #fff;
-	}
-
-	.uni-input-group:before {
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		height: 2upx;
-		content: '';
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.uni-input-group:after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		height: 2upx;
-		content: '';
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.uni-input-row {
-		position: relative;
-		display: flex;
-		flex-direction: row;
-	}
-
-	.uni-input-group .uni-input-row:after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 30upx;
-		height: 2upx;
-		content: '';
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.uni-input-row {
-		padding: 22upx 30upx;
-		justify-content: space-between;
-	}
-
-	.uni-input-row label {
-		line-height: 70upx;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/template/popup/popup.vue b/examples/hello-uniapp/pages/template/popup/popup.vue
index da7a13fadd0..f5cc07c86d4 100644
--- a/examples/hello-uniapp/pages/template/popup/popup.vue
+++ b/examples/hello-uniapp/pages/template/popup/popup.vue
@@ -13,10 +13,12 @@
 		<view class="popup popup-bottom" v-show="showState.bottom">
 			<text>底部 popup</text>
 		</view>
-		<view class="btn-row">
-			<button class="btn" type="button" @click="show">弹出 popup</button>
-			<button class="btn" type="button" @click="show" data-position="top">顶部弹出 popup</button>
-			<button class="btn" type="button" @click="show" data-position="bottom">底部弹出 popup</button>
+		<view class="uni-padding-wrap">
+			<view class="uni-btn-v">
+				<button type="button" @click="show">弹出 popup</button>
+				<button type="button" @click="show" data-position="top">顶部弹出 popup</button>
+				<button type="button" @click="show" data-position="bottom">底部弹出 popup</button>
+			</view>
 		</view>
 	</view>
 </template>
@@ -142,10 +144,6 @@
 		background-color: #c8c7cc;
 	}
 
-	.btn-row .btn {
-		margin: 20upx;
-	}
-
 	.desc {
 		padding: 10upx 20upx;
 		font-size: 30upx;
diff --git a/examples/hello-uniapp/pages/template/product-list/product-list.vue b/examples/hello-uniapp/pages/template/product-list/product-list.vue
index 1832d621a5b..8fd39ee7805 100644
--- a/examples/hello-uniapp/pages/template/product-list/product-list.vue
+++ b/examples/hello-uniapp/pages/template/product-list/product-list.vue
@@ -118,6 +118,7 @@ export default {
 .image-view {
     height: 330upx;
     width: 330upx;
+	margin:12upx 0;
 }
 
 .product-image {
@@ -127,17 +128,19 @@ export default {
 
 .product-title {
     width: 300upx;
-    font-size: 32upx;
     word-break: break-all;
     display: -webkit-box;
     overflow: hidden;
+	line-height:1.5;
     text-overflow: ellipsis;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 }
 
 .product-price {
+	margin-top:10upx;
     font-size: 28upx;
+	line-height:1.5;
     position: relative;
 }
 
diff --git a/examples/hello-uniapp/pages/template/qrcode/qrcode.vue b/examples/hello-uniapp/pages/template/qrcode/qrcode.vue
index 77c7e81cd36..543bcaf457f 100644
--- a/examples/hello-uniapp/pages/template/qrcode/qrcode.vue
+++ b/examples/hello-uniapp/pages/template/qrcode/qrcode.vue
@@ -1,24 +1,26 @@
 <template>
 	<view class="container">
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<qrcode :val="qrval" :size="qrsize" ref="qrcode"></qrcode>
-			</view>
-			<view class="page-section">
-				<view class="page-section-title">请输入要生成的二维码内容</view>
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<input class="uni-input" placeholder="请输入要生成的二维码内容" :value="qrval" @input="bindClearInput" />
-						<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
-					</view>
-				</view>
-				<view class="page-section-title">设置二维码大小</view>
-				<view class="body-view">
-					<slider :value="qrsize" @change="sliderchange" min="50" max="500" show-value/>
-				</view>
+		<view>
+			<qrcode :val="qrval" :size="qrsize" ref="qrcode"></qrcode>
+		</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-title">请输入要生成的二维码内容</view>
+		</view>
+		<view class="uni-list">
+			<view class="uni-list-cell">
+				<input class="uni-input" placeholder="请输入要生成的二维码内容" :value="qrval" @input="bindClearInput" />
+				<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
 			</view>
-			<view class="page-section">
+		</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">设置二维码大小</view>
+		</view>
+		<view class="body-view">
+			<slider :value="qrsize" @change="sliderchange" min="50" max="500" show-value/>
+		</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-btn-v uni-common-mt">
 				<button type="primary" @tap="creatQrcode">生成二维码</button>
 				<button type="warn" @tap="clearQrcode">清除二维码</button>
 			</view>
@@ -71,23 +73,4 @@
 
 <style>
 	@import "../../../common/icon.css";
-	.page-section {
-		margin-bottom: 20upx;
-	}
-
-	.page-body {
-		padding-bottom: 40upx;
-	}
-
-	.uni-list-cell {
-		padding: 0 30upx;
-	}
-
-	.uni-input {
-		flex: 1;
-	}
-
-	.uni-icon {
-		color: #999;
-	}
 </style>
diff --git a/examples/hello-uniapp/pages/template/sbanner/sbanner.vue b/examples/hello-uniapp/pages/template/sbanner/sbanner.vue
index 62f22dab17d..fbf849b1f06 100755
--- a/examples/hello-uniapp/pages/template/sbanner/sbanner.vue
+++ b/examples/hello-uniapp/pages/template/sbanner/sbanner.vue
@@ -5,7 +5,7 @@
             <button type="primary" @tap="showBanner">打开弹窗</button>
         </view>
         <!-- 弹出层 -->
-        <view class="grace-banner" style="background:#FFFFFF;" v-if="bannerShow">
+        <view class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
             <view style="justify-content:flex-end;" @tap="closeBanner">
                 <view style="justify-content:flex-end; text-align:right; padding:20upx;">
                     <text class="uni-icon uni-icon-close"></text>
@@ -18,7 +18,7 @@
                 <button type='warn' class="mini-btn" style="background:#F6644D; margin:0 80upx;">一个按钮</button>
             </view>
         </view>
-        <view class="grace-mask" v-if="bannerShow"></view>
+        <view class="uni-mask" v-if="bannerShow"></view>
         <!-- 弹出层 -->
     </view>
 </template>
@@ -49,7 +49,7 @@
 
 <style>
     /* 遮罩层 */
-    .grace-mask {
+    .uni-mask {
         background: rgba(0, 0, 0, 0.6);
         position: fixed;
         width: 100%;
@@ -60,7 +60,7 @@
     }
 
     /* 弹出层形式的广告 */
-    .grace-banner {
+    .uni-banner {
         width: 70%;
         position: fixed;
         left: 50%;
diff --git a/examples/hello-uniapp/pages/template/scrollmsg/scrollmsg.vue b/examples/hello-uniapp/pages/template/scrollmsg/scrollmsg.vue
index 93c9af31edf..42367bd5a87 100755
--- a/examples/hello-uniapp/pages/template/scrollmsg/scrollmsg.vue
+++ b/examples/hello-uniapp/pages/template/scrollmsg/scrollmsg.vue
@@ -1,11 +1,12 @@
 <template>
-	<view class="page">
-		<view style="justify-content:center; line-height:60upx; margin-top:30upx;">
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap">
+			<view class="uni-title uni-common-mt">
 			竖向滚动
-		</view>
-		<view class="grace-padding">
-			<view class="grace-swiper-msg">
-				<view class="grace-swiper-msg-icon">
+			</view>
+			<view class="uni-swiper-msg">
+				<view class="uni-swiper-msg-icon">
 					<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
 				</view>
 				<swiper vertical="true" autoplay="true" circular="true" interval="3000">
@@ -20,11 +21,12 @@
 					</swiper-item>
 				</swiper>
 			</view>
-			<view style="justify-content:center; line-height:60upx; text-align:center; width:100%;">
+			
+			<view class="uni-title uni-common-mt">
 				横向滚动
 			</view>
-			<view class="grace-swiper-msg">
-				<view class="grace-swiper-msg-icon">
+			<view class="uni-swiper-msg">
+				<view class="uni-swiper-msg-icon">
 					<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
 				</view>
 				<swiper autoplay="true" circular="true" interval="5000">
@@ -49,12 +51,10 @@ export default {
 	}
 }
 </script>
-<style>
-.grace-padding{padding:2%; width:96%;}
-view{display:flex; flex-wrap:wrap; font-size:28upx; height:auto; width:100%;}
-.grace-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap;}
-.grace-swiper-msg-icon{width:50upx; margin-right:20upx;}
-.grace-swiper-msg-icon image{width:100%; flex-shrink:0;}
-.grace-swiper-msg swiper{width:100%; height:50upx;}
-.grace-swiper-msg swiper-item{line-height:50upx;}
+<style>
+.uni-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap; display:flex;}
+.uni-swiper-msg-icon{width:50upx; margin-right:20upx;}
+.uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
+.uni-swiper-msg swiper{width:100%; height:50upx;}
+.uni-swiper-msg swiper-item{line-height:50upx;}
 </style>
diff --git a/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue b/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
index ef100fb5dfa..b0f512b94fd 100644
--- a/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
+++ b/examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
@@ -1,6 +1,6 @@
 <template>
 	<view class="page">
-		<view class="head">
+		<view class="uni-padding-wrap uni-common-mt">
 			<segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></segmented-control>
 		</view>
 		<view class="content">
@@ -14,27 +14,29 @@
 				选项卡3的内容
 			</view>
 		</view>
-		<view class="page-section">
-			<view class="page-section-title">Style</view>
-			<view class="uni-list">
-				<radio-group @change="styleChange">
-					<label class="uni-list-cell uni-list-cell-pd" v-for="item in styles" :key="item.value">
-						{{item.text}}
-						<radio :value="item.value" :checked="item.checked" />
-					</label>
-				</radio-group>
-			</view>
+		
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">Style</view>
 		</view>
-		<view class="page-section">
-			<view class="page-section-title">Color</view>
-			<view class="uni-list">
-				<radio-group @change="colorChange">
-					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in colors" :key="index">
-						<view class="color-tag" :style="{backgroundColor: item}"></view>
-						<radio :value="item" :checked="index === 0" />
-					</label>
-				</radio-group>
-			</view>
+		<view class="uni-list">
+			<radio-group @change="styleChange">
+				<label class="uni-list-cell uni-list-cell-pd" v-for="item in styles" :key="item.value">
+					{{item.text}}
+					<radio :value="item.value" :checked="item.checked" />
+				</label>
+			</radio-group>
+		</view>
+		
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">Color</view>
+		</view>
+		<view class="uni-list">
+			<radio-group @change="colorChange">
+				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in colors" :key="index">
+					<view class="color-tag" :style="{backgroundColor: item}"></view>
+					<radio :value="item" :checked="index === 0" />
+				</label>
+			</radio-group>
 		</view>
 	</view>
 </template>
diff --git a/examples/hello-uniapp/pages/template/steps/steps.vue b/examples/hello-uniapp/pages/template/steps/steps.vue
index ef430b436a9..692b94c0f16 100755
--- a/examples/hello-uniapp/pages/template/steps/steps.vue
+++ b/examples/hello-uniapp/pages/template/steps/steps.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="page">
         <page-head :title="title"></page-head>
-		<view class="grace-steps">
+		<view class="uni-steps">
 			<view class="step">
 				<view class="step-circle">1</view>
 				<view class="step-content">
@@ -22,7 +22,7 @@
 			</view>
 		</view>
 		<view style="padding:30upx 0; text-align:center;">
-			您也可以把数字步骤改成icon图标哦 ^_^
+			您也可以把数字步骤改成icon图标
 		</view>
 	</view>
 </template>
@@ -35,13 +35,13 @@ export default {
 </script>
 <style>
 page{background:#FFFFFF;}
-.grace-steps{padding:20rpx 0; display:flex; width:100%; flex-wrap:wrap;}
-.grace-steps view{display:flex; width:100%; flex-wrap:wrap; float:none;}
-.grace-steps .step{width:31.3%; margin:0 1%; flex-wrap:nowrap;}
-.grace-steps .step-circle{width:50upx; height:50upx; border-radius:50upx; background:#F1F1F3; justify-content:center; line-height:50upx; flex-shrink:0; margin-right:15upx; color:#666; font-size:28upx;}
-.grace-steps .step-content{width:100%; height:22upx; border-bottom:1px solid #F1F1F3;}
-.grace-steps .step-title{line-height:50upx; height:50upx; background:#FFFFFF; width:auto; overflow:hidden; padding-right:8upx;}
-.grace-steps .current .step-circle{background:#00B26A; color:#FFFFFF;}
-.grace-steps .current .step-content{border-color:#00B26A;}
-.grace-steps .current .step-title{color:#00B26A;}
+.uni-steps{padding:20upx 30upx; flex-grow: 1; display:flex; flex-wrap:wrap;}
+.uni-steps view{display:flex; flex-wrap:wrap; float:none;}
+.uni-steps .step{width:31.3%; margin:0 1%; flex-wrap:nowrap;}
+.uni-steps .step-circle{width:50upx; height:50upx; border-radius:50upx; background:#F1F1F3; justify-content:center; line-height:50upx; flex-shrink:0; margin-right:15upx; color:#666; font-size:28upx;}
+.uni-steps .step-content{width:100%; height:22upx; border-bottom:1px solid #F1F2F3;}
+.uni-steps .step-title{line-height:50upx; height:50upx; background:#FFFFFF; width:auto; overflow:hidden; padding-right:8upx;}
+.uni-steps .current .step-circle{background:#00B26A; color:#FFFFFF;}
+.uni-steps .current .step-content{border-color:#00B26A;}
+.uni-steps .current .step-title{color:#00B26A;}
 </style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/tabbar/detail/detail.vue b/examples/hello-uniapp/pages/template/tabbar/detail/detail.vue
index 04c31295392..94d30544087 100644
--- a/examples/hello-uniapp/pages/template/tabbar/detail/detail.vue
+++ b/examples/hello-uniapp/pages/template/tabbar/detail/detail.vue
@@ -1,8 +1,8 @@
 <template>
 	<view class="root">
-		<view class="page-body">
-			<view class="page-section-title">这是选项卡页面跳转详情页面的演示，下面是页面跳转时传递过来的标题：</view>
-			<view class="page-section-title">{{data}}</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-title">这是选项卡页面跳转详情页面的演示，下面是页面跳转时传递过来的标题：</view>
+			<view class="uni-title">{{data}}</view>
 		</view>
 	</view>
 </template>
@@ -21,20 +21,4 @@
 	}
 </script>
 <style>
-	page{
-		display: flex;
-		min-height: 100%;
-	}
-	.root{
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-	}
-	.page-body{
-		flex: 1;
-		display: flex;
-		box-sizing: border-box;
-		flex-direction: column;
-		padding-top: 30px;
-	}
 </style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/platforms/app-plus/about/about.vue b/examples/hello-uniapp/platforms/app-plus/about/about.vue
index 2635b418e2d..8b2ae49f692 100644
--- a/examples/hello-uniapp/platforms/app-plus/about/about.vue
+++ b/examples/hello-uniapp/platforms/app-plus/about/about.vue
@@ -3,7 +3,7 @@
 		<view class="content">
 			<view class="qrcode">
 				<image src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png" @longtap="save"></image>
-				<text>扫码体验uni-app</text>
+				<text style="margin-top:20px;">扫码体验uni-app</text>
 			</view>
 			<view class="desc">
 				<text class="code">uni-app</text>
diff --git a/examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue b/examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
index 0219f6ac187..c007f7566f0 100644
--- a/examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
+++ b/examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
@@ -109,9 +109,9 @@
             },
             send() { //发送反馈
                 console.log(JSON.stringify(this.sendDate));
-                let imgs = this.imageList.map((value,index) => {
+                let imgs = this.imageList.map((value) => {
                     return {
-                        name: "images" + index,
+                        name: "uni-app.feedback",
                         uri: value
                     }
                 })
@@ -152,4 +152,4 @@
     .close-view{
         text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
     }
-</style>
+</style>
diff --git a/examples/hello-uniapp/platforms/app-plus/orientation/orientation.vue b/examples/hello-uniapp/platforms/app-plus/orientation/orientation.vue
index a3ef8a119fa..5a46b64d521 100644
--- a/examples/hello-uniapp/platforms/app-plus/orientation/orientation.vue
+++ b/examples/hello-uniapp/platforms/app-plus/orientation/orientation.vue
@@ -1,18 +1,14 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-spacing">
-					<button type="primary" @tap="getOrient">获取设备的方向信息</button>
-					<button type="primary" @tap="watchOrient">监听设备的方向变化</button>
-					<button type="primary" @tap="watchStop">停止监听</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-btn-v">
+				<button type="primary" @tap="getOrient">获取设备的方向信息</button>
+				<button type="primary" @tap="watchOrient">监听设备的方向变化</button>
+				<button type="primary" @tap="watchStop">停止监听</button>
 			</view>
-			<view class="page-section">
-				<view class="page-section-spacing">
-					<textarea :value="value" />
-				</view>
+			<view class="uni-textarea">
+				<textarea :value="value" />
 			</view>
 		</view>
 	</view>
@@ -61,9 +57,5 @@
 </script>
 
 <style>
-
-	textarea {
-		border: 2upx solid #7A7E83;
-		height: 288upx;
-	}
-</style>
+	
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/platforms/app-plus/proximity/proximity.vue b/examples/hello-uniapp/platforms/app-plus/proximity/proximity.vue
index c9aabfdd250..a7b81e1026f 100644
--- a/examples/hello-uniapp/platforms/app-plus/proximity/proximity.vue
+++ b/examples/hello-uniapp/platforms/app-plus/proximity/proximity.vue
@@ -1,21 +1,17 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-body-desc">
-					手机顶部听筒处有传感器监听距离手机屏幕的障碍物，覆盖该传感器会触发本事件变化
-				</view>
-				<view class="page-section-spacing">
-					<button type="primary" @tap="getProximity">获取距离传感器信息</button>
-					<button type="primary" @tap="watchProximity">监听距离传感器变化</button>
-					<button type="primary" @tap="watchStop">停止监听</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-hello-text">
+				手机顶部听筒处有传感器监听距离手机屏幕的障碍物，覆盖该传感器会触发本事件变化
 			</view>
-			<view class="page-section">
-				<view class="page-section-spacing">
-					<textarea :value="value" />
-				</view>
+			<view class="uni-btn-v uni-common-mt">
+				<button type="primary" @tap="getProximity">获取距离传感器信息</button>
+				<button type="primary" @tap="watchProximity">监听距离传感器变化</button>
+				<button type="primary" @tap="watchStop">停止监听</button>
+			</view>
+			<view class="uni-textarea uni-common-mt">
+				<textarea :value="value" />
 			</view>
 		</view>
 	</view>
@@ -26,7 +22,7 @@
 	export default {
 		data() {
 			return {
-				title: 'orientation',
+				title: 'proximity',
 				value: ''
 			}
 		},
@@ -69,13 +65,5 @@
 </script>
 
 <style>
-	textarea {
-		border: 2upx solid #7A7E83;
-		height: 288upx;
-	}
-	.page-body-desc{
-		font-size: 32upx;
-		color: #BEBEBE;
-		padding: 30upx;
-	}
+	
 </style>
diff --git a/examples/hello-uniapp/platforms/app-plus/push/push.vue b/examples/hello-uniapp/platforms/app-plus/push/push.vue
index b3e6c5662ab..6716d177b97 100644
--- a/examples/hello-uniapp/platforms/app-plus/push/push.vue
+++ b/examples/hello-uniapp/platforms/app-plus/push/push.vue
@@ -1,21 +1,19 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body" v-if="provider[0]">
-			<view class="btn-area">
+		<view class="uni-padding-wrap" v-if="provider[0]">
+			<view class="uni-btn-v uni-common-mt">
 				<button type="primary" @tap="openPush">开启push</button>
 				<button type="primary" @tap="closePush">关闭push</button>
 				<button type="primary" @tap="listenTranMsg">监听透传数据</button>
 				<button type="primary" @tap="removeTranMsg">移除监听透传数据</button>
 			</view>
-			<view class="btn-area">
+			<view class="uni-btn-v uni-common-mt">
 				<button type="primary" @tap="requireTranMsg">发送"透传数据"消息</button>
 			</view>
-			<view class="page-section-title">透传内容：</view>
-			<view class="page-section">
-				<view class="textare-view">
-					<textarea class="textarea" v-model="tranMsg" />
-				</view>
+			<view class="uni-title uni-common-mt">透传内容：</view>
+			<view class="uni-textarea">
+				<textarea v-model="tranMsg" />
 			</view>
 		</view>
 	</view>
@@ -117,17 +115,6 @@
 </script>
 
 <style>
-	.textare-view{
-		box-sizing: border-box;
-		width: 100%;
-		padding: 0 30upx;
-	}
-	textarea{
-		background-color: #FFFFFF;
-		width: 100%;
-		height: 200upx;
-		padding: 10upx;
-		box-sizing: border-box;
-	}
+
 </style>
 
diff --git a/examples/hello-uniapp/platforms/app-plus/speech/speech.vue b/examples/hello-uniapp/platforms/app-plus/speech/speech.vue
index 361755c5f66..e9eb4a5f902 100644
--- a/examples/hello-uniapp/platforms/app-plus/speech/speech.vue
+++ b/examples/hello-uniapp/platforms/app-plus/speech/speech.vue
@@ -1,17 +1,13 @@
 <template>
 	<view>
 		<page-head :title="title"></page-head>
-		<view class="page-body">
-			<view class="page-section">
-				<view class="page-section-spacing">
-					<button type="primary" @tap="startRecognize">开始语音识别</button>
-					<button type="primary" @tap="startRecognizeEnglish">开始语音识别（英语）</button>
-				</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-textarea">
+				<textarea :value="value" placeholder="语音识别内容展示区域" disabled />
 			</view>
-			<view class="page-section">
-				<view class="page-section-spacing">
-					<textarea :value="value" />
-				</view>
+			<view class="uni-common-mt uni-btn-v">
+				<button type="primary" @tap="startRecognize">开始语音识别</button>
+				<button type="primary" @tap="startRecognizeEnglish">开始语音识别（英语）</button>
 			</view>
 		</view>
 	</view>
@@ -58,9 +54,5 @@
 </script>
 
 <style>
-	textarea {
-		border: 2upx solid #7A7E83;
-		height: 76upx;
-		width: 100%;
-	}
-</style>
+	
+</style>
\ No newline at end of file

From ca5a3f9dff6403e7f7436761d4d3b1b5993dda5b Mon Sep 17 00:00:00 2001
From: hcoder <5213606@qq.com>
Date: Sun, 11 Nov 2018 17:21:46 +0800
Subject: [PATCH 03/22] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/hello-uniapp/App.vue b/examples/hello-uniapp/App.vue
index 766e123ba90..be1249693a0 100644
--- a/examples/hello-uniapp/App.vue
+++ b/examples/hello-uniapp/App.vue
@@ -42,10 +42,10 @@
 	}
 </script>
 <style>
-	/* uni.css - 通用组件、模板样式库，可以在创建项目后应用，当作一套ui库 */
+	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
 	@import "./common/uni.css";
 	
-	/* 以下样式用于 hello uni-app 演示所需，新版本已经简化 */
+	/* 以下样式用于 hello uni-app 演示所需 */
 	page {
 		background-color:#F4F5F6;
 		height: 100%;

From 247e49cf371a1de80f1cbc2cc89c941dc5f60a73 Mon Sep 17 00:00:00 2001
From: hcoder <5213606@qq.com>
Date: Sun, 11 Nov 2018 17:27:57 +0800
Subject: [PATCH 04/22] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/template/cardview/cardview.vue      | 74 ++++++++++---------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/examples/hello-uniapp/pages/template/cardview/cardview.vue b/examples/hello-uniapp/pages/template/cardview/cardview.vue
index 08e8fb54b60..1c399adecdf 100644
--- a/examples/hello-uniapp/pages/template/cardview/cardview.vue
+++ b/examples/hello-uniapp/pages/template/cardview/cardview.vue
@@ -1,39 +1,42 @@
 <template>
     <view class="page">
         <page-head :title="title"></page-head>
-        <view class="uni-card">
-            <view class="uni-card-content">
-                <view class="uni-card-content-inner">
-                    这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
-                </view>
-            </view>
-        </view>
-        <view class="uni-card">
-            <view class="uni-card-header">页眉</view>
-            <view class="uni-card-content">
-                <view class="uni-card-content-inner">
-                    包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
-                </view>
-            </view>
-            <view class="uni-card-footer">页脚</view>
-        </view>
-        <view class="uni-card">
-            <view class="uni-card-header uni-card-media">
-                <image class="uni-card-media-logo" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image>
-                <view class="uni-card-media-body">
-                    <text class="uni-card-media-text-top">小U</text>
-                    <text class="uni-card-media-text-bottom">发表于 2018-01-30 15:30</text>
-                </view>
-            </view>
-            <view class="uni-card-content image-view">
-                <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" class="image"></image>
-            </view>
-            <view class="uni-card-footer">
-                <view class="uni-card-link">Like</view>
-                <view class="uni-card-link">Comment</view>
-                <view class="uni-card-link">Read more</view>
-            </view>
-        </view>
+		<view class="uni-padding-wrap">
+			<view class="uni-card">
+				<view class="uni-card-content">
+					<view class="uni-card-content-inner">
+						这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
+					</view>
+				</view>
+			</view>
+			<view class="uni-card">
+				<view class="uni-card-header">页眉</view>
+				<view class="uni-card-content">
+					<view class="uni-card-content-inner">
+						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
+					</view>
+				</view>
+				<view class="uni-card-footer">页脚</view>
+			</view>
+			<view class="uni-card">
+				<view class="uni-card-header uni-card-media">
+					<image class="uni-card-media-logo" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image>
+					<view class="uni-card-media-body">
+						<text class="uni-card-media-text-top">小U</text>
+						<text class="uni-card-media-text-bottom">发表于 2018-01-30 15:30</text>
+					</view>
+				</view>
+				<view class="uni-card-content image-view">
+					<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" class="image"></image>
+				</view>
+				<view class="uni-card-footer">
+					<view class="uni-card-link">Like</view>
+					<view class="uni-card-link">Comment</view>
+					<view class="uni-card-link">Read more</view>
+				</view>
+			</view>
+		</view>
+		<view style="height:80upx;"></view>
     </view>
 </template>
 
@@ -48,6 +51,11 @@
 </script>
 
 <style>
+	
+	.uni-card{
+		margin-top:50upx;
+	}
+	
     .page {
         padding-top: 60upx;
     }

From c38c2649cfb683193f5e11c873d6e8c76871d0d7 Mon Sep 17 00:00:00 2001
From: hcoder <5213606@qq.com>
Date: Sun, 11 Nov 2018 17:38:17 +0800
Subject: [PATCH 05/22] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=80=92=E8=AE=A1?=
 =?UTF-8?q?=E6=97=B6=E7=BB=84=E4=BB=B6=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hello-uniapp/pages/template/countdown/countdown.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/hello-uniapp/pages/template/countdown/countdown.vue b/examples/hello-uniapp/pages/template/countdown/countdown.vue
index a6ad2a1b31d..14eafea703c 100755
--- a/examples/hello-uniapp/pages/template/countdown/countdown.vue
+++ b/examples/hello-uniapp/pages/template/countdown/countdown.vue
@@ -20,9 +20,9 @@
 	//模拟3个时间
 	var dateObj = new Date();
 	var currentTime = dateObj.getTime();
-	var timer1 = formatDateTime((currentTime + 1000 * 200));
-	var timer2 = formatDateTime((currentTime + 1000 * 300));
-	var timer3 = formatDateTime((currentTime + 1000 * 500));
+	var timer1 = formatDateTime((currentTime + 1000 * 2000));
+	var timer2 = formatDateTime((currentTime + 1000 * 3000));
+	var timer3 = formatDateTime((currentTime + 1000 * 5000));
 	//时间戳 转 YY-mm-dd HH:ii:ss 
 	function formatDateTime(inputTime){
 		  var date = new Date(inputTime);

From 6a820f010607539dee85a080fe4f31851dd05d3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E7=BA=A2=E4=BF=9D?= <hbcui1984@163.com>
Date: Sun, 11 Nov 2018 17:45:59 +0800
Subject: [PATCH 06/22] Update README.md

---
 examples/hello-uniapp/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/hello-uniapp/README.md b/examples/hello-uniapp/README.md
index a69e98c1554..315d9936f82 100644
--- a/examples/hello-uniapp/README.md
+++ b/examples/hello-uniapp/README.md
@@ -1,5 +1,5 @@
 # hello-uniapp
 
 ## 注意事项
-* 运行本示例需要HBuilderX 0.1.49版本（或以上版本）
-* [uni-app 尺寸单位更改及历史版本兼容说明](http://ask.dcloud.net.cn/article/35014)
\ No newline at end of file
+* 运行本示例需要HBuilderX 1.1.0.20181030版本（或以上版本）
+* [uni-app 尺寸单位更改及历史版本兼容说明](http://ask.dcloud.net.cn/article/35014)

From 05c852dd68ff85aa8dccec3534f04b14e44f1f01 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:04:39 +0800
Subject: [PATCH 07/22] =?UTF-8?q?modify:=20=E4=BC=98=E5=8C=96=20number-box?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hello-uniapp/components/number-box.vue    | 73 ++++++++++---------
 .../pages/template/number-box/number-box.vue  |  4 +-
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/examples/hello-uniapp/components/number-box.vue b/examples/hello-uniapp/components/number-box.vue
index a35722c98ad..790af5cbd87 100644
--- a/examples/hello-uniapp/components/number-box.vue
+++ b/examples/hello-uniapp/components/number-box.vue
@@ -1,8 +1,8 @@
 <template>
 	<view class="uni-numbox">
-		<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="subtract">-</view>
-		<input class="uni-numbox-value" type="number" :disabled="disabled" v-model="value" @blur="handleBlur">
-		<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="add">+</view>
+		<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">-</view>
+		<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
+		<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+</view>
 	</view>
 </template>
 <script>
@@ -30,6 +30,11 @@
 				default: false
 			}
 		},
+		data() {
+			return {
+				inputValue: this.value
+			}
+		},
 		computed: {
 			disableSubtract() {
 				return this.value <= this.min
@@ -38,35 +43,42 @@
 				return this.value >= this.max
 			}
 		},
-		onUnload() {
-			this.value = 0,
-				this.step = 1,
-				this.max = Infinity,
-				this.min = -Infinity;
+		watch: {
+			value(val) {
+				this.inputValue = val;
+			},
+			inputValue(val) {
+				this.$emit('change', val);
+			}
 		},
 		methods: {
-			subtract(evt) {
-				this._handleStep('subtract');
-			},
-			add(evt) {
-				this._handleStep('add');
-			},
-			_handleStep(type) {
-				let value = this.value;
+			_calcValue(type) {
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+
 				if (type === 'subtract') {
-					value -= this.step
+					value -= step
 				} else if (type === 'add') {
-					value += this.step
+					value += step
 				}
 				if (value < this.min || value > this.max) {
 					return
 				}
-				this.value = value
+				this.inputValue = value / scale;
+			},
+			_getDecimalScale() {
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, (this.step + '').split('.')[1].length);
+				}
+				return scale;
 			},
-			handleBlur(evt) {
-				let value = evt.detail.value;
+			_onBlur(event) {
+				let value = event.detail.value;
 				if (!value) {
-					this.value = 0;
+					this.inputValue = 0;
 					return
 				}
 				value = +value;
@@ -75,12 +87,7 @@
 				} else if (value < this.min) {
 					value = this.min
 				}
-				this.value = value
-			}
-		},
-		watch: {
-			value(val) {
-				this.$emit('update', val);
+				this.inputValue = value
 			}
 		}
 	}
@@ -90,16 +97,16 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-start;
-		height: 60upx;
+		height: 70upx;
 	}
 
 	.uni-numbox-minus,
 	.uni-numbox-plus {
 		margin: 0;
 		background-color: #f9f9f9;
-		width: 60upx;
+		width: 80upx;
 		height: 100%;
-		line-height: 60upx;
+		line-height: 70upx;
 		text-align: center;
 		color: #555555;
 	}
@@ -121,7 +128,7 @@
 	.uni-numbox-value {
 		border: 2upx solid #cccccc;
 		background-color: #ffffff;
-		width: 60upx;
+		width: 80upx;
 		height: 100%;
 		text-align: center;
 	}
@@ -129,4 +136,4 @@
 	.uni-numbox-disabled {
 		color: #c0c0c0;
 	}
-</style>
+</style>
diff --git a/examples/hello-uniapp/pages/template/number-box/number-box.vue b/examples/hello-uniapp/pages/template/number-box/number-box.vue
index 7e35296eee0..324f13804f2 100644
--- a/examples/hello-uniapp/pages/template/number-box/number-box.vue
+++ b/examples/hello-uniapp/pages/template/number-box/number-box.vue
@@ -20,7 +20,7 @@
 			<view class="uni-hello-text uni-common-mt">获取输入框的值</view>
 			<view class="uni-hello-items">
 				<view class="uni-inline-item">
-					<number-box v-on:update="numberUpdate"></number-box>
+					<number-box v-on:change="onNumberChange"></number-box>
 					<text class="item-label-right">当前的值为：{{numberValue}}</text>
 				</view>
 			</view>
@@ -67,7 +67,7 @@
 			numberBox
 		},
 		methods: {
-			numberUpdate(value) {
+			onNumberChange(value) {
 				this.numberValue = value;
 			}
 		}

From bc1753b68c18a6fe4e226456892c3e365d7375cc Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:10:50 +0800
Subject: [PATCH 08/22] =?UTF-8?q?modify:=20=E4=BC=98=E5=8C=96=20segmented-?=
 =?UTF-8?q?control=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/segmented-control.vue          | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/examples/hello-uniapp/components/segmented-control.vue b/examples/hello-uniapp/components/segmented-control.vue
index 067e1417771..6a4b55b25f1 100644
--- a/examples/hello-uniapp/components/segmented-control.vue
+++ b/examples/hello-uniapp/components/segmented-control.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="segmented-control" :class="styleType" :style="wrapStyle">
-		<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === current ? activeStyle : itemStyle"
-		    @click="onClick(index)">
+		<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === currentIndex ? activeStyle : itemStyle"
+		 @click="onClick(index)">
 			{{item}}
 		</view>
 	</view>
@@ -30,6 +30,18 @@
 				default: 'button'
 			}
 		},
+		data() {
+			return {
+				currentIndex: this.current
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val;
+				}
+			}
+		},
 		computed: {
 			wrapStyle() {
 				let styleString = '';
@@ -70,8 +82,8 @@
 		},
 		methods: {
 			onClick(index) {
-				if (this.current !== index) {
-					this.current = index;
+				if (this.currentIndex !== index) {
+					this.currentIndex = index;
 					this.$emit('clickItem', index);
 				}
 			}
@@ -98,7 +110,7 @@
 
 	.segmented-control.text {
 		border: 0;
-        border-radius: 0upx;
+		border-radius: 0upx;
 	}
 
 
@@ -120,4 +132,4 @@
 	.segmented-control-item:first-child {
 		border-left-width: 0;
 	}
-</style>
+</style>

From 03dc2167c59e9f7251b968b181b5766e6c987b03 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:11:57 +0800
Subject: [PATCH 09/22] =?UTF-8?q?modify:=20=E6=9B=B4=E6=96=B0=20web-view?=
 =?UTF-8?q?=20=E7=A4=BA=E4=BE=8B=E5=8A=A0=E8=BD=BD=E7=9A=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/pages/component/web-view/web-view.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/hello-uniapp/pages/component/web-view/web-view.vue b/examples/hello-uniapp/pages/component/web-view/web-view.vue
index dcba0e19152..4362aaa1465 100644
--- a/examples/hello-uniapp/pages/component/web-view/web-view.vue
+++ b/examples/hello-uniapp/pages/component/web-view/web-view.vue
@@ -1,6 +1,6 @@
 <template>
     <view>
-        <web-view src="https://uniapp.dcloud.io"></web-view>
+        <web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
     </view>
 </template>
 

From 83ac56cd96526e79251fe8527dbe8ab3d94a9a15 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:15:05 +0800
Subject: [PATCH 10/22] =?UTF-8?q?modify:=20ECharts=20=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A8=E6=80=81=E4=BF=AE=E6=94=B9=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=9A=84=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/template/echarts/echarts.vue        | 229 ++++++++++--------
 1 file changed, 125 insertions(+), 104 deletions(-)

diff --git a/examples/hello-uniapp/pages/template/echarts/echarts.vue b/examples/hello-uniapp/pages/template/echarts/echarts.vue
index fcd112954a2..425e7696789 100644
--- a/examples/hello-uniapp/pages/template/echarts/echarts.vue
+++ b/examples/hello-uniapp/pages/template/echarts/echarts.vue
@@ -1,138 +1,147 @@
 <template>
-	<view class="container">
-		<view style="display: block; padding:30upx;">
+	<div class="container">
+		<view class="page-section-title" style="display: block;">
 			<text>这是uni-app集成mpvue-echarts的图表示例，mpvue-echarts组件的用法参考：</text>
-			<text class="navigate" @tap="goBrowser" selectable>https://github.com/F-loat/mpvue-echarts</text>
+			<text class="navigate" @click="goBrowser" selectable>https://github.com/F-loat/mpvue-echarts</text>
 		</view>
 		<view class="canvasView">
-			<view class="title">饼图示例</view>
-			<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" />
+			<view class="canvas-bar">
+				<view class="title">饼图示例</view>
+				<button class="update-btn" type="primary" size="mini" @click="updatePie">修改饼状图数据</button>
+			</view>
+			<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
 		</view>
 		<view class="canvasView">
 			<view class="title">折线图示例</view>
-			<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" />
+			<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
 		</view>
-	</view>
+	</div>
 </template>
 
 <script>
 	import * as echarts from '../../../components/echarts/echarts.simple.min.js';
 	import mpvueEcharts from '../../../components/mpvue-echarts/src/echarts.vue';
 
-	function getPieOption() {
-		return {
-			animation: false,
-			backgroundColor: '#F8F8F8',
-			color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
-			series: [{
-				label: {
-					normal: {
-						fontSize: 14
-					}
-				},
-				type: 'pie',
-				center: ['50%', '50%'],
-				radius: [0, '60%'],
-				data: [{
-					value: 55,
-					name: '北京'
-				}, {
-					value: 20,
-					name: '武汉'
-				}, {
-					value: 10,
-					name: '杭州'
-				}, {
-					value: 20,
-					name: '广州'
-				}, {
-					value: 38,
-					name: '上海'
-				}],
-				itemStyle: {
-					emphasis: {
-						shadowBlur: 10,
-						shadowOffsetX: 0,
-						shadowColor: 'rgba(0, 2, 2, 0.3)'
-					}
+	let pieOption = {
+		animation: false,
+		backgroundColor: '#F8F8F8',
+		color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
+		series: [{
+			label: {
+				normal: {
+					fontSize: 14
 				}
-			}]
-		}
-	}
-
-	function getLineOption() {
-		return {
-			animation: false,
-			color: ['#37A2DA', '#9FE6B8'],
-			legend: {
-				data: ['蒸发量', '降水量']
 			},
-			grid: {
-				x: 35,
-				x2: 10,
-				y: 30,
-				y2: 25
-			},
-			calculable: false,
-			xAxis: [{
-				type: 'category',
-				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+			type: 'pie',
+			center: ['50%', '50%'],
+			radius: [0, '60%'],
+			data: [{
+				value: 55,
+				name: '北京'
+			}, {
+				value: 38,
+				name: '上海'
+			}, {
+				value: 20,
+				name: '广州'
 			}],
-			yAxis: [{
-				type: 'value',
-				splitArea: {
-					show: true
+			itemStyle: {
+				emphasis: {
+					shadowBlur: 10,
+					shadowOffsetX: 0,
+					shadowColor: 'rgba(0, 2, 2, 0.3)'
 				}
-			}],
-			series: [{
-				name: '蒸发量',
-				type: 'line',
-				data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
-			}, {
-				name: '降水量',
-				type: 'line',
-				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
-			}]
-		}
-	}
+			}
+		}]
+	};
+
+	let lineOption = {
+		animation: false,
+		color: ['#37A2DA', '#9FE6B8'],
+		grid: {
+			x: 35,
+			x2: 10,
+			y: 30,
+			y2: 25
+		},
+		calculable: false,
+		xAxis: [{
+			type: 'category',
+			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+		}],
+		yAxis: [{
+			type: 'value',
+			splitArea: {
+				show: true
+			}
+		}],
+		series: [{
+			name: '蒸发量',
+			type: 'line',
+			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+		}, {
+			name: '降水量',
+			type: 'line',
+			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+		}]
+	};
 
 	export default {
 		data() {
 			return {
-				echarts,
-				pieInit: function (canvas, width, height) {
-					let pieChart = echarts.init(canvas, null, {
-						width: width,
-						height: height
-					})
-					canvas.setChart(pieChart)
-
-					pieChart.setOption(getPieOption())
-					return pieChart
-				},
-				lineInit: function (canvas, width, height) {
-					let lineChart = echarts.init(canvas, null, {
-						width: width,
-						height: height
-					})
-					canvas.setChart(lineChart)
-
-					lineChart.setOption(getLineOption())
-					return lineChart
-				}
+				echarts: echarts,
+				updateStatus: false
 			}
 		},
 		methods: {
 			goBrowser() {
 				// #ifdef APP-PLUS
-				plus.runtime.openURL("https://github.com/F-loat/mpvue-echarts");
+				plus.runtime.openURL('https://github.com/F-loat/mpvue-echarts');
 				// #endif
 				// #ifdef MP-WEIXIN
 				uni.showModal({
-					content:"请复制链接在浏览器里打开",
-					showCancel:false
+					content: '请复制链接在浏览器里打开',
+					showCancel: false
 				})
 				// #endif
+			},
+			updatePie() {
+				// 参考 mpvue-charts 的懒加载示例
+				// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue
+
+				if (this.updateStatus) {
+					return;
+				}
+				pieOption.series[0].data.push({
+					value: 20,
+					name: '武汉'
+				});
+				pieOption.series[0].data.push({
+					value: 10,
+					name: '杭州'
+				});
+				this.$refs.pieChart.init();
+				this.updateStatus = true;
+			},
+			pieInit(canvas, width, height) {
+				let pieChart = echarts.init(canvas, null, {
+					width: width,
+					height: height
+				})
+				canvas.setChart(pieChart)
+
+				pieChart.setOption(pieOption)
+				return pieChart
+			},
+			lineInit(canvas, width, height) {
+				let lineChart = echarts.init(canvas, null, {
+					width: width,
+					height: height
+				})
+				canvas.setChart(lineChart)
+
+				lineChart.setOption(lineOption)
+				return lineChart
 			}
 		},
 		components: {
@@ -155,6 +164,7 @@
 	.title {
 		margin-left: 30upx;
 		color: #8f8f94;
+		line-height: 3;
 	}
 
 	.container {
@@ -171,4 +181,15 @@
 	.navigate {
 		color: #007AFF;
 	}
-</style>
+
+	.canvas-bar {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.update-btn {
+		line-height: 3;
+		margin-right: 30upx;
+	}
+</style>

From d914b5bec307183fd8b7adad389c4a7d6792f218 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:32:16 +0800
Subject: [PATCH 11/22] =?UTF-8?q?modify:=20=E4=BC=98=E5=8C=96=20ECharts=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hello-uniapp/pages/template/echarts/echarts.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/examples/hello-uniapp/pages/template/echarts/echarts.vue b/examples/hello-uniapp/pages/template/echarts/echarts.vue
index 425e7696789..3d5a6d2d4de 100644
--- a/examples/hello-uniapp/pages/template/echarts/echarts.vue
+++ b/examples/hello-uniapp/pages/template/echarts/echarts.vue
@@ -1,7 +1,9 @@
 <template>
-	<div class="container">
+	<view class="container">
 		<view class="page-section-title" style="display: block;">
-			<text>这是uni-app集成mpvue-echarts的图表示例，mpvue-echarts组件的用法参考：</text>
+			<view class="uni-hello-text uni-common-pb">
+				这是uni-app集成mpvue-echarts的图表示例，mpvue-echarts组件的用法参考：
+			</view>
 			<text class="navigate" @click="goBrowser" selectable>https://github.com/F-loat/mpvue-echarts</text>
 		</view>
 		<view class="canvasView">
@@ -15,7 +17,7 @@
 			<view class="title">折线图示例</view>
 			<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
 		</view>
-	</div>
+	</view>
 </template>
 
 <script>
@@ -160,11 +162,13 @@
 	page {
 		min-height: 100%;
 	}
+	.page-section-title {
+		padding: 0 30upx;
+	}
 
 	.title {
 		margin-left: 30upx;
 		color: #8f8f94;
-		line-height: 3;
 	}
 
 	.container {
@@ -189,7 +193,6 @@
 	}
 
 	.update-btn {
-		line-height: 3;
 		margin-right: 30upx;
 	}
 </style>

From 009569edcc412fb0a984bdbfdf91e0f8a4396097 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:32:59 +0800
Subject: [PATCH 12/22] =?UTF-8?q?modify:=20uni-icon=20=E7=9A=84=20size=20?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=20String=20=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/components/uni-icon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/hello-uniapp/components/uni-icon.vue b/examples/hello-uniapp/components/uni-icon.vue
index 4f78454f654..ca0b9b61885 100644
--- a/examples/hello-uniapp/components/uni-icon.vue
+++ b/examples/hello-uniapp/components/uni-icon.vue
@@ -16,7 +16,7 @@
             /**
              * 图标大小
              */
-            size: Number
+            size: [Number, String]
         },
         computed: {
             fontSize() {

From b6d63ccae29517b7750001beeee9fa167169d1aa Mon Sep 17 00:00:00 2001
From: hcoder <5213606@qq.com>
Date: Sun, 11 Nov 2018 18:34:18 +0800
Subject: [PATCH 13/22] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B9=9D=E5=AE=AB?=
 =?UTF-8?q?=E6=A0=BC=E5=86=85swiper=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/template/grid-pagination/grid-pagination.vue         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue b/examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue
index cea47500e15..c3251fdc93a 100644
--- a/examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue
+++ b/examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue
@@ -71,6 +71,7 @@
 		justify-content: flex-start
 	}
 	swiper{
-		height: 600upx;
+		height: 680upx;
+		background:#f2f2f2;
 	}
 </style>

From a4c6ce3ce8bd328fe87a836eaaa6ef811043d3ae Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Sun, 11 Nov 2018 18:54:30 +0800
Subject: [PATCH 14/22] =?UTF-8?q?modify:=20navigator=20=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BA=E6=96=B0=E7=9A=84=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/pages/component/navigator/navigator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/hello-uniapp/pages/component/navigator/navigator.vue b/examples/hello-uniapp/pages/component/navigator/navigator.vue
index 3a67d20e8e6..fcfe558caab 100644
--- a/examples/hello-uniapp/pages/component/navigator/navigator.vue
+++ b/examples/hello-uniapp/pages/component/navigator/navigator.vue
@@ -6,7 +6,7 @@
 				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
 					<button type="default">跳转到新页面</button>
 				</navigator>
-				<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
+				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
 					<button type="default">在当前页打开</button>
 				</navigator>
 			</view>

From bc369b57f84c1047cd1aa47e0333374db08c3d6b Mon Sep 17 00:00:00 2001
From: hulinneil <1289739946@qq.com>
Date: Sun, 11 Nov 2018 19:20:31 +0800
Subject: [PATCH 15/22] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20uni-badge=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20=E6=A0=B7=E5=BC=8F=E5=81=B6=E5=8F=91?=
 =?UTF-8?q?=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hello-uniapp/components/uni-badge.vue     | 55 ++++++++++++-------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/examples/hello-uniapp/components/uni-badge.vue b/examples/hello-uniapp/components/uni-badge.vue
index 89a22bd5374..24bd3d16895 100644
--- a/examples/hello-uniapp/components/uni-badge.vue
+++ b/examples/hello-uniapp/components/uni-badge.vue
@@ -1,16 +1,31 @@
 <template>
-	<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">{{text}}</text>
+	<text class="uni-badge" v-if="text" :class="setClass" @click="onClick()">{{text}}</text>
 </template>
 
 <script>
 	export default {
 		props: {
-			type: String,
-			inverted:{
-                type: Boolean,
-                default: false
-            },
-			text:String
+			type: {
+				type: String,
+				default: 'default'
+			},
+			inverted: {
+				type: Boolean,
+				default: false
+			},
+			text: {
+				type: String,
+				default: ''
+			}
+		},
+		computed: {
+			setClass() {
+				let classList = ['uni-badge-' + this.type];
+				if (this.inverted === true) {
+					classList.push('uni-badge-inverted')
+				}
+				return classList.join(" ")
+			}
 		},
 		methods: {
 			onClick() {
@@ -21,8 +36,9 @@
 </script>
 
 <style>
-	.uni-badge,.uni-badge-default {
-		font-family: 'Helvetica Neue',Helvetica,sans-serif;
+	.uni-badge,
+	.uni-badge-default {
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
 		box-sizing: border-box;
 		font-size: 12px;
 		line-height: 1;
@@ -31,65 +47,66 @@
 		color: #333;
 		border-radius: 100px;
 	}
+
 	.uni-badge.uni-badge-inverted {
 		padding: 0 5px 0 0;
 		color: #929292;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-primary {
 		color: #fff;
 		background-color: #007aff
 	}
-	
+
 	.uni-badge-blue.uni-badge-inverted,
 	.uni-badge-primary.uni-badge-inverted {
 		color: #007aff;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-green,
 	.uni-badge-success {
 		color: #fff;
 		background-color: #4cd964;
 	}
-	
+
 	.uni-badge-green.uni-badge-inverted,
 	.uni-badge-success.uni-badge-inverted {
 		color: #4cd964;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-warning,
 	.uni-badge-yellow {
 		color: #fff;
 		background-color: #f0ad4e
 	}
-	
+
 	.uni-badge-warning.uni-badge-inverted,
 	.uni-badge-yellow.uni-badge-inverted {
 		color: #f0ad4e;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-danger,
 	.uni-badge-red {
 		color: #fff;
 		background-color: #dd524d
 	}
-	
+
 	.uni-badge-danger.uni-badge-inverted,
 	.uni-badge-red.uni-badge-inverted {
 		color: #dd524d;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-purple,
 	.uni-badge-royal {
 		color: #fff;
 		background-color: #8a6de9
 	}
-	
+
 	.uni-badge-purple.uni-badge-inverted,
 	.uni-badge-royal.uni-badge-inverted {
 		color: #8a6de9;

From 643fe8ea61889f78e89daee6f67e724a4c5bf6c8 Mon Sep 17 00:00:00 2001
From: hulinneil <1289739946@qq.com>
Date: Mon, 12 Nov 2018 10:40:27 +0800
Subject: [PATCH 16/22] =?UTF-8?q?=E5=9C=A8H5=E5=B9=B3=E5=8F=B0=E5=B1=8F?=
 =?UTF-8?q?=E8=94=BD=20web-view=20=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/tabBar/component/component.vue      | 259 +++++++++---------
 1 file changed, 134 insertions(+), 125 deletions(-)

diff --git a/examples/hello-uniapp/pages/tabBar/component/component.vue b/examples/hello-uniapp/pages/tabBar/component/component.vue
index cb38206b404..ae6d5844da5 100644
--- a/examples/hello-uniapp/pages/tabBar/component/component.vue
+++ b/examples/hello-uniapp/pages/tabBar/component/component.vue
@@ -1,137 +1,146 @@
 <template>
-    <view class="uni-padding-wrap uni-common-pb">
-        <view class="uni-header-logo">
-            <image src="../../../static/componentIndex.png"></image>
+	<view class="uni-padding-wrap uni-common-pb">
+		<view class="uni-header-logo">
+			<image src="../../../static/componentIndex.png"></image>
 		</view>
 		<view class="uni-hello-text uni-common-pb">
 			以下将展示uni-app官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见uni-app开发文档。
 		</view>
-        <view class="uni-card" v-for="(list,index) in lists" :key="index">
-            <view class="uni-list">
-                <view class="uni-list-cell uni-collapse">
-                    <view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''"
-                        @click="trigerCollapse(index)">
-                        {{list.name}}
-                    </view>
-                    <view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
-                        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages"
-                            :key="key" @click="goDetailPage(item)">
-                            <view class="uni-list-cell-navigate uni-navigate-right"> {{item.name ? item.name : item}} </view>
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </view>
+		<view class="uni-card" v-for="(list,index) in lists" :key="index">
+			<view class="uni-list">
+				<view class="uni-list-cell uni-collapse">
+					<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''"
+					 @click="trigerCollapse(index)">
+						{{list.name}}
+					</view>
+					<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
+						<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" @click="goDetailPage(item)">
+							<view class="uni-list-cell-navigate uni-navigate-right"> {{item.name ? item.name : item}} </view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                lists: [{
-                    id: 'view',
-                    name: '视图容器',
-                    open: false,
-                    pages: ['view', 'scroll-view', 'swiper', 'movable-view']
-                }, {
-                    id: 'content',
-                    name: '基础内容',
-                    open: false,
-                    pages: ['text', 'rich-text', 'icon', 'progress']
-                }, {
-                    id: 'form',
-                    name: '表单组件',
-                    open: false,
-                    pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio',
-                        'slider',
-                        'switch', 'textarea'
-                    ]
-                }, {
-                    id: 'nav',
-                    name: '导航',
-                    open: false,
-                    pages: ['navigator']
-                }, {
-                    id: 'media',
-                    name: '媒体组件',
-                    open: false,
-                    pages: ['image', 'audio', 'video']
-                }, {
-                    id: 'map',
-                    name: '地图',
-                    open: false,
-                    pages: ['map']
-                },{
-                    id: 'web-view',
-                    name: '网页',
-                    open: false,
-                    pages: ['web-view']
-                }
-				]
-            }
-        },
-		onLoad() {
-			// #ifdef APP-PLUS 
-			//web-view组件支持本地html，依赖最新版的客户端基座
-			var innerversion = plus.runtime.innerVersion;
-			var _v = innerversion.substring(innerversion.lastIndexOf('.') + 1, innerversion.length);
-			if(_v && parseInt(_v)>=53650) {
-				
-				var newPages = [{
-					name: '网络网页',
-					url: '/pages/component/web-view/web-view'
-				}, {
-					name: '本地网页',
-					url: '/platforms/app-plus/web-view-local/web-view-local'
-				}];
-				this.lists[this.lists.length-1].pages = newPages;
-			}
-			// #endif
+	export default {
+		data() {
+			return {
+				lists: [{
+					id: 'view',
+					name: '视图容器',
+					open: false,
+					pages: ['view', 'scroll-view', 'swiper', 'movable-view']
+				}, {
+					id: 'content',
+					name: '基础内容',
+					open: false,
+					pages: ['text', 'rich-text', 'icon', 'progress']
+				}, {
+					id: 'form',
+					name: '表单组件',
+					open: false,
+					pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio',
+						'slider',
+						'switch', 'textarea'
+					]
+				}, {
+					id: 'nav',
+					name: '导航',
+					open: false,
+					pages: ['navigator']
+				}, {
+					id: 'media',
+					name: '媒体组件',
+					open: false,
+					pages: ['image', 'audio', 'video']
+				}, {
+					id: 'map',
+					name: '地图',
+					open: false,
+					pages: ['map']
+				// #ifdef APP-PLUS
+				}, {
+					id: 'web-view',
+					name: '网页',
+					open: false,
+					pages: ['web-view'],
+				// #endif
+				// #ifdef MP-WEIXIN
+				}, {
+					id: 'web-view',
+					name: '网页',
+					open: false,
+					pages: ['web-view'],
+				// #endif
+				}]
+			}
+		},
+		onLoad() {
+			// #ifdef APP-PLUS 
+			//web-view组件支持本地html，依赖最新版的客户端基座
+			var innerversion = plus.runtime.innerVersion;
+			var _v = innerversion.substring(innerversion.lastIndexOf('.') + 1, innerversion.length);
+			if (_v && parseInt(_v) >= 53650) {
+
+				var newPages = [{
+					name: '网络网页',
+					url: '/pages/component/web-view/web-view'
+				}, {
+					name: '本地网页',
+					url: '/platforms/app-plus/web-view-local/web-view-local'
+				}];
+				this.lists[this.lists.length - 1].pages = newPages;
+			}
+			// #endif
+		},
+		onShareAppMessage() {
+			return {
+				title: '欢迎体验uni-app',
+				path: '/pages/tabBar/component/component'
+			}
 		},
-        onShareAppMessage() {
-            return {
-                title: '欢迎体验uni-app',
-                path: '/pages/tabBar/component/component'
-            }
-        },
-        onNavigationBarButtonTap(e) {
-            uni.navigateTo({
-                url: '/platforms/app-plus/about/about'
-            })
-        },
-        methods: {
-            trigerCollapse(e) {
-                for (let i = 0, len = this.lists.length; i < len; ++i) {
-                    if (e === i) {
-                        this.lists[i].open = !this.lists[i].open;
-                    } else {
-                        this.lists[i].open = false;
-                    }
-                }
-            },
-            goDetailPage(e) {
-                if (typeof e === 'string') {
-                    uni.navigateTo({
-                        url: '/pages/component/' + e + '/' + e
-                    })
-                } else {
-                    uni.navigateTo({
-                        url: e.url
-                    })
-                }
-            }
-        }
-    }
+		onNavigationBarButtonTap(e) {
+			uni.navigateTo({
+				url: '/platforms/app-plus/about/about'
+			})
+		},
+		methods: {
+			trigerCollapse(e) {
+				for (let i = 0, len = this.lists.length; i < len; ++i) {
+					if (e === i) {
+						this.lists[i].open = !this.lists[i].open;
+					} else {
+						this.lists[i].open = false;
+					}
+				}
+			},
+			goDetailPage(e) {
+				if (typeof e === 'string') {
+					uni.navigateTo({
+						url: '/pages/component/' + e + '/' + e
+					})
+				} else {
+					uni.navigateTo({
+						url: e.url
+					})
+				}
+			}
+		}
+	}
 </script>
 
 <style>
-.uni-card {
-	box-shadow: none;
-}
-.uni-list:after {
-	height: 0;
-}
-.uni-list:before {
-	height: 0;
-}
+	.uni-card {
+		box-shadow: none;
+	}
+
+	.uni-list:after {
+		height: 0;
+	}
+
+	.uni-list:before {
+		height: 0;
+	}
 </style>

From cc698324395c067c3418cb5e66faf8706ea39059 Mon Sep 17 00:00:00 2001
From: hulin <1289739946@qq.com>
Date: Mon, 12 Nov 2018 10:57:27 +0800
Subject: [PATCH 17/22] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20setNavigationBar=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=20value=20=E5=80=BC=E7=9A=84=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../API/set-navigation-bar-title/set-navigation-bar-title.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue b/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
index b2a00a51812..98cfb58d55b 100644
--- a/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
+++ b/examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
@@ -31,7 +31,7 @@
 		},
 		methods: {
 			setNaivgationBarTitle: function (e) {
-				var title = e.target.value.title
+				let title = e.detail.value.title
 				uni.setNavigationBarTitle({
 					title: title,
 					success: () => {
@@ -45,4 +45,4 @@
 		}
 	}
 </script>
-
+

From 12d3c687e539bb01bb92b76b6e3b44092a887255 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Mon, 12 Nov 2018 11:08:58 +0800
Subject: [PATCH 18/22] =?UTF-8?q?=E6=9B=B4=E6=96=B0numberbox=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/common/uni.css          |  7 +-
 .../pages/template/number-box/number-box.vue  | 67 ++++---------------
 2 files changed, 15 insertions(+), 59 deletions(-)

diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index f988e79d8db..665b252139e 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -779,6 +779,8 @@ radio-group label, checkbox-group label{
 	display: flex;
 	flex-direction: row;
 	font-size:28upx;
+	padding: 22upx 30upx;
+	justify-content: space-between;
 }
 
 .uni-input-group .uni-input-row:after {
@@ -792,11 +794,6 @@ radio-group label, checkbox-group label{
 	background-color: #c8c7cc;
 }
 
-.uni-input-row {
-	padding: 22upx 30upx;
-	justify-content: space-between;
-}
-
 .uni-input-row label {
 	line-height: 70upx;
 }
diff --git a/examples/hello-uniapp/pages/template/number-box/number-box.vue b/examples/hello-uniapp/pages/template/number-box/number-box.vue
index 324f13804f2..e457a4b8807 100644
--- a/examples/hello-uniapp/pages/template/number-box/number-box.vue
+++ b/examples/hello-uniapp/pages/template/number-box/number-box.vue
@@ -1,53 +1,26 @@
 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="uni-padding-wrap">
-			<view class="uni-hello-text uni-common-mt">默认</view>
-			<view class="uni-hello-items">
+		<view class="uni-input-group uni-common-mt">
+			<view class="uni-input-row">
+				<label>默认</label>
 				<number-box></number-box>
 			</view>
-			
-			<view class="uni-hello-text uni-common-mt">限定最小值和最大值（0~9）</view>
-			<view class="uni-hello-items">
+			<view class="uni-input-row">
+				<label>限定最小值和最大值</label>
 				<number-box :min="0" :max="9"></number-box>
 			</view>
-			
-			<view class="uni-hello-text uni-common-mt">设定步长值（步长10）</view>
-			<view class="uni-hello-items">
+			<view class="uni-input-row">
+				<label>设定步长值（步长10）</label>
 				<number-box :step="10"></number-box>
 			</view>
-			
-			<view class="uni-hello-text uni-common-mt">获取输入框的值</view>
-			<view class="uni-hello-items">
-				<view class="uni-inline-item">
-					<number-box v-on:change="onNumberChange"></number-box>
-					<text class="item-label-right">当前的值为：{{numberValue}}</text>
-				</view>
-			</view>
-			
-			<view class="uni-hello-text uni-common-mt">输入框只读</view>
-			<view class="uni-hello-items">
+			<view class="uni-input-row">
+				<label>输入框只读</label>
 				<number-box :disabled="true"></number-box>
 			</view>
-			
-			<view class="uni-hello-text uni-common-mt">在行内</view>
-			<view class="uni-hello-items">
-				<view class="uni-inline-item">
-					<text class="item-label">购买数量：</text>
-					<number-box></number-box>
-				</view>
-			</view>
-			
-			<view class="uni-hello-text uni-common-mt">在表单中</view>
-			<view class="uni-input-group">
-				<view class="uni-input-row">
-					<label>数字框一</label>
-					<number-box></number-box>
-				</view>
-				<view class="uni-input-row">
-					<label>数字框二</label>
-					<number-box></number-box>
-				</view>
+			<view class="uni-input-row">
+				<label>获取输入的值 : {{numberValue}}</label>
+				<number-box v-on:change="onNumberChange"></number-box>
 			</view>
 		</view>
 		<view style="height:80upx;"></view>
@@ -74,18 +47,4 @@
 	}
 </script>
 <style>
-	.uni-hello-items{
-		padding:10upx 0;
-	}
-	
-	.item-label {
-		line-height: 70upx;
-		font-size:28upx;
-	}
-
-	.item-label-right {
-		font-size:28upx;
-		line-height: 70upx;
-		margin-left: 20upx;
-	}
-</style>
+</style>
\ No newline at end of file

From d01fe28a640f1e6676f89c229d71b727f3b946d3 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Mon, 12 Nov 2018 11:17:32 +0800
Subject: [PATCH 19/22] =?UTF-8?q?numberBox=20=E9=A1=B5=E9=9D=A2=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/common/uni.css                   |  4 ++++
 .../pages/template/number-box/number-box.vue           | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index 665b252139e..3c0871eac30 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -39,6 +39,10 @@ form {
 .uni-inline-item{
 	display: flex;
 	flex-direction: row;
+	align-items:center;
+}
+.uni-inline-item text{
+	margin-right: 20upx;
 }
 
 /* page */
diff --git a/examples/hello-uniapp/pages/template/number-box/number-box.vue b/examples/hello-uniapp/pages/template/number-box/number-box.vue
index e457a4b8807..de35d9e5525 100644
--- a/examples/hello-uniapp/pages/template/number-box/number-box.vue
+++ b/examples/hello-uniapp/pages/template/number-box/number-box.vue
@@ -23,6 +23,13 @@
 				<number-box v-on:change="onNumberChange"></number-box>
 			</view>
 		</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">行内应用</view>
+			<view class="uni-inline-item">
+				<text>购买数量 : </text>
+				<number-box v-on:change="onNumberChange2"></number-box>
+			</view>
+		</view>
 		<view style="height:80upx;"></view>
 	</view>
 </template>
@@ -42,6 +49,9 @@
 		methods: {
 			onNumberChange(value) {
 				this.numberValue = value;
+			},
+			onNumberChange2(value) {
+				console.log('购买数量 : ' + value);
 			}
 		}
 	}

From fabda462a7555f0a4da9b302f85536d583b660e8 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Mon, 12 Nov 2018 11:29:28 +0800
Subject: [PATCH 20/22] =?UTF-8?q?nunberBox=20=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=BB=98=E8=AE=A4=E5=80=BC=E8=AE=BE=E7=BD=AE=E6=BC=94?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/common/uni.css               |  4 ++++
 .../pages/template/number-box/number-box.vue       | 14 +++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index 3c0871eac30..b7a82cc93fe 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -44,6 +44,10 @@ form {
 .uni-inline-item text{
 	margin-right: 20upx;
 }
+.uni-inline-item text:last-child{
+	margin-right: 0upx;
+	margin-left: 20upx;
+}
 
 /* page */
 .uni-page-head{
diff --git a/examples/hello-uniapp/pages/template/number-box/number-box.vue b/examples/hello-uniapp/pages/template/number-box/number-box.vue
index de35d9e5525..d903037ae38 100644
--- a/examples/hello-uniapp/pages/template/number-box/number-box.vue
+++ b/examples/hello-uniapp/pages/template/number-box/number-box.vue
@@ -22,12 +22,17 @@
 				<label>获取输入的值 : {{numberValue}}</label>
 				<number-box v-on:change="onNumberChange"></number-box>
 			</view>
+			<view class="uni-input-row">
+				<label>设置默认值</label>
+				<number-box :value="numberValue2"></number-box>
+			</view>
 		</view>
 		<view class="uni-padding-wrap uni-common-mt">
 			<view class="uni-title">行内应用</view>
 			<view class="uni-inline-item">
 				<text>购买数量 : </text>
-				<number-box v-on:change="onNumberChange2"></number-box>
+				<number-box v-on:change="onNumberChange3"></number-box>
+				<text>{{numberValue3}}</text>
 			</view>
 		</view>
 		<view style="height:80upx;"></view>
@@ -40,7 +45,9 @@
 		data() {
 			return {
 				title: 'number-box',
-				numberValue: 0
+				numberValue: 0,
+				numberValue2 : 5,
+				numberValue3 : 0
 			}
 		},
 		components: {
@@ -50,7 +57,8 @@
 			onNumberChange(value) {
 				this.numberValue = value;
 			},
-			onNumberChange2(value) {
+			onNumberChange3(value) {
+				this.numberValue3 = value;
 				console.log('购买数量 : ' + value);
 			}
 		}

From 9a3f2c4e6be8b2fa7fd1058acbb0c36e8c12a033 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Mon, 12 Nov 2018 11:39:50 +0800
Subject: [PATCH 21/22] =?UTF-8?q?mpvuePicker=20div=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BA=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mpvue-picker/mpvuePicker.vue   | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/examples/hello-uniapp/components/mpvue-picker/mpvuePicker.vue b/examples/hello-uniapp/components/mpvue-picker/mpvuePicker.vue
index b69868f2960..8a0123ba7f1 100644
--- a/examples/hello-uniapp/components/mpvue-picker/mpvuePicker.vue
+++ b/examples/hello-uniapp/components/mpvue-picker/mpvuePicker.vue
@@ -1,16 +1,16 @@
 <template>
-    <div class="mpvue-picker">
-        <div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
-        <div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
-            <div class="mpvue-picker__hd" catchtouchmove="true">
-                <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
-                <div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
-            </div>
+    <view class="mpvue-picker">
+        <view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
+        <view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
+            <view class="mpvue-picker__hd" catchtouchmove="true">
+                <view class="mpvue-picker__action" @click="pickerCancel">取消</view>
+                <view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</view>
+            </view>
             <!-- 单列 -->
             <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='selector' && pickerValueSingleArray.length > 0">
                 <block>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueSingleArray" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueSingleArray" :key="index">{{item.label}}</view>
                     </picker-view-column>
                 </block>
             </picker-view>
@@ -18,10 +18,10 @@
             <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='timeSelector'">
                 <block>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueHour" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueHour" :key="index">{{item.label}}</view>
                     </picker-view-column>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueMinute" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMinute" :key="index">{{item.label}}</view>
                     </picker-view-column>
                 </block>
             </picker-view>
@@ -29,7 +29,7 @@
             <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='multiSelector'">
                 <block v-for="(n,index) in pickerValueMulArray.length" :key="index">
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index1) in pickerValueMulArray[n]" :key="index1">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index1) in pickerValueMulArray[n]" :key="index1">{{item.label}}</view>
                     </picker-view-column>
                 </block>
             </picker-view>
@@ -37,10 +37,10 @@
             <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===2">
                 <block>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueMulTwoOne" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulTwoOne" :key="index">{{item.label}}</view>
                     </picker-view-column>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueMulTwoTwo" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulTwoTwo" :key="index">{{item.label}}</view>
                     </picker-view-column>
                 </block>
             </picker-view>
@@ -48,18 +48,18 @@
             <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===3">
                 <block>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueMulThreeOne" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulThreeOne" :key="index">{{item.label}}</view>
                     </picker-view-column>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueMulThreeTwo" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulThreeTwo" :key="index">{{item.label}}</view>
                     </picker-view-column>
                     <picker-view-column>
-                        <div class="picker-item" v-for="(item,index) in pickerValueMulThreeThree" :key="index">{{item.label}}</div>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulThreeThree" :key="index">{{item.label}}</view>
                     </picker-view-column>
                 </block>
             </picker-view>
-        </div>
-    </div>
+        </view>
+    </view>
 </template>
 
 <script>

From 8ffd6b0dc344665365c91bf69014708a1436d75d Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Mon, 12 Nov 2018 12:01:04 +0800
Subject: [PATCH 22/22] =?UTF-8?q?nav-button=20=E8=B0=83=E6=95=B4=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hello-uniapp/pages/template/nav-button/nav-button.vue   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/examples/hello-uniapp/pages/template/nav-button/nav-button.vue b/examples/hello-uniapp/pages/template/nav-button/nav-button.vue
index 51faf3fe9fb..bcaeb20b50d 100644
--- a/examples/hello-uniapp/pages/template/nav-button/nav-button.vue
+++ b/examples/hello-uniapp/pages/template/nav-button/nav-button.vue
@@ -3,6 +3,8 @@
 		<page-head :title="title"></page-head>
 		<view class="uni-padding-wrap uni-common-mt">
 			<view class="uni-title">
+				<uni-icon size="16" type="info"></uni-icon>说明 : </view>
+			<view class="uni-helllo-text">
 				<view>在App端可在pages.json里配置buttons，暂不支持动态改变buttons的样式，使用onNavigationBarButtonTap可监听buttons的点击事件。</view>
 				<view>在微信小程序端，不支持配置buttons，故按钮不见了。</view>
 			</view>
@@ -10,6 +12,7 @@
 	</view>
 </template>
 <script>
+	import uniIcon from '../../../components/uni-icon.vue'
 	export default {
 		data() {
 			return {
@@ -21,6 +24,9 @@
 				title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
 				icon: "none"
 			})
+		},
+		components:{
+			uniIcon
 		}
 	}
 </script>