From 9cc2ca8c0abc85902fb455432e857da1e0900c7d Mon Sep 17 00:00:00 2001
From: koppthe <kopptsoft@gmail.com>
Date: Fri, 27 Jul 2018 15:22:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(doc):=20=E9=87=8D=E6=9E=84=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=95=E7=A4=BA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.scss                      | 119 ++++++++++++++++++++
 src/assets/style/common.scss      | 101 -----------------
 src/pages/basic/button/index.scss |   2 -
 src/pages/basic/color/index.scss  |   2 -
 src/pages/basic/icon/index.scss   |   2 -
 src/pages/basic/typo/index.scss   |   2 -
 src/pages/panel/index.scss        |   1 -
 src/pages/view/avatar/index.js    | 114 ++++++++++++-------
 src/pages/view/avatar/index.scss  |   6 -
 src/pages/view/badge/index.js     | 126 ++++++++++++---------
 src/pages/view/badge/index.scss   |   6 -
 src/pages/view/noticebar/index.js |  55 +++++----
 src/pages/view/tag/index.js       | 181 ++++++++++++++++++------------
 src/pages/view/tag/index.scss     |   6 -
 14 files changed, 413 insertions(+), 310 deletions(-)
 delete mode 100644 src/assets/style/common.scss

diff --git a/src/app.scss b/src/app.scss
index eb64b14a9..6c58c2268 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -62,3 +62,122 @@ view {
     }
   }
 }
