diff --git a/src/App.vue b/src/App.vue
index f65041d..a230686 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@ export default {
 <style lang="less">
 #app {
   font-family:
-  'code',
   '-apple-system',
   'BlinkMacSystemFont',
   'Helvetica Neue',
diff --git a/src/router/demo.js b/src/router/demo.js
index f1acd5d..ce17680 100644
--- a/src/router/demo.js
+++ b/src/router/demo.js
@@ -6,7 +6,7 @@ const Decoration = r => require.ensure([], () => r(require('../views/demo/decora
 
 const Chart = r => require.ensure([], () => r(require('../views/demo/chart.vue')), 'demo')
 
-const Table = r => require.ensure([], () => r(require('../views/demo/table.vue')), 'datav')
+const Other = r => require.ensure([], () => r(require('../views/demo/other.vue')), 'datav')
 
 export default [
   {
@@ -30,8 +30,8 @@ export default [
     component: Chart
   },
   {
-    path: 'table',
-    name: 'table',
-    component: Table
+    path: 'other',
+    name: 'other',
+    component: Other
   }
 ]
diff --git a/src/router/index.js b/src/router/index.js
index 9388284..566f0da 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,6 +18,7 @@ export default new Router({
       path: '/demo',
       name: 'demo',
       component: Demo,
+      redirect: { name: 'document' },
       children: [
         ...demoChildren
       ]
@@ -41,7 +42,7 @@ export default new Router({
     },
     {
       path: '*',
-      redirect: { name: 'demo' }
+      redirect: { name: 'document' }
     }
   ]
 })
diff --git a/src/views/demo/borderBox.vue b/src/views/demo/borderBox.vue
index 2359611..5030a89 100644
--- a/src/views/demo/borderBox.vue
+++ b/src/views/demo/borderBox.vue
@@ -1,46 +1,67 @@
 <template>
   <div id="border-box">
     <border-box-1 class="border-box-item">
-      <highlight-code class="javascript">
-// html
-@import wqe from './'
-      </highlight-code>
-
+      <div class="title">Border-Box-1</div>
       <highlight-code>
-        &lt;body&gt;&lt;/body&gt;
+&lt;border-box-1&gt;&lt;/border-box-1&gt;
       </highlight-code>
     </border-box-1>
 
     <border-box-2 class="border-box-item">
-      <border-box-2 class="bbi-2">border-box-2</border-box-2>
+      <div class="title">Border-Box-2</div>
+      <highlight-code>
+&lt;border-box-2&gt;&lt;/border-box-2&gt;
+      </highlight-code>
     </border-box-2>
 
     <border-box-3 class="border-box-item">
-      border-box-3
+      <div class="title">Border-Box-3</div>
+      <highlight-code>
+&lt;border-box-3&gt;&lt;/border-box-3&gt;
+      </highlight-code>
     </border-box-3>
 
     <border-box-4 class="border-box-item">
-      border-box-4
+      <div class="title">Border-Box-4</div>
+      <highlight-code>
+&lt;border-box-4&gt;&lt;/border-box-4&gt;
+      </highlight-code>
     </border-box-4>
 
     <border-box-4 class="border-box-item" :reverse="true">
-      border-box-4(reverse)
+      <div class="title">Border-Box-4(reverse)</div>
+      <highlight-code>
+&lt;border-box-4 :reverse="true" &gt;&lt;/border-box-4&gt;
+      </highlight-code>
     </border-box-4>
 
     <border-box-5 class="border-box-item">
-      border-box-5
+      <div class="title">Border-Box-5</div>
+      <highlight-code>
+&lt;border-box-5&gt;&lt;/border-box-5&gt;
+      </highlight-code>
     </border-box-5>
 
     <border-box-5 class="border-box-item" :reverse="true">
-      border-box-5(reverse)
+      <div class="title">Border-Box-5(reverse)</div>
+      <highlight-code>
+&lt;border-box-5 :reverse="true" &gt;&lt;/border-box-5&gt;
+      </highlight-code>
     </border-box-5>
 
     <border-box-6 class="border-box-item">
-      <border-box-6 class="bbi-6">border-box-6</border-box-6>
-      <border-box-6 class="bbi-6">border-box-6</border-box-6>
-      <border-box-6 class="bbi-6">border-box-6</border-box-6>
-      <border-box-6 class="bbi-6">border-box-6</border-box-6>
+      <div class="title">Border-Box-6</div>
+      <highlight-code>
+&lt;border-box-6&gt;&lt;/border-box-6&gt;
+      </highlight-code>
     </border-box-6>
+
+    <border-box-7 class="border-box-item">
+      <div class="title">Border-Box-7</div>
+      <highlight-code>
+&lt;border-box-7&gt;&lt;/border-box-7&gt;
+      </highlight-code>
+    </border-box-7>
   </div>
 </template>
 
@@ -55,6 +76,7 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  padding-bottom: 100px;
 
   .border-box-item {
     position: relative;
@@ -62,27 +84,13 @@ export default {
     height: 300px;
     margin-bottom: 10px;
     display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
-    .highlight-code {
+    .title {
+      text-indent: 0px;
     }
   }
-
-  .bbi-2 {
-    position: absolute;
-    width: 200px;
-    height: 80px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    line-height: 50px;
-  }
-
-  .bbi-6 {
-    width: 25%;
-    height: 100%;
-    float: left;
-  }
 }
 </style>
diff --git a/src/views/demo/chart.vue b/src/views/demo/chart.vue
index 7e7ed85..7f720ff 100644
--- a/src/views/demo/chart.vue
+++ b/src/views/demo/chart.vue
@@ -672,8 +672,7 @@ export default {
         labelLine: ['同期', '环期'],
         circleColor: '#f92672',
         rayLineColor: '#f92672',
-        rayLineOffset: Math.PI * 1,
-
+        rayLineOffset: Math.PI * 1
       },
 
       colors: ['#00baff', '#3de7c9']
diff --git a/src/views/demo/decoration.vue b/src/views/demo/decoration.vue
index c03351d..dbcf3cd 100644
--- a/src/views/demo/decoration.vue
+++ b/src/views/demo/decoration.vue
@@ -1,39 +1,69 @@
 <template>
   <div id="decoration">
-    <border-box-6 class="decoration-container">
+    <border-box-7 class="decoration-container">
       <decoration-1 class="decoration d1 center" />
-      decoration-1
-    </border-box-6>
 
-    <border-box-6 class="decoration-container">
+      <div class="title">Decoration-1</div>
+      <highlight-code>
+&lt;decoration-1 /&gt;
+      </highlight-code>
+    </border-box-7>
+
+    <border-box-7 class="decoration-container">
       <decoration-2 class="decoration d2 center" />
-      decoration-2
-    </border-box-6>
+      <div class="title">Decoration-2</div>
+      <highlight-code>
+&lt;decoration-2 /&gt;
+      </highlight-code>
+    </border-box-7>
 
-    <border-box-6 class="decoration-container">
+    <border-box-7 class="decoration-container">
       <decoration-2 class="decoration d2r center" :reverse="true" />
-      decoration-2(reverse)
-    </border-box-6>
+      <div class="title">Decoration-2(reverse)</div>
+      <highlight-code>
+&lt;decoration-2 :reverse="true" /&gt;
+      </highlight-code>
+    </border-box-7>
 
-    <border-box-6 class="decoration-container">
+    <border-box-7 class="decoration-container">
       <decoration-3 class="decoration d3 center" />
-      decoration-3
-    </border-box-6>
+      <div class="title">Decoration-3</div>
+      <highlight-code>
+&lt;decoration-3 /&gt;
+      </highlight-code>
+    </border-box-7>
 
-    <border-box-6 class="decoration-container">
+    <border-box-7 class="decoration-container">
       <decoration-4 class="decoration d4 center" />
-      decoration-4
-    </border-box-6>
+      <div class="title">Decoration-4</div>
+      <highlight-code>
+&lt;decoration-4 /&gt;
+      </highlight-code>
+    </border-box-7>
 
-    <border-box-6 class="decoration-container">
+    <border-box-7 class="decoration-container">
       <decoration-4 class="decoration d4r center" :reverse="true" />
-      decoration-4(reverse)
-    </border-box-6>
+      <div class="title">Decoration-4(reverse)</div>
+      <highlight-code>
+&lt;decoration-4 :reverse="true" /&gt;
+      </highlight-code>
+    </border-box-7>
 
-    <border-box-6 class="decoration-container">
+    <border-box-7 class="decoration-container">
+      <decoration-5 class="decoration d4r center" :reverse="true" />
+      <div class="title">Decoration-5</div>
+      <highlight-code>
+&lt;decoration-5 /&gt;
+      </highlight-code>
+    </border-box-7>
+
+    <border-box-7 class="decoration-container">
       <loading class="decoration center" />
-      loading
-    </border-box-6>
+      <div class="title">Loading</div>
+      <highlight-code>
+&lt;loading /&gt;
+      </highlight-code>
+    </border-box-7>
   </div>
 </template>
 
@@ -49,6 +79,7 @@ export default {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
+  padding-bottom: 100px;
 
   .decoration-container {
     position: relative;
@@ -58,7 +89,14 @@ export default {
     margin-bottom: 20px;
     text-align: center;
     font-weight: bold;
-    line-height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .title {
+      text-indent: 0;
+    }
   }
 
   .decoration {
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index 46e6ac2..c6e4b06 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -40,8 +40,8 @@ export default {
           routerName: 'chart'
         },
         {
-          title: 'Table',
-          routerName: 'table'
+          title: 'Other',
+          routerName: 'other'
         }
       ]
     }
@@ -95,7 +95,8 @@ export default {
     width: 100%;
     height: 100%;
     overflow: scroll;
-    padding-top: 70px;
+    padding: 70px 100px 0px 100px;
+    box-sizing: border-box;
   }
 }
 </style>
diff --git a/src/views/demo/table.vue b/src/views/demo/other.vue
similarity index 100%
rename from src/views/demo/table.vue
rename to src/views/demo/other.vue