调整侧滑菜单页面布局

examples/hello-uniapp/pages/template/drawer/drawer.vue

 <template>
 	<view>
-		<view class="uni-padding-wrap">
-			<view class="uni-helllo-text" style="margin-top:80upx;">
-				这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。
+		<view class="header">
+			<view class="input-view">
+				<uni-icon type="search" size="22" color="#666666"></uni-icon>
+				<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入搜索关键词" />
 			</view>
-			<!-- #ifdef APP-PLUS -->
-			<view class="uni-center uni-link uni-common-mt" @tap="showRightDrawer">
-				点击这里或页面右上角的按钮显示导航菜单。
-			</view>
-			<!-- #endif -->
 			<!-- #ifdef MP-WEIXIN -->
-			<view class="uni-common-mt uni-btn-v">
-				<button type="primary" @tap="showRightDrawer">弹出导航</button>
+			<view class="icon" @tap="showRightDrawer">
+				<uni-icon type="bars" color="#666666" size="22"></uni-icon>
 			</view>
 			<!-- #endif -->
 		</view>
+		<view class="uni-padding-wrap" style="margin-top:30upx;">
+			这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面右上角的按钮即可显示导航菜单。
+		</view>
 		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer">
 			<view style="padding:30upx;">
 				<view class="uni-title">抽屉式导航</view>
 				<view class="uni-helllo-text">
-					这是抽屉式导航组件使用示例，你可以在这里放置任何内容。
-					<text>\n关闭抽屉式导航有多种方式：</text>
+					这是抽屉式导航组件使用示例，你可以在这里放置任何内容。关闭抽屉式导航有多种方式：</text>
 					<text>\n1.点击本导航之外的任意位置；</text>
 					<text>\n2.点击如下红色按钮；</text>
 					<!-- #ifdef APP-PLUS -->
@@ -28,7 +26,7 @@
 					<!-- #endif -->
 				</view>
 				<view class="uni-common-mt">
-					<button class="button" type="warn" @tap="closeRightDrawer">关闭抽屉式导航</button>
+					<button class="button" type="warn" size="mini" @tap="closeRightDrawer">关闭抽屉式导航</button>
 				</view>
 				<view class="uni-list uni-common-mt">
 					<view class="uni-list-cell" hover-class="uni-list-cell-hover">
@@ -91,5 +89,36 @@
 </script>
 
 <style>
+	.header {
+		display: flex;
+		flex-direction: row;
+		padding: 10px 15px;
+		align-items: center;
+	}
 
+	.input-view {
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		background-color: #e7e7e7;
+		height: 30px;
+		border-radius: 15px;
+		padding: 0 10px;
+		flex: 1;
+	}
+
+	.input {
+		flex: 1;
+		padding: 0 5px;
+		height: 24px;
+		line-height: 24px;
+		font-size: 16px;
+	}
+
+	.icon {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		margin-left: 10px;
+	}
 </style>