+
+/**
+ * 分类页样式
+ */
+.panel-header {
+  display: flex;
+  align-items: center;
+  padding: 60px;
+  height: 180px;
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    height: 80px;
+    color: #78A4FA;
+    text-align: center;
+    background: #fff;
+    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.11);
+    border-radius: 10px;
+  }
+
+  &__title {
+    margin-left: 32px;
+    color: #78A4FA;
+    font-size: 36px;
+    font-weight: bold;
+  }
+}
+
+.panel-body {
+  min-height: calc(100vh - 180px);
+  background: #fff;
+  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
+}
+
+.component-list {
+  margin: 20px 60px 0;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120px;
+    border-bottom: 1px solid #D8D8D8;
+
+    .name {
+      color: #1D1D26;
+      font-size: 28px;
+    }
+  }
+}
+
+/**
+ * 文档 DEMO 页
+ */
+.doc-header {
+  display: flex;
+  align-items: center;
+  padding: 60px;
+  height: 180px;
+
+  &__title {
+    position: relative;
+    height: 90px;
+    color: #333;
+    font-size: 40px;
+    font-weight: bold;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      display: inline-block;
+      width: 120px;
+      height: 2PX;
+      border-radius: 1PX;
+      background-color: #6190E8;
+    }
+  }
+}
+
+.doc-body {
+  min-height: calc(100vh - 180px);
+  background: #fff;
+  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .panel {
+    margin: 32px 0 50px;
+
+    &__title {
+      position: relative;
+      margin-bottom: 50px;
+      padding-left: 28px;
+      color: #6A6A77;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 1.5;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -20px;
+        width: 2PX;
+        height: 40px;
+        background-color: #6190E8;
+        box-shadow: 0 7px 12px 0 rgba(97, 144, 232, 0.20);
+        border-radius: 1PX;
+      }
+    }
+  }
+}
diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss
deleted file mode 100644
index 19152244e..000000000
--- a/src/assets/style/common.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.panel-header {
-  display: flex;
-  align-items: center;
-  padding: 60px;
-  height: 180px;
-
-  &__icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 80px;
-    height: 80px;
-    color: #78A4FA;
-    text-align: center;
-    background: #fff;
-    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.11);
-    border-radius: 10px;
-  }
-
-  &__title {
-    margin-left: 32px;
-    color: #78A4FA;
-    font-size: 36px;
-    font-weight: bold;
-  }
-}
-
-.panel-body {
-  min-height: calc(100vh - 180px);
-  background: #fff;
-  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
-}
-
-.component-list {
-  margin: 20px 60px 0;
-
-  &__item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 120px;
-    border-bottom: 1px solid #D8D8D8;
-
-    .name {
-      color: #1D1D26;
-      font-size: 28px;
-    }
-  }
-}
-
-.doc-header {
-  display: flex;
-  align-items: center;
-  padding: 60px;
-  height: 180px;
-
-  &__title {
-    height: 90px;
-    color: #333;
-    font-size: 40px;
-    font-weight: bold;
-    border-bottom: 2PX solid #6190E8;
-    border-radius: 1PX;
-  }
-}
-
-.doc-body {
-  min-height: calc(100vh - 180px);
-  background: #fff;
-  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-
-  .panel {
-    margin: 32px 0 50px;
-
-    &__title {
-      position: relative;
-      margin-bottom: 50px;
-      padding-left: 28px;
-      color: #6A6A77;
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 1.5;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        margin-top: -20px;
-        width: 2PX;
-        height: 40px;
-        background-color: #6190E8;
-        box-shadow: 0 7px 12px 0 rgba(97, 144, 232, 0.20);
-        border-radius: 1PX;
-      }
-    }
-  }
-}
diff --git a/src/pages/basic/button/index.scss b/src/pages/basic/button/index.scss
index 846b052ac..c54bfec0b 100644
--- a/src/pages/basic/button/index.scss
+++ b/src/pages/basic/button/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .example {
   margin-bottom: 15px;
 
diff --git a/src/pages/basic/color/index.scss b/src/pages/basic/color/index.scss
index ffbbc41e6..2329dfedd 100644
--- a/src/pages/basic/color/index.scss
+++ b/src/pages/basic/color/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .color-list {
   display: flex;
   justify-content: flex-start;
diff --git a/src/pages/basic/icon/index.scss b/src/pages/basic/icon/index.scss
index 8442dd2e5..4b142f00c 100644
--- a/src/pages/basic/icon/index.scss
+++ b/src/pages/basic/icon/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .at-icon {
   margin: 0 10px;
 }
diff --git a/src/pages/basic/typo/index.scss b/src/pages/basic/typo/index.scss
index 16509e4a7..dbe17a4a0 100644
--- a/src/pages/basic/typo/index.scss
+++ b/src/pages/basic/typo/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .table-typo {
   padding: 0 28px;
   width: 100%;
diff --git a/src/pages/panel/index.scss b/src/pages/panel/index.scss
index f0d7053d6..0d9657587 100644
--- a/src/pages/panel/index.scss
+++ b/src/pages/panel/index.scss
@@ -1,2 +1 @@
 @import '../../components/icon/index.scss';
-@import '../../assets/style/common.scss';
diff --git a/src/pages/view/avatar/index.js b/src/pages/view/avatar/index.js
index cf9aae92b..8619d9ff0 100644
--- a/src/pages/view/avatar/index.js
+++ b/src/pages/view/avatar/index.js
@@ -24,57 +24,87 @@ export default class AvatarPage extends Taro.Component {
   render () {
     return (
       <View className='page'>
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar circle image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>头像</View>
         </View>
+        {/* E Header */}
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 圆形头像 */}
+          <View className='panel'>
+            <View className='panel__title'>圆形头像</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
 
-        </View>
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar circle image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+          {/* 圆角矩形头像 */}
+          <View className='panel'>
+            <View className='panel__title'>圆角矩形头像</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
-          </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+          {/* 圆形头像（支持文本） */}
+          <View className='panel'>
+            <View className='panel__title'>圆形头像（支持文本）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtAvatar image='https://jdc.jd.com/img/200'>凹</AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+
+          {/* 圆角矩形头像（支持文本） */}
+          <View className='panel'>
+            <View className='panel__title'>圆角矩形头像（支持文本）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
-
+        {/* E Body */}
       </View>
     )
   }
diff --git a/src/pages/view/avatar/index.scss b/src/pages/view/avatar/index.scss
index 47eb50d73..a03f28d7b 100644
--- a/src/pages/view/avatar/index.scss
+++ b/src/pages/view/avatar/index.scss
@@ -1,9 +1,3 @@
-
-
-.page {
-  background-color: #fff;
-}
-
 .example {
   margin-bottom: 15px;
   text-align: center;
diff --git a/src/pages/view/badge/index.js b/src/pages/view/badge/index.js
index e469310de..e97c4c9a6 100644
--- a/src/pages/view/badge/index.js
+++ b/src/pages/view/badge/index.js
@@ -8,7 +8,7 @@ import './index.scss'
 
 export default class BadgePage extends Taro.Component {
   config = {
-    navigationBarTitleText: 'Badge Page'
+    navigationBarTitleText: 'Taro UI'
   }
 
   constructor () {
@@ -18,67 +18,93 @@ export default class BadgePage extends Taro.Component {
     }
   }
 
-  // onButtonClick() {
-  //   alert('点击了！')
-  // }
-
   render () {
-    // let {icons} = this.state
     return (
       <View className='page'>
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtBadge value='10' maxValue='99'>
-              <AtButton size='small' circle>按钮</AtButton>
-            </AtBadge>
-          </View>
-          <View className='example-item'>
-            <AtBadge value='10' maxValue='99'>
-              <AtButton size='small'>按钮</AtButton>
-            </AtBadge>
-          </View>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>徽标</View>
         </View>
+        {/* E Header */}
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtBadge dot>
-              <AtButton size='small' circle>按钮</AtButton>
-            </AtBadge>
-          </View>
-          <View className='example-item'>
-            <AtBadge dot>
-              <AtButton size='small'>按钮</AtButton>
-            </AtBadge>
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 常规徽标 */}
+          <View className='panel'>
+            <View className='panel__title'>常规徽标</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtBadge value='10' maxValue='99'>
+                    <AtButton size='small' circle>按钮</AtButton>
+                  </AtBadge>
+                </View>
+                <View className='example-item'>
+                  <AtBadge value='10' maxValue='99'>
+                    <AtButton size='small'>按钮</AtButton>
+                  </AtBadge>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtBadge value='new'>
-              <AtButton size='small' circle>按钮</AtButton>
-            </AtBadge>
-          </View>
-          <View className='example-item'>
-            <AtBadge value='new'>
-              <AtButton size='small'>按钮</AtButton>
-            </AtBadge>
+          {/* 小红点 */}
+          <View className='panel'>
+            <View className='panel__title'>小红点</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtBadge dot>
+                    <AtButton size='small' circle>按钮</AtButton>
+                  </AtBadge>
+                </View>
+                <View className='example-item'>
+                  <AtBadge dot>
+                    <AtButton size='small'>按钮</AtButton>
+                  </AtBadge>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtBadge value='...'>
-              <AtButton size='small' circle>按钮</AtButton>
-            </AtBadge>
+          {/* 文本 */}
+          <View className='panel'>
+            <View className='panel__title'>文本</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtBadge value='new'>
+                    <AtButton size='small' circle>按钮</AtButton>
+                  </AtBadge>
+                </View>
+                <View className='example-item'>
+                  <AtBadge value='new'>
+                    <AtButton size='small'>按钮</AtButton>
+                  </AtBadge>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtBadge value='...'>
-              <AtButton size='small'>按钮</AtButton>
-            </AtBadge>
+
+          {/* 省略号 */}
+          <View className='panel'>
+            <View className='panel__title'>省略号</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtBadge value='...'>
+                    <AtButton size='small' circle>按钮</AtButton>
+                  </AtBadge>
+                </View>
+                <View className='example-item'>
+                  <AtBadge value='...'>
+                    <AtButton size='small'>按钮</AtButton>
+                  </AtBadge>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
-
       </View>
     )
   }
diff --git a/src/pages/view/badge/index.scss b/src/pages/view/badge/index.scss
index 47eb50d73..a03f28d7b 100644
--- a/src/pages/view/badge/index.scss
+++ b/src/pages/view/badge/index.scss
@@ -1,9 +1,3 @@
-
-
-.page {
-  background-color: #fff;
-}
-
 .example {
   margin-bottom: 15px;
   text-align: center;
diff --git a/src/pages/view/noticebar/index.js b/src/pages/view/noticebar/index.js
index aca62af66..4c350d80d 100644
--- a/src/pages/view/noticebar/index.js
+++ b/src/pages/view/noticebar/index.js
@@ -17,32 +17,47 @@ export default class NoticebarPage extends Taro.Component {
     }
   }
 
-  // onButtonClick() {
-  //   alert('点击了！')
-  // }
-
   render () {
-    // let {icons} = this.state
     return (
       <View className='page'>
-        <View className='example'>
-          <AtNoticebar close single moreUrl='https://taro.aotu.io/'>这是 NoticeBar 通告栏。带关闭按钮、查看更多链接、单行</AtNoticebar>
-        </View>
-        <View className='example'>
-          <AtNoticebar close single>这是 NoticeBar 通告栏。带关闭按钮、单行</AtNoticebar>
-        </View>
-        <View className='example'>
-          <AtNoticebar close>这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。带关闭按钮、多行</AtNoticebar>
-        </View>
-
-        <View className='example'>
-          <AtNoticebar>这是 NoticeBar 通告栏。单行</AtNoticebar>
-        </View>
-        <View className='example'>
-          <AtNoticebar icon='icon-notice'>这是 NoticeBar 通告栏。单行、带 icon</AtNoticebar>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>通告栏</View>
         </View>
+        {/* E Header */}
 
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 基础通告栏 */}
+          <View className='panel'>
+            <View className='panel__title'>基础通告栏</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtNoticebar>这是 NoticeBar 通告栏。单行</AtNoticebar>
+              </View>
+              <View className='example'>
+                <AtNoticebar icon='icon-notice'>这是 NoticeBar 通告栏。单行、带 icon</AtNoticebar>
+              </View>
+            </View>
+          </View>
 
+          {/* 基础通告栏（带关闭按钮） */}
+          <View className='panel'>
+            <View className='panel__title'>基础通告栏（带关闭按钮）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtNoticebar close single moreUrl='https://taro.aotu.io/'>这是 NoticeBar 通告栏。带关闭按钮、查看更多链接、单行</AtNoticebar>
+              </View>
+              <View className='example'>
+                <AtNoticebar close single>这是 NoticeBar 通告栏。带关闭按钮、单行</AtNoticebar>
+              </View>
+              <View className='example'>
+                <AtNoticebar close>这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。带关闭按钮、多行</AtNoticebar>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }
diff --git a/src/pages/view/tag/index.js b/src/pages/view/tag/index.js
index 99a8c84c3..32da42fed 100644
--- a/src/pages/view/tag/index.js
+++ b/src/pages/view/tag/index.js
@@ -7,7 +7,7 @@ import './index.scss'
 
 export default class TagPage extends Taro.Component {
   config = {
-    navigationBarTitleText: 'Tag Page'
+    navigationBarTitleText: 'Taro UI'
   }
 
   constructor () {
@@ -23,90 +23,131 @@ export default class TagPage extends Taro.Component {
   }
 
   render () {
-    // let {icons} = this.state
     return (
       <View className='page'>
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtTag circle onClick={this.onClick.bind(this)}>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag circle active>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag active>标签</AtTag>
-          </View>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>标签</View>
         </View>
+        {/* E Header */}
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtTag type='primary' circle>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag type='primary'>标签</AtTag>
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 常规标签 */}
+          <View className='panel'>
+            <View className='panel__title'>常规标签</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtTag circle onClick={this.onClick.bind(this)}>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag circle active>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag active>标签</AtTag>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtTag type='primary' circle active>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag type='primary' active>标签</AtTag>
-          </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtTag type='primary' circle disabled>标签</AtTag>
+          {/* 选中态 */}
+          <View className='panel'>
+            <View className='panel__title'>选中态</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtTag type='primary' circle>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag type='primary'>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag type='primary' circle active>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag type='primary' active>标签</AtTag>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtTag type='primary' disabled>标签</AtTag>
-          </View>
-        </View>
 
-        {/* 小尺寸 */}
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtTag size='small' circle onClick={this.onClick.bind(this)}>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag size='small'>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag size='small' circle active>标签</AtTag>
+          {/* 不可点击态 */}
+          <View className='panel'>
+            <View className='panel__title'>不可点击态</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtTag type='primary' circle disabled>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag type='primary' disabled>标签</AtTag>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtTag size='small' active>标签</AtTag>
-          </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtTag size='small' type='primary' circle>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag size='small' type='primary'>标签</AtTag>
+          {/* 常规标签（小） */}
+          <View className='panel'>
+            <View className='panel__title'>常规标签（小）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtTag size='small' circle onClick={this.onClick.bind(this)}>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small'>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small' circle active>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small' active>标签</AtTag>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtTag size='small' type='primary' circle active>标签</AtTag>
-          </View>
-          <View className='example-item'>
-            <AtTag size='small' type='primary' active>标签</AtTag>
-          </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtTag size='small' type='primary' circle disabled>标签</AtTag>
+          {/* 选中态（小） */}
+          <View className='panel'>
+            <View className='panel__title'>选中态（小）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtTag size='small' type='primary' circle>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small' type='primary'>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small' type='primary' circle active>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small' type='primary' active>标签</AtTag>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtTag size='small' type='primary' disabled>标签</AtTag>
+
+          {/* 不可点击态（小） */}
+          <View className='panel'>
+            <View className='panel__title'>不可点击态（小）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtTag size='small' type='primary' circle disabled>标签</AtTag>
+                </View>
+                <View className='example-item'>
+                  <AtTag size='small' type='primary' disabled>标签</AtTag>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
-
+        {/* E Body */}
       </View>
     )
   }
diff --git a/src/pages/view/tag/index.scss b/src/pages/view/tag/index.scss
index 47eb50d73..a03f28d7b 100644
--- a/src/pages/view/tag/index.scss
+++ b/src/pages/view/tag/index.scss
@@ -1,9 +1,3 @@
-
-
-.page {
-  background-color: #fff;
-}
-
 .example {
   margin-bottom: 15px;
   text-align: center;