更新组件演示页面，方便用户直接使用组件，去除tn-button的默认背景色，tn-avatar修改参数默认值，修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug，tn-badge修改参数默认值，tn-collapse-item修复背景颜色失效问题，滚动通知移除默认背景颜色和字体大小，tn-count-down修复时间单位不正确问题，列表组件修复背景颜色问题，tn-nav-bar返回按钮修改为可进行修改的图标，tn-step添加点击步骤进行跳转，tn-loading修复默认激活颜色出错问题，tn-tag移除默认背景颜色，优化阴影大小css

basicPage/flex-layout/flex-layout.vue

@@ -1,22 +1,14 @@
 <template>
   
-  <view class="basic-flex">
+  <view class="basic-flex tn-safe-area-inset-bottom">
     
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Flex布局</tn-nav-bar>
     
-    
-    
-    
     <!-- 页面内容 -->
-    <view class="tn-margin-bottom-xl" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          固定尺寸 & 元素
-        </view>
-      </view>
-      <view class="tn-margin">
+      <demo-title title="固定尺寸 & 元素">
         <view class="tn-flex tn-flex-wrap">
           <view class="tn-flex-basic-xs tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xs(20%)</view>
           <view class="tn-flex-basic-md"></view>
@@ -27,14 +19,9 @@
           <view class="tn-flex-basic-xl tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xl(80%)</view>
           <view class="tn-flex-basic-full tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">full(100%)</view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例1
-        </view>
-      </view>
-      <view class="tn-margin-sm">
+      <demo-title title="应用示例1">
         <view class="tn-flex tn-flex-wrap">
           <view class="tn-flex-basic-md">
             <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
@@ -65,27 +52,9 @@
             </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <!-- <view class="tn-margin">
-        <view class="tn-flex tn-flex-wrap">
-          <view class="tn-flex-basic-xs tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
-          <view class="tn-flex-basic-md"></view>
-          <view class="tn-flex-basic-sm tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
-          <view class="tn-flex-basic-md"></view>
-          <view class="tn-flex-basic-md tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
-          <view class="tn-flex-basic-lg tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
-          <view class="tn-flex-basic-xl tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
-          <view class="tn-flex-basic-full tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        </view>
-      </view> -->    
-
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          比例布局 & 元素
-        </view>
-      </view>
-      <view class="tn-margin-sm">
+      <demo-title title="比例布局 & 元素">
         <view class="tn-flex">
           <view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
           <view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
@@ -99,277 +68,225 @@
           <view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
           <view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">3</view>
         </view>
-      </view>  
-        
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例1
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例2
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例1">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例3
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例2">
+        <view class="tn-flex">
+          <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例4
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-3">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例3">
+        <view class="tn-flex">
+          <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin  tn-text-bold tn-text-lg">
-          应用示例5
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例4">
+        <view class="tn-flex">
+          <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-3">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例6
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例5">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-      </view>
+      </demo-title>
       
+      <demo-title title="应用示例6">
+        <view class="tn-flex">
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例7
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例7">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例8
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-3">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例8">
+        <view class="tn-flex">
+          <view class="tn-flex-3">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例9
+      <demo-title title="应用示例9">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
         </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例10
+      <demo-title title="应用示例10">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
         </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-        <view class="tn-flex-2">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-        <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例11
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例11">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例12
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        
-        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-3">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例12">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-3">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例13
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例13">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+          <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-        <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-        </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例14
-        </view>
-      </view>
-      <view class="tn-flex tn-margin-sm">
-        <view class="tn-flex-1">
-          <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
-          </view>
-          <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+      <demo-title title="应用示例14">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
           </view>
         </view>
-      </view>  
+      </demo-title>
       
-      
-      
-      
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          水平对齐 & justify
-        </view>
-      </view>
-      <view class="tn-margin-sm">
+      <demo-title title="水平对齐 & justify">
         <view class="tn-flex tn-flex-row-left">
           <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
           <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
@@ -390,29 +307,17 @@
           <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
           <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例1
-        </view>
-      </view>
-      <view class="tn-margin">
+      <demo-title title="应用示例1">
         <view class="tn-flex tn-flex-row-center tn-margin-top-sm">
           <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
           <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
           <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
         </view>
-      </view>
-           
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例2
-        </view>
-      </view>
-      
-      <view class="tn-margin">
+      <demo-title title="应用示例2">
         <view class="tn-flex tn-flex-row-center tn-margin-top-sm">
           <view class="justify-content-item">
             <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
@@ -433,27 +338,17 @@
             </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例3
-        </view>
-      </view>
-      <view class="tn-margin">
+      <demo-title title="应用示例3">
         <view class="tn-flex tn-flex-row-around tn-margin-top-sm">
           <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
           <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
           <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例4
-        </view>
-      </view>
-      <view class="tn-margin">
+      <demo-title title="应用示例4">
         <view class="tn-flex tn-flex-row-around tn-margin-top-sm">
           <view class="justify-content-item">
             <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
@@ -474,27 +369,17 @@
             </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例5
-        </view>
-      </view>
-      <view class="tn-margin">
+      <demo-title title="应用示例5">
         <view class="tn-flex tn-flex-row-between tn-margin-top-sm">
           <view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
           <view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
           <view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
         </view>
-      </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例6
-        </view>
-      </view>
-      <view class="tn-margin">
+      <demo-title title="应用示例6">
         <view class="tn-flex tn-flex-row-between tn-margin-top-sm">
           <view class="justify-content-item">
             <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
@@ -515,16 +400,9 @@
             </view>
           </view>
         </view>
-      </view>
+      </demo-title>
       
-      
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          垂直对齐 & align
-        </view>
-      </view>
-      
-      <view class="tn-margin-sm">
+      <demo-title title="垂直对齐 & align">
         <view class="tn-flex tn-flex-col-top">
           <view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
           <view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">top</view>
@@ -537,8 +415,9 @@
           <view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
           <view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">bottom</view>
         </view>
-      </view>
-        
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
       
     </view>
     
@@ -547,8 +426,10 @@
 </template>
 
 <script>
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'BasicFlexLayout',
+    components: {demoTitle},
     data() {
       return {
         
@@ -562,8 +443,6 @@
 
 <style lang="scss" scoped>
   
-  @import '@/static/css/components/demo_page_common.scss';
-  
   /* 内容容器 start */
   .bg-flex-shadow{
     background-color: #00C3FF;