diff --git a/src/pages/navigation/drawer/index.js b/src/pages/navigation/drawer/index.js
index f503dcbd7..246323424 100644
--- a/src/pages/navigation/drawer/index.js
+++ b/src/pages/navigation/drawer/index.js
@@ -52,17 +52,33 @@ export default class DrawerPage extends Taro.Component {
     return (
       <View className='page'>
 
-        <View className='example'>
-          <AtButton type='primary' onClick={this.leftDrawerClick.bind(this)}>显示drawer(左边滑出)</AtButton>
-          {this.state.leftDrawerShow && <AtDrawer show={this.state.leftDrawerShow} mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
-          </AtDrawer>}
+        <View className='doc-header'>
+          <View className='doc-header__title'>Drawer 抽屉</View>
         </View>
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>左边滑出</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtButton type='primary' onClick={this.leftDrawerClick.bind(this)}>显示drawer</AtButton>
+                {this.state.leftDrawerShow && <AtDrawer show={this.state.leftDrawerShow} mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
+                </AtDrawer>}
+              </View>
+            </View>
+          </View>
 
-        <View className='example'>
-          <AtButton type='primary' onClick={this.rightDrawerClick.bind(this)}>显示drawer(右边滑出)</AtButton>
-          {this.state.rightDrawerShow && <AtDrawer show={this.state.rightDrawerShow} right mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
-          </AtDrawer>}
+          <View className='panel'>
+            <View className='panel__title'>右边滑出</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtButton type='primary' onClick={this.rightDrawerClick.bind(this)}>显示drawer</AtButton>
+                {this.state.rightDrawerShow && <AtDrawer show={this.state.rightDrawerShow} right mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
+                </AtDrawer>}
+              </View>
+            </View>
+          </View>
         </View>
+
       </View>
     )
   }
diff --git a/src/pages/navigation/pagination/index.js b/src/pages/navigation/pagination/index.js
index d00c6d72a..51d92f545 100644
--- a/src/pages/navigation/pagination/index.js
+++ b/src/pages/navigation/pagination/index.js
@@ -26,17 +26,38 @@ export default class PaginationPage extends Taro.Component {
   render () {
     return (
       <View className='page'>
-
-        <View className='example'>
-          <AtPagination total='50' pageSize='10' current='1'></AtPagination>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>Pagination 分页器</View>
         </View>
+        {/* E Header */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>文本按钮 + 页码</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtPagination total='50' pageSize='10' current='1'></AtPagination>
+              </View>
+            </View>
+          </View>
 
-        <View className='example'>
-          <AtPagination icon total='50' pageSize='10' current='1'></AtPagination>
-        </View>
+          <View className='panel'>
+            <View className='panel__title'>图标按钮 + 页码</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtPagination icon total='50' pageSize='10' current='1'></AtPagination>
+              </View>
+            </View>
+          </View>
 
-        <View className='example'>
-          <AtPagination icon total='50' pageSize='10' current='1' simple></AtPagination>
+          <View className='panel'>
+            <View className='panel__title'>隐藏页码</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtPagination icon total='50' pageSize='10' current='1' simple></AtPagination>
+              </View>
+            </View>
+          </View>
         </View>
       </View>
     )
diff --git a/src/pages/navigation/timeline/index.js b/src/pages/navigation/timeline/index.js
index 1baf09b33..446cb9344 100644
--- a/src/pages/navigation/timeline/index.js
+++ b/src/pages/navigation/timeline/index.js
@@ -13,16 +13,25 @@ export default class TimelinePage extends Taro.Component {
   render () {
     return (
       <View className='page'>
+        <View className='doc-header'>
+          <View className='doc-header__title'>Timeline 时间轴</View>
+        </View>
 
-        <View className='example'>
-          <AtTimeline pending>
-            <AtTimelineItem icon='accessory'>刷牙洗脸</AtTimelineItem>
-            <AtTimelineItem icon='accessory' color='green'>吃早餐</AtTimelineItem>
-            <AtTimelineItem icon='accessory' color='red'>上班</AtTimelineItem>
-            <AtTimelineItem color='yellow'>睡觉</AtTimelineItem>
-          </AtTimeline>
-
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtTimeline pending>
+                  <AtTimelineItem icon='accessory'>刷牙洗脸</AtTimelineItem>
+                  <AtTimelineItem icon='accessory' color='green'>吃早餐</AtTimelineItem>
+                  <AtTimelineItem icon='accessory' color='red'>上班</AtTimelineItem>
+                  <AtTimelineItem color='yellow'>睡觉</AtTimelineItem>
+                </AtTimeline>
+              </View>
+            </View>
+          </View>
         </View>
+
       </View>
     )
   }