更新组件演示页面，方便用户直接使用组件，去除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

componentsPage/swipe-action/swipe-action.vue

@@ -1,126 +1,134 @@
 <template>
 
-  <view class="components-index-list">
+  <view class="components-swipe-action tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar>
 
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
-
-      <tn-swipe-action>
-        <tn-swipe-action-item :options="options1">
-          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
-            <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
-            </view>
-            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
-              <view class="swipe-action__item__info__title">
-                基本使用
+      
+      <demo-title title="基本使用">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options1">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
               </view>
-              <view class="swipe-action__item__info__desc">
-                向左滑动即可看到
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  基本使用
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
               </view>
             </view>
-          </view>
-        </tn-swipe-action-item>
-      </tn-swipe-action>
-
-      <view class="tn-padding-bottom"></view>
-      <tn-swipe-action>
-        <tn-swipe-action-item :options="options2">
-          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
-            <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
-            </view>
-            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
-              <view class="swipe-action__item__info__title">
-                多菜单
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="多菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options2">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
               </view>
-              <view class="swipe-action__item__info__desc">
-                向左滑动即可看到
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  多菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
               </view>
             </view>
-          </view>
-        </tn-swipe-action-item>
-      </tn-swipe-action>
-
-      <view class="tn-padding-bottom"></view>
-      <tn-swipe-action>
-        <tn-swipe-action-item :options="options3">
-          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
-            <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
-            </view>
-            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
-              <view class="swipe-action__item__info__title">
-                带图标菜单
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="带图标菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options3">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
               </view>
-              <view class="swipe-action__item__info__desc">
-                向左滑动即可看到
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  带图标菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
               </view>
             </view>
-          </view>
-        </tn-swipe-action-item>
-      </tn-swipe-action>
-
-      <view class="tn-padding-bottom"></view>
-      <tn-swipe-action>
-        <tn-swipe-action-item :options="options4">
-          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
-            <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
-            </view>
-            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
-              <view class="swipe-action__item__info__title">
-                单图标菜单
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="单图标菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options4">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
               </view>
-              <view class="swipe-action__item__info__desc">
-                向左滑动即可看到
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  单图标菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
               </view>
             </view>
-          </view>
-        </tn-swipe-action-item>
-      </tn-swipe-action>
-
-      <view class="tn-padding-bottom"></view>
-      <tn-swipe-action>
-        <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
-          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
-            <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
-            </view>
-            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
-              <view class="swipe-action__item__info__title">
-                关联打开滑动菜单
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="关联打开滑动菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
               </view>
-              <view class="swipe-action__item__info__desc">
-                向左滑动即可看到，同时只能打开一个菜单
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  关联打开滑动菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到，同时只能打开一个菜单
+                </view>
               </view>
             </view>
-          </view>
-        </tn-swipe-action-item>
-      </tn-swipe-action>
-
-      <view class="tn-padding-bottom"></view>
-      <tn-swipe-action :autoClose="false">
-        <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
-          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
-            <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
-            </view>
-            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
-              <view class="swipe-action__item__info__title">
-                非关联打开滑动菜单
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="非关联打开滑动菜单">
+        <tn-swipe-action :autoClose="false">
+          <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
               </view>
-              <view class="swipe-action__item__info__desc">
-                向左滑动即可看到，允许同时打开多个菜单
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  非关联打开滑动菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到，允许同时打开多个菜单
+                </view>
               </view>
             </view>
-          </view>
-        </tn-swipe-action-item>
-      </tn-swipe-action>
-
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
     </view>
 
   </view>
@@ -128,8 +136,10 @@
 </template>
 
 <script>
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSwipeAction',
+    components: { demoTitle },
     data() {
       return {
         // 滑动菜单
@@ -192,7 +202,6 @@
     },
     methods: {
     }
-
   }
 </script>