update README.md.

Signed-off-by: Mandy <784454+bruce_qiq@user.noreply.gitee.com>

.gitignore

@@ -1,3 +1,4 @@
 /unpackage/dist/*
 /node_modules/*
 /.idea/*
+.hbuilderx

App.vue

@@ -1,8 +1,79 @@
 <script>
   import Vue from 'vue'
+  import store from './store/index.js'
+  import updateCustomBarInfo from './tuniao-ui/libs/function/updateCustomBarInfo.js'
   
 	export default {
 		onLaunch: function() {
+			uni.getSystemInfo({
+			  success: function(e) {
+			    // #ifndef H5
+			    // 获取手机系统版本
+			    const system = e.system.toLowerCase()
+			    const platform = e.platform.toLowerCase()
+			    // 判断是否为ios设备
+			    if (platform.indexOf('ios') != -1 && (system.indexOf('ios') != -1 || system.indexOf('macos') != -1)) {
+			      Vue.prototype.SystemPlatform = 'apple'
+			    } else if (platform.indexOf('android') != -1 && (system.indexOf('android') != -1)) {
+			      Vue.prototype.SystemPlatform = 'android'
+			    } else {
+			      Vue.prototype.SystemPlatform = 'devtools'
+			    }
+			    // #endif
+			  }
+			})
+      
+      // 获取设备的状态栏信息和自定义顶栏信息
+      // store.dispatch('updateCustomBarInfo')
+      updateCustomBarInfo().then((res) => {
+        store.commit('$tStore', {
+          name: 'vuex_status_bar_height',
+          value: res.statusBarHeight
+        })
+        store.commit('$tStore', {
+          name: 'vuex_custom_bar_height',
+          value: res.customBarHeight
+        })
+      })
+			
+			// #ifdef MP-WEIXIN
+			//更新检测
+			if (wx.canIUse('getUpdateManager')) {
+			  const updateManager = wx.getUpdateManager();
+			  updateManager && updateManager.onCheckForUpdate((res) => {
+			    if (res.hasUpdate) {
+			      updateManager.onUpdateReady(() => {
+			        uni.showModal({
+			          title: '更新提示',
+			          content: '新版本已经准备就绪，是否需要重新启动应用？',
+			          success: (res) => {
+			            if (res.confirm) {
+			              uni.clearStorageSync() // 更新完成后刷新storage的数据
+			              updateManager.applyUpdate()
+			            }
+			          }
+			        })
+			      })
+			
+			      updateManager.onUpdateFailed(() => {
+			        uni.showModal({
+			          title: '已有新版本上线',
+			          content: '小程序自动更新失败，请删除该小程序后重新搜索打开哟~~~',
+                showCancel: false
+			        })
+			      })
+			    } else {
+			      //没有更新
+			    }
+			  })
+			} else {
+			  uni.showModal({
+			    title: '提示',
+			    content: '当前微信版本过低，无法使用该功能，请更新到最新的微信后再重试。',
+          showCancel: false
+			  })
+			}
+      // #endif
 		},
 		onShow: function() {
 			// console.log('App Show')

README.md

@@ -1,10 +1,4 @@
-<p align="center">
+[![图鸟UI](https://resource.tuniaokj.com/images/uniapp_market/8.jpg "图鸟UI")](https://resource.tuniaokj.com/images/uniapp_market/8.jpg "图鸟UI")
-	<img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/top.jpg" width="60%" />
-</p>
-
-
-<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">Tuniao UI</h3>
-<h3 align="center">提供丰富组件和炫酷页面的UI框架</h3>
 
 <p align="center">
     <a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank">
@@ -17,43 +11,27 @@
 </p>
 
 
+## **说明**
 
-## 说明
+**`图鸟UI vue2`**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
 
-**图鸟UI**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持`H5`和`微信小程序`，包含常用表单组件、信息展示组件等，并提供`丰富的酷炫页面模板`。
+开源版本中所使用到的图片均做了`防盗链`，只能在调试中使用，不保证在生产环境中可以使用。
+图片资源已上传到 [图鸟社区](https://www.yuque.com/tuniao/)。
 
-
+## 图鸟UI特点
-
-### 开源版本中所使用到的图片均做了防盗链，只能在调试中使用，不保证在生产环境中可以使用。
-
-### 图片资源以上传到[图鸟社区](https://www.yuque.com/tuniao)。
-
-
-
-## 特点
 
 -   包含基础常用的布局元素，flex、grid、浮动
 -   完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
-- 300+风格统一的图标icon，后续可继续增加
+-   800+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
-- 30+精选组件，让开发者可以快速进行开发
 -   酷炫常用的页面模板，更有让你眼前一亮的界面效果
-- 图片素材语雀便捷下载，图鸟社区共同成长
+-   图片素材语雀便捷下载，图鸟生态共同成长
 -   使用文档详尽说明，让你一文读懂图鸟UI
 
+## 官方链接
 
+[图鸟UI 开源项目](https://ext.dcloud.net.cn/publisher?id=356088)
 
-## 链接
+[使用文档 vue2](https://vue2.tuniaokj.com/)
-
-- [图鸟社区](https://www.yuque.com/tuniao)
-- [使用手册](https://tuniaoui.tuniaokj.com/components/introduce.html)
-
-
-
-## 安装
-
-下载地址 ------> [图鸟UI - DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id=7088)
-
-
 
 ## 快速上手
 
@@ -62,7 +40,7 @@
  - ##### 必要文件夹
 
    - 复制tuniao-ui文件夹
-   - 复制stoer文件夹
+   - 复制store文件夹
 
 - ##### 如果使用了模板页面则需要复制以下文件夹
 
@@ -85,6 +63,18 @@ Vue.use(TuniaoUI)
 
 #### 3.引入TuniaoUI提供的vuex
 
+在项目根目录的`main.js`中引入store
+
+```js
+// 引入store
+import store from './store'
+...
+const app = new Vue({
+  store,
+  ...App
+})
+```
+
 在项目根目录中的`main.js`中，引入并使用TuniaoUI的vuex，注意这两行配置代码要放在import Vue之后。
 
 ```js
@@ -100,7 +90,7 @@ Vue.mixin(vuexStore)
 在项目根目录的`uni.scss`中引入此文件。
 
 ```scss
-@import 'tuniao-ui/theme.scss'
+@import 'tuniao-ui/theme.scss';
 ```
 
 
@@ -148,24 +138,40 @@ Vue.mixin(vuexStore)
 
 
 
-## UI截图
+## 图鸟UI开源项目（图鸟UI、图鸟vue3、图鸟模板1 2 3 4 5 、图鸟图表 已上传；图鸟模板6 7 8 9 10 11 12 13 14 15 16 17 18 19 20暂未上传）
+
+[![开源项目](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all3.jpg "开源项目")](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all3.jpg "开源项目")
+
+
+
+## 图鸟UI-vue3开源项目（[建议Github下载](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)，[Dcloud插件市场下载](https://ext.dcloud.net.cn/plugin?id=13530)）
+
+[![开源项目](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")
+
+[![图鸟vue3](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)
+
+#### **(2023年7月1日上线，图鸟UI vue3正式版，下载链接请看下方)**
+
+[图鸟UI vue3 Dcloud下载地址-uni_modules](https://ext.dcloud.net.cn/plugin?id=13530)
+
+[图鸟UI vue3 Github下载地址](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)
+
+[图鸟UI vue3 Github演示代码](https://github.com/tuniaoTech/tuniaoui-uniapp-v3-demo)
+
+[图鸟vue3使用文档](https://vue3.tuniaokj.com/)
 
-<p>
-    <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/1.jpg" width="300" />
-    <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/2.jpg" width="300" />
-    <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/3.jpg" width="300" />
-    <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/4.jpg" width="300" />
-    <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/5.jpg" width="300" />
-    <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/6.jpg" width="300" />
-</p>
 
 
 
 ## 联系作者
 
-<p>
+微信 tnkewo
-    <img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/bottom.jpg" width="380" />
+
-</p>
+微信群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
+
+[![作者微信 tnkewo](https://resource.tuniaokj.com/images/uniapp_market/tn_author_qrcode.jpg)](https://resource.tuniaokj.com/images/uniapp_market/tn_author_qrcode.jpg)
+
+[![图鸟微信群](https://resource.tuniaokj.com/images/tuniao_group_info/qrcode_24-0124.jpg "图鸟微信群")](https://resource.tuniaokj.com/images/tuniao_group_info/qrcode_24-0124.jpg "图鸟微信群")
 
 
 

basicPage/avatar/avatar.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="basic-avatar">
+  <view class="basic-avatar tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>头像</tn-nav-bar>
@@ -8,38 +8,104 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基础">
-        <block v-if="singleAvatarShow">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
-          <tn-avatar
+          <view class="tn-margin-sm">
-            :backgroundColor="backgroundColor"
+            <tn-avatar></tn-avatar>
-            :src="src"
+          </view>
-            :text="text"
+          <view class="tn-margin-sm">
-            :icon="icon"
+            <tn-avatar backgroundColor="#FFFFFF"></tn-avatar>
-            :shape="shape"
+          </view>
-            :size="size"
+          <view class="tn-margin-sm">
-            :shadow="shadow"
+            <tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar>
-            :border="border"
+          </view>
-            :borderColor="borderColor"
+          <view class="tn-margin-sm">
-            :imgMode="imgMode"
+            <tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar>
-            :badge="badge"
+          </view>
-            :badgeSize="badgeSize"
+          <view class="tn-margin-sm">
-            :badgeBgColor="badgeBgColor"
+            <tn-avatar :src="src"></tn-avatar>
-            :badgeColor="badgeColor"
+          </view>
-            :badgeIcon="badgeIcon"
+          <view class="tn-margin-sm">
-            :badgeText="badgeText"
+            <tn-avatar :shadow="true" :src="src"></tn-avatar>
-            :badgePosition="badgePosition"
+          </view>
-          >
+        </view>
-          </tn-avatar>
+      </demo-title>
-        </block>
+      
-        <block v-else>
+      <demo-title title="大小">
-          <tn-avatar-group
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
-            :lists="groupList"
+          <view class="tn-margin-sm">
-            :shape="shape"
+            <tn-avatar size="sm" :src="src"></tn-avatar>
-            :size="size"
+          </view>
-            :gap="0.4"
+          <view class="tn-margin-sm">
-          ></tn-avatar-group>
+            <tn-avatar :src="src"></tn-avatar>
-        </block>
+          </view>
-      </dynamic-demo-template>
+          <view class="tn-margin-sm">
+            <tn-avatar size="lg" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar size="xl" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar size="160rpx" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="形状">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar shape="circle" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar shape="square" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar :border="true" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="角标">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="头像组">
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList"></tn-avatar-group>
+        </view>
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group>
+        </view>
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group>
+        </view>
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -48,225 +114,32 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicAvatar',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        backgroundColor: '',
+        src: 'https://resource.tuniaokj.com/images/avatar/xiaomai4.jpg',
-        src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
-        text: '',
-        icon: '',
-        shape: 'circle',
-        size: '',
-        shadow: false,
-        border: false,
-        borderColor: 'rgba(0, 0, 0, 0.1)',
-        imgMode: 'aspectFill',
-        badge: false,
-        badgeSize: 28,
-        badgeBgColor: '#AAAAAA',
-        badgeColor: '#FFFFFF',
-        badgeIcon: 'sex-male',
-        badgeText: '',
-        badgePosition: [0, 0],
-        
         groupList: [
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
           {text: 'TN'},
           {icon: 'logo-tuniao'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
-        ],
-        
-        // 头像显示方式切换
-        singleAvatarShow: true,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-avatar组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '形状',
-                optional: ['圆形','方形'],
-                methods: 'shapeChange'
-              },
-              {
-                title: '类型',
-                optional: ['图片','文字','图标'],
-                methods: 'typeChange'
-              },
-              {
-                title: '大小',
-                optional: ['默认','sm','lg','xl','120rpx'],
-                methods: 'sizeChange'
-              },
-              {
-                title: '阴影',
-                optional: ['显示','隐藏'],
-                methods: 'shadowChange',
-                current: 1
-              },
-              {
-                title: '边框',
-                optional: ['显示','隐藏'],
-                methods: 'borderChange',
-                current: 1
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '角标',
-                optional: ['显示','隐藏'],
-                methods: 'badgeChange',
-                current: 1
-              },
-              {
-                title: '角标大小',
-                optional: ['默认','20'],
-                methods: 'badgeSizeChange',
-                show: false
-              },
-              {
-                title: '角标内容',
-                optional: ['图标','文字'],
-                methods: 'badgeContentChange',
-                show: false
-              },
-              {
-                title: '角标位置',
-                optional: ['默认','[8,8]'],
-                methods: 'badgePositionChange',
-                show: false
-              }
         ]
-          },
-          {
-            name: '样式切换',
-            section: [
-              {
-                title: '方式',
-                optional: ['单头像','头像组'],
-                methods: 'singleAvatarChange'
-              }
-            ]
-          }
-        ]
-
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换头像形状
-      shapeChange(event) {
-        this.shape = event.index === 0 ? 'circle' : 'square'
-      },
-      // 切换头像类型
-      typeChange(event) {
-        switch (event.index) {
-          case 0:
-            this.src = 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg'
-            this.text = ''
-            this.icon = ''
-            break
-          case 1:
-            this.src = ''
-            this.text = 'TN'
-            this.icon = ''
-            break
-          case 2:
-            this.src = ''
-            this.text = ''
-            this.icon = 'logo-tuniao'
-            break
     }
-      },
-      // 切换头像大小
-      sizeChange(event) {
-        this.size = event.index === 0 ? '' : event.name
-      },
-      // 切换阴影状态
-      shadowChange(event) {
-        this.shadow = event.index === 0 ? true : false
-      },
-      // 切换边框状态
-      borderChange(event) {
-        this.border = event.index === 0 ? true : false
-      },
-      // 切换颜色
-      colorChange(event) {
-        if (event.index === 0) {
-          this.backgroundColor = ''
-          this.borderColor = 'rgba(0, 0, 0, 0.1)'
-          this.badgeBgColor = '#AAAAAA'
-          this.badgeColor = '#FFFFFF'
-        } else {
-          this.backgroundColor = '#01BEFF'
-          this.borderColor = '#E6E6E6'
-          this.badgeBgColor = 'tn-bg-red'
-          this.badgeColor = '#FFFFFF'
-        }
-      },
-      // 切换角标状态
-      badgeChange(event) {
-        if (event.index === 0) {
-          this.badge = true
-          this.$refs.demoTemplate.updateSectionBtnsState([7,8,9], true)
-        } else {
-          this.badge = false
-          this.$refs.demoTemplate.updateSectionBtnsState([7,8,9], false)
-        }
-      },
-      // 切换角标大小
-      badgeSizeChange(event) {
-        this.badgeSize = event.index === 0 ? 28 : Number(event.name)
-      },
-      // 切换角标内容
-      badgeContentChange(event) {
-        switch(event.index) {
-          case 0:
-            this.badgeIcon = 'sex-male'
-            this.badgeText = ''
-            this.badgeSizeChange({index: 0})
-            this.$refs.demoTemplate.updateSectionBtnsValue(0, 7, 0)
-            break
-          case 1:
-            this.badgeIcon = ''
-            this.badgeText = '99+'
-            this.badgeSize = 0
-            break
-        }
-      },
-      // 切换角标位置
-      badgePositionChange(event) {
-        switch(event.index) {
-          case 0:
-            this.badgePosition = [0, 0]
-            break
-          case 1:
-            this.badgePosition = [8, 8]
-            break
-        }
-      },
-      
-      // 单头像、头像组切换
-      singleAvatarChange(event) {
-        this.singleAvatarShow = event.index === 0
-      }
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
-
+  .basic-avatar {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
 </style>

basicPage/badge/badge.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="basic-badge">
+  <view class="basic-badge tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>微标</tn-nav-bar>
@@ -8,40 +8,66 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基础">
-        <block v-if="!absolute">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
-          <tn-badge
+          <tn-badge :dot="true" margin="10rpx 10rpx"><text>0</text></tn-badge>
-            :backgroundColor="backgroundColor"
+          <tn-badge margin="10rpx 10rpx"><text>0</text></tn-badge>
-            :fontColor="fontColor"
+          <tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge>
-            :fontSize="fontSize"
+          <tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge>
-            :radius="radius"
+        </view>
-            :dot="dot"
+      </demo-title>
-            :padding="padding"
+      
-            :margin="margin"
+      <demo-title title="大小">
-          >
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
-            <text v-if="dot === false">{{ value }}</text>
+          <tn-badge :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
-          </tn-badge>
+          <tn-badge :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
-        </block>
+          <tn-badge :radius="60" :fontSize="30" margin="10rpx 10rpx"><text>99</text></tn-badge>
-        <block v-else>
+          <tn-badge :fontSize="30" padding="10rpx 30rpx" margin="10rpx 10rpx"><text>99+</text></tn-badge>
-          <view class="badge-container">
+        </view>
-            <tn-badge
+      </demo-title>
-              :backgroundColor="backgroundColor"
+      
-              :fontColor="fontColor"
+      <demo-title title="颜色">
-              :fontSize="fontSize"
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
-              :radius="radius"
+          <tn-badge backgroundColor="#01BEFF" :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
-              :dot="dot"
+          <tn-badge backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="#FFFFFF" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
-              :padding="padding"
+          <tn-badge backgroundColor="tn-bg-teal" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
-              :margin="margin"
+          <tn-badge backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
-              :absolute="true"
+          <tn-badge backgroundColor="tn-main-gradient-indigo" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
-              :top="top"
+        </view>
-              :right="right"
+      </demo-title>
-              :translateCenter="translateCenter"
+      
-            >
+      <demo-title title="微标使用">
-              <text v-if="dot === false">{{ value }}</text>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" >
+              <text>99+</text>
             </tn-badge>
           </view>
-        </block>
+          <view class="badge-demo">
-      </dynamic-demo-template>
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
+              <text>99+</text>
+            </tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx">
+              <text>99+</text>
+            </tn-badge>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -50,151 +76,30 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicBadge',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        value: '0',
-        backgroundColor: '',
-        fontColor: '',
-        fontSize: 0,
-        radius: 0,
-        dot: false,
-        padding: '',
-        margin: '',
-        absolute: false,
-        top: '',
-        right: '',
-        translateCenter: true,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-badge组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '数值',
-                optional: ['0','99','100','1024'],
-                methods: 'valueChange'
-              },
-              {
-                title: '点微标',
-                optional: ['是','否'],
-                methods: 'dotChange',
-                current: 1
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '自定义大小',
-                optional: ['默认','自定义'],
-                methods: 'sizeChange'
-              },
-              {
-                title: '绝对定位',
-                optional: ['是','否'],
-                methods: 'absoluteChange',
-                current: 1
-              },
-              {
-                title: '自定义绝对定位位置',
-                optional: ['默认','自定义'],
-                methods: 'absolutePositionChange',
-                show: false
-              },
-              {
-                title: '居中绝对定位原点',
-                optional: ['是','否'],
-                methods: 'absoluteCenterChange',
-                show: false
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换值
-      valueChange(event) {
-        this.value = this.$t.number.formatNumberString(event.name)
-      },
-      // 切换点显示状态
-      dotChange(event) {
-        if (event.index === 0) {
-          this.dot = true
-          this.$refs.demoTemplate.updateSectionBtnsState(0, false)
-        } else {
-          this.dot = false
-          this.$refs.demoTemplate.updateSectionBtnsState(0, true)
     }
-      },
-      // 切换自定义颜色
-      colorChange(event) {
-        if (event.index === 0) {
-          this.backgroundColor = ''
-          this.fontColor = ''
-        } else {
-          this.backgroundColor = 'tn-bg-red'
-          this.fontColor = '#FFFFFF'
-        }
-      },
-      // 切换自定义大小
-      sizeChange(event) {
-        if (event.index === 0) {
-          this.radius = 0
-          this.fontSize = 0
-          this.padding = ''
-          this.margin = ''
-        } else {
-          this.radius = 48
-          this.fontSize = 30
-          this.padding = '10rpx 25rpx'
-          this.margin = '30rpx'
-        }
-      },
-      // 切换绝对定位状态
-      absoluteChange(event) {
-        if (event.index === 0) {
-          this.absolute = true
-          this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
-        } else {
-          this.absolute = false
-          this.$refs.demoTemplate.updateSectionBtnsState([5,6], false)
-        }
-      },
-      // 切换绝对定位的位置
-      absolutePositionChange(event) {
-        if (event.index === 0) {
-          this.top = ''
-          this.right = ''
-        } else {
-          this.top = '20rpx'
-          this.right = '100%'
-        }
-      },
-      // 切换绝对定位居中原点
-      absoluteCenterChange(event) {
-        this.translateCenter = event.index === 0
-      }
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
-  .badge-container {
+  .basic-badge {
-    // 防止越过父级
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  
+  .badge-demo {
     position: relative;
-    width: 80rpx;
+    width: 160rpx;
-    height: 80rpx;
+    height: 160rpx;
-    background-color: $tn-font-sub-color;
+    background-color: #FFFFFF;
+    margin: 18rpx 20rpx;
   }
 </style>

basicPage/border/border.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="basic-border">
+  <view class="basic-border tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>边框</tn-nav-bar>
@@ -8,13 +8,100 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="普通边框">
-        <view
+        <view class="border-content tn-border-solid">
-          class="border-content"
+          <view>四周边框</view>
-          :class="[borderClass]"
+        </view>
-        ></view>
+        <view class="border-content tn-border-solid-top">
-        <view style="visibility: hidden;height: 1px;">tuniao</view>
+          <view>顶部边框</view>
-      </dynamic-demo-template>
+        </view>
+        <view class="border-content tn-border-solid-right">
+          <view>右边边框</view>
+        </view>
+        <view class="border-content tn-border-solid-bottom">
+          <view>下面边框</view>
+        </view>
+        <view class="border-content tn-border-solid-left">
+          <view>左边边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="加粗边框">
+        <view class="border-content tn-border-solids">
+          <view>四周边框</view>
+        </view>
+        <view class="border-content tn-border-solids-top">
+          <view>顶部边框</view>
+        </view>
+        <view class="border-content tn-border-solids-right">
+          <view>右边边框</view>
+        </view>
+        <view class="border-content tn-border-solids-bottom">
+          <view>下面边框</view>
+        </view>
+        <view class="border-content tn-border-solids-left">
+          <view>左边边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="虚线边框">
+        <view class="border-content tn-border-dashed">
+          <view>四周边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-top">
+          <view>顶部边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-right">
+          <view>右边边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-bottom">
+          <view>下面边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-left">
+          <view>左边边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="隐藏某一边框">
+        <view class="border-content tn-border-solid tn-none-border-top">
+          <view>隐藏上边框</view>
+        </view>
+        <view class="border-content tn-border-solid tn-none-border-right">
+          <view>隐藏右边框</view>
+        </view>
+        <view class="border-content tn-border-solid tn-none-border-bottom">
+          <view>隐藏下边框</view>
+        </view>
+        <view class="border-content tn-border-solid tn-none-border-left">
+          <view>隐藏左边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-top">
+          <view>隐藏上边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-right">
+          <view>隐藏右边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-bottom">
+          <view>隐藏下边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-left">
+          <view>隐藏左边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view class="border-content tn-border-solid tn-border-indigo">
+          
+        </view>
+        <view class="border-content tn-border-solids tn-border-green">
+          
+        </view>
+        <view class="border-content tn-border-dashed tn-border-purplered">
+          
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -23,117 +110,32 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicBorder',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        borderType: 'solid',
-        borderPosition: '',
-        borderColor: '',
-        borderBold: false,
-        
-        tips: ['无需依赖额外的样式文件','不使用任何组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '样式',
-                optional: ['实线','虚线'],
-                methods: 'typeChange'
-              },
-              {
-                title: '位置',
-                optional: ['全部','上','下','左','右'],
-                methods: 'positionChange'
-              },
-              {
-                title: '颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '加粗',
-                optional: ['默认','加粗'],
-                methods: 'boldChange'
-              }
-            ]
-          }
-        ]
-
-      }
-    },
-    computed: {
-      borderClass() {
-        let clazz = ''
-        if (this.borderPosition === '') {
-          clazz += ` tn-border-${this.borderType}`
-        } else {
-          clazz += ` tn-border-${this.borderType}-${this.borderPosition}`
-        }
-        
-        if (this.borderColor) {
-          clazz += ` ${this.borderColor}`
-        }
-        
-        if (this.borderBold) {
-          clazz += ' tn-bold-border'
-        }
-        
-        return clazz
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换边框样式
-      typeChange(event) {
-        this.borderType = event.index === 0 ? 'solid' : 'dashed'
-      },
-      // 切换边框位置
-      positionChange(event) {
-        switch (event.index) {
-          case 0:
-            this.borderPosition = ''
-            break
-          case 1:
-            this.borderPosition = 'top'
-            break
-          case 2:
-            this.borderPosition = 'bottom'
-            break
-          case 3:
-            this.borderPosition = 'left'
-            break
-          case 4:
-            this.borderPosition = 'right'
-            break
     }
-      },
-      // 切换边框颜色
-      colorChange(event) {
-        this.borderColor = event.index === 0 ? '' : 'tn-border-red'
-      },
-      // 切换边框加粗状态
-      boldChange(event) {
-        this.borderBold = event.index === 0 ? false : true
-      }
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
+  .basic-border {
+    min-height: 100vh;
+  }
+  
   
   .border-content {
-    width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 80rpx;
     background-color: #FFFFFF;
-    margin: 0 auto;
+    margin: 30rpx 0rpx;
   }
 </style>

basicPage/button/button.vue

@@ -1,6 +1,6 @@
 <template>
   
-  <view class="basic-button">
+  <view class="basic-button tn-safe-area-inset-bottom">
   
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>按钮</tn-nav-bar>
@@ -8,31 +8,82 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基础">
-        <tn-button
+        <tn-button>按钮</tn-button>
-          :backgroundColor="backgroundColor"
+      </demo-title>
-          :fontColor="fontColor"
+      
-          :fontSize="fontSize"
+      <demo-title title="大小">
-          :shape="shape"
+        <view>
-          :shadow="shadow"
+          <tn-button size="sm" margin="10rpx 10rpx" >按钮</tn-button>
-          :width="width"
+          <tn-button margin="10rpx 10rpx">按钮</tn-button>
-          :height="height"
+          <tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
-          :size="size"
+          <tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
-          :fontBold="fontBold"
+        </view>
-          :padding="padding"
+        <view class="tn-margin-top">
-          :margin="margin"
+          <tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
-          :plain="plain"
+          <tn-button margin="10rpx 10rpx">按钮</tn-button>
-          :border="border"
+          <tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
-          :borderBold="borderBold"
+        </view>
-          :disabled="disabled"
+        <view class="tn-margin-top">
-          :loading="loading"
+          <tn-button width="100%">按钮</tn-button>
-        >
+        </view>
-          <block v-if="shape !== 'icon'">演示按钮</block>
+      </demo-title>
-          <block v-else>
+      
-            <text class="tn-icon-discover-planet-fill"></text>
+      <demo-title title="形状">
-          </block>
+        <tn-button margin="10rpx 10rpx">按钮</tn-button>
-        </tn-button>
+        <tn-button shape="round" margin="10rpx 10rpx">按钮</tn-button>
-      </dynamic-demo-template>
+        <tn-button shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
+        <tn-button width="150rpx" height="100rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view>
+          <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框">
+        <view>
+          <tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" :borderBold="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="阴影">
+        <tn-button :shadow="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-bg-teal" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-main-gradient-indigo" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-cool-bg-color-7" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
+      </demo-title>
+      
+      <demo-title title="加载中">
+        <tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+      </demo-title>
+      
+      <demo-title title="禁止点击">
+        <tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+      </demo-title>
+	  
+	  <demo-title title="防抖节流(默认间隔200ms,这里用1s)">
+	    <tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了防抖')" :blockTime="1000" scene="debounce">防抖模式</tn-button>
+		<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了节流')" :blockTime="1000" scene="throttle">节流模式</tn-button>
+	  </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
       
     </view>
   
@@ -41,190 +92,27 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicButton',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        backgroundColor: '',
+        
-        fontColor: '',
-        fontSize: 0,
-        shape: '',
-        shadow: false,
-        width: '',
-        height: '',
-        size: '',
-        fontBold: false,
-        padding: '',
-        margin: '',
-        plain: false,
-        border: true,
-        borderBold: false,
-        disabled: false,
-        loading: false,
-        tips: ['无需依赖额外的样式文件','使用tn-button组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '自定义大小',
-                optional: ['默认','自定义'],
-                methods: 'sizeChange'
-              },
-              {
-                title: '内置大小',
-                optional: ['默认','sm','lg'],
-                methods: 'insertSizeChange'
-              },
-              {
-                title: '形状',
-                optional: ['默认','圆角','图标'],
-                methods: 'shapeChange'
-              },
-              {
-                title: '显示阴影',
-                optional: ['不显示','显示'],
-                methods: 'shadowChange'
-              },
-              {
-                title: '字体加粗控制',
-                optional: ['默认','加粗'],
-                methods: 'fontBoldChange'
-              },
-              {
-                title: '镂空控制',
-                optional: ['默认','镂空'],
-                methods: 'plainChange'
-              },
-              {
-                title: '镂空边框控制',
-                optional: ['显示','不显示'],
-                methods: 'borderChange'
-              },
-              {
-                title: '镂空边框加粗控制',
-                optional: ['默认','加粗'],
-                methods: 'borderBoldChange'
-              },
-              {
-                title: '禁用控制',
-                optional: ['关闭','开启'],
-                methods: 'disabledChange'
-              },
-              {
-                title: '加载控制',
-                optional: ['关闭','开启'],
-                methods: 'loadingChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
+		say(msg){
-        this[event.methods] && this[event.methods](event)
+			this.$tn.message.toast(msg)
-      },
-      // 切换自定义颜色
-      colorChange(event) {
-        switch(event.index) {
-          case 0:
-            this.backgroundColor = ''
-            this.fontColor = ''
-            break
-          case 1:
-            this.backgroundColor = 'tn-bg-indigo'
-            this.fontColor = '#4030E8'
-            break
-        }
-      },
-      // 切换自定义大小
-      sizeChange(event) {
-        switch(event.index) {
-          case 0:
-            this.width = 'auto'
-            this.height = ''
-            this.fontSize = 0
-            this.padding = ''
-            this.$refs.demoTemplate.updateSectionBtnsState(2, true)
-            break
-          case 1:
-            this.width = '200rpx'
-            this.height = '80rpx'
-            this.fontSize = 36
-            this.padding = '10rpx 20rpx'
-            this.size = ''
-            this.$refs.demoTemplate.updateSectionBtnsState(2, false)
-            break
-        }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换按钮形状
-      shapeChange(event) {
-        switch(event.index) {
-          case 0:
-            this.shape = ''
-            break
-          case 1:
-            this.shape = 'round'
-            break
-          case 2:
-            this.shape = 'icon'
-            break
-        }
-      },
-      // 切换阴影状态
-      shadowChange(event) {
-        if (event.index === 0) {
-          this.shadow = false
-          this.$refs.demoTemplate.updateSectionBtnsState(10, true)
-        } else {
-          this.shadow = true
-          this.loading = false
-          this.$refs.demoTemplate.updateSectionBtnsState(10, false)
-        }
-      },
-      // 切换内置尺寸状态
-      insertSizeChange(event) {
-        this.size = event.index === 0 ? '' : event.name
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换字体加粗状态
-      fontBoldChange(event) {
-        this.fontBold = event.index === 0 ? false : true
-      },
-      // 切换镂空状态
-      plainChange(event) {
-        this.plain = event.index === 0 ? false : true
-      },
-      // 切换镂空边框状态
-      borderChange(event) {
-        this.border = event.index === 0 ? true : false
-      },
-      // 切换镂空边框加粗状态
-      borderBoldChange(event) {
-        this.borderBold = event.index === 0 ? false : true
-      },
-      // 切换禁用状态
-      disabledChange(event) {
-        this.disabled = event.index === 0 ? false : true
-      },
-      // 切换加载状态
-      loadingChange(event) {
-        this.loading = event.index === 0 ? false : true
 		},
 
-    },
+    }
   }
 </script>
 
 <style lang="scss" scoped>
-  
+  .basic-button {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
 </style>

basicPage/color/color.vue

@@ -28,12 +28,10 @@
               <view class="background__left__picker__item__select-wrapper" :style="[colorSelectItemStyle]">
                 <view class="circle-wrapper right">
                   <view class="circle-progress right-circle"
-                    :class="{'circle-progress--active': colorSelectFlag}"
                     :style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
                 </view>
                 <view class="circle-wrapper left">
                   <view class="circle-progress left-circle"
-                    :class="{'circle-progress--active': colorSelectFlag}"
                     :style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
                 </view>
               </view>
@@ -41,8 +39,18 @@
           </scroll-view>
         </view>
         <view class="background__right-container">
-          <scroll-view :style="[scrollViewStyle]" scroll-y>
+          <scroll-view
-            <view class="background__right__show" :class="{'background__right__show--visible': colorSelectFlag}">
+            v-if="!isUpdateColorInfo"
+            :style="[scrollViewStyle]"
+            scroll-y
+            :refresher-enabled="true"
+            lower-threshold="20"
+            :refresher-triggered="containerRefreshFlag"
+            @scroll="containerScroll"
+            @scrolltolower="containerScrollLower"
+            @refresherrefresh="containerRefresh"
+          >
+            <view class="background__right__show">
               <block v-if="currentColorIndex === 0">
                 <view class="background__right__show--title">图鸟基础配色</view>
                 <!-- 色盘 start-->
@@ -342,18 +350,23 @@
         },
         // 当前选中的颜色序号
         currentColorIndex: 0,
-        colorSelectFlag: false,
+        // 内容容器滚动容器滚动的位置
+        containerScrollTop: 0,
+        // 标记是否正在更新数据
+        isUpdateColorInfo: false,
+        // 内容区域刷新标志
+        containerRefreshFlag: false,
         // 当前选中颜色的色值信息
         selectColorInfo: {}
       }
     },
     onLoad() {
-      this.initScrollViewHeight()
+      
     },
     onReady() {
       // 等待加载组件完成
       setTimeout(() => {
-        this.getPickerColorItemInfo()
+        this.initScrollViewHeight()
       }, 10)
     },
     methods: {
@@ -362,11 +375,39 @@
         // 获取当前屏幕的安全高度
         uni.getSystemInfo({
           success: (systemInfo) => {
-            this.scrollViewStyle.height = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo
+            this.scrollViewStyle.height = (systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight) + 'px'
-              .statusBarHeight + 'px'
+            this.getPickerColorItemInfo()
           }
         })
       },
+      // 内容容器滚动事件
+      containerScroll(e) {
+        // console.log(e);
+        // this.containerScrollTop = e.detail.scrollTop
+      },
+      // 内容scroll-view下拉刷新事件
+      containerRefresh(e) {
+        // console.log(e);
+        if (this.containerRefreshFlag) return
+        this.containerRefreshFlag = true
+        setTimeout(() => {
+          this.containerRefreshFlag = false
+        }, 10)
+        if (this.currentColorIndex - 1 < 0 || this.isUpdateColorInfo) return
+        this.pickerColorClick(this.currentColorIndex - 1)
+        
+      },
+      // 内容scroll-view滚动到底部触发事件
+      containerScrollLower(e) {
+        // console.log(e);
+        if (e.detail.direction === 'bottom') {
+          // console.log(e.detail.direction);
+          // 触发底部
+          // if (this.currentColorIndex + 1 > this.colorList.length || this.isUpdateColorInfo) return
+          // console.log('update');
+          // this.pickerColorClick(this.currentColorIndex + 1)
+        }
+      },
       // 获取色值列表的位置信息
       getPickerColorItemInfo() {
         // 获取picker容器的信息
@@ -399,7 +440,7 @@
       },
       // 色值选择
       pickerColorClick(index) {
-        if (this.colorSelectFlag === false || index === this.currentColorIndex) {
+        if (index === this.currentColorIndex) {
           return
         }
         this.currentColorIndex = index
@@ -408,23 +449,27 @@
       },
       // 设置选中圆环信息
       updatePickerColorSelectItem() {
-        // 先设置已选中状态为false，然后再设置选中圆环的位置信息，等待动画执行完毕后在设置已选中状态为true
-        this.colorSelectFlag = false
-        
         const colorInfos = this.pickerColorInfos[this.currentColorIndex]
         this.colorSelectItemStyle.top = colorInfos.x - uni.upx2px(40) + 'px'
         this.colorSelectItemStyle.left = colorInfos.y - uni.upx2px(40) + 'px'
-        
-        setTimeout(() => {
-          this.colorSelectFlag = true
-        }, 10)
       },
       // 设置选中颜色的信息
       updateSelectColorInfo() {
         if (this.currentColorIndex === 0) {
           return
         }
+        this.isUpdateColorInfo = true
+        this.$tn.message.loading('加载中...')
+        // this.containerScrollTop = Math.random()
+        setTimeout(() => {
+          // this.containerScrollTop = 0
           this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
+          this.$tn.message.closeLoading()
+          this.isUpdateColorInfo = false
+        }, 10)
+        // setTimeout(() => {
+          
+        // }, 1000)
       }
     }
   }
@@ -580,7 +625,8 @@
                   border-radius: 50%;
                   position: absolute;
                   top: 0;
-                  transform: rotate(225deg);
+                  // transform: rotate(225deg);
+                  transform: rotate(45deg);
                   
                   &.right-circle {
                     right: 0;
@@ -596,9 +642,9 @@
                     // transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
                   }
                   
-                  &--active {
+                  // &--active {
-                    transform: rotate(45deg);
+                  //   transform: rotate(45deg);
-                  }
+                  // }
                 }
               }
             }
@@ -619,6 +665,8 @@
           padding: 30rpx;
           overflow: hidden;
           transform-origin: 0 50%;
+          // opacity: 0;
+          // transition: opacity 0.2s ease;
           // transform: scaleX(0) rotate(-90deg);
           // transform: rotateY(-90deg);
           // transform: scaleX(0);
@@ -628,6 +676,7 @@
             // transform: scaleX(1) rotate(0deg);
             // transform: rotateY(0deg);
             // transform: scaleX(1);
+            opacity: 1;
           }
           
           &--title {

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">
+      <demo-title title="固定尺寸 & 元素">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          固定尺寸 & 元素
-        </view>
-      </view>
-      <view class="tn-margin">
         <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">
+      <demo-title title="应用示例1">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例1
-        </view>
-      </view>
-      <view class="tn-margin-sm">
         <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">
+      <demo-title title="比例布局 & 元素">
-        <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">
         <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,14 +68,10 @@
           <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>  
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例1">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
@@ -115,13 +80,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例2">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
@@ -130,13 +92,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例3">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
@@ -145,13 +104,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例4">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
@@ -161,13 +117,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例5">
-        <view class="tn-margin  tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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>
@@ -178,13 +131,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例6">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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>
@@ -194,14 +144,10 @@
           <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="应用示例7">
-      <view class="tn-padding-top">
+        <view class="tn-flex">
-        <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">
             </view>
@@ -215,13 +161,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例8">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
             </view>
@@ -235,13 +178,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例9">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例9
-        </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>
@@ -256,13 +196,10 @@
           </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">
+      <demo-title title="应用示例10">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例10
-        </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>
@@ -277,13 +214,10 @@
           </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">
+      <demo-title title="应用示例11">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
             </view>
@@ -303,14 +237,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例12">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
@@ -325,13 +255,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例13">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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">
             </view>
@@ -346,13 +273,10 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      <view class="tn-padding-top">
+      <demo-title title="应用示例14">
-        <view class="tn-margin tn-text-bold tn-text-lg">
+        <view class="tn-flex">
-          应用示例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>
@@ -360,16 +284,9 @@
             </view>
           </view>
         </view>
+      </demo-title>
       
-      
+      <demo-title title="水平对齐 & justify">
-      
-      
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          水平对齐 & justify
-        </view>
-      </view>
-      <view class="tn-margin-sm">
         <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">
+      <demo-title title="应用示例1">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例1
-        </view>
-      </view>
-      <view class="tn-margin">
         <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>
       
-      
+      <demo-title title="应用示例2">
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例2
-        </view>
-      </view>
-      
-      <view class="tn-margin">
         <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">
+      <demo-title title="应用示例3">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例3
-        </view>
-      </view>
-      <view class="tn-margin">
         <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">
+      <demo-title title="应用示例4">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例4
-        </view>
-      </view>
-      <view class="tn-margin">
         <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">
+      <demo-title title="应用示例5">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例5
-        </view>
-      </view>
-      <view class="tn-margin">
         <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">
+      <demo-title title="应用示例6">
-        <view class="tn-margin tn-text-bold tn-text-lg">
-          应用示例6
-        </view>
-      </view>
-      <view class="tn-margin">
         <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>
       
-      
+      <demo-title title="垂直对齐 & align">
-      <view class="tn-padding-top">
-        <view class="tn-margin tn-text-bold tn-text-xl">
-          垂直对齐 & align
-        </view>
-      </view>
-      
-      <view class="tn-margin-sm">
         <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,12 +426,17 @@
 </template>
 
 <script>
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'BasicFlexLayout',
+    components: {demoTitle},
     data() {
       return {
         
       }
+    },
+    onLoad() {
+      
     },
     methods: {
       
@@ -562,8 +446,6 @@
 
 <style lang="scss" scoped>
   
-  @import '@/static/css/components/demo_page_common.scss';
-  
   /* 内容容器 start */
   .bg-flex-shadow{
     background-color: #00C3FF;

basicPage/grid-layout/grid-layout.vue

@@ -20,7 +20,7 @@
             <!-- #endif-->
             <!-- #ifdef MP-WEIXIN -->
             <tn-grid-item :style="{width: gridItemWidth}">
-              <view class="icon__item--icon tn-cool-color-icon" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
+              <view class="icon__item--icon tn-cool-color-icon" :class="[$tn.color.getRandomCoolBgClass(index)]">
                 <view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
               </view>
             </tn-grid-item>
@@ -161,7 +161,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }

basicPage/icon/icon.vue

@@ -8,29 +8,53 @@
 		<!-- 页面内容 -->
 		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
 
-      <tn-sticky :customNavHeight="vuex_custom_bar_height">
+			<view class="search-fixed">
 				<view class="search-content">
-          <input class="search-content__input" placeholder-class="search-content__input-placeholder" placeholder="请输入图标名称吖" @input="saerchInput" />
+					<input class="search-content__input" placeholder-class="search-content__input-placeholder tn-color-blue"
+						placeholder="搜索 中文名/英文名" @input="saerchInput" />
+				</view>
+			</view>
+
+
+			<view class="" :style="{marginTop: vuex_custom_bar_height + 'px'}">
+
+				<block v-for="(item, index) in resultIconList" :key="index">
+
+					<!-- 分类标题-->
+					<view class="tn-text-center tn-text-xl tn-text-bold tn-margin-lg">
+						<text class="tn-icon-font"></text>
+						<text class="tn-padding-left-sm tn-padding-right-sm">{{ item.title }}</text>
+						<text class="tn-icon-font"></text>
 					</view>
-      </tn-sticky>
 
 					<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
-        <block v-for="(item, index) in resultIconList" :key="index">
+						<view v-for="(icons_item, icons_index) in item.icons" :key="icons_index"
-          <view
 							class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
-            :class="[{'icon__item--active': index === currentIconIndex}]"
+							:class="[{'icon__item--active': icons_index === currentIconIndex}]"
-            @click="clickIcon(index, item.name)"
+							@click="clickIcon(icons_index, icons_item.name, icons_item.icon)">
-          >
 							<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-              <view :class="[`tn-icon-${item.name}`]"></view>
+								<view :class="[`tn-icon-${icons_item.icon}`]"></view>
 							</view>
-            <view class="icon__item--title tn-text-ellipsis">{{ item.name }}</view>
+							<view class="icon__item--title tn-text-ellipsis tn-text-df tn-color-grey">{{ icons_item.icon }}</view>
+              <!-- <view class="icon__item--title tn-text-ellipsis tn-text-xs tn-color-grey">{{ icons_item.name }}</view> -->
 						</view>
+					</view>
+
 				</block>
 			</view>
+
 			<view class="tn-text-center tn-margin-bottom-xl">
-        <view>目前300+，里面缺少你想要的吗？</view>
+				<view>
-        <view>请前往图鸟语雀留言写下你的需求叭</view>
+          icon目前700+，支持
+          <text class="tn-color-orange tn-text-lg tn-padding-xs">中文、英文</text>
+          搜索
+        </view>
+				<button class=" tn-button--clear-style" open-type="feedback">
+					<view class="tn-margin tn-text-center">
+						<text>里面缺少你想要的吗？UI期待你的需求</text>
+						<text class="tn-color-blue">留言</text>
+					</view>
+				</button>
 			</view>
 
 			<view class="tn-padding-bottom"></view>
@@ -52,32 +76,71 @@
 				// 用户输入的内容
 				searchValue: '',
 				// 当前点击的图标序号
-        currentIconIndex: -1
+				currentIconIndex: -1,
 			}
 		},
 		computed: {
 			resultIconList() {
-        if (this.searchValue === '') return this.iconList
+				//filter会改变原数组，故使用深拷贝
-        return this.iconList.filter((item) => {
+				var newArr = JSON.parse(JSON.stringify(iconData.data))
-          return item.name.includes(this.searchValue)
+				if (!this.searchValue) return iconData.data
+				return newArr.filter((item1) => {
+					item1.icons = item1.icons.filter((item2) => {
+						if (item2.name.includes(this.searchValue) || item2.icon.includes(this.searchValue)) {
+							return item2
+						}
 					})
+					if (item1.icons.length > 0) {
+						return item1
+					}
+				})
+
+
 			}
 		},
 		methods: {
 			// input输入的内容
 			saerchInput(e) {
-        this.searchValue = e.target.value
+				//重新设置为-1，避免选中之前选中的图标
+				this.currentIconIndex=-1;
+				this.searchValue = e.target.value;
+				this.resultIconList
 			},
 			// 点击图标
-      clickIcon(index, name) {
+			clickIcon(index, name ,icon) {
 				this.currentIconIndex = index
-        this.$t.messageUtils.toast(name, false, null, 'none', 5000)
+				// this.$tn.message.toast(name, false, null, 'none', 5000)
+				//这里点击后直接复制图标名称。
+				uni.setClipboardData({
+					data: icon,
+					showToast: false,
+					success: () => {
+						console.log('success'); //复制成功
+						this.$tn.message.toast('已复制：' + icon, false, null, 'none', 5000)
+					}
+				});
+				// const save = function (e) {
+				//         e.clipboardData.setData('text/plain', name)
+				//         e.preventDefault() // 阻止默认行为
+				// }
+				// const once = {
+				//     once: true
+				// }
+				// document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
+				// document.execCommand('copy') // 执行copy方法
+
 			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	.search-fixed {
+		position: fixed;
+		width: 100%;
+		transition: all 0.25s ease-out;
+		z-index: 1;
+	}
 
 	/* 搜索框 start */
 	.search-content {
@@ -101,12 +164,14 @@
 			font-size: 24rpx;
 		}
 	}
+
 	/* 搜索框 end */
 
 	/* 图标容器 start */
-  .icon-shadow{
+	.icon-shadow {
 		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06);
 	}
+
 	.icon {
 		&__container {
 			margin-bottom: 30rpx;
@@ -151,18 +216,16 @@
 					opacity: 1;
 					transform: scale(1, 1);
 					background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
 				}
 			}
 
 			&--title {
 				width: 100%;
-        color: #78909C;
-        font-size: 28rpx;
 				text-align: center;
 			}
 		}
 	}
-  /* 图标容器 end */
 
+	/* 图标容器 end */
 </style>

basicPage/shadow/shadow.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="basic-shadow">
+  <view class="basic-shadow tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>阴影</tn-nav-bar>
@@ -8,20 +8,27 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="普通阴影">
-        <block v-if="shadowType === 'bg'">
+        <view class="shadow-content tn-shadow"></view>
-          <view
+        <view class="shadow-content tn-shadow-warp"></view>
-            class="shadow-content"
+      </demo-title>
-            :class="[shadowClass]"
+      
-          ></view>
+      <demo-title title="有色阴影">
-        </block>
+        <view class="shadow-content tn-bg-teal tn-shadow-teal"></view>
-        <block v-else>
+        <view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view>
-          <view
+      </demo-title>
-            class="shadow-image tn-shadow-blur"
+      
-          ></view>
+      <demo-title title="背景图片阴影">
-        </block>
+        <view class="shadow-content shadow-content__image tn-shadow-blur"></view>
-        <view style="visibility: hidden;height: 1px;">tuniao</view>
+      </demo-title>
-      </dynamic-demo-template>
+      
+      <demo-title title="文字阴影">
+        <view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo">
+          图鸟UI，专注UI开发
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -30,89 +37,43 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicShadow',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        shadowType: 'bg',
-        shadowColor: '',
-        shadowWarp: false,
-        
-        tips: ['无需依赖额外的样式文件','不使用任何组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '样式',
-                optional: ['背景阴影','图片阴影'],
-                methods: 'typeChange'
-              },
-              {
-                title: '颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              }
-            ]
-          }
-        ]
-      }
-    },
-    computed: {
-      shadowClass() {
-        let clazz = ''
-        if (this.shadowType === 'bg') {
-          if (this.shadowWarp) {
-            clazz += ` tn-shadow-warp`
-          } else {
-            if (this.shadowColor === '') {
-              clazz += ` tn-shadow`
-            } else {
-              clazz += ` ${this.shadowColor}`
-            }
-          }
-        }
-        
-        return clazz
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换阴影样式
-      typeChange(event) {
-        this.shadowType = event.index === 0 ? 'bg' : 'image'
-      },
-      // 切换阴影颜色
-      colorChange(event) {
-        this.shadowColor = event.index === 0 ? '' : 'tn-shadow-red'
     }
 
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
   
-  .shadow-content {
+  .basic-shadow {
-    width: 80%;
+    background-color: $tn-bg-gray-color;
-    height: 80rpx;
+    min-height: 100vh;
-    background-color: $tn-font-holder-color;
-    margin: 0 auto;
   }
   
-  .shadow-image {
+  .shadow-content {
-    width: 80%;
     height: 80rpx;
-    margin: 0 auto;
+    background-color: #FFFFFF;
+    margin: 30rpx 0;
+    
+    &__image {
       z-index: 1;
       background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
       background-size: cover;
       background-position: top;
       background-repeat: no-repeat;
     }
+    
+    &__text {
+      font-size: 60rpx;
+      text-align: center;
+    }
+  }
 </style>

basicPage/tag/tag.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="basic-tag">
+  <view class="basic-tag tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>标签</tn-nav-bar>
@@ -8,37 +8,94 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click" @modeClick="modeClick">
+      <demo-title title="基础">
-        <block v-if="singleTagFlag">
+        <tn-tag>标签</tn-tag>
-          <tn-tag :backgroundColor="backgroundColor" :fontColor="fontColor" :fontSize="fontSize" :shape="shape"
+      </demo-title>
-            :width="width" :height="height" :size="size" :padding="padding" :margin="margin" :plain="plain"
+      
-            :originLeft="originLeft" :originRight="originRight" :class="{'origin-demo':showOriginDemo}">
+      <demo-title title="大小">
-            演示标签
+        <view>
-          </tn-tag>
+          <tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
-        </block>
+          <tn-tag margin="10rpx 10rpx">标签</tn-tag>
-        <block v-else>
+          <tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+        <view class="tn-margin-top">
+          <tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="形状">
+        <view>
+          <tn-tag margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="radius" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="circle" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view>
+          <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+        <view>
+          <tn-tag backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="镂空">
+        <view>
+          <tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="标签使用">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="origin-demo">
+            <view class="origin-demo__tag">
+              <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
+            </view>
+          </view>
+          
           <!-- #ifdef H5 -->
           <view class="capsule">
-            <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" :plain="false">
+            <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
               <text class="tn-icon-add"></text>
             </tn-tag>
-            <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" fontColor="#080808" :plain="true">
+            <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
               2
             </tn-tag>
           </view>
           <!-- #endif -->
           <!-- #ifdef MP-WEIXIN -->
           <view class="capsule">
-            <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" :plain="false">
+            <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
               <text class="tn-icon-add"></text>
             </tn-tag>
-            <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" fontColor="#080808" :plain="true">
+            <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
               2
             </tn-tag>
           </view>
           <!-- #endif -->
-        </block>
+          
-      </dynamic-demo-template>
+          <tn-tag :plain="true" backgroundColor="#01BEFF" width="auto" margin="0px 30rpx">
+            <view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-center">
+              <view>带关闭按钮</view>
+              <view class="tn-icon-close tn-margin-left-xs"></view>
+            </view>
+          </tn-tag>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -47,213 +104,38 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'basicTag',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        backgroundColor: '',
-        fontColor: '',
-        fontSize: 0,
-        shape: '',
-        width: '',
-        height: '',
-        size: '',
-        padding: '',
-        margin: '',
-        plain: false,
-        originLeft: false,
-        originRight: false,
-
-        // 演示基准点控制
-        showOriginDemo: false,
-        
-        // 单双标签切换
-        singleTagFlag: true,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-tag组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '自定义大小',
-                optional: ['默认','自定义'],
-                methods: 'sizeChange'
-              },
-              {
-                title: '内置大小',
-                optional: ['默认','sm','lg'],
-                methods: 'innerSizeChange'
-              },
-              {
-                title: '形状',
-                optional: ['默认','圆角','椭圆','左半圆','右半圆'],
-                methods: 'shapeChange'
-              },
-              {
-                title: '镂空',
-                optional: ['默认','镂空'],
-                methods: 'plainChange'
-              },
-              {
-                title: '基准点',
-                optional: ['不设置','左基准','右基准'],
-                methods: 'originChange'
-              }
-            ]
-          },
-          {
-            name: '样式切换',
-            section: [
-              {
-                title: '单双标签',
-                optional: ['单标签','双标签'],
-                methods: 'singleTagChange'
-              }
-            ]
-          }
-        ]
-
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      modeClick(event) {
-        if (event.index === 0) {
-          this.singleTagFlag = true
-          this.$refs.demoTemplate.updateSectionBtnsValue(1, 0, 0)
     }
-      },
-      // 切换自定义颜色
-      colorChange(event) {
-        if (event.index === 0) {
-          this.backgroundColor = ''
-          this.fontColor = ''
-        } else {
-          this.backgroundColor = 'tn-bg-red'
-          this.fontColor = '#FFFFFF'
-        }
-      },
-      // 切换自定义大小
-      sizeChange(event) {
-        if (event.index === 0) {
-          this.width = ''
-          this.height = ''
-          this.padding = ''
-          this.margin = ''
-          this.fontSize = 0
-          this.size = ''
-          this.$refs.demoTemplate.updateSectionBtnsState(2, true)
-        } else {
-          this.width = '240rpx'
-          this.height = '80rpx'
-          this.padding = '10rpx 20rpx'
-          this.margin = '10rpx'
-          this.fontSize = 36
-          this.$refs.demoTemplate.updateSectionBtnsState(2, false)
-        }
-      },
-      // 切换按钮形状
-      shapeChange(event) {
-        switch (event.index) {
-          case 0:
-            this.shape = ''
-            break
-          case 1:
-            this.shape = 'radius'
-            break
-          case 2:
-            this.shape = 'circle'
-            break
-          case 3:
-            this.shape = 'circleLeft'
-            break
-          case 4:
-            this.shape = 'circleRight'
-            break
-        }
-      },
-      // 切换内置大小状态
-      innerSizeChange(event) {
-        this.size = event.index === 0 ? '' : event.name
-      },
-      // 切换镂空状态
-      plainChange(event) {
-        switch(event.index) {
-          case 0:
-            this.plain = false
-            this.fontColor = '#FFFFFF'
-            break
-          case 1:
-            this.plain = true
-            this.fontColor = 'tn-color-black'
-            break
-        }
-      },
-      // 切换基准点状态
-      originChange(event) {
-        switch (event.index) {
-          case 0:
-            this.showOriginDemo = false
-            this.originLeft = false
-            this.originRight = false
-            break
-          case 1:
-            this.showOriginDemo = true
-            this.originLeft = true
-            this.originRight = false
-            break
-          case 2:
-            this.showOriginDemo = true
-            this.originLeft = false
-            this.originRight = true
-            break
-        }
-      },
-      
-      // 切换单双标签
-      singleTagChange(event) {
-        this.singleTagFlag = event.index === 0
-      },
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
-  /* #ifdef H5 */
+  .basic-tag {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
   .origin-demo {
-    transition: all 0.3s ease;
+    width: 180rpx;
-    transform: scale(0.7);
+    height: 180rpx;
-  }
+    background-color: #FFFFFF;
-  /* #endif */
+    margin: 20rpx;
-  /* #ifdef MP-WEIXIN */
+    margin-right: 70rpx;
-  tn-tag {
+    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  /* #endif */
-</style>
     
-<style lang="scss">
+    &__tag {
-  /* #ifdef MP-WEIXIN */
+      position: absolute;
-  .origin-demo {
+      top: 0;
-    .tn-tag-class {
+      right: 0;
-      transition: all 0.3s ease;
+      transform: translate(50%, -50%);
-      transform: scale(0.7);
     }
   }
-  /* #endif */
 </style>

basicPage/test/test.vue

@@ -1,17 +1,35 @@
 <template>
-  <view class="tn-bg-red" style="height: 100vh;">
+  <view class="basic-test">
-    <view class="tabbar">
+    <swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
-      <view class="tabbar__bg" :style="wrapStyle"></view>
+      <swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
-      <view class="tabbar__list">
+        <view class="swiper__item__content" :class="[swiperContentClass(index)]">
-        <block v-for="(item, index) in tabbar" :key="index">
+          <image :src="item" mode="scaleToFill"></image>
-          <view :id="`tabbar_item_${index}`" class="tabbar__item" :class="[{'tabbar__item--active': index === currentTabbarIndex}]" @click="changeTabbar(index)">
-            <view class="tabbar__item__icon" :class="[item.icon]"></view>
-            <view class="tabbar__item__text">{{ item.name }}</view>
         </view>
-        </block>
+      </swiper-item>
+    </swiper>
+    
+    <swiper class="phone-swiper" :circular="true"
+      :current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange"> 
+      <swiper-item v-for="(item,index) in phoneSwiperList" :key="index" class="phone-swiper__item">
+        
+        <view class="tnphone-black-min phone-swiper__item__content wow fadeInLeft2" :class="[phoneSwiperContentClass(index)]">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
         		  </view>
-      <view class="tabbar__select-active-bg" :class="[showActiceBg ? 'tabbar__select-active-bg--show' : 'tabbar__select-active-bg--hide']" :style="activeBgStyle"></view>
+              
+              <view class="demo-image">
+                <image :src="item.url" mode="aspectFill"></image>
               </view>
+        
+        		</view>
+        	</view>
+        </view>
+        
+      </swiper-item>
+    </swiper>
   </view>
 </template>
 
@@ -20,226 +38,224 @@
     name: 'TestPage',
     data() {
       return {
-        wrapMaskPositionLeft: 0,
+        swiperList: [
-        activeBgPositionLeft: 0,
+          'https://resource.tuniaokj.com/images/swiper/spring.jpg',
-        showActiceBg: false,
+          'https://resource.tuniaokj.com/images/swiper/summer.jpg',
-        currentTabbarIndex: 0,
+          'https://resource.tuniaokj.com/images/swiper/autumn.jpg',
-        tabbarItemInfo: [],
+          'https://resource.tuniaokj.com/images/swiper/winter.jpg',
-        tabbar: [
+          'https://resource.tuniaokj.com/images/swiper/winter.jpg'
-          { name: 'home', icon: 'tn-icon-baby' },
+        ],
-          { name: 'home', icon: 'tn-icon-baby' },
+        phoneSwiperList: [{
-          { name: 'home', icon: 'tn-icon-baby' },
+          id: 0,
-          { name: 'home', icon: 'tn-icon-baby' },
+          type: 'image',
-          { name: 'home', icon: 'tn-icon-baby' }
+          name: '总有你想不到的创意',
-        ]
+          text: '海量分享',
-        
+          url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }, {
+          id: 1,
+          type: 'image',
+          name: '寻找一起成长的小伙伴',
+          text: '愉快玩耍',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
+        }, {
+          id: 2,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
+        }, {
+          id: 3,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
+        }],
+        currentSwiperIndex: 0,
+        phoneCurrentSwiperIndex: 0
       }
     },
     computed: {
-      wrapStyle() {
+      // 计算当前对应轮播前后的item对应的类
-        return {
+      swiperItemClass() {
-          '-webkit-mask-position': `${this.wrapMaskPositionLeft}px -1px, 100%`
+        return (index) => {
+          if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
+            return 'swiper__item--prev'
+          }
+          if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
+            return 'swiper__item--next'
+          }
+          if (this.currentSwiperIndex === index) {
+            return 'swiper__item--current'
+          }
         }
       },
-      activeBgStyle() {
+      // 计算轮播内容对应的类
-        return {
+      swiperContentClass() {
-          'left': `${this.activeBgPositionLeft}px`
+        return (index) => {
+          if (this.currentSwiperIndex === index) {
+            return 'swiper__item__content--current'
+          }
+          if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
+            return 'swiper__item__content--prev'
+          }
+          if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
+            return 'swiper__item__content--next'
+          }
+        }
+      },
+      // 计算轮播内容对应的类
+      phoneSwiperContentClass() {
+        return (index) => {
+          if (this.phoneCurrentSwiperIndex === index) {
+            return 'phone-swiper__item__content--current'
+          }
+          if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
+            return 'phone-swiper__item__content--prev'
+          }
+          if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
+            return 'phone-swiper__item__content--next'
+          }
         }
       }
     },
     onReady() {
-      this.$nextTick(() => {
+      
-        this.getTabbarItemInfo()
-        this.updateHollowsPosition()
-        this.updateActiveBgPosition(true)
-      })
     },
     methods: {
-      // 获取底部元素的位置
+      // 轮播图切换
-      getTabbarItemInfo() {
+      swiperChange(e) {
-        const view = uni.createSelectorQuery().in(this)
+        // console.log(e.detail.current);
-        for(let i = 0; i < this.tabbar.length; i++) {
+        this.currentSwiperIndex = e.detail.current
-          view.select('#tabbar_item_' + i).boundingClientRect()
-        }
-        view.exec(res => {
-          if (!res.length) {
-            setTimeout(() => {
-              this.getTabbarItemInfo()
-            }, 10)
-            return
-          }
-          
-          // 将信息存入数组中
-          res.map((item) => {
-            this.tabbarItemInfo.push({
-              left: item.left,
-              width: item.width
-            })
-          })
-          console.log(this.tabbarItemInfo)
-        })
       },
-      // 更新凹陷位置
+      phoneSwiperChange(e) {
-      updateHollowsPosition() {
+        this.phoneCurrentSwiperIndex = e.detail.current
-        const { width, left } = this.tabbarItemInfo[this.currentTabbarIndex]
-        // 计算掩模图片的宽高比
-        // const imageRatio = 200 / 92
-        // 计算定高的宽比
-        const imageFixedHeightWidthRatioValue = 300 * (uni.upx2px(64) / 92)
-        this.wrapMaskPositionLeft = left - ((imageFixedHeightWidthRatioValue - width) / 2)
-        console.log(imageFixedHeightWidthRatioValue, this.wrapMaskPositionLeft);
-      },
-      // 更新激活时背景的位置
-      updateActiveBgPosition(init = false) {
-        const { width, left } = this.tabbarItemInfo[this.currentTabbarIndex]
-        this.activeBgPositionLeft = left + ((width - uni.upx2px(100)) / 2)
-        if (!init) {
-          this.showActiceBg = false
-          setTimeout(() => {
-            this.showActiceBg = true
-          }, 150)
-        } else {
-          this.showActiceBg = true
-        }
-      },
-      // 修改当前选中的tabbar
-      changeTabbar(index) {
-        this.currentTabbarIndex = index
-        this.updateHollowsPosition()
-        this.updateActiveBgPosition()
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
-  
+  .basic-test {
-  .tabbar {
+    min-height: 100vh;
-    height: 100%;
-    height: 110rpx;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: transparent;
-    
-    &__bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      bottom: 0;
-      left: 0;
-      
-      // background-color: rgba(255, 255, 255, 0.3);
-      background-color: #FFFFFF;
-      // , linear-gradient(#000, #000)
-      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 61.5'%3E%3Cpath d='M100 0H0c32.9 0 49.3 61.5 100 61.5S167.1 0 200 0H100z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
-      // -webkit-mask-size: auto 50px, auto, cover;
-      -webkit-mask-size: auto 64rpx, cover;
-      -webkit-mask-repeat: no-repeat;
-      // -webkit-mask-position: 93.75px -1px, 100%;
-      -webkit-mask-composite: xor;   /*只显示不重合的地方， chorem 、safari 支持*/
-      // backdrop-filter: blur(5px);
-      z-index: 1;
-      transition: 0.5s;
   }
   
-    &__list {
+  .swiper {
-      position: absolute;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
     width: 100%;
-      height: 100%;
+    height: 400rpx;
-      display: flex;
+    
-      align-items: center;
+    /deep/ .uni-swiper-slides {
-      justify-content: space-between;
+      inset: 0 260rpx;
     }
     
     &__item {
-      height: 100%;
+      
+      &--prev {
+        left: -10rpx;
+      }
+      
+      &--next {
+        left: 10rpx;
+      }
+      
+      &--current {
+        left: 0px;
+      }
+      
+      &__content {
         width: 100%;
-      flex: 1;
+        height: 100%;
-      text-align: center;
+        margin: 0 auto;
-      font-size: 28rpx;
+        border-radius: 30rpx;
-      position: relative;
+        overflow: hidden;
+        transition: transform 0.25s ease;
+        transform: scale(0.8);
         
-      &--active {
+        &--prev {
-        .tabbar__item__icon {
+          transform: scale(0.8) perspective(200rpx) rotateY(10deg);
-          top: -28rpx;
         }
         
-        .tabbar__item__text {
+        &--next {
-          opacity: 1;
+          transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
-        }
         }
         
-      &__icon {
+        &--current {
-        font-size: 56rpx;
+          transform: scale(1);
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 10px;
-        transition: 0.5s;
         }
         
-      &__text {
+        image {
-        position: absolute;
+          width: 100%;
-        left: 0;
+          height: 100%;
-        right: 0;
-        bottom: 10rpx;
-        transition: 0.5s;
-        opacity: 0;
         }
       }
-    
-    &__select-active-bg {
-      position: absolute;
-      width: 100rpx;
-      height: 100rpx;
-      border-radius: 50%;
-      background-color: #FFFFFF;
-      transition: 0.5s;
-      z-index: -1;
-      
-      &--hide {
-        top: calc(110rpx + 50rpx);
-      }
-      
-      &--show {
-        top: -48rpx;
-      }
     }
   }
   
-  // .wrap {
+  .phone-swiper {
-  //   width: 100%;
+    margin-top: 180rpx;
-  //   height: 100rpx;
+    height: 900rpx;
     
-  //   position: fixed;
+    /deep/ .uni-swiper-slides {
-  //   bottom: 0;
+      inset: 0 190rpx;
-  //   left: 0;
+    }
-  //   right: 0;
-  //   // background-color: rgba(255, 255, 255, 0.3);
-  //   background-color: #FFFFFF;
-  //   // -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 28'%3E%3Cpath d='M13.37 9.37C17.23 20.36 27.7 28.23 40 28.23s22.77-7.87 26.63-18.85C68.62 3.73 74.01 0 80 0H0c5.99 0 11.38 3.73 13.37 9.37z'/%3E%3C/svg%3E"), linear-gradient(red, red);
-  //   // -webkit-mask-size: 140rpx, 100%;
-  //   // -webkit-mask-repeat: no-repeat;
-  //   // -webkit-mask-position: 0 0, 0;
-  //   // -webkit-mask-composite: xor;   /*只显示不重合的地方， chorem 、safari 支持*/
-  //   // mask-composite: exclude; /* 排除，只显示不重合的地方， firefox 支持 */
-  //   // backdrop-filter: blur(5px)
     
-  //   &::before {
+    &__item {
-  //     content: '';
+      
-  //     position: absolute;
+      &__content {
-  //     width: 100%;
+        transition: transform 0.25s ease;
-  //     height: 100%;
+        transform: scale(0.8);
-  //     left: 0;
+        
-  //     top: 0;
+        &--prev {
-  //     box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
+          transform: scale(0.8) perspective(200rpx) rotateY(10deg);
-  //   }
+        }
-  // }
+        
+        &--next {
+          transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
+        }
+        
+        &--current {
+          transform: scale(1);
+        }
+      }
+      
+      .demo-image {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        image {
+          width: 100%;
+          height: 730rpx;
+        }
+      }
+    }
+  }
+  
+  
+  /* tnphone-black-min 细边框 start */
+  .tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; cursor: default; position: relative}
+  .tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
+  .tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
+  .tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
+  .tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+  /* tnphone-black-min 细边框 end */
 </style>

basicPage/utils/color/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <view class="basic-utils__color tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Color工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="获取内置随机颜色">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="bg-color-item" :class="randomBgColorClass">背景颜色</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="bg-color-item" :class="randomColorClass">文字颜色</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="hex与rgb互转">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <view class="tn-margin-left">
+              <tn-input v-model="hexRGBValue"></tn-input>
+            </view>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsColor',
+    components: {demoTitle},
+    data() {
+      return {
+        randomBgColorClass: '',
+        randomColorClass: '',
+        randomCoolBgColorClass: '',
+        hexRGBValue: '#01BEFF',
+        rgbFlag: false
+      }
+    },
+    methods: {
+      // 获取随机背景颜色
+      getRandomBgColor() {
+        this.randomBgColorClass = this.$tn.color.getRandomColorClass()
+      },
+      // 获取随机颜色
+      getRandomColor() {
+        this.randomColorClass = this.$tn.color.getRandomColorClass('color')
+      },
+      // 获取随机酷炫背景颜色
+      getRandomCoolColor() {
+        this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
+      },
+      // 将hex与rgb互转
+      convertToRGBOrHex() {
+        if (this.rgbFlag) {
+          this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
+        } else {
+          this.hexRGBValue = this.$tn.color.hexToRGB(this.hexRGBValue)
+        }
+        this.rgbFlag = !this.rgbFlag
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__color {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+    
+    .bg-color-item {
+      height: 100%;
+      width: auto;
+      padding: 10rpx 20rpx;
+    }
+  }
+</style>

basicPage/utils/message/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="basic-utils__message tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Message工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="uni内置toast框">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>默认toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带图标 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带透明mask toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>设置时间 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>设置回调 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>关闭 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="uni内置loading框">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>弹出loading框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>关闭loading框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="uni内置modal框">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>默认modal框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>隐藏取消按钮 modal框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>修改文字 modal框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsMessage',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 弹出toast
+      openToast_1() {
+        this.$tn.message.toast('弹出toast')
+      },
+      openToast_2() {
+        this.$tn.message.toast('弹出toast icon', false, null, 'success')
+      },
+      openToast_3() {
+        this.$tn.message.toast('弹出toast mask', true)
+      },
+      openToast_4() {
+        this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
+      },
+      openToast_5() {
+        this.$tn.message.toast('弹出toast cb', true, () => {
+          setTimeout(() => {
+            this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
+          }, 500)
+        })
+      },
+      // 关闭Toast
+      closeToast() {
+        this.$tn.message.closeToast()
+      },
+      
+      
+      // 弹出loading
+      openLoading() {
+        this.$tn.message.loading('弹出loading')
+        setTimeout(() => {
+          this.closeLoading()
+        }, 3000)
+      },
+      // 关闭loading
+      closeLoading() {
+        this.$tn.message.closeLoading()
+      },
+      
+      
+      // 弹出modal
+      openModal_1() {
+        this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$tn.message.toast('点击了确认按钮')
+        }, true, () => {
+          this.$tn.message.toast('点击了取消按钮')
+        })
+      },
+      openModal_2() {
+        this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$tn.message.toast('点击了确认按钮')
+        }, false, null)
+      },
+      openModal_3() {
+        this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$tn.message.toast('点击了跳转按钮')
+        }, true, () => {
+          this.$tn.message.toast('点击了拒绝按钮')
+        }, "跳转登录", "拒绝登录")
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__message {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>

basicPage/utils/number/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="basic-utils__number tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Number工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="超过指定长度自动添加'+'号">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过2位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(56) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过2位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(100) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过3位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(899, 3) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过3位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(1000, 3) }}</view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="往数字前添加'0'">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>只有一位时会往前面添加'0'</view>
+              <view>{{ $tn.number.formatNumberAddZero(6) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过两位时不会往前面添加'0'</view>
+              <view>{{ $tn.number.formatNumberAddZero(16) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过两位时不会往前面添加'0'</view>
+              <view>{{ $tn.number.formatNumberAddZero(106) }}</view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="数值转换为带单位金额">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>不带单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(100) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>不带单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(100.88) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带K单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(1000) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带K单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(1032.89) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带W单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(10000) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带W单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(10875.90) }}</view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="获取随机值">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+          <tn-form-item>
+            <view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsNumber',
+    components: {demoTitle},
+    data() {
+      return {
+        randomValue: '',
+        intRandomValue: '',
+      }
+    },
+    methods: {
+      // 获取随机值
+      getRandomValue() {
+        this.randomValue = this.$tn.number.random(0, 100.99)
+      },
+      // 获取整数随机值
+      getIntRandomValue() {
+        this.intRandomValue = this.$tn.number.randomInt(0, 100)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__number {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>

basicPage/utils/string/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="basic-utils__string tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>String工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="去除空格">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <tn-input v-model="trimValue" :trim="false"></tn-input>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <demo-title title="大写转指定连接符">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <tn-input v-model="humpCharValue"></tn-input>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <demo-title title="将自定的连接符转为大写">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <tn-input v-model="charHumpValue"></tn-input>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsString',
+    components: {demoTitle},
+    data() {
+      return {
+        trimValue: '      前后都有空格啊       ',
+        humpCharValue: 'TuniaoUI',
+        charHumpValue: 'Tuniao_u_i'
+      }
+    },
+    methods: {
+      // 处理去除空格
+      handlerTrim() {
+        this.trimValue = this.$tn.string.trim(this.trimValue)
+      },
+      // 处理将大写字符串转换为指定的连接符连接的字符串
+      handlerHumpChar() {
+        this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
+      },
+      // 处理将指定的连接字符连接的字符串转换为大写的字符串
+      handlerCharHump() {
+        this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__string {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>

common/config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  baseUrl: 'http://api.youzixy.com'
+}

componentsPage/action-sheet/action-sheet.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="demoTips" :sectionList="sectionList" :full="false" @click="click">
-        <tn-button fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
       </dynamic-demo-template>
 
     </view>
@@ -116,7 +116,7 @@
       // 点击了选项
       clickActionSheetItem(index) {
         if (index === 1) {
-          this.$t.messageUtils.toast('选择正确')
+          this.$tn.message.toast('选择正确')
         }
         this.closedActionSheet()
       },

componentsPage/calendar/calendar.vue

@@ -10,7 +10,7 @@
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
         <view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center">
-          <tn-button style="width: 100%;" width="100%" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
+          <tn-button style="width: 100%;" width="100%" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
           <view v-if="result !== ''" class="calendar-result tn-border-dashed">
             {{ result }}
           </view>

componentsPage/check-box/check-box.vue

@@ -0,0 +1,95 @@
+<template>
+  <view class="components-check-box tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>按钮</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-checkbox v-model="value1" name="选项1">选项1</tn-checkbox>
+        <tn-checkbox v-model="value1" name="选项2" disabled>选项2(不可点击)</tn-checkbox>
+      </demo-title>
+      
+      <demo-title title="圆形选框">
+        <tn-checkbox-group shape="circle">
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="竖直排列">
+        <tn-checkbox-group width="100%" wrap>
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="禁止点击标签">
+        <tn-checkbox-group disabledLabel>
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <view>
+          <tn-checkbox-group :size="26" :iconSize="18">
+            <tn-checkbox name="选项1">选项1</tn-checkbox>
+            <tn-checkbox name="选项2">选项2</tn-checkbox>
+            <tn-checkbox name="选项3" :size="36" :iconSize="30">选项3</tn-checkbox>
+          </tn-checkbox-group>
+        </view>
+        <view class="tn-margin-top">
+          <tn-checkbox-group :size="46" :iconSize="40">
+            <tn-checkbox name="选项1">选项1</tn-checkbox>
+            <tn-checkbox name="选项2">选项2</tn-checkbox>
+            <tn-checkbox name="选项3">选项3</tn-checkbox>
+          </tn-checkbox-group>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-checkbox-group activeColor="#31E749">
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3" activeColor="#E83A30">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="自定义图标">
+        <tn-checkbox-group>
+          <tn-checkbox name="选项1" iconName="star">选项1</tn-checkbox>
+          <tn-checkbox name="选项2" iconName="fire">选项2</tn-checkbox>
+          <tn-checkbox name="选项3" iconName="like">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsCheckBox',
+    components: {demoTitle},
+    data() {
+      return {
+        value1: false,
+        value2: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

componentsPage/collapse/collapse.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-collapse">
+  <view class="components-collapse tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Collapse折叠面板</tn-nav-bar>
@@ -8,28 +8,65 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="手风琴模式">
-        <tn-collapse v-if="!customCollapse" :accordion="accordion" :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle" :arrow="arrow" :arrowColor="arrowColor" :hoverClass="hoverClass" @change="change">
+        <tn-collapse>
-          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="item.disabled" :align="align">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
-            <view class="collapse-item-content">
+            <view class="tn-text-break-word">
               {{ item.content }}
             </view>
           </tn-collapse-item>
         </tn-collapse>
-        <tn-collapse v-else :accordion="accordion" :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle" :arrow="arrow" :arrowColor="arrowColor" :hoverClass="hoverClass" @change="change">
+      </demo-title>
-          <tn-collapse-item title="足迹" :align="align">
+      
-            <tn-list-cell>广州</tn-list-cell>
+      <demo-title title="允许全部展开">
-            <tn-list-cell>深圳</tn-list-cell>
+        <tn-collapse :accordion="false">
-            <tn-list-cell>佛山</tn-list-cell>
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
-          </tn-collapse-item>
+            <view class="tn-text-break-word">
-          <tn-collapse-item title="时间">
+              {{ item.content }}
-            <tn-list-cell>12月</tn-list-cell>
+            </view>
-            <tn-list-cell>11月</tn-list-cell>
-            <tn-list-cell>10月</tn-list-cell>
           </tn-collapse-item>
         </tn-collapse>
-      </dynamic-demo-template>
+      </demo-title>
       
+      <demo-title title="禁止第二项展开">
+        <tn-collapse>
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="index === 1">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="关闭点击效果">
+        <tn-collapse hoverClass="">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="隐藏箭头">
+        <tn-collapse :arrow="false">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <tn-collapse :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" align="center">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
     </view>
 
   </view>
@@ -37,158 +74,46 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsCollapse',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
         list: [
           {
             title: '关雎',
-            content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
+            content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。'
-            disabled: false
           },
           {
             title: '长歌行',
-            content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！',
+            content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！'
-            disabled: false
           },
           {
             title: '秋风辞',
-            content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！',
+            content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！'
-            disabled: false
           }
         ],
-        accordion: true,
+        headStyle: {
-        headStyle: {},
+          backgroundColor: '#EFEFEF'
-        bodyStyle: {},
-        itemStyle: {},
-        arrow: true,
-        arrowColor: '#AAAAAA',
-        hoverClass: 'tn-hover',
-        align: 'left',
-        
-        customCollapse: false,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-collapse、tn-collapse-item组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '手风琴模式',
-                optional: ['开启','关闭'],
-                methods: 'accoraionChange'
         },
-              {
+        bodyStyle: {
-                title: '禁用打开',
+          backgroundColor: '#EFEFEF'
-                optional: ['无','禁止第二项打开'],
-                methods: 'disabledChange'
         },
-              {
+        itemStyle: {
-                title: '点击效果',
+          backgroundColor: '#EFEFEF',
-                optional: ['默认','无'],
+          borderRadius: '20rpx',
-                methods: 'hoverClassChange'
+          overflow: 'hidden'
-              },
-              {
-                title: '箭头显示',
-                optional: ['显示','隐藏'],
-                methods: 'arrowChange'
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'styleChange'
-              },
-              {
-                title: '自定义Item内容',
-                optional: ['默认','自定义'],
-                methods: 'customItemChange'
         }
-            ]
-          }
-        ]
-
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换手风琴模式
-      accoraionChange(event) {
-        this.accordion = event.index === 0 ? true : false
-      },
-      // 切换Item禁止打开
-      disabledChange(event) {
-        if (event.index === 0) {
-          this.list[1].disabled = false
-        } else {
-          this.list[1].disabled = true
     }
-        
-      },
-      // 切换点击效果
-      hoverClassChange(event) {
-        this.hoverClass = event.index === 0 ? 'tn-hover' : ''
-      },
-      // 切换箭头显示
-      arrowChange(event) {
-        this.arrow = event.index === 0 ? true : false
-      },
-      // 切换自定义样式
-      styleChange(event) {
-        switch (event.index) {
-          case 0:
-            this.headStyle = {}
-            this.bodyStyle = {}
-            this.itemStyle = {}
-            this.arrowColor = '#AAAAAA'
-            this.align = 'left'
-            break
-          case 1:
-            this.headStyle = {
-              borderBottom: '1rpx solid #AAAAAA'
-            }
-            this.bodyStyle = {
-              margin: '10rpx'
-            }
-            this.itemStyle = {
-              'text-indent': '2em'
-            }
-            this.arrowColor = '#E6E6E6'
-            this.align = 'center'
-            break
-        }
-      },
-      // 切换自定义item内容
-      customItemChange(event) {
-        switch (event.index) {
-          case 0:
-            this.customCollapse = false
-            this.$refs.demoTemplate.updateSectionBtnsState(1, true)
-            break
-          case 1:
-            this.customCollapse = true
-            this.$refs.demoTemplate.updateSectionBtnsState(1, false)
-            break
-        }
-      },
-      
-      // 面板发生了改变
-      change() {
-        setTimeout(() => {
-          this.$refs.demoTemplate.updateSectionScrollView()
-        }, 300)
-      }
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
-  .collapse-item-content {
+  .components-collapse {
-    word-wrap: break-word;
+    background-color: $tn-bg-gray-color;
   }
 </style>

componentsPage/count-down/count-down.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-count_down">
+  <view class="components-count_down tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>countdown倒计时</tn-nav-bar>
@@ -8,25 +8,47 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基本使用">
-        <tn-count-down
+        <tn-count-down :timestamp="3600"></tn-count-down>
-          :timestamp="timestamp"
+      </demo-title>
-          :backgroundColor="backgroundColor"
+      
-          :fontColor="fontColor"
+      <demo-title title="显示边框">
-          :fontSize="fontSize"
+        <tn-count-down :timestamp="3600" :showBorder="true"></tn-count-down>
-          :separator="separator"
+      </demo-title>
-          :separatorColor="separatorColor"
+      
-          :separatorSize="separatorSize"
+      <demo-title title="中文分割时间">
-          :showBorder="showBorder"
+        <tn-count-down :timestamp="3600" separator="cn"></tn-count-down>
-          :borderColor="borderColor"
+      </demo-title>
-          :showDays="showDays"
+      
-          :showHours="showHours"
+      <demo-title title="天数为零时不隐藏">
-          :showMinutes="showMinutes"
+        <tn-count-down :timestamp="3600" :hideZeroDay="true"></tn-count-down>
-          :showSeconds="showSeconds"
+      </demo-title>
-          :hideZeroDay="hideZeroDay"
+      
-          @end="countDownEnd"
+      <demo-title title="显示天">
-        ></tn-count-down>
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="false" :showMinutes="false" :showSeconds="false"></tn-count-down>
-      </dynamic-demo-template>
+      </demo-title>
+      
+      <demo-title title="显示天时">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="false" :showSeconds="false"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示天时分">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="false"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示天时分秒">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="true"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <tn-count-down :timestamp="3600" :fontSize="60" :separatorSize="60"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-count-down :timestamp="3600" backgroundColor="tn-main-gradient-indigo" fontColor="#FFFFFF"></tn-count-down>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
       
     </view>
 
@@ -35,134 +57,22 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsCountDown',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        timestamp: 3600,
-        backgroundColor: '#FFFFFF',
-        fontSize: 30,
-        fontColor: '#080808',
-        separator: 'en',
-        separatorSize: 30,
-        separatorColor: '#080808',
-        showBorder: true,
-        borderColor: '#080808',
-        showDays: true,
-        showHours: true,
-        showMinutes: true,
-        showSeconds: true,
-        hideZeroDay: false,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-count-down组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '时间',
-                optional: ['360', '3600', '543000'],
-                methods: 'timestampChange',
-                current: 1
-              },
-              {
-                title: '大小',
-                optional: ['24', '30', '45'],
-                methods: 'sizeChange',
-                current: 1
-              },
-              {
-                title: '边框显示',
-                optional: ['显示','隐藏'],
-                methods: 'borderChange'
-              },
-              {
-                title: '分隔符',
-                optional: ['冒号','中文'],
-                methods: 'separatorChange'
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'customColorChange'
-              },
-              {
-                title: '自定义格式',
-                optional: ['日时分秒','时分秒'],
-                methods: 'customFormatChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换时间
-      timestampChange(event) {
-        this.timestamp = Number(event.name)
-      },
-      // 切换边框显示
-      borderChange(event) {
-        this.showBorder = event.index === 0 ? true : false
-      },
-      // 切换分隔符
-      separatorChange(event) {
-        this.separator = event.index === 0 ? 'en' : 'cn'
-      },
-      // 切换大小
-      sizeChange(event) {
-        this.fontSize = Number(event.name)
-        this.separatorSize = Number(event.name)
-      },
-      // 切换自定义颜色
-      customColorChange(event) {
-        switch(event.index) {
-          case 0:
-            this.backgroundColor = '#FFFFFF'
-            this.separatorColor = '#080808'
-            this.fontColor = '#080808'
-            this.borderColor = '#080808'
-            break
-          case 1:
-            this.backgroundColor = '#E6E6E6'
-            this.separatorColor = '#01BEFF'
-            this.fontColor = '#3D7EFF'
-            this.borderColor = '#31C9E8'
-            break
     }
-      },
-      // 切换自定义格式
-      customFormatChange(event) {
-        switch(event.index) {
-          case 0:
-            this.showDays = true
-            this.showHours = true
-            this.showMinutes = true
-            this.showSeconds = true
-            break
-          case 1:
-            this.showDays = false
-            this.showHours = true
-            this.showMinutes = true
-            this.showSeconds = true
-            break
-        }
-      },
-      
-      // 倒计时结束
-      countDownEnd() {
-        this.$t.messageUtils.toast('倒计时结束')
-      }
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
+  .components-count_down {
+    min-height: 100vh;
+  }
 </style>

componentsPage/count-scroll/count-scroll.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-count_scroll">
+  <view class="components-count_scroll tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>countScroll数字滚动</tn-nav-bar>
@@ -8,16 +8,37 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基本使用">
-        <tn-count-scroll
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
-          :value="value"
+          <view>
-          :height="height"
+            <tn-count-scroll :value="888.88"></tn-count-scroll>
-          :fontColor="fontColor"
+          </view>
-          :fontSize="fontSize"
+          <view class="tn-margin-left">
-          :bold="bold"
+            <tn-count-scroll :value="9999"></tn-count-scroll>
-          :duration="duration"
+          </view>
-        ></tn-count-scroll>
+        </view>
-      </dynamic-demo-template>
+      </demo-title>
+      
+      <demo-title title="加长持续时间">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-count-scroll :value="888.88" :duration="0.5"></tn-count-scroll>
+          </view>
+          <view class="tn-margin-left">
+            <tn-count-scroll :value="9999" :duration="3"></tn-count-scroll>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="字体加大加粗">
+        <tn-count-scroll :value="888.88" :height="100" :fontSize="100" :bold="true"></tn-count-scroll>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-count-scroll :value="888.88" fontColor="#E88C30"></tn-count-scroll>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -26,85 +47,22 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsCountTo',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        value: 888.88,
-        height: 32,
-        fontColor: '#080808',
-        fontSize: 32,
-        bold: false,
-        duration: 1.2,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-count-scroll组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '值',
-                optional: ['90','1234','888.88'],
-                methods: 'valueChange',
-                current: 2
-              },
-              {
-                title: '持续时间',
-                optional: ['默认','0.5', '3'],
-                methods: 'durationChange'
-              },
-              {
-                title: '加粗',
-                optional: ['默认','加粗'],
-                methods: 'boldChange'
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'customStyleChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换值
-      valueChange(event) {
-        this.value = Number(event.name)
-      },
-      // 切换持续时间
-      durationChange(event) {
-        this.duration = event.index === 0 ? 1.2 : Number(event.name)
-      },
-      // 切换加粗
-      boldChange(event) {
-        this.bold = event.index === 0 ? false : true
-      },
-      // 切换自定义样式
-      customStyleChange(event) {
-        switch(event.index) {
-          case 0:
-            this.height = 32
-            this.fontColor = '#080808'
-            this.fontSize = 32
-            break
-          case 1:
-            this.height = 80
-            this.fontColor = '#E88C30'
-            this.fontSize = 80
-            break
     }
-      },
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
+  .components-count_scroll {
+    min-height: 100vh;
+  }
 </style>

componentsPage/count-to/count-to.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-count_to">
+  <view class="components-count_to tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>countTo数字跳转</tn-nav-bar>
@@ -8,16 +8,37 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基本使用">
-        <tn-count-to
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
-          :startVal="startVal"
+          <view>
-          :endVal="endVal"
+            <tn-count-to :startVal="0" :endVal="1000"></tn-count-to>
-          :fontColor="fontColor"
+          </view>
-          :fontSize="fontSize"
+          <view class="tn-margin-left">
-          :decimals="decimals"
+            <tn-count-to :startVal="100" :endVal="2000"></tn-count-to>
-          :bold="bold"
+          </view>
-        ></tn-count-to>
+        </view>
-      </dynamic-demo-template>
+      </demo-title>
+      
+      <demo-title title="显示小数">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-count-to :startVal="0" :endVal="1000.9" :decimals="1"></tn-count-to>
+          </view>
+          <view class="tn-margin-left">
+            <tn-count-to :startVal="0" :endVal="1000.99" :decimals="2"></tn-count-to>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="字体加大加粗显示">
+        <tn-count-to :startVal="0" :endVal="1000" :bold="true" :fontSize="100"></tn-count-to>
+      </demo-title>
+      
+      <demo-title title="自定义字体颜色">
+        <tn-count-to :startVal="0" :endVal="1000" fontColor="#A4E82F"></tn-count-to>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -26,85 +47,22 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsCountTo',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        fontColor: '#080808',
-        fontSize: 50,
-        startVal: 0,
-        endVal: 1000,
-        duration: 2000,
-        decimals: 0,
-        bold: false,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-count-to组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '滚动范围',
-                optional: ['0-1000','100-2500'],
-                methods: 'valChange'
-              },
-              {
-                title: '小数显示位数',
-                optional: ['不显示','1','2'],
-                methods: 'decimalsChange'
-              },
-              {
-                title: '加粗',
-                optional: ['默认','加粗'],
-                methods: 'boldChange'
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'customStyleChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换开始结束值
-      valChange(event) {
-        const value = event.name.split('-')
-        this.startVal = Number(value[0])
-        this.endVal = Number(value[1])
-      },
-      // 切换小数显示
-      decimalsChange(event) {
-        this.decimals = event.index === 0 ? 0 : Number(event.name)
-      },
-      // 切换加粗
-      boldChange(event) {
-        this.bold = event.index === 0 ? false : true
-      },
-      // 切换自定义样式
-      customStyleChange(event) {
-        switch(event.index) {
-          case 0:
-            this.fontColor = '#080808'
-            this.fontSize = 50
-            break
-          case 1:
-            this.fontColor = '#A4E82F'
-            this.fontSize = 100
-            break
     }
-      },
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
+  .components-count_to {
+    min-height: 100vh;
+  }
 </style>

componentsPage/empty/empty.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="components-empty tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>空页面</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="内置图标">
+        <block v-for="(item, index) in inlineMode" :key="index">
+          <view class="empty__item">
+            <tn-empty :mode="item"></tn-empty>
+          </view>
+        </block>
+      </demo-title>
+      
+      <demo-title title="自定义图标">
+        <view class="empty__item">
+          <tn-empty icon="moon-fill" text="夜深人静"></tn-empty>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义图片">
+        <view class="empty__item">
+          <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png" text="空空如也"></tn-empty>
+        </view>
+        <block v-for="(value, key, index) in imgEmpty" :key="index">
+          <view class="empty__item">
+            <tn-empty :icon="value" :mode="key"></tn-empty>
+          </view>
+        </block>
+      </demo-title>
+      
+      <demo-title title="隐藏文字">
+        <view class="empty__item">
+          <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png" mode=""></tn-empty>
+        </view>
+        <view class="empty__item tn-margin-top">
+          <tn-empty icon="help" mode=""></tn-empty>
+        </view>
+      </demo-title>
+      
+      <demo-title title="带跳转按钮">
+        <view class="empty__item">
+          <tn-empty icon="moon-fill" text="夜深人静">
+            <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">看看小视频</tn-button>
+          </tn-empty>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <view class="empty__item">
+          <tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
+        </view>
+        <view class="empty__item tn-margin-top">
+          <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsEmpty',
+    components: { demoTitle },
+    data() {
+      return {
+        inlineMode: ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'],
+        imgEmpty: {
+          cart: '/componentsPage/static/images/empty/cart.jpg',
+          comment: '/componentsPage/static/images/empty/comment.jpg',
+          data: '/componentsPage/static/images/empty/data.jpg',
+          network: '/componentsPage/static/images/empty/network.jpg',
+          page: '/componentsPage/static/images/empty/page.jpg',
+          permission: '/componentsPage/static/images/empty/permission.jpg',
+          search: '/componentsPage/static/images/empty/search.jpg'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-empty {
+    background-color: $tn-bg-gray-color;
+  }
+  
+  .empty {
+    &__item {
+      background-color: #FFFFFF;
+      padding: 20rpx 0;
+    }
+  }
+</style>

componentsPage/fab/fab.vue

@@ -0,0 +1,196 @@
+<template>
+
+  <view class="components-fab">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>fab悬浮按钮</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view>请点击下边悬浮按钮</view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <tn-fab
+      :btnList="btnList"
+      :left="left"
+      :right="right"
+      :bottom="bottom"
+      :width="width"
+      :height="height"
+      :iconSize="iconSize"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :icon="icon"
+      :animationType="animationType"
+      :showMask="showMask"
+      @click="clickFabItem"
+    >
+    </tn-fab>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsFab',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        
+        left: 'auto',
+        right: 40,
+        bottom: 100,
+        width: 88,
+        height: 88,
+        iconSize: 64,
+        backgroundColor: '#01BEFF',
+        fontColor: '#FFFFFF',
+        icon: 'open',
+        animationType: 'up',
+        showMask: true,
+        btnList: [
+          {
+            icon: 'logo-tuniao',
+            text: '图鸟科技',
+            bgColor: '#E72F8C'
+          },
+          {
+            text: 'UI',
+            textSize: 32,
+            bgColor: '#FF7043'
+          },
+          {
+            icon: 'share-triangle',
+            iconSize: 32,
+            iconColor: '#AAAAAA',
+            bgColor: '#24F083',
+          }
+        ],
+        
+        
+        tips: ['无需依赖额外的样式文件','使用tn-fab组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '悬浮按钮位置',
+                optional: ['左侧','右侧'],
+                methods: 'positionChange',
+                current: 1
+              },
+              {
+                title: '自定义悬浮按钮信息',
+                optional: ['默认','自定义'],
+                methods: 'customFabChange'
+              },
+              {
+                title: '自定义尺寸',
+                optional: ['默认','自定义'],
+                methods: 'sizeChange'
+              },
+              {
+                title: '动画类型',
+                optional: ['向上弹出','圆环弹出'],
+                methods: 'animationChange'
+              },
+              {
+                title: '遮罩显示',
+                optional: ['显示','隐藏'],
+                methods: 'maskChange'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 切换按钮位置
+      positionChange(event) {
+        switch (event.index) {
+          case 0:
+            this.left = 40
+            this.right = 'auto'
+            this.bottom = 100
+            break
+          case 1:
+            this.left = 'auto'
+            this.right = 40
+            this.bottom = 100
+            break
+        }
+      },
+      // 切换悬浮按钮信息
+      customFabChange(event) {
+        switch (event.index) {
+          case 0:
+            this.backgroundColor = '#01BEFF'
+            this.fontColor = '#FFFFFF'
+            this.icon = 'open'
+            break
+          case 1:
+            this.backgroundColor = 'tn-cool-bg-color-1'
+            this.fontColor = '#FFFFFF'
+            this.icon = 'up'
+            break
+        }
+      },
+      // 切换尺寸信息
+      sizeChange(event) {
+        switch (event.index) {
+          case 0:
+            this.width = 88
+            this.height = 88
+            this.iconSize = 64
+            break
+          case 1:
+            this.width = 64
+            this.height = 64
+            this.iconSize = 48
+            break
+        }
+      },
+      // 切换遮罩信息
+      maskChange(event) {
+        switch (event.index) {
+          case 0:
+            this.showMask = true
+            break
+          case 1:
+            this.showMask = false
+            break
+        }
+      },
+      // 切换动画
+      animationChange(event) {
+        switch (event.index) {
+          case 0:
+            this.animationType = 'up'
+            break
+          case 1:
+            this.animationType = 'around'
+            break
+        }
+      },
+      
+      
+      // 点击悬浮按钮的内容
+      clickFabItem(e) {
+        this.$tn.message.toast(`点击了第 ${e.index} 个选项`)
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

componentsPage/form/form.vue

@@ -58,7 +58,7 @@
           <tn-checkbox v-model="model.agreement" @change="agreementCheckChange"></tn-checkbox>
           <view class="agreement-text">勾选同意当前协议</view>
         </view>
-        <tn-button width="100%" @click="submit">提交</tn-button>
+        <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
       </dynamic-demo-template>
       
       <!-- 性别选项 -->
@@ -201,7 +201,7 @@
             {
             	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
             	validator: (rule, value, callback) => {
-            		return this.$t.test.chinese(value);
+            		return this.$tn.test.chinese(value);
             	},
             	message: '姓名必须为中文',
             	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
@@ -448,7 +448,7 @@
           if (valid) {
             // 验证通过
             if (!this.model.agreement) {
-              this.$t.messageUtils.toast('请勾选协议')
+              this.$tn.message.toast('请勾选协议')
               return
             }
           } else {
@@ -480,15 +480,15 @@
       // 获取验证码
       getCode() {
         if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$tn.message.loading('正在获取验证码')
           setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
+            this.$tn.message.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$tn.message.toast('验证码已经发送')
             // 通知组件开始计时
             this.$refs.code.start()
           }, 2000)
         } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
         }
       },
       // 验证码倒计时时间改变

componentsPage/goods-nav/goods-nav.vue

@@ -0,0 +1,126 @@
+<template>
+  <view class="components-goods-nav tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>商品导航</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础" :contentPadding="false">
+        <tn-goods-nav></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="显示阴影" :contentPadding="false">
+        <tn-goods-nav :shadow="true"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="选项设置为头像" :contentPadding="false">
+        <tn-goods-nav :options="avatarOptions"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="设置角标" :contentPadding="false">
+        <tn-goods-nav :options="countOptions"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="设置边距按钮" :contentPadding="false">
+        <tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="设置圆角按钮" :contentPadding="false">
+        <tn-goods-nav buttonType="round"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="不设置选项" :contentPadding="false">
+        <tn-goods-nav :options="[]"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="自定义颜色" :contentPadding="false">
+        <tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="固定在底部" :contentPadding="false">
+        <tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
+      </demo-title>
+      
+      <view style="padding-bottom: 88rpx;"></view>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsGoodsNav',
+    components: { demoTitle },
+    data() {
+      return {
+        avatarOptions: [{
+          avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'
+        },{
+          icon: 'service',
+          text: '客服'
+        },{
+          icon: 'star',
+          text: '收藏'
+        }],
+        countOptions: [{
+          avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+          count: 10
+        },{
+          icon: 'service',
+          text: '客服',
+          count: 100
+        },{
+          icon: 'star',
+          text: '收藏'
+        }],
+        customOptions: [{
+          avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+          count: 10,
+          countBackgroundColor: '#E83A30'
+        },{
+          icon: 'service',
+          text: '客服',
+          count: 100,
+          countBackgroundColor: 'transparent',
+          countFontColor: '#E83A30'
+        },{
+          icon: 'star',
+          text: '收藏',
+          iconColor: '#838383',
+          fontColor: '#080808'
+        }],
+        customButtonGroups: [{
+          text: '加入购物车',
+          backgroundColor: 'tn-cool-bg-color-8',
+          color: '#FFFFFF'
+        },{
+          text: '结算',
+          backgroundColor: 'tn-cool-bg-color-8--reverse',
+          color: '#FFFFFF'
+        }]
+      }
+    },
+    methods: {
+      // 选项点击事件
+      onOptionClick(e) {
+        this.$tn.message.toast(`点击了第${e.index}个选项`)
+      },
+      // 按钮点击事件
+      onButtonClick(e) {
+        this.$tn.message.toast(`点击了第${e.index}个按钮`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-goods-nav {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>

componentsPage/image-upload/image-upload.vue

@@ -57,7 +57,7 @@
           </view>
         </tn-image-upload>
         <view class="tn-flex tn-margin-top-xs tn-flex-row-center">
-          <tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
+          <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="upload">上传</tn-button>
           <tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx" @tap="clear">清空列表</tn-button>
         </view>
       </dynamic-demo-template>
@@ -203,7 +203,7 @@
         console.log('上传文件列表发生改变', lists, index);
         this.lists.splice(0, this.lists.length)
         this.$nextTick(() => {
-          this.lists = this.$t.deepClone(lists)
+          this.lists = this.$tn.deepClone(lists)
           if (this.customStyle && lists.length > 4) {
             this.fullWindowsScroll = true
           } else {

componentsPage/index-list/avatar/index-list.vue

@@ -0,0 +1,70 @@
+<template>
+
+  <view class="components-index-list">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
+        <view v-for="(item, index) in list" :key="index">
+          <tn-index-anchor :index="item.letter"></tn-index-anchor>
+          <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
+            <image class="index-list-item__image" src="/static/favicon.ico"></image>
+            <view class="index-list-item__name">{{ data_item.name }}</view>
+          </view>
+        </view>
+      </tn-index-list>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import indexList from '../../mock/index.list.js'
+  const letterArr = indexList.list.map(val => {
+    return val.letter
+  })
+  export default {
+    name: 'componentsIndexListAvatar',
+    data() {
+      return {
+        // 滚动的距离
+        scrollTop: 0,
+        // 索引列表
+        indexList: letterArr,
+        list: indexList.list
+      }
+    },
+    onPageScroll(e) {
+      this.scrollTop = e.scrollTop
+    },
+    methods: {
+      
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .index-list-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    
+    &__image {
+      width: 100rpx;
+      height: 100rpx;
+      margin: 8rpx 8rpx;
+      margin-right: 10rpx;
+    }
+  }
+</style>

componentsPage/index-list/base/index-list.vue

@@ -0,0 +1,63 @@
+<template>
+
+  <view class="components-index-list">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
+        <view v-for="(item, index) in list" :key="index">
+          <tn-index-anchor :index="item.letter"></tn-index-anchor>
+          <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
+            {{ data_item.name }}
+          </view>
+        </view>
+      </tn-index-list>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import indexList from '../../mock/index.list.js'
+  const letterArr = indexList.list.map(val => {
+    return val.letter
+  })
+  export default {
+    name: 'componentsIndexListBase',
+    data() {
+      return {
+        // 滚动的距离
+        scrollTop: 0,
+        // 索引列表
+        indexList: letterArr,
+        list: indexList.list
+      }
+    },
+    onPageScroll(e) {
+      this.scrollTop = e.scrollTop
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .index-list-item {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 20rpx 24rpx;
+    overflow: hidden;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    line-height: 48rpx;
+    background-color: #FFFFFF;
+  }
+</style>

componentsPage/index-list/index-list.vue

@@ -7,15 +7,9 @@
 
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
-      
+      <multiple-options-demo
-      <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
+        :list="optionsList"
-        <view v-for="(item, index) in list" :key="index">
+      ></multiple-options-demo>
-          <tn-index-anchor :index="item.letter"></tn-index-anchor>
-          <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
-            {{ data_item.name }}
-          </view>
-        </view>
-      </tn-index-list>
 
     </view>
 
@@ -24,68 +18,23 @@
 </template>
 
 <script>
-  import indexList from '../mock/index.list.js'
+  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
-  const letterArr = indexList.list.map(val => {
+
-    return val.letter
-  })
   export default {
     name: 'componentsIndexList',
+    components: { multipleOptionsDemo },
     data() {
       return {
-        // 滚动的距离
+        // 选项列表数据
-        scrollTop: 0,
+        optionsList: [
-        scrollTopArr: [0, 0],
+          { title: '普通列表', desc: '传入列表数据即可使用', url: '/componentsPage/index-list/base/index-list' },
-        selectIndexScrollTop: [0 ,0],
+          { title: '带头像列表', desc: '通过自定义列表来实现', url: '/componentsPage/index-list/avatar/index-list' }
-        // 索引列表
+        ]
-        indexList: letterArr,
-        list: indexList.list
-      }
-    },
-    onPageScroll(e) {
-      this.scrollTop = e.scrollTop
-    },
-    methods: {
-      onScroll(e, index) {
-        // this.scrollTop = e.detail.scrollTop
-        this.$set(this.scrollTopArr, index - 1, e.detail.scrollTop)
-      },
-      
-      // 侧边栏索引选中事件
-      indexListSelect(e, index) {
-        this.$set(this.selectIndexScrollTop, index - 1, e.scrollTop)
       }
     }
-
   }
 </script>
 
 <style lang="scss" scoped>
-  .index-list-item {
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 20rpx 24rpx;
-    overflow: hidden;
-    color: $tn-font-color;
-    font-size: 28rpx;
-    line-height: 48rpx;
-    background-color: #FFFFFF;
-  }
   
-  .index-list-image-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    overflow: hidden;
-    color: $tn-font-color;
-    font-size: 28rpx;
-    
-    &__image {
-      width: 100rpx;
-      height: 100rpx;
-      margin: 8rpx 8rpx;
-      margin-right: 10rpx;
-    }
-  }
 </style>

componentsPage/input/input.vue

@@ -0,0 +1,231 @@
+<template>
+  <view class="components-input tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Input输入框</tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input v-model="inputValue" type="text" placeholder="请输入文本"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="禁止输入" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" disabled></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="对齐方式" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">居中对齐</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" inputAlign="center"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">右对齐</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" inputAlign="right"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" border></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" border borderColor="#01BEFF"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="右边显示图标" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" showRightIcon rightIcon="code"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="文本域" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本域</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="textarea" placeholder="请输入文本"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="内置类型" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">整数</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="number" placeholder="请输入整数"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">小数</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="digit" placeholder="请输入小数"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">身份证</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="idcard" placeholder="请输入身份证"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">电话号码</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="密码输入框" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">密码</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="password" placeholder="请输入密码"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">密码</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="password" placeholder="请输入密码" :passwordIcon="false"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="弹出选择" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">业务</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="select" placeholder="请选择业务类型" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="配合formItem使用" :contentPadding="false">
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="姓名">
+            <tn-input type="text" placeholder="请输入姓名"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="姓名" labelPosition="top" required>
+            <tn-input type="text" placeholder="请输入姓名"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="联系电话" :labelWidth="200">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="联系电话" :labelWidth="200" labelAlign="center">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="联系电话" :labelWidth="200" labelAlign="right">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="验证码" :labelWidth="200">
+            <tn-input type="text" placeholder="请输入验证码"></tn-input>
+            <tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">获取验证码</tn-button>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="身份证" :labelWidth="200" leftIcon="identity">
+            <tn-input type="idcard" placeholder="请输入身份证号码"></tn-input>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+    <!-- 业务类型select -->
+    <tn-select
+      v-model="selectShow"
+      mode="single"
+      :list="selectList"
+      @confirm="businessSelectConfirm"
+    ></tn-select>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  
+  export default {
+    name: 'ComponentsInput',
+    components: { demoTitle },
+    data() {
+      return {
+        inputValue: '',
+        selectShow: false,
+        selectList: [
+          {
+            label: '免费',
+            value: 1101
+          },
+          {
+            label: '会员',
+            value: 1102
+          },
+          {
+            label: '全新开发',
+            value: 1103
+          }
+        ]
+      }
+    },
+    methods: {
+      businessSelectConfirm() {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-input {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+    
+    .content {
+      background-color: #FFFFFF;
+      
+      &__title {
+        padding: 30rpx;
+      }
+      &__data {
+        margin: 10rpx 0;
+        margin-right: 30rpx;
+      }
+    }
+  }
+</style>

componentsPage/keyboard/keyboard.vue

@@ -8,18 +8,18 @@
 		<!-- 页面内容 -->
 		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
 
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+			<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true"
+				@click="click">
 				<view v-if="mode === 'number' || mode === 'card'" class="number-value">
-          <tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容" @click="showKeyboard"></tn-input>
+					<tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容"
-          <tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx" height="70rpx" @click="clearInputValue">清空</tn-button>
+						@click="showKeyboard"></tn-input>
+					<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx"
+						height="70rpx" @click="clearInputValue">清空</tn-button>
 				</view>
 				<view v-else class="car-value">
 					<block v-for="(item, index) in 8" :key="index">
-            <view
+						<view class="car-input" :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
-              class="car-input"
+							@tap="chooseLicensePlateNumber(index)">
-              :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
-              @tap="chooseLicensePlateNumber(index)"
-            >
 							<block v-if="index === 7 && !licensePlateValue[index]">
 								<view class="new-energy-car">
 									<view class="icon tn-icon-add"></view>
@@ -27,7 +27,12 @@
 								</view>
 							</block>
 							<block v-else>
-                {{ licensePlateValue[index] || '' }}
+								<block v-if="licensePlateValue[index]===''">
+
+								</block>
+								<block v-else>
+									{{ licensePlateValue[index]}}
+								</block>
 							</block>
 						</view>
 						<view class="car-point" v-if="index === 1">
@@ -40,19 +45,9 @@
 		</view>
 
 		<!-- 键盘 -->
-    <tn-keyboard
+		<tn-keyboard v-model="value" :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled"
-      v-model="value"
+			:switchEnMode="switchEnMode" :tooltip="tooltip" :mask="mask" @change="onChange" @cancel="onCancel"
-      :mode="mode"
+			@confirm="onConfirm" @backspace="onBackspace"></tn-keyboard>
-      :dotEnabled="dotEnabled"
-      :randomEnabled="randomEnabled"
-      :switchEnMode="switchEnMode"
-      :tooltip="tooltip"
-      :mask="mask"
-      @change="onChange"
-      @cancel="onCancel"
-      @confirm="onConfirm"
-      @backspace="onBackspace"
-    ></tn-keyboard>
 
 	</view>
 
@@ -62,7 +57,9 @@
 	import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
 	export default {
 		name: 'componentsKeyboard',
-    components: {dynamicDemoTemplate},
+		components: {
+			dynamicDemoTemplate
+		},
 		data() {
 			return {
 				value: false,
@@ -76,44 +73,41 @@
 				// 输入的值
 				inputValue: '',
 				// 输入的车牌
-        licensePlateValue: ['','','','','','','',''],
+				licensePlateValue: ['', '', '', '', '', '', '', ''],
 				// 当前选择输入的车牌号码位置
 				currentLicensePlateIndex: 0,
 
-        tips: ['无需依赖额外的样式文件','使用tn-keyboard组件'],
+				tips: ['无需依赖额外的样式文件', '使用tn-keyboard组件'],
-        sectionList: [
+				sectionList: [{
-          {
 					name: '参数切换',
-            section: [
+					section: [{
-              {
 							title: '模式',
-                optional: ['数字','身份证','车牌'],
+							optional: ['数字', '身份证', '车牌'],
 							methods: 'modeChange'
 						},
 						{
 							title: '显示点',
-                optional: ['显示','隐藏'],
+							optional: ['显示', '隐藏'],
 							methods: 'dotEnabledChange'
 						},
 						{
 							title: '打乱顺序',
-                optional: ['是','否'],
+							optional: ['是', '否'],
 							methods: 'randomEnabledChange',
 							current: 1
 						},
 						{
 							title: '显示顶部工具栏',
-                optional: ['显示','隐藏'],
+							optional: ['显示', '隐藏'],
 							methods: 'tooltipChange'
 						},
 						{
 							title: '遮罩显示',
-                optional: ['是','否'],
+							optional: ['是', '否'],
 							methods: 'maskChange'
 						}
 					]
-          }
+				}]
-        ]
 			}
 		},
 		watch: {
@@ -162,7 +156,7 @@
 						break
 					case 2:
 						this.mode = 'car'
-            this.licensePlateValue = ['','','','','','','','']
+						this.licensePlateValue = ['', '', '', '', '', '', '', '']
 						this.$refs.demoTemplate.updateSectionBtnsState(1, false)
 						break
 				}
@@ -194,19 +188,19 @@
 					this.inputValue += e
 				} else if (this.mode === 'car') {
 					// 判断输入的值是否正确
-          if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) {
+					if (this.currentLicensePlateIndex === 0 && !this.$tn.test.chinese(e)) {
-            this.$t.messageUtils.toast('车牌归属地选择错误')
+						this.$tn.message.toast('车牌归属地选择错误')
 						return
-          } else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) {
+					} else if (this.currentLicensePlateIndex === 1 && !this.$tn.test.letter(e)) {
-            this.$t.messageUtils.toast('车牌归属地字母选择错误')
+						this.$tn.message.toast('车牌归属地字母选择错误')
 						return
 					}
-          if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) {
+					if (this.currentLicensePlateIndex !== 0 && !this.$tn.test.enOrNum(e)) {
-            this.$t.messageUtils.toast('车牌号码选择错误')
+						this.$tn.message.toast('车牌号码选择错误')
 						return
 					}
 					// this.licensePlateValue[this.currentLicensePlateIndex] = e
-          this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
+					this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e+"")
 					this.currentLicensePlateIndex++
 					// 判断车牌是否已经选择完成
 					if (this.currentLicensePlateIndex === 8) {
@@ -216,11 +210,11 @@
 			},
 			// 点击了取消按钮
 			onCancel() {
-        this.$t.messageUtils.toast('点击了取消按钮')
+				this.$tn.message.toast('点击了取消按钮')
 			},
 			// 点击了确认按钮
 			onConfirm() {
-        this.$t.messageUtils.toast('点击了确认按钮')
+				this.$tn.message.toast('点击了确认按钮')
 				this.value = false
 			},
 			// 点击了退格按钮
@@ -260,7 +254,6 @@
 </script>
 
 <style lang="scss" scoped>
-  
 	.number-value {
 		display: flex;
 		align-items: center;

componentsPage/landscape/landscape.vue

@@ -0,0 +1,185 @@
+<template>
+
+  <view class="components-landscape">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>压屏窗</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showLandscape">弹出压屏窗</tn-button></view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- 压屏窗-->
+    <tn-landscape
+      :show="show"
+      :closeBtn="closeBtn"
+      :closeColor="closeColor"
+      :closeSize="closeSize"
+      :closePosition="closePosition"
+      :closeTop="closeTop"
+      :closeRight="closeRight"
+      :closeBottom="closeBottom"
+      :closeLeft="closeLeft"
+      :mask="mask"
+      :maskCloseable="maskCloseable"
+      @close="closeLandscape"
+    >
+      <image src="https://resource.tuniaokj.com/images/landscape/2022-new-year.png" mode="widthFix"></image>
+    </tn-landscape>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  
+  export default {
+    name: 'ComponentsLandscape',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        show: false,
+        closeBtn: true,
+        closeColor: '',
+        closeSize: 0,
+        closePosition: 'rightTop',
+        closeTop: 0,
+        closeRight: 0,
+        closeBottom: 0,
+        closeLeft: 0,
+        mask: true,
+        maskCloseable: true,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-landscape组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '关闭按钮',
+                optional: ['显示','隐藏'],
+                methods: 'closeBtnChange'
+              },
+              {
+                title: '关闭按钮位置',
+                optional: ['左上','右上','底部'],
+                methods: 'closePositionChange',
+                current: 1
+              },
+              {
+                title: '自定义关闭按钮',
+                optional: ['默认','自定义'],
+                methods: 'customCloseChange'
+              },
+              {
+                title: '遮罩',
+                optional: ['显示','隐藏'],
+                methods: 'maskChange'
+              },
+              {
+                title: '点击遮罩关闭',
+                optional: ['允许','不允许'],
+                methods: 'maskCloseableChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出压屏窗
+      showLandscape() {
+        this.openLandscape()
+      },
+      // 切换关闭按钮显示隐藏
+      closeBtnChange(event) {
+        switch (event.index) {
+          case 0:
+            this.closeBtn = true
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2], true)
+            break
+          case 1:
+            this.closeBtn = false
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2], false)
+            break
+        }
+        this.openLandscape()
+      },
+      // 切换关闭按钮位置
+      closePositionChange(event) {
+        switch (event.index) {
+          case 0:
+            this.closePosition = 'leftTop'
+            break
+          case 1:
+            this.closePosition = 'rightTop'
+            break
+          case 2:
+            this.closePosition = 'bottom'
+            break
+        }
+        this.$refs.demoTemplate.updateSectionBtnsValue(0, 2, 0)
+        this.customCloseChange({index: 0})
+        this.openLandscape()
+      },
+      // 切换自定义关闭按钮样式
+      customCloseChange(event) {
+        if (event.index === 0) {
+          this.closeTop = 0
+          this.closeRight = 0
+          this.closeBottom = 0
+          this.closeLeft = 0
+          this.closeColor = ''
+          this.closeSize = 0
+        } else if (event.index === 1) {
+          if (this.closePosition === 'leftTop') {
+            this.closeTop = -40
+            this.closeLeft = 30
+          } else if (this.closePosition === 'rightTop') {
+            this.closeTop = -40
+            this.closeRight = 30
+          } else if (this.closePosition === 'bottom') {
+            this.closeBottom = -60
+          }
+          this.closeColor = '#E83A30'
+          this.closeSize = 60
+        }
+        this.openLandscape()
+      },
+      // 切换遮罩显示隐藏
+      maskChange(event) {
+        this.mask = event.index === 0 ? true : false
+        this.openLandscape()
+      },
+      // 切换遮罩关闭状态
+      maskCloseableChange(event) {
+        this.maskCloseable = event.index === 0 ? true : false
+        this.openLandscape()
+      },
+      
+      // 打开压屏窗
+      openLandscape() {
+        this.show = true
+      },
+      // 关闭压屏窗
+      closeLandscape() {
+        this.show = false
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

componentsPage/lazy-load/lazy-load.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="components-lazy-load">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>懒加载</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="content">
+        <block v-for="(item, index) in list" :key="index">
+          <view class="item">
+            <tn-lazy-load
+              :index="index"
+              :image="item.src"
+              :threshold="-450"
+              :height="400"
+              imgMode="aspectFill"
+            ></tn-lazy-load>
+          </view>
+        </block>
+      </view>
+      
+      <tn-load-more :status="status" @loadmore="getData"></tn-load-more>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsLazyLoad',
+    data() {
+      return {
+        status: 'loadmore',
+        list: [],
+        data: [
+          { src: 'https://resource.tuniaokj.com/images/shop/bag1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/bag2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/banner1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/banner2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/banner3.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/card.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/computer1.jpg' },
+          { src: 'error.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/computer2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/content.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/cup1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/cup2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/office.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/pillow.jpg' },
+          { src: 'error.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/sticker.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/watch1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/watch2.jpg' },
+          { src: 'error.jpg' }
+        ]
+      }
+    },
+    onLoad() {
+      this.getData()
+    },
+    onReachBottom() {
+      uni.$emit('tOnLazyLoadReachBottom')
+      this.getData()
+    },
+    methods: {
+      getData() {
+        let index = 0
+        this.status = 'loading'
+        setTimeout(() => {
+          for (let i = 0; i < 10; i++) {
+            index = this.$tn.number.randomInt(0, this.data.length - 1)
+            this.list.push({
+              src: this.data[index].src
+            })
+          }
+          this.status = 'loadmore'
+        }, 1500)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 30rpx;
+    
+    .item {
+      flex: 0 0 335rpx;
+      height: 400rpx;
+      margin-bottom: 20rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+    }
+  }
+</style>

componentsPage/list/list.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-list">
+  <view class="components-list tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>列表</tn-nav-bar>
@@ -8,37 +8,197 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="基础">
+        <view>
           <tn-list-view
-          :backgroundColor="viewBackgroundColor"
+            unlined="bottom"
-          :fontColor="viewFontColor"
+            :customTitle="true"
-          :fontSize="viewFontSize"
-          :title="viewTitle"
-          :unlined="viewUnlined"
-          :card="viewCard"
-          :marginTop="viewMarginTop"
           >
-          <block v-if="viewCustomTitle">
+            <template slot="title">
-            <view slot="title" class="list-title-container">
+              <view class="custom-title">
-              <tn-button class="list-title-button">设置</tn-button>
+                <tn-button shape="" backgroundColor="tn-main-gradient-indigo" @click="openOptions">设置</tn-button>
               </view>
-          </block>
+            </template>
-          <block v-for="(item, index) in 3" :key="index">
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
-            <tn-list-cell
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
-              :backgroundColor="cellBackgroundColor"
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
-              :fontColor="cellFontColor"
-              :fontSize="cellFontSize"
-              :arrow="cellArrow"
-              :arrowRight="cellArrowRight"
-              :hover="cellHover"
-              :radius="cellRadius"
-              :unlined="cellUnlined"
-              :lineLeft="cellLineLeft"
-              :lineRight="cellLineRight"
-            >选项 {{ index }}</tn-list-cell>
-          </block>
           </tn-list-view>
-      </dynamic-demo-template>
+        </view>
+        <view class="tn-margin-top">
+          <tn-list-view
+            :card="true"
+            title="卡片式列表"
+            backgroundColor="#EFEFEF"
+          >
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
+          </tn-list-view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="列表项单独使用">
+        <view>
+          <tn-list-cell>
+            普通列表
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell :radius="true">
+            圆角列表
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-discover tn-color-gray"></view>
+                <view class="list__left__text">图标 + 文字</view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-image-text">
+              <view class="list__left">
+                <image src="/static/favicon.ico" class="list__left__image"></image>
+                <view class="list__left__text">图片 + 文字</view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-order tn-color-indigo"></view>
+                <view class="list__left__text">文本</view>
+              </view>
+              <view class="list__right">
+                <view class="tn-text-sm tn-color-gray">定一个小目标吧</view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-upload tn-color-cyan"></view>
+                <view class="list__left__text">按钮</view>
+              </view>
+              <view class="list__right">
+                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm">
+                  <text class="tn-icon-upload tn-margin-right-xs"></text>上传
+                </tn-button>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view>
+                <view class="list__left__text">标签</view>
+              </view>
+              <view class="list__right">
+                <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">篮球</tn-tag>
+                <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">足球</tn-tag>
+                <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">小球</tn-tag>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangered"></view>
+                <view class="list__left__text">头像组</view>
+              </view>
+              <view class="list__right">
+                <tn-avatar-group :lists="avatarGroupList" size="sm"></tn-avatar-group>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+      </demo-title>
+      
+      <demo-title title="聊天示例">
+        <tn-list-view title="消息列表" unlined="bottom">
+          <tn-list-cell :unlined="true">
+            <view class="message">
+              <view class="message__left">
+                <tn-avatar src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>
+              </view>
+              <view class="message__middle">
+                <view class="message__name">小图鸟</view>
+                <view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
+              </view>
+              <view class="message__right">
+                <view class="message__time">13:14</view>
+                <view class="message__tips">
+                  <tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle" width="auto" size="sm">99</tn-tag>
+                </view>
+              </view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell :unlined="true">
+            <view class="message">
+              <view class="message__left">
+                <tn-avatar src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar>
+              </view>
+              <view class="message__middle">
+                <view class="message__name">小图鸟</view>
+                <view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
+              </view>
+              <view class="message__right">
+                <view class="message__time">13:14</view>
+                <view class="message__tips">
+                  <text class="message__tips__icon tn-icon-sound-close"></text>
+                </view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+      <tn-modal
+        v-model="showListOptions"
+        :custom="true"
+        padding="0"
+      >
+        <tn-list-view>
+          <tn-list-cell>
+            <view class="list__options">
+              <view class="list__options__title">下划线</view>
+              <view class="list__options__switch"><tn-switch v-model="cellShowBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell v-if="!cellUnlined">
+            <view class="list__options">
+              <view class="list__options__title">长下划线</view>
+              <view class="list__options__switch"><tn-switch v-model="cellLongBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="list__options">
+              <view class="list__options__title">箭头</view>
+              <view class="list__options__switch"><tn-switch v-model="cellArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell v-if="cellArrow">
+            <view class="list__options">
+              <view class="list__options__title">无边距箭头</view>
+              <view class="list__options__switch"><tn-switch v-model="cellNoPaddingArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </tn-modal>
 
     </view>
 
@@ -47,260 +207,159 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsList',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        viewBackgroundColor: '',
+        showListOptions: false,
-        viewFontColor: '',
+        cellShowBorderLine: true,
-        viewFontSize: 0,
+        cellLongBorderLine: false,
-        viewTitle: '',
+        cellNoPaddingArrow: false,
-        viewCustomTitle: false,
-        viewCard: false,
-        viewMarginTop: '',
-        viewUnlined: 'all',
         
-        cellBackgroundColor: '',
+        cellArrow: false,
-        cellFontColor: '',
-        cellFontSize: 0,
-        cellArrow: true,
         cellArrowRight: true,
-        cellRadius: false,
         cellUnlined: false,
         cellLineLeft: true,
         cellLineRight: true,
-        cellHover: false,
         
-        tips: ['无需依赖额外的样式文件','使用tn-list-view、tn-list-cell组件'],
+        avatarGroupList: [
-        sectionList: [
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
-            name: '容器参数',
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-            section: [
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'viewColorChange'
-              },
-              {
-                title: '自定义大小',
-                optional: ['默认','自定义'],
-                methods: 'viewSizeChange'
-              },
-              {
-                title: '标题类型',
-                optional: ['空白','文字标题','自定义标题'],
-                methods: 'viewTitleChange'
-              },
-              {
-                title: '容器类型',
-                optional: ['默认','卡片'],
-                methods: 'viewContainerChange'
-              },
-              {
-                title: '边框类型',
-                optional: ['全部显示','上边框','下边框','不显示'],
-                methods: 'viewBoardChange',
-                current: 3
-              }
-            ]
-          },
-          {
-            name: '列表参数',
-            section: [
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'cellColorChange'
-              },
-              {
-                title: '自定义大小',
-                optional: ['默认','自定义'],
-                methods: 'cellSizeChange'
-              },
-              {
-                title: '显示类型',
-                optional: ['默认','圆角'],
-                methods: 'cellRadiusChange'
-              },
-              {
-                title: '箭头',
-                optional: ['隐藏','显示'],
-                methods: 'cellArrowChange',
-                current: 1
-              },
-              {
-                title: '箭头边距',
-                optional: ['默认','无边距'],
-                methods: 'cellArrowRightChange'
-              },
-              {
-                title: '显示底边',
-                optional: ['显示','隐藏'],
-                methods: 'cellUnlinedChange',
-              },
-              {
-                title: '底边边距',
-                optional: ['默认','无边距'],
-                methods: 'cellLineChange',
-              },
-              {
-                title: '点击效果',
-                optional: ['无','有'],
-                methods: 'cellHoverChange',
-              }
         ]
       }
-        ]
+    },
+    watch: {
+      cellShowBorderLine(val) {
+        if (val) {
+          this.cellUnlined = false
+        } else {
+          this.cellUnlined = true
+        }
+      },
+      cellLongBorderLine(val) {
+        if (val) {
+          this.cellLineLeft = false
+          this.cellLineRight = false
+        } else {
+          this.cellLineLeft = true
+          this.cellLineRight = true
+        }
+      },
+      cellNoPaddingArrow(val) {
+        if (val) {
+          this.cellArrowRight = false
+        } else {
+          this.cellArrowRight = true
+        }
       }
     },
     methods: {
-      click(event) {
+      // 弹出设置弹框
-        this[event.methods] && this[event.methods](event)
+      openOptions() {
+        this.showListOptions = true
       },
-      // 切换容器颜色
+      // 关闭设置弹框
-      viewColorChange(event) {
+      closeOptions() {
-        if (event.index === 0) {
+        this.showListOptions = false
-          this.viewBackgroundColor = ''
-          this.viewFontColor = ''
-        } else {
-          this.viewBackgroundColor = '#F8F7F8'
-          this.viewFontColor = 'tn-color-grey'
       }
-      },
-      // 切换容器大小
-      viewSizeChange(event) {
-        if (event.index === 0) {
-          this.viewFontSize = 0
-          this.viewMarginTop = ''
-        } else {
-          this.viewFontSize = 32
-          this.viewMarginTop = '48rpx'
     }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换容器标题
-      viewTitleChange(event) {
-        switch(event.index) {
-          case 0:
-            this.viewTitle = ''
-            this.viewCustomTitle = false
-            break
-          case 1:
-            this.viewTitle = '请选择对应的选项'
-            this.viewCustomTitle = false
-            break
-          case 2:
-            this.viewTitle = ''
-            this.viewCustomTitle = true
-            break
-        }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换容器类型
-      viewContainerChange(event) {
-        this.viewCard = event.index === 0 ? false : true
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换容器边框类型
-      viewBoardChange(event) {
-        switch(event.index) {
-          case 0:
-            this.viewUnlined = ''
-            break
-          case 1:
-            this.viewUnlined = 'bottom'
-            break
-          case 2:
-            this.viewUnlined = 'top'
-            break
-          case 3:
-            this.viewUnlined = 'all'
-            break
-        }
-      },
-      
-      
-      // 切换列表颜色
-      cellColorChange(event) {
-        if (event.index === 0) {
-          this.cellBackgroundColor = ''
-          this.cellFontColor = ''
-        } else {
-          this.cellBackgroundColor = '#D6F4FA'
-          this.cellFontColor = 'tn-color-grey'
-        }
-      },
-      // 切换列表大小
-      cellSizeChange(event) {
-        if (event.index === 0) {
-          this.cellFontSize = 0
-        } else {
-          this.cellFontSize = 36
-        }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换列表圆角
-      cellRadiusChange(event) {
-        this.cellRadius = event.index === 0 ? false : true
-      },
-      // 切换列表箭头显示
-      cellArrowChange(event) {
-        if (event.index === 0) {
-          this.cellArrow = false
-          this.$refs.demoTemplate.updateSectionBtnsState(4, false)
-        } else {
-          this.cellArrow = true
-          this.$refs.demoTemplate.updateSectionBtnsState(4, true)
-        }
-      },
-      // 切换列表箭头贴边
-      cellArrowRightChange(event) {
-        this.cellArrowRight = event.index === 0 ? true : false
-      },
-      // 切换列表底边显示
-      cellUnlinedChange(event) {
-        if (event.index === 0) {
-          this.cellUnlined = false
-          this.$refs.demoTemplate.updateSectionBtnsState(6, true)
-        } else {
-          this.cellUnlined = true
-          this.$refs.demoTemplate.updateSectionBtnsState(6, false)
-        }
-      },
-      // 切换列表底边的边距
-      cellLineChange(event) {
-        if (event.index === 0) {
-          this.cellLineLeft = true
-          this.cellLineRight = true
-        } else if (event.index === 1) {
-          this.cellLineLeft = false
-          this.cellLineRight = false
-        }
-      },
-      // 切换列表点击效果
-      cellHoverChange(event) {
-        this.cellHover = event.index === 0 ? false : true
-      },
-
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
   
-  .list-title-container {
+  .components-list {
-    display: flex;
+    background-color: $tn-bg-gray-color;
-    justify-content: flex-end;
+    min-height: 100vh;
-    padding: 10rpx;
+  }
   
-    .list-title-button {
+  .custom-title {
-      width: 160rpx !important;
+    display: flex;
-      height: 46rpx !important;
+    align-items: flex-end;
-      color: #FFFFFF;
+    justify-content: flex-end;
-      margin: 10rpx !important;
+    padding: 10rpx 20rpx;
+  }
+  
+  .list__options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .list {
+    &__left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      
+      &__icon, &__image {
+        margin-right: 18rpx;
+      }
+    }
+    
+    &__right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+  
+  .list-icon-text, .list-image-text {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .list-image-text {
+    .list {
+      &__left {
+        &__image {
+          width: 20rpx;
+          height: 20rpx;
+        }
+      }
+    }
+  }
+  
+  .message {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    
+    &__left {
+      width: 10%;
+    }
+    &__middle {
+      width: 80%;
+      padding-left: 20rpx;
+      padding-right: 40rpx;
+    }
+    &__right {
+      width: 10%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    &__name {
+      font-size: 32rpx;
+      margin-bottom: 8rpx;
+    }
+    &__content {
+      font-size: 26rpx;
+      color: #838383;
+    }
+    &__tips {
+      &__icon {
+        font-size: 36rpx;
+        color: #AAAAAA;
+      }
     }
   }
 </style>

componentsPage/load-more/load-more.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="components-load-more tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>加载更多</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="默认">
+        <tn-load-more></tn-load-more>
+      </demo-title>
+      
+      <demo-title title="加载中">
+        <tn-load-more status="loading" :loadingIcon="false"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="没有更多">
+        <tn-load-more status="nomore"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改提示语">
+        <tn-load-more status="loadmore" :loadText="loadText"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改颜色">
+        <tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改字体尺寸">
+        <tn-load-more :fontSize="32"></tn-load-more>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsLoadMore',
+    components: { demoTitle },
+    data() {
+      return {
+        loadText: {
+          loadmore: '下拉加载',
+          loading: '快速加载中...',
+          nomore: '已经没有了啊'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

componentsPage/loading/loading.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-loading">
+  <view class="components-loading tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Loading加载动画</tn-nav-bar>
@@ -8,14 +8,57 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="样式">
-        <tn-loading
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
-          :show="show"
+          <view class="tn-margin-right">
-          :mode="mode"
+            <tn-loading show="show"></tn-loading>
-          :color="color"
+          </view>
-          :size="size"
+          <view class="tn-margin-right">
-        ></tn-loading>
+            <tn-loading show="show" mode="flower"></tn-loading>
-      </dynamic-demo-template>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="tn-margin-right">
+            <tn-loading show="show"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" :size="50"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" :size="80"></tn-loading>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-margin-top">
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower" :size="50"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower" :size="80"></tn-loading>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="tn-margin-right">
+            <tn-loading show="show"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" color="#01BEFF"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" color="#E83A30"></tn-loading>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -24,79 +67,17 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsLoading',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
         show: true,
-        mode: 'circle',
-        color: '',
-        size: 34,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-loading组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '显示',
-                optional: ['显示','隐藏'],
-                methods: 'showChange'
-              },
-              {
-                title: '模式',
-                optional: ['圆圈','花朵'],
-                methods: 'modeChange'
-              },
-              {
-                title: '颜色',
-                optional: ['默认','#31E749','#31C9E8'],
-                methods: 'colorChange'
-              },
-              {
-                title: '尺寸',
-                optional: ['28','34','54'],
-                methods: 'sizeChange',
-                current: 1
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换是否显示
-      showChange(event) {
-        this.show = event.index === 0 ? true : false
-      },
-      // 切换模式
-      modeChange(event) {
-        switch (event.index) {
-          case 0:
-            this.mode = 'circle'
-            this.$refs.demoTemplate.updateSectionBtnsState(2, true)
-            break
-          case 1:
-            this.mode = 'flower'
-            this.$refs.demoTemplate.updateSectionBtnsState(2, false)
-            break
     }
-      },
-      // 切换颜色
-      colorChange(event) {
-        this.color = event.index === 0 ? '' : event.name
-      },
-      // 切换尺寸
-      sizeChange(event) {
-        this.size = Number(event.name)
-      },
-
-    },
 
   }
 </script>

componentsPage/modal/modal.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <tn-button fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
       </dynamic-demo-template>
 
     </view>
@@ -41,7 +41,7 @@
             <tn-form-item label="验证码" :borderBottom="false">
               <tn-input placeholder="请输入验证码"></tn-input>
               <view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
-                <tn-button :fontSize="20" padding="10rpx" height="46rpx" fontColor="tn-color-white">获取验证码</tn-button>
+                <tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF" fontColor="tn-color-white">获取验证码</tn-button>
               </view>
             </tn-form-item>
           </tn-form>
@@ -77,7 +77,7 @@
           },
           {
             text: '确定',
-            backgroundColor: 'tn-bg-red',
+            backgroundColor: 'tn-bg-indigo',
             fontColor: '#FFFFFF'
           }
         ],
@@ -241,7 +241,7 @@
       // 点击按钮
       clickBtn(event) {
         this.show = false
-        this.$t.messageUtils.toast('点击了第'+(event.index + 1)+'个按钮')
+        this.$tn.message.toast('点击了第'+(event.index + 1)+'个按钮')
       }
 
     },

componentsPage/nav-bar/nav-bar.vue

@@ -3,34 +3,58 @@
   <view class="components-nav_bar">
 
     <!-- 顶部自定义导航 -->
-    <tn-nav-bar fixed>navBar导航栏</tn-nav-bar>
+    <tn-nav-bar
+      v-if="mode === 'normal'"
+      fixed
+      :height="height"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :alpha="alpha"
+      :bottomShadow="bottomShadow"
+    >navBar导航栏</tn-nav-bar>
     
-    <!-- 页面内容 -->
+    <tn-nav-bar
-    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      v-if="mode === 'customBack'"
-      
+      fixed
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      :height="height"
-        <!-- 普通导航栏 -->
+      :customBack="true"
-        <tn-nav-bar v-if="mode === 'normal'" :fixed="false" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">图鸟科技</tn-nav-bar>
+      :backgroundColor="backgroundColor"
-        <!-- 自定义内容导航栏，隐藏返回按钮 -->
+      :fontColor="fontColor"
-        <tn-nav-bar v-if="mode === 'customNav'" :fixed="false" :isBack="false" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">
+      :alpha="alpha"
-          <view class="custom-nav-content">
+      :bottomShadow="bottomShadow"
-            <view class="search-content">
+    >
-              <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
-            </view>
-          </view>
-        </tn-nav-bar>
-        <!-- 自定义放回按钮 -->
-        <tn-nav-bar v-if="mode === 'customBack'" :fixed="false" :customBack="true" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">
       <view slot="back" class='tn-custom-nav-bar__back'>
         <view><text class='tn-icon-left'></text></view>
         <view><text class='tn-icon-home-capsule-fill'></text></view>
       </view>
       <view class="custom-nav-content">
         <view class="search-content">
-              <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
+          <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
         </view>
       </view>
     </tn-nav-bar>
+    
+    <tn-nav-bar
+      v-if="mode === 'customNav'"
+      fixed
+      :height="height"
+      :isBack="false"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :alpha="alpha"
+      :bottomShadow="bottomShadow"
+    >
+      <view class="custom-nav-content">
+        <view class="search-content">
+          <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
+        </view>
+      </view>
+    </tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click" :noDemo="true">
       </dynamic-demo-template>
 
     </view>
@@ -48,9 +72,11 @@
       return {
         searchValue: '',
         mode: 'normal',
-        height: 46,
+        height: 0,
         backgroundColor: '#FFFFFF',
+        fontColor: '',
         alpha: false,
+        bottomShadow: true,
         
         tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
         sectionList: [
@@ -59,9 +85,8 @@
             section: [
               {
                 title: '高度',
-                optional: ['默认','46','80'],
+                optional: ['默认','38','80'],
-                methods: 'heightChange',
+                methods: 'heightChange'
-                current: 1
               },
               {
                 title: '样式',
@@ -70,8 +95,13 @@
               },
               {
                 title: '背景颜色',
-                optional: ['默认','#01BEFF','透明'],
+                optional: ['默认','#01BEFF','tn-bg-grey','tn-main-gradient-indigo','透明'],
                 methods: 'backgroundColorChange'
+              },
+              {
+                title: '底部阴影',
+                optional: ['默认','隐藏'],
+                methods: 'bottomShadowChange'
               }
             ]
           }
@@ -105,17 +135,27 @@
         switch(event.index) {
           case 0:
             this.backgroundColor = '#FFFFFF'
+            this.fontColor = ''
             this.alpha = false
             break
           case 1:
+          case 2:
+          case 3:
+            this.fontColor = '#FFFFFF'
             this.backgroundColor = event.name
             this.alpha = false
             break
-          case 2:
+          case 4:
+            this.backgroundColor = ''
+            this.fontColor = ''
             this.alpha = true
             break
         }
       },
+      // 切换底部阴影
+      bottomShadowChange(event) {
+        this.bottomShadow = event.index === 0 ? true : false
+      }
     },
 
   }

componentsPage/notice-bar/notice-bar.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-notice-bar">
+  <view class="components-notice-bar tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>noticeBar通知栏</tn-nav-bar>
@@ -8,36 +8,57 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="水平连续滚动">
-        <tn-notice-bar
+        <tn-notice-bar :list="list"></tn-notice-bar>
-          :show="show"
+      </demo-title>
-          :list="list"
+      
-          :mode="mode"
+      <demo-title title="水平不连续滚动">
-          :backgroundColor="backgroundColor"
+        <tn-notice-bar :list="list" :circular="false"></tn-notice-bar>
-          :fontColor="fontColor"
+      </demo-title>
-          :fontSize="fontSize"
+      
-          :playStatus="playStatus"
+      <demo-title title="垂直滚动">
-          :leftIcon="leftIcon"
+        <tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
-          :leftIconName="leftIconName"
+      </demo-title>
-          :leftIconSize="leftIconSize"
+      
-          :rightIcon="rightIcon"
+      <demo-title title="手动滚动">
-          :rightIconName="rightIconName"
+        <tn-notice-bar :list="list" mode="vertical" :autoplay="false"></tn-notice-bar>
-          :rightIconSize="rightIconSize"
+      </demo-title>
-          :closeBtn="closeBtn"
+      
-          :radius="radius"
+      <demo-title title="停止滚动">
-          :padding="padding"
+        <tn-notice-bar :list="list" mode="vertical" playStatus="paused"></tn-notice-bar>
-          :autoplay="autoplay"
+      </demo-title>
-          :duration="duration"
+      
-          :speed="speed"
+      <demo-title title="慢速滚动">
-          :circular="circular"
+        <tn-notice-bar :list="list" :speed="100"></tn-notice-bar>
-          :autoHidden="autoHidden"
+        <view class="tn-margin-top">
-          @click="onClick"
+          <tn-notice-bar :list="list" mode="vertical" :duration="5000"></tn-notice-bar>
-          @close="close"
+        </view>
-          @clickLeft="onLeftClick"
+      </demo-title>
-          @clickRight="onRightClick"
+      
-          @end="end"
+      <demo-title title="显示关闭按钮">
-        ></tn-notice-bar>
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
-      </dynamic-demo-template>
+      </demo-title>
+      
+      <demo-title title="隐藏左右两侧图标">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="false" :leftIcon="false" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="自定义左右两侧图标">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :leftIcon="true" rightIconName="set" leftIconName="all" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="自定义大小">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :fontSize="34" :leftIconSize="40" :rightIconSize="40" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="#EFEFEF" @close="closeNoticeShow = false"></tn-notice-bar>
+        <view class="tn-margin-top">
+          <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="tn-main-gradient-indigo" @close="closeNoticeShow = false"></tn-notice-bar>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -46,10 +67,10 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsNoticeBar',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
         list: [
@@ -58,231 +79,11 @@
           'TuniaoUIV2.0.0即将发布',
           '今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
         ],
-        
+        closeNoticeShow: true,
-        show: true,
-        mode: 'horizontal',
-        backgroundColor: '',
-        fontColor: '',
-        fontSize: 0,
-        playStatus: 'play',
-        leftIcon: true,
-        leftIconName: 'sound',
-        leftIconSize: 34,
-        rightIcon: false,
-        rightIconName: 'right',
-        rightIconSize: 26,
-        closeBtn: false,
-        radius: 0,
-        padding: '18rpx 24rpx',
-        autoplay: true,
-        duration: 2000,
-        speed: 160,
-        circular: true,
-        autoHidden: true,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-notice-bar组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '滚动模式',
-                optional: ['水平连续','水平不连续','垂直'],
-                methods: 'modeChange'
-              },
-              {
-                title: '显示状态',
-                optional: ['显示','隐藏'],
-                methods: 'showChange'
-              },
-              {
-                title: '播放状态',
-                optional: ['播放','暂停'],
-                methods: 'playStatusChange'
-              },
-              {
-                title: '速度控制',
-                optional: ['减速','加速'],
-                methods: 'speedChange'
-              },
-              {
-                title: '图标显示',
-                optional: ['默认','显示右边图标','显示关闭按钮','全部不显示'],
-                methods: 'iconChange'
-              },
-              {
-                title: '自定义图标',
-                optional: ['默认','自定义'],
-                methods: 'iconNameChange'
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'styleChange'
-              }
-              
-            ]
-          }
-        ]
-
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换滚动模式
-      modeChange(event) {
-        this.speed = 160
-        this.duration = 2000
-        switch (event.index) {
-          case 0:
-            this.mode = 'horizontal'
-            this.circular = true
-            break
-          case 1:
-            this.mode = 'horizontal'
-            this.circular = false
-            break
-          case 2:
-            this.mode = 'vertical'
-            break
     }
-      },
-      // 切换显示状态
-      showChange(event) {
-        this.show = event.index === 0 ? true : false
-      },
-      // 切换播放状态
-      playStatusChange(event) {
-        this.playStatus = event.index === 0 ? 'play' : 'paused'
-      },
-      // 切换滚动速度
-      speedChange(event) {
-        switch (event.index) {
-          case 0:
-            if (this.mode === 'horizontal' && this.circular) {
-              const speed = this.speed - 10
-              this.speed = speed > 0 ? speed : 0
-            } else {
-              const duration = this.duration + 100
-              if (duration > 3000) {
-                this.$t.messageUtils.toast('达到速度最小值')
-                this.duration = 3000
-              } else {
-                this.duration = duration
-              }
-            }
-            break
-          case 1:
-            if (this.mode === 'horizontal' && this.circular) {
-              const speed = this.speed + 10
-              if (speed > 300) {
-                this.$t.messageUtils.toast('达到速度最大值')
-                this.speed = 300
-              } else {
-                this.speed = speed
-              }
-            } else {
-              const duration = this.duration - 100
-              this.duration = this.duration > 0 ? duration : 0
-            }
-            break
-        }
-      },
-      // 切换图标显示
-      iconChange(event) {
-        switch (event.index) {
-          case 0:
-            this.leftIcon = true
-            this.rightIcon = false
-            this.closeBtn = false
-            break
-          case 1:
-            this.rightIcon = true
-            break
-          case 2:
-            this.closeBtn = true
-            break
-          case 3:
-            this.leftIcon = false
-            this.rightIcon = false
-            this.closeBtn = false
-            break
-        }
-      },
-      // 切换自定义图标
-      iconNameChange(event) {
-        switch (event.index) {
-          case 0:
-            this.leftIconName = 'sound'
-            this.rightIconName = 'right'
-            break
-          case 1:
-            this.leftIconName = 'tag'
-            this.rightIconName = 'trophy'
-            break
-        }
-      },
-      // 切换自定义颜色
-      colorChange(event) {
-        switch (event.index) {
-          case 0:
-            this.backgroundColor = ''
-            this.fontColor = ''
-            break
-          case 1:
-            this.backgroundColor = 'tn-bg-red'
-            this.fontColor = '#FFFFFF'
-            break
-        }
-      },
-      // 切换自定义样式
-      styleChange(event) {
-        switch (event.index) {
-          case 0:
-            this.fontSize = 0
-            this.radius = 0
-            this.leftIconSize = 34
-            this.rightIconSize = 26
-            break
-          case 1:
-            this.fontSize = 40
-            this.radius = 10
-            this.leftIconSize = 50
-            this.rightIconSize = 30
-            break
-        }
-      },
-      
-      
-      // 点击消息
-      onClick(index) {
-        this.$t.messageUtils.toast('点击了消息')
-      },
-      // 点击关闭按钮
-      close() {
-        this.$t.messageUtils.toast('点击关闭按钮')
-      },
-      // 点击左边图标
-      onLeftClick() {
-        this.$t.messageUtils.toast('点击左边图标')
-      },
-      // 点击右边图标
-      onRightClick() {
-        this.$t.messageUtils.toast('点击右边图标')
-      },
-      // 一个周期滚动结束
-      end() {
-        console.log('滚动结束');
-      }
-
-    },
 
   }
 </script>

componentsPage/number-box/number-box.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-number_box">
+  <view class="components-number_box tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>numberBox步进输入</tn-nav-bar>
@@ -8,22 +8,42 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基本使用">
-        <tn-number-box
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
-          v-model="value"
+          <view>
-          :min="min"
+            <tn-number-box v-model="value1"></tn-number-box>
-          :max="max"
+          </view>
-          :step="step"
+          <view class="tn-margin-left">
-          :disabled="disabled"
+            <tn-number-box v-model="value1" :disabled="true"></tn-number-box>
-          :disabledInput="disabledInput"
+          </view>
-          :inputWidth="inputWidth"
+        </view>
-          :inputHeight="inputHeight"
+      </demo-title>
-          :positiveInteger="positiveInteger"
+      
-          :backgroundColor="backgroundColor"
+      <demo-title title="设置步进值">
-          :fontColor="fontColor"
+        <tn-number-box v-model="value2" :step="2"></tn-number-box>
-          :fontSize="fontSize"
+      </demo-title>
-        ></tn-number-box>
+      
-      </dynamic-demo-template>
+      <demo-title title="设置最小最大值">
+        <tn-number-box v-model="value3" :min="50" :max="1000"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="设置允许输入小数">
+        <tn-number-box v-model="value4" :positiveInteger="false" :step="0.5"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="禁止输入">
+        <tn-number-box v-model="value5" :disabledInput="true"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <tn-number-box v-model="value6" :inputWidth="140" :inputHeight="60" :fontSize="40"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-number-box v-model="value7" backgroundColor="#AAAAAA" fontColor="#838383"></tn-number-box>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -32,140 +52,29 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsNumberBox',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        value: 0,
+        value1: 0,
-        min: 0,
+        value2: 0,
-        max: 100,
+        value3: 0,
-        step: 1,
+        value4: 0,
-        disabled: false,
+        value5: 0,
-        disabledInput: false,
+        value6: 0,
-        inputWidth: 88,
+        value7: 0
-        inputHeight: 50,
-        positiveInteger: true,
-        backgroundColor: '#E6E6E6',
-        fontColor: '',
-        fontSize: 0,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-number-box组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '初始值',
-                optional: ['0','1','2.5','3','4','5'],
-                methods: 'valueChange'
-              },
-              {
-                title: '最小最大值',
-                optional: ['0-100','50-1000'],
-                methods: 'minMaxChange'
-              },
-              {
-                title: '步进值',
-                optional: ['1','5','0.5'],
-                methods: 'stepChange'
-              },
-              {
-                title: '只允许输入正整数',
-                optional: ['是','否'],
-                methods: 'positiveIntegerChange'
-              },
-              {
-                title: '禁用状态',
-                optional: ['是','否'],
-                methods: 'disabledChange',
-                current: 1
-              },
-              {
-                title: '禁用输入状态',
-                optional: ['是','否'],
-                methods: 'disabledInputChange',
-                current: 1
-              },
-              {
-                title: '自定义尺寸',
-                optional: ['默认','自定义'],
-                methods: 'customSizeChange'
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'customColorChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换初始值
-      valueChange(event) {
-        this.value = Number(event.name)
-      },
-      // 切换最小最大值
-      minMaxChange(event) {
-        const value = event.name.split('-')
-        this.min = Number(value[0])
-        this.max = Number(value[1])
-      },
-      // 切换步进值
-      stepChange(event) {
-        this.step = Number(event.name)
-      },
-      // 切换允许正整数状态
-      positiveIntegerChange(event) {
-        this.positiveInteger = event.index === 0 ? true : false
-      },
-      // 切换禁用状态
-      disabledChange(event) {
-        this.disabled = event.index === 0 ? true : false
-      },
-      // 切换禁用输入状态
-      disabledInputChange(event) {
-        this.disabledInput = event.index === 0 ? true : false
-      },
-      // 切换自定义尺寸
-      customSizeChange(event) {
-        switch(event.index) {
-          case 0:
-            this.inputWidth = 88
-            this.inputHeight = 50
-            this.fontSize = 0
-            break
-          case 1:
-            this.inputWidth = 120
-            this.inputHeight = 60
-            this.fontSize = 40
-            break
     }
-      },
-      // 切换自定义颜色
-      customColorChange(event) {
-        switch(event.index) {
-          case 0:
-            this.backgroundColor = '#E6E6E6'
-            this.fontColor = ''
-            break
-          case 1:
-            this.backgroundColor = '#AAAAAA'
-            this.fontColor = 'tn-color-grey'
-            break
-        }
-      },
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
+  .components-number_box {
+    min-height: 100vh;
+  }
 </style>

componentsPage/picker/picker.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <view class="tn-flex tn-flex-row-center"><tn-button fontColor="tn-color-white" @click="showPicker">弹出Picker</tn-button></view>
+        <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showPicker">弹出Picker</tn-button></view>
         <view class="picker-result tn-border-dashed">
           {{ result }}
         </view>
@@ -259,7 +259,7 @@
       
       // 点击取消按钮
       cancelPicker(event) {
-        this.$t.messageUtils.toast('点击了取消按钮')
+        this.$tn.message.toast('点击了取消按钮')
       },
       // 点击确认按钮
       confirmPicker(event) {

componentsPage/popup/popup.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <tn-button fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
       </dynamic-demo-template>
 
     </view>

componentsPage/progress/progress.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-progress">
+  <view class="components-progress tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Progress进度条</tn-nav-bar>
@@ -8,31 +8,61 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="基本进度条">
-        <block v-if="customPercent">
+        <tn-line-progress :percent="30"></tn-line-progress>
-          <tn-line-progress v-if="mode === 'line'" :percent="percent" :height="height" :activeColor="activeColor"
+        <view class="tn-margin-top">
-            :striped="striped" :stripedAnimation="stripedAnimation" :showPercent="showPercent">
+          <tn-line-progress :percent="50"></tn-line-progress>
-            <block v-if="customPercent">
+        </view>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="80"></tn-line-progress>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
+          <view>
+            <tn-circle-progress :percent="30"></tn-circle-progress>
+          </view>
+          <view class="tn-margin-left">
+            <tn-circle-progress :percent="50"></tn-circle-progress>
+          </view>
+          <view class="tn-margin-left">
+            <tn-circle-progress :percent="80"></tn-circle-progress>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改进度条颜色">
+        <tn-line-progress :percent="50" activeColor="#2DE88D"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50" activeColor="#31E749" inactiveColor="#FAD8D6"></tn-line-progress>
+        </view>
+      </demo-title>
+      
+      <demo-title title="显示条纹">
+        <tn-line-progress :percent="50" :striped="true"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50" :striped="true" :stripedAnimation="false"></tn-line-progress>
+        </view>
+      </demo-title>
+      
+      <demo-title title="显示进度信息">
+        <tn-line-progress :percent="50" :showPercent="true"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50">
             <view class="tn-color-white">加载中</view>
-            </block>
           </tn-line-progress>
-          <view class="tn-flex tn-flex-row-center">
+        </view>
-            <tn-circle-progress v-if="mode === 'circle'" :percent="percent" :showPercent="showPercent">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
-              <block v-if="customPercent">
+          <view>
+            <tn-circle-progress :percent="50" :showPercent="true"></tn-circle-progress>
+          </view>
+          <view class="tn-margin-left">
+            <tn-circle-progress :percent="50">
               <view class="tn-color-red">加载中</view>
-              </block>
             </tn-circle-progress>
           </view>
-        </block>
-        <block v-else>
-          <tn-line-progress v-if="mode === 'line'" :percent="percent" :height="height" :activeColor="activeColor"
-            :striped="striped" :stripedAnimation="stripedAnimation" :showPercent="showPercent"></tn-line-progress>
-          <view class="tn-flex tn-flex-row-center">
-            <tn-circle-progress v-if="mode === 'circle'" :percent="percent" :showPercent="showPercent">
-            </tn-circle-progress>
         </view>
-        </block>
+      </demo-title>
-      </dynamic-demo-template>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -41,163 +71,26 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
 
   export default {
-    name: 'componentsStriped',
+    name: 'componentsProgress',
-    components: {
+    components: {demoTitle},
-      dynamicDemoTemplate
-    },
     data() {
       return {
-        mode: 'line',
-        percent: 50,
-        height: 28,
-        activeColor: '#01BEFF',
-        showPercent: false,
-        striped: false,
-        stripedAnimation: true,
-        customPercent: false,
-
-        tips: ['无需依赖额外的样式文件', '使用tn-line-progress、tn-circle-progress组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '模式',
-                optional: ['线条','圆环'],
-                methods: 'modeChange'
-              },
-              {
-                title: '进度',
-                optional: ['减少10%','增加10%'],
-                methods: 'percentChange'
-              },
-              {
-                title: '高度',
-                optional: ['18','28','38'],
-                methods: 'heightChange',
-                current: 1
-              },
-              {
-                title: '激活时颜色',
-                optional: ['#01BEFF','#2DE88D'],
-                methods: 'activeColorChange'
-              },
-              {
-                title: '显示条纹',
-                optional: ['是','否'],
-                methods: 'stripedChange',
-                current: 1
-              },
-              {
-                title: '动态条纹',
-                optional: ['是','否'],
-                methods: 'stripedAnimationChange',
-                show: false
-              },
-              {
-                title: '显示进度信息',
-                optional: ['是','否'],
-                methods: 'showPercentChange',
-                current: 1
-              },
-              {
-                title: '自定义进度信息',
-                optional: ['是','否'],
-                methods: 'customPercentChange',
-                current: 1
-              }
-              
-            ]
-          }
-        ]
-
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换模式
-      modeChange(event) {
-        switch (event.index) {
-          case 0:
-            this.mode = 'line'
-            if (this.striped) {
-              this.$refs.demoTemplate.updateSectionBtnsState([2,3,4,5], true)
-            } else {
-              this.$refs.demoTemplate.updateSectionBtnsState([2,3,4], true)
     }
-            break
-          case 1:
-            this.mode = 'circle'
-            this.$refs.demoTemplate.updateSectionBtnsState([2,3,4,5], false)
-            break
-        }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换进度
-      percentChange(event) {
-        let percent = 0
-        switch (event.index) {
-          case 0:
-            percent = this.percent - 10
-            this.percent = percent > 0 ? percent : 0
-            break
-          case 1:
-            percent = this.percent + 10
-            this.percent = percent > 100 ? 100 : percent
-            break
-        }
-      },
-      // 切换高度
-      heightChange(event) {
-        this.height = Number(event.name)
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换激活时颜色
-      activeColorChange(event) {
-        this.activeColor = event.name
-      },
-      // 切换进度信息显示
-      showPercentChange(event) {
-        if (event.index === 0) {
-          this.showPercent = true
-          this.customPercent = false
-          this.$refs.demoTemplate.updateSectionBtnsState(7, false)
-        } else {
-          this.showPercent = false
-          this.$refs.demoTemplate.updateSectionBtnsState(7, true)
-        }
-      },
-      // 切换条纹
-      stripedChange(event) {
-        if (event.index === 0) {
-          this.striped = true
-          this.$refs.demoTemplate.updateSectionBtnsState(5, true)
-        } else {
-          this.striped = false
-          this.$refs.demoTemplate.updateSectionBtnsState(5, false)
-        }
-      },
-      // 切换条纹动画
-      stripedAnimationChange(event) {
-        this.stripedAnimation = event.index === 0 ? true : false
-      },
-      // 切换自定义进度信息
-      customPercentChange(event) {
-        this.customPercent = event.index === 0 ? true : false
-      }
-
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
   
+  .components-progress {
+    min-height: 100vh;
+  }
+  
   tn-line-progress, .tn-line-progress {
     width: 100%;
   }

componentsPage/radio/radio.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="components-radio tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Radio单选按钮</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-radio-group>
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2" disabled>选项2(禁止选中)</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="方形选框">
+        <tn-radio-group shape="square">
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="竖直排列">
+        <tn-radio-group width="100%" wrap>
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="禁止点击标签">
+        <tn-radio-group :disabledLabel="true">
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <view>
+          <tn-radio-group :size="20" :iconSize="14">
+            <tn-radio name="选项1">选项1</tn-radio>
+            <tn-radio name="选项2">选项2</tn-radio>
+            <tn-radio name="选项3" :size="36" :iconSize="26">选项3</tn-radio>
+          </tn-radio-group>
+        </view>
+        <view class="tn-margin-top">
+          <tn-radio-group :size="46" :iconSize="36">
+            <tn-radio name="选项1">选项1</tn-radio>
+            <tn-radio name="选项2">选项2</tn-radio>
+            <tn-radio name="选项3">选项3</tn-radio>
+          </tn-radio-group>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-radio-group activeColor="#31E749">
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3" activeColor="#E83A30">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsRadio',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

componentsPage/rate/rate.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-rate">
+  <view class="components-rate tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>rate评分</tn-nav-bar>
@@ -8,21 +8,43 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="基本使用">
-        <tn-rate
+        <tn-rate v-model="value1"></tn-rate>
-          v-model="value"
+        <view class="tn-margin-top">
-          :count="count"
+          <tn-rate v-model="value2" :count="8"></tn-rate>
-          :disabled="disabled"
+        </view>
-          :allowHalf="allowHalf"
+        <view class="tn-margin-top">
-          :size="size"
+          <tn-rate v-model="value2" :count="8" :disabled="true"></tn-rate>
-          :activeIcon="activeIcon"
+        </view>
-          :inactiveIcon="inactiveIcon"
+      </demo-title>
-          :activeColor="activeColor"
+      
-          :inactiveColor="inactiveColor"
+      <demo-title title="设置尺寸">
-          :colors="colors"
+        <tn-rate v-model="value3" :size="24"></tn-rate>
-          :icons="icons"
+        <view class="tn-margin-top">
-        ></tn-rate>
+          <tn-rate v-model="value4"></tn-rate>
-      </dynamic-demo-template>
+        </view>
+        <view class="tn-margin-top">
+          <tn-rate v-model="value5" :size="68"></tn-rate>
+        </view>
+      </demo-title>
+      
+      <demo-title title="可以选择半星">
+        <tn-rate v-model="value6" :size="80" :allowHalf="true"></tn-rate>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-rate v-model="value7" inactiveColor="#E83A30" activeColor="#31E749"></tn-rate>
+      </demo-title>
+      
+      <demo-title title="自定义图标">
+        <tn-rate v-model="value8" inactiveIcon="emoji-sad" activeIcon="emoji-good-fill"></tn-rate>
+      </demo-title>
+      
+      <demo-title title="根据选择数量显示不同信息">
+        <tn-rate v-model="value9" :colors="colors" :icons="icons"></tn-rate>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -31,147 +53,32 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsRate',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        value: 0,
+        value1: 0,
-        count: 5,
+        value2: 0,
-        disabled: false,
+        value3: 0,
-        allowHalf: false,
+        value4: 0,
-        size: 32,
+        value5: 0,
-        activeIcon: 'star-fill',
+        value6: 0,
-        inactiveIcon: 'star',
+        value7: 0,
-        activeColor: '#01BEFF',
+        value8: 0,
-        inactiveColor: '#AAAAAA',
+        value9: 0,
-        colors: [],
+        colors: ['#01BEFF','#3D7EFF','#31C9E8'],
-        icons: [],
+        icons: ['star-fill','praise-fill','flower-fill']
-        
-        tips: ['无需依赖额外的样式文件','使用tn-rate组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '初始值',
-                optional: ['0','1','2.5','3','4','5'],
-                methods: 'valueChange'
-              },
-              {
-                title: '半星状态',
-                optional: ['是','否'],
-                methods: 'allowHalfChange',
-                current: 1
-              },
-              {
-                title: '禁用状态',
-                optional: ['是','否'],
-                methods: 'disabledChange',
-                current: 1
-              },
-              {
-                title: '尺寸',
-                optional: ['24','32','68'],
-                methods: 'sizeChange',
-                current: 1
-              },
-              {
-                title: '图标数量',
-                optional: ['3','4','5','6'],
-                methods: 'countChange',
-                current: 2
-              },
-              {
-                title: '图标',
-                optional: ['默认','自定义'],
-                methods: 'iconChange'
-              },
-              {
-                title: '颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              },
-              {
-                title: '根据选择数显示图标信息',
-                optional: ['是','否'],
-                methods: 'showDiffChange',
-                current: 1
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换初始值
-      valueChange(event) {
-        this.value = Number(event.name)
-      },
-      // 切换半星状态
-      allowHalfChange(event) {
-        this.allowHalf = event.index === 0 ? true : false
-      },
-      // 切换禁用状态
-      disabledChange(event) {
-        this.disabled = event.index === 0 ? true : false
-      },
-      // 切换尺寸
-      sizeChange(event) {
-        this.size = Number(event.name)
-      },
-      // 切换图标数量
-      countChange(event) {
-        this.count = Number(event.name)
-      },
-      // 切换图标
-      iconChange(event) {
-        switch (event.index) {
-          case 0:
-            this.activeIcon = 'star-fill'
-            this.inactiveIcon = 'star'
-            break
-          case 1:
-            this.activeIcon = 'emoji-good-fill'
-            this.inactiveIcon = 'emoji-good'
-            break
     }
-      },
-      // 切换颜色
-      colorChange(event) {
-        switch (event.index) {
-          case 0:
-            this.activeColor = '#01BEFF'
-            this.inactiveColor = '#AAAAAA'
-            break
-          case 1:
-            this.activeColor = '#31E749'
-            this.inactiveColor = '#E7D5FA'
-            break
-        }
-      },
-      // 切换不同状态显示不同的图标信息
-      showDiffChange(event) {
-        switch (event.index) {
-          case 0:
-            this.colors = ['#01BEFF','#3D7EFF','#31C9E8']
-            this.icons = ['star-fill','praise-fill','flower-fill']
-            break
-          case 1:
-            this.colors = []
-            this.icons = []
-            break
-        }
-      }
-
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
+  .components-rate {
+    min-height: 100vh;
+  }
 </style>

componentsPage/read-more/read-more.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-read-more">
+  <view class="components-read-more tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>ReadMore查看更多</tn-nav-bar>
@@ -8,22 +8,31 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
+      <demo-title title="基本使用">
-        <tn-read-more
+        <tn-read-more>
-          :showHeight="showHeight"
-          :closeBtn="closeBtn"
-          :openText="openText"
-          :closeText="closeText"
-          :openIcon="openIcon"
-          :closeIcon="closeIcon"
-          :fontColor="fontColor"
-          :fontSize="fontSize"
-          :shadowStyle="shadowStyle"
-          @open="open"
-          @closed="closed">
           <rich-text :nodes="content"></rich-text>
         </tn-read-more>
-      </dynamic-demo-template>
+      </demo-title>
+      
+      <demo-title title="允许展开后收起">
+        <tn-read-more :closeBtn="true">
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <demo-title title="修改显示内容的高度">
+        <tn-read-more :closeBtn="true" :showHeight="200">
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <demo-title title="自定义展开收起文本和图标">
+        <tn-read-more :closeBtn="true" openText="付费查看剩余内容" openIcon="lucky-money" closeText="下次再看" closeIcon="close">
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -32,10 +41,10 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsReadMore',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
         content: `噫吁嚱，危乎高哉！
@@ -62,114 +71,10 @@
                   朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
                   锦城虽云乐，不如早还家。
                   蜀道之难，难于上青天，侧身西望长咨嗟！`,
-        showHeight: 400,
-        closeBtn: false,
-        openText: '展开阅读全文',
-        closeText: '收起',
-        openIcon: 'down',
-        closeIcon: 'up',
-        fontColor: '',
-        fontSize: 0,
-        shadowStyle: {
-          backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
-          paddingTop: "300rpx",
-          marginTop: "-300rpx"
-        },
-        
-        fullWindowsScroll: false,
-        tips: ['无需依赖额外的样式文件','使用tn-read-more组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '默认高度',
-                optional: ['200','400', '600'],
-                methods: 'showHeightChange',
-                current: 1
-              },
-              {
-                title: '显示收起按钮',
-                optional: ['显示','隐藏'],
-                methods: 'closeBtnChange',
-                current: 1
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'customChange'
       }
-            ]
-          }
-        ]
-
-      }
-    },
-    onReady() {
-      setTimeout(() => {
-        this.$refs.demoTemplate.updateSectionScrollView()
-      }, 100)
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换默认高度
-      showHeightChange(event) {
-        this.showHeight = Number(event.name)
-      },
-      // 切换收起按钮模式
-      closeBtnChange(event) {
-        this.closeBtn = event.index === 0 ? true : false
-      },
-      // 切换自定义样式
-      customChange(event) {
-        switch (event.index) {
-          case 0:
-            this.openText = '展开阅读全文'
-            this.closeText = '收起'
-            this.openIcon = 'down'
-            this.closeIcon = 'up'
-            this.fontColor = ''
-            this.fontSize = 0
-            this.shadowStyle = {
-              backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
-              paddingTop: "300rpx",
-              marginTop: "-300rpx"
     }
-            break
-          case 1:
-            this.openText = '付费解锁剩余内容'
-            this.closeText = '折起来'
-            this.openIcon = 'money'
-            this.closeIcon = 'close-circle'
-            this.fontSize = 30
-            this.shadowStyle = {
-              backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #AAA 100%)",
-              paddingTop: "300rpx",
-              marginTop: "-300rpx"
-            }
-            break
-        }
-      },
-      
-      
-      // 展开
-      open() {
-        // setTimeout(() => {
-        //   this.$refs.demoTemplate.updateSectionScrollView()
-        // }, 350)
-        this.fullWindowsScroll = true
-      },
-      // 收起
-      closed() {
-        setTimeout(() => {
-          this.fullWindowsScroll = false
-          this.$refs.demoTemplate.updateSectionScrollView()
-        }, 350)
-      }
-
-    },
 
   }
 </script>

componentsPage/scroll-list/scroll-list.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-toast">
+  <view class="components-scroll-list tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>ScrollList横向滚动</tn-nav-bar>
@@ -8,19 +8,13 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="基本使用">
-        <tn-scroll-list
+        <tn-scroll-list>
-          :indicator="indicator"
-          :indicatorWidth="indicatorWidth"
-          :indicatorBarWidth="indicatorBarWidth"
-          :indicatorColor="indicatorColor"
-          :indicatorActiveColor="indicatorActiveColor"
-        >
           <view class="tn-flex tn-margin-sm">
             <block v-for="(item, index) in 14" :key="index">
               <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
                 <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
-                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
+                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
                     <view class="tn-icon-gloves-fill"></view>
                   </view>  
                   <view class="tn-color-black tn-text-lg tn-text-center">
@@ -31,7 +25,47 @@
             </block>
           </view>
         </tn-scroll-list>
-      </dynamic-demo-template>
+      </demo-title>
+      
+      <demo-title title="隐藏指示器">
+        <tn-scroll-list :indicator="false">
+          <view class="tn-flex tn-margin-sm">
+            <block v-for="(item, index) in 14" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
+                    <view class="tn-icon-gloves-fill"></view>
+                  </view>  
+                  <view class="tn-color-black tn-text-lg tn-text-center">
+                    <text class="tn-text-ellipsis">傻北</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </demo-title>
+      
+      <demo-title title="自定义指示器样式">
+        <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#D6F4FA" indicatorActiveColor="#27A1BA">
+          <view class="tn-flex tn-margin-sm">
+            <block v-for="(item, index) in 14" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
+                    <view class="tn-icon-gloves-fill"></view>
+                  </view>  
+                  <view class="tn-color-black tn-text-lg tn-text-center">
+                    <text class="tn-text-ellipsis">傻北</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -40,73 +74,26 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsScrollList',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        indicator: true,
-        indicatorWidth: 50,
-        indicatorBarWidth: 20,
-        indicatorColor: '#E6E6E6',
-        indicatorActiveColor: '#01BEFF',
-        
-        tips: ['无需依赖额外的样式文件','使用tn-scroll-list组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '指示条',
-                optional: ['显示','隐藏'],
-                methods: 'indicatorChange'
-              },
-              {
-                title: '指示条样式',
-                optional: ['默认','自定义'],
-                methods: 'customChange'
-              }
-            ]
-          }
-        ]
-
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换指示条状态
-      indicatorChange(event) {
-        this.indicator = event.index === 0 ? true : false
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换自定义指示条
-      customChange(event) {
-        switch (event.index) {
-          case 0:
-            this.indicatorWidth = 50
-            this.indicatorBarWidth = 20
-            this.indicatorColor = '#E6E6E6'
-            this.indicatorActiveColor = '#01BEFF'
-            break
-          case 1:
-            this.indicatorWidth = 100
-            this.indicatorBarWidth = 30
-            this.indicatorColor = '#D6F4FA'
-            this.indicatorActiveColor = '#27A1BA'
-            break
     }
-      }
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
   
+  .components-scroll-list {
+    min-height: 100vh;
+  }
+
   .icon3 {
     &__item {
       width: 30%;
@@ -140,7 +127,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }

componentsPage/select/select.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <view class="tn-flex tn-flex-row-center"><tn-button fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
+        <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
         <view class="select-result tn-border-dashed">
           {{ result }}
         </view>
@@ -64,7 +64,11 @@
           {
             value: 5,
             label: '胖虎'
-          }
+          },
+          {
+            value: 6,
+            label: '大星'
+          },
         ],
         maskCloseable: true,
         
@@ -326,7 +330,7 @@
       
       // 点击取消按钮
       cancelSelect(event) {
-        this.$t.messageUtils.toast('点击了取消按钮')
+        this.$tn.message.toast('点击了取消按钮')
       },
       // 点击确认按钮
       confirmSelect(event) {

componentsPage/sign-board/sign-board.vue

@@ -106,7 +106,7 @@
             resolve()
             return
           }
-          this.$t.messageUtils.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
+          this.$tn.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
             resolve()
           }, true, () => {
             reject()

componentsPage/skeleton/skeleton.vue

@@ -0,0 +1,236 @@
+<template>
+  <view class="components-skeleton tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>骨架屏</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="tn-padding-top"></view>
+      
+      <view class="news tn-skeleton">
+        <block v-for="(item, index) in list" :key="index">
+          <view class="news__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-top">
+            <view class="news__item__info tn-flex tn-flex-direction-row tn-flex-row-center tn-flex-col-center">
+              <view class="news__item__avatar tn-skeleton-circle">
+                <image :src="item.userInfo.avatar"></image>
+              </view>
+              <view class="news__item__outline tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-around">
+                <view class="news__item__nick-name tn-skeleton-fillet">{{ item.userInfo.nickName}}</view>
+                <view class="news__item__release-date tn-skeleton-fillet">{{ item.content.releaseDate }}</view>
+              </view>
+            </view>
+            <view class="news__item__content tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-center">
+              <view class="news__item__content__data">
+                <view class="news__item__title tn-text-ellipsis tn-skeleton-fillet">{{ item.content.title }}</view>
+                <view class="news__item__desc tn-text-ellipsis-2 tn-skeleton-fillet">{{ item.content.desc }}</view>
+              </view>
+              <view class="news__item__main-image tn-skeleton-rect">
+                <image :src="item.content.mainImage" mode="aspectFill"></image>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+    <!-- 引用组件 -->
+    <tn-skeleton :show="showSkeleton"></tn-skeleton>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsSkeleton',
+    data() {
+      return {
+        showSkeleton: true,
+        list: [
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          }
+        ]
+      }
+    },
+    onLoad() {
+      // 模拟加载数据完毕
+      setTimeout(() => {
+        this.showSkeleton = false
+      }, 3000)
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-skeleton {
+    // background-color: $tn-bg-gray-color;
+  }
+  
+  .news {
+    position: relative;
+    
+    &__item {
+      margin: 0 30rpx;
+      padding: 10rpx;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
+      margin-bottom: 30rpx;
+      
+      &__info {
+        height: 80rpx;
+        margin-bottom: 20rpx;
+      }
+      &__avatar {
+        width: 80rpx;
+        height: 100%;
+        border-radius: 100%;
+        overflow: hidden;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &__outline {
+        height: 100%;
+        margin-left: 20rpx;
+      }
+      &__nick-name {
+        font-size: 30rpx;
+        margin-bottom: 6rpx;
+      }
+      &__release-date {
+        font-size: 22rpx;
+        color: $tn-font-sub-color;
+      }
+      
+      &__content {
+        height: 140rpx;
+        &__data {
+          width: 60%;
+          margin-right: 10rpx;
+        }
+      }
+      &__title {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: bold;
+        margin-bottom: 10rpx;
+      }
+      &__desc {
+        width: 100%;
+        word-break: break-all;
+        font-size: 24rpx;
+      }
+      &__main-image {
+        width: 40%;
+        height: 100%;
+        border-radius: 5rpx;
+        overflow: hidden;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+</style>

componentsPage/slider/slider.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-slider">
+  <view class="components-slider tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>slider滑动条</tn-nav-bar>
@@ -8,42 +8,46 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="基本使用">
-        <tn-slider
+        <tn-slider v-model="value1"></tn-slider>
-          v-if="useSlot"
+        <view class="tn-margin-top">
-          v-model="value"
+          <tn-slider v-model="value1" :disabled="true"></tn-slider>
-          :min="min"
+        </view>
-          :max="max"
+      </demo-title>
-          :step="step"
+      
-          :disabled="disabled"
+      <demo-title title="设置最小最大值">
-          :blockWidth="blockWidth"
+        <tn-slider v-model="value2" :min="20" :max="80"></tn-slider>
-          :blockColor="blockColor"
+      </demo-title>
-          :lineHeight="lineHeight"
+      
-          :activeColor="activeColor"
+      <demo-title title="设置步进值">
-          :inactiveColor="inactiveColor"
+        <tn-slider v-model="value3" :step="10"></tn-slider>
-        >
+      </demo-title>
+      
+      <demo-title title="自定义滑块滑轨信息">
+        <tn-slider v-model="value5" :blockWidth="40" :lineHeight="10"></tn-slider>
+      </demo-title>
+      
+      <demo-title title="自定义颜色信息">
+        <tn-slider v-model="value6" blockColor="#838383" inactiveColor="#FAD8D6" activeColor="#31E749"></tn-slider>
+      </demo-title>
+      
+      <demo-title title="自定义滑块">
+        <tn-slider v-model="value7">
           <view class="tn-slider__custom-block">
-            {{ value }}
+            {{ value7 }}
           </view>
         </tn-slider>
-        <tn-slider
+      </demo-title>
-          v-else
-          v-model="value"
-          :min="min"
-          :max="max"
-          :step="step"
-          :disabled="disabled"
-          :blockWidth="blockWidth"
-          :blockColor="blockColor"
-          :lineHeight="lineHeight"
-          :activeColor="activeColor"
-          :inactiveColor="inactiveColor"
-        ></tn-slider>
       
-        <view class="slider-value">
+      <demo-title title="配合formItem使用">
-          <view class="slider-value__text">当前选值为：{{ value }}</view>
+        <tn-form>
-        </view>
+          <tn-form-item label="价格区间" :labelWidth="140">
-      </dynamic-demo-template>
+            <tn-slider v-model="value8"></tn-slider>
+          </tn-form-item>
+        </tn-form>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
       
     </view>
 
@@ -52,137 +56,32 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSlider',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        value: 0,
+        value1: 0,
-        min: 0,
+        value2: 0,
-        max: 100,
+        value3: 0,
-        step: 1,
+        value4: 0,
-        disabled: false,
+        value5: 0,
-        blockWidth: 30,
+        value6: 0,
-        blockColor: '#FFFFFF',
+        value7: 0,
-        lineHeight: 8,
+        value8: 0
-        activeColor: '#01BEFF',
-        inactiveColor: '#E6E6E6',
-        useSlot: false,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-slider组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '最小最大值',
-                optional: ['0-100','20-80'],
-                methods: 'minMaxChange'
-              },
-              {
-                title: '步进值',
-                optional: ['1','10','30'],
-                methods: 'stepChange'
-              },
-              {
-                title: '禁用状态',
-                optional: ['是','否'],
-                methods: 'disabledChange',
-                current: 1
-              },
-              {
-                title: '自定义尺寸',
-                optional: ['默认','自定义'],
-                methods: 'customSizeChange'
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'customColorChange'
-              },
-              {
-                title: '自定义滑块',
-                optional: ['默认','自定义'],
-                methods: 'customSliderBlockChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换最大最小值
-      minMaxChange(event) {
-        const value = event.name.split('-')
-        this.min = Number(value[0])
-        this.max = Number(value[1])
-      },
-      // 切换步进值
-      stepChange(event) {
-        this.step = Number(event.name)
-      },
-      // 切换禁用状态
-      disabledChange(event) {
-        this.disabled = event.index === 0 ? true : false
-      },
-      // 切换尺寸
-      customSizeChange(event) {
-        switch (event.index) {
-          case 0:
-            this.blockWidth = 30
-            this.lineHeight = 8
-            break
-          case 1:
-            this.blockWidth = 50
-            this.lineHeight = 12
-            break
     }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换颜色
-      customColorChange(event) {
-        switch (event.index) {
-          case 0:
-            this.activeColor = '#01BEFF'
-            this.inactiveColor = '#E6E6E6'
-            break
-          case 1:
-            this.activeColor = '#2DE88D'
-            this.inactiveColor = '#AAAAAA'
-            break
-        }
-      },
-      // 切换滑块
-      customSliderBlockChange(event) {
-        this.useSlot = event.index === 0 ? false : true
-        this.$refs.demoTemplate.updateSectionScrollView()
-      }
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
   
-  .slider-value {
+  .components-slider {
-    width: 100%;
+    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 30rpx;
-    
-    &__text {
-      width: 260rpx;
-      padding: 20rpx;
-      border-radius: 10rpx;
-      text-align: center;
-      background-color: $tn-font-holder-color;
-    }
   }
   
   .tn-slider__custom-block {
@@ -190,7 +89,7 @@
     width: auto;
     height: 40rpx;
     line-height: 40rpx;
-    padding: 0 5rpx;
+    padding: 0 10rpx;
     border-radius: 50%;
     text-align: center;
     color: #FFFFFF;

componentsPage/steps/steps.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-steps">
+  <view class="components-steps tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Steps步骤条</tn-nav-bar>
@@ -8,9 +8,46 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <view class="operate_btn">
-        <tn-steps :list="list" :current="current" :mode="mode" :direction="direction" :showTitle="showTitle" :activeColor="activeColor" :inActiveColor="inActiveColor"></tn-steps>
+        <view>
-      </dynamic-demo-template>
+          <tn-button backgroundColor="tn-bg-indigo" fontColor="tn-color-white" @click="prevStep">上一步</tn-button>
+        </view>
+        <view>
+          <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="nextStep">下一步</tn-button>
+        </view>
+      </view>
+      
+      <view class="tn-padding-top-lg"></view>
+      
+      <demo-title title="点模式">
+        <tn-steps :list="list" :current="current" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="数值模式">
+        <tn-steps :list="list" :current="current" mode="number" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="图标模式">
+        <tn-steps :list="list" :current="current" mode="icon" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="点图标模式">
+        <tn-steps :list="list" :current="current" mode="dotIcon" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="隐藏标题">
+        <tn-steps :list="list" :current="current" mode="icon" :showTitle="false" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-steps :list="list" :current="current" mode="icon" activeColor="#24F083" inActiveColor="#E6E6E6" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="垂直显示">
+        <tn-steps :list="list" :current="current" direction="column" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -19,10 +56,10 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSteps',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
         list: [
@@ -31,112 +68,38 @@
           {name: '第三步', icon: 'safe', selectIcon: 'safe-fill'},
           {name: '第四步', icon: 'vip', selectIcon: 'vip-fill'}
         ],
-        current: 0,
-        mode: 'dot',
-        direction: 'row',
-        showTitle: true,
-        activeColor: '#01BEFF',
-        inActiveColor: '#AAAAAA',
-        
-        tips: ['无需依赖额外的样式文件','使用tn-steps组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '步骤',
-                optional: ['上一步','下一步'],
-                methods: 'currentChange',
-                current: 1
-              },
-              {
-                title: '模式',
-                optional: ['点模式','数值模式','图标模式','点图标模式'],
-                methods: 'modeChange'
-              },
-              {
-                title: '方向',
-                optional: ['横向','竖直'],
-                methods: 'directionChange'
-              },
-              {
-                title: '显示标题',
-                optional: ['显示','隐藏'],
-                methods: 'showTitleChange'
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'colorChange'
-              }
-            ]
-          }
-        ]
         
+        current: 0
       }
     },
     methods: {
-      click(event) {
+      prevStep() {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换步骤
-      currentChange(event) {
         let current = this.current
-        if (event.index === 0) {
         current--
         this.current = current < 0 ? 0 : current
-        } else {
+      },
+      nextStep() {
+        let current = this.current
         current++
         this.current = current > this.list.length ? this.list.length : current
-        }
       },
-      // 切换模式
+      stepItemClick(e) {
-      modeChange(event) {
+        this.current = e.index
-        switch (event.index) {
-          case 0:
-            this.mode = 'dot'
-            break
-          case 1:
-            this.mode = 'number'
-            break
-          case 2:
-            this.mode = 'icon'
-            break
-          case 3:
-            this.mode = 'dotIcon'
-            break
-        }
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换方向
-      directionChange(event) {
-        this.direction = event.index === 0 ? 'row' : 'column'
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换标题情况
-      showTitleChange(event) {
-        this.showTitle = event.index === 0 ? true : false
-        this.$refs.demoTemplate.updateSectionScrollView()
-      },
-      // 切换颜色样式
-      colorChange(event) {
-        switch(event.index) {
-          case 0:
-            this.activeColor = '#01BEFF'
-            this.inActiveColor = '#AAAAAA'
-            break
-          case 1:
-            this.activeColor = '#24F083'
-            this.inActiveColor = '#E6E6E6'
-            break
       }
     }
 
-    },
-
   }
 </script>
 
 <style lang="scss" scoped>
-
+  .operate_btn {
+    position: fixed;
+    width: 100%;
+    padding: 0 30rpx;
+    margin: 30rpx 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1000;
+  }
 </style>

componentsPage/sticky/sticky.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-sticky" style="height: 200vh;">
+  <view class="components-sticky tn-safe-area-inset-bottom" style="height: 200vh;">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>sticky吸顶</tn-nav-bar>
@@ -8,11 +8,24 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
+      <demo-title title="吸顶">
-        <tn-sticky :offsetTop="offsetTop" :enabled="enabled" :customNavHeight="vuex_custom_bar_height" @fixed="fixed" @unfixed="unfixed">
+        <tn-sticky :offsetTop="0" :customNavHeight="vuex_custom_bar_height">
-          <view class="sticky-content">图鸟科技</view>
+          <view class="sticky-content tn-bg-orangered tn-color-white">普通吸顶</view>
         </tn-sticky>
-      </dynamic-demo-template>
+        <view style="margin-top: 200rpx;">
+          <tn-sticky :offsetTop="100" :customNavHeight="vuex_custom_bar_height">
+            <view class="sticky-content tn-bg-indigo tn-color-white">有距离吸顶</view>
+          </tn-sticky>
+        </view>
+      </demo-title>
+      
+      <demo-title title="取消吸顶">
+        <tn-sticky :offsetTop="0" :enabled="false" :customNavHeight="vuex_custom_bar_height">
+          <view class="sticky-content tn-bg-red tn-color-white">不允许吸顶</view>
+        </tn-sticky>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -21,69 +34,34 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSticky',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        offsetTop: 0,
-        enabled: true,
         
-        tips: ['无需依赖额外的样式文件','使用tn-sticky组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '吸顶距离',
-                optional: ['0','20','100'],
-                methods: 'offsetTopChange'
-              },
-              {
-                title: '状态',
-                optional: ['允许吸顶', '不吸顶'],
-                methods: 'enabledChange'
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换吸顶距离
-      offsetTopChange(event) {
-        this.offsetTop = Number(event.name)
-      },
-      // 切换吸顶状态
-      enabledChange(event) {
-        this.enabled = event.index === 0 ? true: false
-      },
       
-      // 监听是否吸顶
-      fixed() {
-        this.$t.messageUtils.toast('触发吸顶')
-      },
-      unfixed() {
-        this.$t.messageUtils.toast('取消吸顶')
     }
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
   
+  .components-sticky {
+    min-height: 100vh;
+  }
+  
   .sticky-content {
     height: 80rpx;
     padding: 0 80rpx;
     margin: 0 10rpx;
     line-height: 80rpx;
     text-align: center;
-    background-color: $tn-main-color;
     border-radius: 10rpx;
   }
 </style>

componentsPage/subsection/subsection.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="components-subsection tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>分段器</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-subsection :list="list"></tn-subsection>
+      </demo-title>
+      
+      <demo-title title="按钮模式">
+        <tn-subsection :list="list" mode="button"></tn-subsection>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection>
+        </view>
+      </demo-title>
+      
+      <demo-title title="取消切换动画">
+        <tn-subsection :list="list" :animation="false"></tn-subsection>
+      </demo-title>
+      
+      <demo-title title="贝塞尔曲线切换动画">
+        <tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection>
+        </view>
+      </demo-title>
+      
+      <demo-title title="选中字体设置为粗体">
+        <tn-subsection :list="list" :bold="true"></tn-subsection>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9" buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
+        </view>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30" inactiveColor="#838383"></tn-subsection>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsSubsection',
+    components: { demoTitle },
+    data() {
+      return {
+        list: ['全部','未付款','待发货','待收货','待评价']
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

componentsPage/swipe-action/swipe-action.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-index-list">
+  <view class="components-swipe-action tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar>
@@ -8,11 +8,14 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <tn-swipe-action>
+      <demo-title title="基本使用">
-        <tn-swipe-action-item :options="options1">
+        <!-- <tn-swipe-action>
+          
+        </tn-swipe-action> -->
+        <tn-swipe-action-item :options="options1" name="0" @click="onSwiperItemClick">
           <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>
+              <image src="https://resource.tuniaokj.com/images/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">
@@ -24,14 +27,14 @@
             </view>
           </view>
         </tn-swipe-action-item>
-      </tn-swipe-action>
+      </demo-title>
       
-      <view class="tn-padding-bottom"></view>
+      <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>
+                <image src="https://resource.tuniaokj.com/images/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">
@@ -44,13 +47,14 @@
             </view>
           </tn-swipe-action-item>
         </tn-swipe-action>
+      </demo-title>
       
-      <view class="tn-padding-bottom"></view>
+      <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>
+                <image src="https://resource.tuniaokj.com/images/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">
@@ -63,13 +67,14 @@
             </view>
           </tn-swipe-action-item>
         </tn-swipe-action>
+      </demo-title>
       
-      <view class="tn-padding-bottom"></view>
+      <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>
+                <image src="https://resource.tuniaokj.com/images/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">
@@ -82,13 +87,14 @@
             </view>
           </tn-swipe-action-item>
         </tn-swipe-action>
+      </demo-title>
       
-      <view class="tn-padding-bottom"></view>
+      <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>
+                <image src="https://resource.tuniaokj.com/images/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">
@@ -101,13 +107,14 @@
             </view>
           </tn-swipe-action-item>
         </tn-swipe-action>
+      </demo-title>
       
-      <view class="tn-padding-bottom"></view>
+      <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>
+                <image src="https://resource.tuniaokj.com/images/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">
@@ -120,7 +127,9 @@
             </view>
           </tn-swipe-action-item>
         </tn-swipe-action>
+      </demo-title>
       
+      <view class="tn-padding-bottom-lg"></view>
     </view>
 
   </view>
@@ -128,8 +137,10 @@
 </template>
 
 <script>
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSwipeAction',
+    components: { demoTitle },
     data() {
       return {
         // 滑动菜单
@@ -191,8 +202,15 @@
       }
     },
     methods: {
+      // 处理swiperActionItem点击事件
+      onSwiperItemClick(e) {
+        if (e.type === 'button') {
+          this.$tn.message.toast(`点击了第${e.index}个按钮`)
+        } else if (e.type === 'item') {
+          this.$tn.message.toast(`点击了item标签,name为${e.name}`)
+        }
+      }
     }
-
   }
 </script>
 

componentsPage/swiper/swiper.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-swiper">
+  <view class="components-swiper tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Swiper轮播图</tn-nav-bar>
@@ -8,214 +8,63 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="圆角方形">
-        <tn-swiper
+        <tn-swiper :list="list"></tn-swiper>
-          :list="list"
+      </demo-title>
-          :height="height"
+      
-          :backgroundColor="backgroundColor"
+      <demo-title title="方形">
-          :title="title"
+        <tn-swiper :list="list" mode="rect"></tn-swiper>
-          :titleStyle="titleStyle"
+      </demo-title>
-          :radius="radius"
+      
-          :mode="mode"
+      <demo-title title="点">
-          :indicatorPosition="indicatorPosition"
+        <tn-swiper :list="list" mode="dot"></tn-swiper>
-          :effect3d="effect3d"
+      </demo-title>
-          :effect3dPreviousSpacing="effect3dPreviousSpacing"
+      
-          :interval="interval"
+      <demo-title title="数值">
-          :duration="duration"
+        <tn-swiper :list="list" mode="number"></tn-swiper>
-          :circular="circular"
+      </demo-title>
-        ></tn-swiper>
+      
-      </dynamic-demo-template>
+      <demo-title title="隐藏指示器">
+        <tn-swiper :list="list" mode=""></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="轮播标题">
+        <tn-swiper :list="list" :title="true" mode=""></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="指示器设置在右上角">
+        <tn-swiper :list="list" indicatorPosition="topRight"></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="3D切换效果">
+        <tn-swiper :list="list" :effect3d="true"></tn-swiper>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
-    <!-- Toast -->
-    <tn-toast
-      ref="toast"
-      @closed="closedToast"
-    ></tn-toast>
-
   </view>
 
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSwiper',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
         list: [
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg', title: '春天'},
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg', title: '夏天'},
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'}
+          {image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg', title: '秋天'},
-        ],
+          {image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg', title: '冬天'},
-        height: 250,
-        backgroundColor: '',
-        title: false,
-        titleStyle: {},
-        radius: 8,
-        mode: 'round',
-        indicatorPosition: 'bottomCenter',
-        effect3d: false,
-        effect3dPreviousSpacing: 50,
-        interval: 3000,
-        duration: 500,
-        circular: true,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-swiper组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '指示器模式',
-                optional: ['方形','圆角方形','点','数值','隐藏'],
-                methods: 'modeChange',
-                current: 1
-              },
-              {
-                title: '指示器位置',
-                optional: ['左上','中上','右上','左下','中下','右下'],
-                methods: 'indicatorPositionChange',
-                current: 4
-              },
-              {
-                title: '标题',
-                optional: ['显示','隐藏'],
-                methods: 'titleChange',
-                current: 1
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'styleChange'
-              },
-              {
-                title: '3d切换效果',
-                optional: ['开启','关闭'],
-                methods: 'effect3dChange',
-                current: 1
-              },
-              {
-                title: '切换时间',
-                optional: ['默认','5000'],
-                methods: 'intervalChange'
-              }
         ]
       }
-        ]
-
-      }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换指示器模式
-      modeChange(event) {
-        switch (event.index) {
-          case 0:
-            this.mode = 'rect'
-            break
-          case 1:
-            this.mode = 'round'
-            break
-          case 2:
-            this.mode = 'dot'
-            break
-          case 3:
-            this.mode = 'number'
-            break
-          case 4:
-            this.mode = ''
-            break
     }
-      },
-      // 切换指示器位置
-      indicatorPositionChange(event) {
-        switch (event.index) {
-          case 0:
-            this.indicatorPosition = 'topLeft'
-            break
-          case 1:
-            this.indicatorPosition = 'topCenter'
-            break
-          case 2:
-            this.indicatorPosition = 'topRight'
-            break
-          case 3:
-            this.indicatorPosition = 'bottomLeft'
-            break
-          case 4:
-            this.indicatorPosition = 'bottomCenter'
-            break
-          case 5:
-            this.indicatorPosition = 'bottomRight'
-            break
-        }
-      },
-      // 切换标题
-      titleChange(event) {
-        this.title = event.index === 0 ? true : false
-      },
-      // 切换自定义样式
-      styleChange(event) {
-        switch (event.index) {
-          case 0:
-            this.height = 250
-            this.backgroundColor = ''
-            this.titleStyle = {}
-            this.radius = 8
-            this.effect3dPreviousSpacing = 50
-            break
-          case 1:
-            this.height = 300
-            this.backgroundColor = '#E6E6E6'
-            this.titleStyle = {
-              color: '#FFFFFF'
-            }
-            this.radius = 12
-            this.effect3dPreviousSpacing = 100
-            break
-        }
-      },
-      // 切换3d效果
-      effect3dChange(event) {
-        this.effect3d = event.index === 0 ? true : false
-      },
-      // 切换切换时间
-      intervalChange(event) {
-        switch (event.index) {
-          case 0:
-            this.interval = 3000
-            this.duration = 500
-            break
-          case 1:
-            this.interval = 5000
-            this.duration = 800
-            break
-        }
-      },
-      
-      
-      // 打开Toast
-      openToast() {
-        this.$refs.toast.show({
-          title: this.title,
-          content: this.content,
-          icon: this.icon,
-          image: this.image,
-          duration: this.duration
-        })
-      },
-      // 关闭Toast
-      closedToast() {
-        this.$t.messageUtils.toast('Toast关闭')
-      }
-
-    },
-
   }
 </script>
 

componentsPage/switch/switch.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-switch">
+  <view class="components-switch tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>Switch开光</tn-nav-bar>
@@ -8,18 +8,57 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+      <demo-title title="普通切换按钮">
-        <tn-switch
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
-          v-model="value"
+          <view>
-          :shape="shape"
+            <tn-switch v-model="value1"></tn-switch>
-          :size="size"
+          </view>
-          :activeColor="color"
+          <view class="tn-margin">
-          :disabled="disabled"
+            <tn-switch v-model="value2" shape="square"></tn-switch>
-          :loading="loading"
+          </view>
-          :leftIcon="leftIcon"
+          <view class="tn-margin">
-          :rightIcon="rightIcon"
+            <tn-switch v-model="value2" shape="square" :disabled="true"></tn-switch>
-        ></tn-switch>
+          </view>
-      </dynamic-demo-template>
+          <view class="tn-margin">
+            <tn-switch v-model="value2" shape="square" :loading="value2"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="按钮颜色">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value3" activeColor="#A4E82F"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value4" activeColor="#FFA4A4"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="按钮尺寸">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value5" :size="30"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value6"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value7" :size="60"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="按钮内嵌图标">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value8" leftIcon="sex-female" rightIcon="sex-male"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -28,104 +67,30 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsSwitch',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        value: false,
+        value1: false,
-        shape: 'circle',
+        value2: false,
-        color: '',
+        value3: false,
-        size: 50,
+        value4: false,
-        disabled: false,
+        value5: false,
-        loading: false,
+        value6: false,
-        leftIcon: '',
+        value7: false,
-        rightIcon: '',
+        value8: false,
-        
-        tips: ['无需依赖额外的样式文件','使用tn-switch组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '形状',
-                optional: ['圆角','方角'],
-                methods: 'shapeChange'
-              },
-              {
-                title: '禁用',
-                optional: ['是','否'],
-                methods: 'disabledChange',
-                current: 1
-              },
-              {
-                title: '颜色',
-                optional: ['默认','#A4E82F','#FFA4A4'],
-                methods: 'colorChange'
-              },
-              {
-                title: '尺寸',
-                optional: ['40','50','80'],
-                methods: 'sizeChange',
-                current: 1
-              },
-              {
-                title: '加载中',
-                optional: ['是','否'],
-                methods: 'loadingChange',
-                current: 1
-              },
-              {
-                title: '显示图标',
-                optional: ['是','否'],
-                methods: 'iconChange',
-                current: 1
-              }
-            ]
-          }
-        ]
       }
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换形状
-      shapeChange(event) {
-        this.shape = event.index === 0 ? 'circle' : 'square'
-      },
-      // 切换禁用状态
-      disabledChange(event) {
-        this.disabled = event.index === 0 ? true : false
-      },
-      // 切换颜色
-      colorChange(event) {
-        this.color = event.index === 0 ? '' : event.name
-      },
-      // 切换尺寸
-      sizeChange(event) {
-        this.size = Number(event.name)
-      },
-      // 切换加载状态
-      loadingChange(event) {
-        this.loading = event.index === 0 ? true : false
-      },
-      // 切换图标状态
-      iconChange(event) {
-        if (event.index === 0) {
-          this.leftIcon = 'sex-female'
-          this.rightIcon = 'sex-male'
-        } else if (event.index === 1) {
-          this.leftIcon = ''
-          this.rightIcon = ''
     }
-      }
-
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
+  .components-switch {
+    min-height: 100vh;
+  }
 </style>

componentsPage/tabs/tabs.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <view class="components-tabs">
+  <view class="components-tabs tn-safe-area-inset-bottom">
 
     <!-- 顶部自定义导航 -->
     <tn-nav-bar fixed>tabs标签</tn-nav-bar>
@@ -8,26 +8,34 @@
     <!-- 页面内容 -->
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
-      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+      <demo-title title="默认" :contentPadding="false">
-        <tn-tabs
+        <tn-tabs :list="scrollList" :current="current" @change="tabChange"></tn-tabs>
-          v-if="show"
+      </demo-title>
-          :list="list"
+      
-          :current="current"
+      <demo-title title="隐藏底部滑块" :contentPadding="false">
-          :isScroll="isScroll"
+        <tn-tabs :list="scrollList" :current="current" :showBar="false" @change="tabChange"></tn-tabs>
-          :height="height"
+      </demo-title>
-          :itemWidth="itemWidth"
+      
-          :activeColor="activeColor"
+      <demo-title title="修改背景颜色" :contentPadding="false">
-          :inactiveColor="inactiveColor"
+        <tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" @change="tabChange"></tn-tabs>
-          :activeItemStyle="activeItemStyle"
+        <view class="tn-margin-top">
-          :showBar="showBar"
+          <tn-tabs :list="scrollList" :current="current" backgroundColor="tn-main-gradient-indigo" activeColor="#FFFFFF" @change="tabChange"></tn-tabs>
-          :barWidth="barWidth"
+        </view>
-          :barHeight="barHeight"
+      </demo-title>
-          :barStyle="barStyle"
+      
-          :gutter="gutter"
+      <demo-title title="自定义标签宽高" :contentPadding="false">
-          :badgeOffset="badgeOffset"
+        <tn-tabs :list="scrollList" :current="current" :height="120" :itemWidth="200" :barWidth="140" @change="tabChange"></tn-tabs>
-          @change="tabChange"
+      </demo-title>
-        ></tn-tabs>
+      
-      </dynamic-demo-template>
+      <demo-title title="自定义标签、滑块" :contentPadding="false">
+        <tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" :activeItemStyle="activeItemStyle" :barStyle="barStyle" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <demo-title title="固定选项标签" :contentPadding="false">
+        <tn-tabs :list="fixedList" :current="current" :isScroll="false" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
 
     </view>
 
@@ -36,14 +44,20 @@
 </template>
 
 <script>
-  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  import demoTitle from '@/libs/components/demo-title.vue'
   export default {
     name: 'componentsTabs',
-    components: {dynamicDemoTemplate},
+    components: {demoTitle},
     data() {
       return {
-        show: true,
+        current: 0,
-        data: [
+        activeItemStyle: {
+          borderTop: '1rpx solid #E6E6E6'
+        },
+        barStyle: {
+          boxShadow: `12rpx 12rpx 16rpx #01BEFF`
+        },
+        scrollList: [
           {name: '关注', count: 10},
           {name: '推荐'},
           {name: '热榜', count: '99+'},
@@ -54,198 +68,27 @@
           {name: '电影'},
           {name: '游戏'}
         ],
-        list: [],
+        fixedList: [
-        current: 0,
+          {name: '关注', count: 10},
-        isScroll: true,
+          {name: '推荐'},
-        height: 80,
+          {name: '热榜', count: '99+'},
-        itemWidth: 'auto',
+          {name: '搞笑'}
-        activeColor: '#01BEFF',
-        inactiveColor: '#080808',
-        activeItemStyle: {},
-        showBar: true,
-        barWidth: 40,
-        barHeight: 6,
-        barStyle: {},
-        gutter: 30,
-        badgeOffset: [20, 22],
-        
-        tips: ['无需依赖额外的样式文件','使用tn-tabs组件'],
-        sectionList: [
-          {
-            name: '参数切换',
-            section: [
-              {
-                title: '模式选择',
-                optional: ['滑动','非滑动'],
-                methods: 'modeChange'
-              },
-              {
-                title: '标签数量',
-                optional: ['2','3','4','5'],
-                methods: 'countChange',
-                show: false
-              },
-              {
-                title: '显示底部滑块',
-                optional: ['显示','隐藏'],
-                methods: 'showBarChange'
-              },
-              {
-                title: '自定义宽高',
-                optional: ['默认','自定义'],
-                methods: 'customWidthHeightChange'
-              },
-              {
-                title: '自定义颜色',
-                optional: ['默认','自定义'],
-                methods: 'customColorChange'
-              },
-              {
-                title: '自定义样式',
-                optional: ['默认','自定义'],
-                methods: 'customStyleChange'
-              }
         ]
       }
-        ]
-      }
-    },
-    onLoad() {
-      this.list = this.data
     },
     methods: {
-      click(event) {
-        this[event.methods] && this[event.methods](event)
-      },
-      // 切换模式
-      modeChange(event) {
-        this.show = false
-        this.current = 0
-        this.isScroll = event.index === 0 ? true : false
-        
-        if (event.index === 0) {
-          this.list = this.data
-          this.badgeOffset = [20, 22]
-          this.$refs.demoTemplate.updateSectionBtnsState(1, false)
-        } else if (event.index === 1) {
-          this.$refs.demoTemplate.updateSectionBtnsState(1, true)
-          this.$refs.demoTemplate.updateSectionBtnsValue(0, 1, 0)
-          this.countChange({index: 0, name: 2})
-        }
-        
-        this.$nextTick(() => {
-          this.show = true
-        })
-      },
-      // 切换标签数量
-      countChange(event) {
-        this.show = false
-        this.list = this.data.slice(0, Number(event.name))
-        switch (event.index) {
-          case 0:
-            this.badgeOffset = [20, 120]
-            break
-          case 1:
-            this.badgeOffset = [20, 70]
-            break
-          case 2:
-            this.badgeOffset = [20, 50]
-            break
-          case 3:
-            this.badgeOffset = [20, 22]
-            break
-        }
-        
-        this.$nextTick(() => {
-          this.show = true
-        })
-      },
-      // 切换底部滑块显示
-      showBarChange(event) {
-        this.show = false
-        this.showBar = event.index === 0 ? true : false
-        
-        this.$nextTick(() => {
-          this.show = true
-        })
-      },
-      // 切换自定义宽高
-      customWidthHeightChange(event) {
-        this.show = false
-        switch(event.index) {
-          case 0:
-            this.height = 80
-            this.itemWidth = 'auto'
-            this.barWidth = 40
-            this.barHeight = 6
-            this.gutter = 30
-            break
-          case 1:
-            this.height = 100
-            this.itemWidth = '40%'
-            this.barWidth = 130
-            this.barHeight = 4
-            this.gutter = 10
-            break
-        }
-        
-        this.$nextTick(() => {
-          this.show = true
-          this.$refs.demoTemplate.updateSectionScrollView()
-        })
-      },
-      // 切换颜色
-      customColorChange(event) {
-        this.show = false
-        switch(event.index) {
-          case 0:
-            this.activeColor = '#01BEFF'
-            this.inactiveColor = '#080808'
-            break
-          case 1:
-            this.activeColor = '#31E749'
-            this.inactiveColor = '#AAAAAA'
-            break
-        }
-        
-        this.$nextTick(() => {
-          this.show = true
-        })
-      },
-      // 切换自定义样式
-      customStyleChange(event) {
-        this.show = false
-        switch(event.index) {
-          case 0:
-            this.activeItemStyle = {}
-            this.barStyle = {}
-            break
-          case 1:
-            this.activeItemStyle = {
-              borderTop: '1rpx solid #E6E6E6'
-            }
-            this.barStyle = {
-              boxShadow: `6rpx 6rpx 8rpx ${this.activeColor}`
-            }
-            break
-        }
-        
-        this.$nextTick(() => {
-          this.show = true
-        })
-      },
-      
-      
       // tab选项卡切换
       tabChange(index) {
         this.current = index
       }
-
+    }
-    },
 
   }
 </script>
 
 <style lang="scss" scoped>
-
+  .components-tabs {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
 </style>

componentsPage/tips/tips.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <tn-button fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
       </dynamic-demo-template>
 
     </view>
@@ -120,7 +120,7 @@
       },
       // 关闭Tips
       closeTips() {
-        this.$t.messageUtils.toast('tips提示框关闭了')
+        this.$tn.message.toast('tips提示框关闭了')
       }
 
     },

componentsPage/toast/toast.vue

@@ -9,7 +9,7 @@
     <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
       
       <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
-        <tn-button fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
       </dynamic-demo-template>
 
     </view>
@@ -102,7 +102,7 @@
             break
           case 2:
             this.icon = ''
-            this.image = '/static/logo1.png'
+            this.image = '/static/favicon.ico'
             break
         }
         this.openToast()
@@ -126,7 +126,7 @@
       },
       // 关闭Toast
       closedToast() {
-        this.$t.messageUtils.toast('Toast关闭')
+        this.$tn.message.toast('Toast关闭')
       }
 
     },

componentsPage/verification-code-input/verification-code-input.vue

@@ -0,0 +1,91 @@
+<template>
+  <view class="components-verification-code-input tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>验证码输入</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础使用">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value1"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="居中提示线">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="底部提示线">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改验证码长度">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="使用圆点隐藏已输入">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="不带呼吸效果">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="字体加粗">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF" inactiveColor="#9EBEFF"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsVerificationCode',
+    components: { demoTitle },
+    data() {
+      return {
+        value1: '24',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-verification-code-input {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>

componentsPage/verification-code/verification-code.vue

@@ -15,7 +15,7 @@
               <tn-form-item label="验证码">
                 <tn-input></tn-input>
                 <view slot="right">
-                  <tn-button fontColor="tn-color-white" @click="getCode">{{ tips }}</tn-button>
+                  <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" size="sm" @click="getCode">{{ tips }}</tn-button>
                 </view>
               </tn-form-item>
             </tn-form>
@@ -119,15 +119,15 @@
       // 获取验证码
       getCode() {
         if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$tn.message.loading('正在获取验证码')
           setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
+            this.$tn.message.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$tn.message.toast('验证码已经发送')
             // 通知组件开始计时
             this.$refs.code.start()
           }, 2000)
         } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
         }
       },
       
@@ -138,11 +138,11 @@
       
       // 开始倒计时
       codeStart() {
-        this.$t.messageUtils.toast('倒计时开始')
+        this.$tn.message.toast('倒计时开始')
       },
       // 结束倒计时
       codeEnd() {
-        this.$t.messageUtils.toast('倒计时结束')
+        this.$tn.message.toast('倒计时结束')
       },
       // 正在倒计时
       codeChange(event) {

demo.txt

@@ -0,0 +1 @@
+sdfsdfsdf

libs/components/demo-title.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="demo-title">
+    <view>
+      <view v-if="type === 'first'" class="main_title">
+        <view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
+        <view class="main_title__content">{{ title }}</view>
+        <view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
+      </view>
+      <view v-if="type === 'second'" class="second_title">
+        <view class="second_title__content">{{ title }}</view>
+      </view>
+    </view>
+    <view class="content" :class="[{
+      'content--padding': contentPadding
+    }]">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'demo-title',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    props: {
+      // 标题类型
+      type: {
+        type: String,
+        default: 'first'
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 左图标
+      leftIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 右图标
+      rightIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 内容容器是否有两边边距
+      contentPadding: {
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .main_title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 50rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    
+    &__content {
+      padding: 0 18rpx;
+    }
+    
+    &__icon {
+      font-size: 34rpx;
+    }
+  }
+  
+  .second_title {
+    margin: 24rpx 0;
+    margin-left: 30rpx;
+    
+    &__content {
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+  }
+  
+  .content {
+    margin-top: 30rpx;
+    
+    &--padding {
+      margin-left: 30rpx;
+      margin-right: 30rpx;
+    }
+  }
+</style>

libs/components/dynamic-demo-template.vue

@@ -2,7 +2,7 @@
   <view class="dynamic-demo">
 
     <!-- 效果预览窗口 -->
-    <view class="demo-container" :class="{'demo-container--full': full}">
+    <view v-if="!noDemo" class="demo-container" :class="{'demo-container--full': full}">
       <view class="demo">
         <slot></slot>
       </view>
@@ -91,6 +91,11 @@
       fullWindowsScroll: {
         type: Boolean,
         default: false
+      },
+      // 没有演示内容
+      noDemo: {
+        type: Boolean,
+        default: false
       }
     },
     computed: {
@@ -115,7 +120,7 @@
     data() {
       return {
         // 图鸟颜色列表
-        tuniaoColorList: this.$t.colorUtils.getTuniaoColorList(),
+        tuniaoColorList: this.$tn.color.getTuniaoColorList(),
         // 保存选项列表信息（由于prop中的数据时不能被修改的）
         _sectionList: [],
         // 模式列表信息
@@ -217,6 +222,7 @@
                 }
               }).exec()
             } else {
+              if (!this.noDemo) {
                 uni.createSelectorQuery().in(this).select('.demo-container').boundingClientRect(data => {
                   if (data.bottom >= systemInfo.safeArea.height) {
                     this.sectionScrollFlag = false
@@ -226,6 +232,9 @@
                     this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
                   }
                 }).exec()
+              } else {
+                this.sectionScrollFlag = false
+              }
             }
             
           }
@@ -301,7 +310,7 @@
           }
         })
         
-        this._sectionList = this.$t.deepClone(this.sectionList)
+        this._sectionList = this.$tn.deepClone(this.sectionList)
         // 给本地选项按钮列表给默认show属性
         this._sectionList.map((item) => {
           const section = item.section.map((section_item) => {
@@ -344,7 +353,7 @@
       // 更新选项按钮状态信息
       updateSectionBtnsState(sectionIndex = -1, showState = true) {
         // 判断sectionIndex是否为数组
-        if (this.$t.array.isArray(sectionIndex)) {
+        if (this.$tn.array.isArray(sectionIndex)) {
           if (sectionIndex.length === 0) {
             return
           }
@@ -544,7 +553,7 @@
             display: block;
             
             &:last-child {
-              padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+              padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
             }
           }
 

libs/components/multiple-options-demo.vue

@@ -0,0 +1,147 @@
+<template>
+  <view class="multiple-options">
+    <view class="list">
+      <block v-for="(item, index) in listData" :key="index">
+        <view
+          class="list__item"
+          :class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
+          @tap="navOptionsPage(item.url)"
+        >
+          <view class="list__content">
+            <view class="list__content__title">{{ item.title }}</view>
+            <view class="list__content__desc">{{ item.desc }}</view>
+          </view>
+          <view class="list__icon">
+            <view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+            <view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'multiple-options-demo',
+    props: {
+      // 显示的列表数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        // 图鸟颜色列表
+        tuniaoColorList: [
+          'red',
+          'purplered',
+          'purple',
+          'bluepurple',
+          'aquablue',
+          'blue',
+          'indigo',
+          'cyan',
+          'teal',
+          'green',
+          'orange',
+          'orangered'
+        ],
+        listData: []
+      }
+    },
+    watch: {
+      list(val) {
+        this.initList()
+      }
+    },
+    created() {
+      this.initList()
+    },
+    methods: {
+      // 初始化列表数据
+      initList() {
+        // 给列表添加背景颜色数据
+        this.listData = this.list.map((item, index) => {
+          item.bgColorIndex = this.getBgNum()
+          item.mainIcon = item?.mainIcon || 'computer-fill'
+          item.subIcon = item?.subIcon || 'share'
+          return item
+        })
+      },
+      // 跳转到对应的选项页面
+      navOptionsPage(url) {
+        uni.navigateTo({
+          url: url
+        })
+      },
+      // 获取酷炫背景随机数
+      getBgNum() {
+        return Math.floor((Math.random() * this.tuniaoColorList.length))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .list {
+    
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 60rpx);
+      margin: 108rpx 30rpx 0rpx 30rpx;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 20rpx;
+    }
+    
+    &__content {
+      flex: 1;
+      // color: $tn-font-color;
+      margin: 34rpx 0rpx 27rpx 37rpx;
+      
+      &__title {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-bottom: 12rpx;
+      }
+      &__desc {
+        font-size: 28rpx;
+      }
+    }
+    
+    &__icon {
+      flex: 1;
+      margin-right: 26rpx;
+      position: relative;
+      
+      &__main, &__sub {
+        -webkit-background-clip: text;
+        color: transparent;
+        position: absolute;
+        transition: transform 0.25s ease;
+      }
+      
+      &__main {
+        font-size: 200rpx;
+        width: 190rpx;
+        line-height: 200rpx;
+        top: 0;
+        right: 0rpx;
+        transform: translateY(-60%);
+      }
+      &__sub {
+        font-size: 70rpx;
+        top: 0;
+        right: 175rpx;
+        transform: translateY(-5rpx);
+      }
+    }
+  }
+</style>

libs/components/nav-index-button.vue

@@ -44,7 +44,7 @@
         if (pages && pages.length > 0) {
           const indexPath = this.indexPath || '/pages/index/index'
           const firstPage = pages[0]
-          if (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length)) {
+          if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
             uni.reLaunch({
               url: indexPath
             })
@@ -100,7 +100,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }
@@ -133,7 +133,7 @@
           display: block;
           width: 100%;
           height: 100%;
-          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc3.png) no-repeat center center;
+          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
           background-size: 100% 100%;
           animation: arc 4s linear infinite;
         }

libs/mixin/template_page_mixin.js

@@ -7,6 +7,10 @@ module.exports = {
       
     }
   },
+  onLoad() {
+    // 更新顶部导航栏信息
+    this.updateCustomBarInfo()
+  },
   methods: {
     // 点击左上角返回按钮时触发事件
     goBack() {
@@ -14,7 +18,7 @@ module.exports = {
       const pages = getCurrentPages()
       if (pages && pages.length > 0) {
         const firstPage = pages[0]
-        if (!firstPage.route || firstPage.route != 'pages/index/index') {
+        if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
           uni.reLaunch({
             url: '/pages/index/index'
           })
@@ -28,6 +32,29 @@ module.exports = {
           url: '/pages/index/index'
         })
       }
+    },
+    // 更新顶部导航栏信息
+    async updateCustomBarInfo() {
+      // 获取vuex中的自定义顶栏的高度
+      let customBarHeight = this.vuex_custom_bar_height
+      let statusBarHeight = this.vuex_status_bar_height
+      // 如果获取失败则重新获取
+      if (!customBarHeight) {
+        try {
+          const navBarInfo = await this.$tn.updateCustomBar()
+          customBarHeight = navBarInfo.customBarHeight
+          statusBarHeight = navBarInfo.statusBarHeight
+        } catch(e) {
+          setTimeout(() => {
+            this.updateCustomBarInfo()
+          }, 10)
+          return
+        }
+      }
+      
+      // 更新vuex中的导航栏信息
+      this.$tn.vuex('vuex_status_bar_height', statusBarHeight)
+      this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
     }
   }
 }

main.js

@@ -10,7 +10,7 @@ import TuniaoUI from 'tuniao-ui'
 Vue.use(TuniaoUI)
 
 // 引入TuniaoUI提供的vuex简写方法
-let vuexStore = require('@/store/$t.mixin.js')
+let vuexStore = require('@/store/$tn.mixin.js')
 Vue.mixin(vuexStore)
 
 // 引入TuniaoUI对小程序分享的mixin封装
@@ -21,4 +21,8 @@ const app = new Vue({
   store,
   ...App
 })
+
+// 引入请求封装
+require('./util/request/index')(app)
+
 app.$mount()

manifest.json

@@ -1,7 +1,7 @@
 {
-    "name" : "TuniaoUI_UniApp_Opensource",
+    "name" : "TuniaoUI_V2",
     "appid" : "__UNI__C82400B",
-    "description" : "TuniaoUI 开源版本",
+    "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
@@ -43,20 +43,64 @@
             /* ios打包配置 */
             "ios" : {},
             /* SDK配置 */
-            "sdkConfigs" : {}
+            "sdkConfigs" : {},
+            "splashscreen" : {
+                "androidStyle" : "common"
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            }
         }
     },
     /* 快应用特有相关 */
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx97458d91caa76a6a",
+        "appid" : "wxf3d81a452b88ff4b",
         "setting" : {
             "urlCheck" : false,
             "es6" : true,
-            "minified" : true
+            "minified" : true,
+            "postcss" : true
         },
-        "usingComponents" : true
+        "usingComponents" : true,
+        "optimization" : {
+            "subPackages" : true
+        },
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "获取您的位置信息方便为您提供服务"
+            }
+        }
     },
     "mp-alipay" : {
         "usingComponents" : true
@@ -72,13 +116,18 @@
     },
     "vueVersion" : "2",
     "h5" : {
-        "template" : "template.h5.html",
         "title" : "Tuniao UI",
+        "template" : "template.h5.html",
         "router" : {
-            "mode" : "hash"
+            "mode" : "hash",
+            "base" : "./"
         },
         "sdkConfigs" : {
-            "maps" : {}
+            "maps" : {
+                "qqmap" : {
+                    "key" : "IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5"
+                }
+            }
         }
     }
 }

mock/basic_page.js

@@ -3,6 +3,10 @@
  */
 export default {
   data: [
+    {
+      title: '基础元素',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
         {
           icon: 'menu-more',
           title: 'Flex布局',
@@ -54,4 +58,31 @@ export default {
           url: '/basicPage/avatar/avatar'
         }
       ]
+    }, {
+      title: '常用工具',
+      backgroundColor: 'tn-cool-bg-color-2',
+      list: [
+        {
+          icon: 'code',
+          title: 'String工具',
+          url: '/basicPage/utils/string/index'
+        },
+        {
+          icon: 'code',
+          title: 'Number工具',
+          url: '/basicPage/utils/number/index'
+        },
+        {
+          icon: 'code',
+          title: 'Message工具',
+          url: '/basicPage/utils/message/index'
+        },
+        {
+          icon: 'code',
+          title: 'Color工具',
+          url: '/basicPage/utils/color/index'
+        }
+      ]
+    }
+  ]
 }

mock/components_page.js

@@ -18,7 +18,7 @@ export default {
           url: '/componentsPage/loading/loading'
         },
         {
-          icon: 'share',
+          icon: 'tag',
           title: 'tabs标签',
           url: '/componentsPage/tabs/tabs'
         },
@@ -73,9 +73,39 @@ export default {
           url: '/componentsPage/scroll-list/scroll-list'
         },
         {
-          icon: 'star',
+          icon: 'brand',
           title: 'swipeAction滑动菜单',
           url: '/componentsPage/swipe-action/swipe-action'
+        },
+        {
+          icon: 'pharmacy',
+          title: 'fab悬浮按钮',
+          url: '/componentsPage/fab/fab'
+        },
+        {
+          icon: 'cardbag',
+          title: '懒加载',
+          url: '/componentsPage/lazy-load/lazy-load'
+        },
+        {
+          icon: 'down-double',
+          title: '加载更多',
+          url: '/componentsPage/load-more/load-more'
+        },
+        {
+          icon: 'menu-more',
+          title: '骨架屏',
+          url: '/componentsPage/skeleton/skeleton'
+        },
+        {
+          icon: 'empty-search',
+          title: '空页面',
+          url: '/componentsPage/empty/empty'
+        },
+        {
+          icon: 'share',
+          title: '商品导航',
+          url: '/componentsPage/goods-nav/goods-nav'
         }
       ]
     },
@@ -103,6 +133,11 @@ export default {
           title: '提示信息框',
           url: '/componentsPage/tips/tips'
         },
+        {
+          icon: 'reply',
+          title: '压屏窗',
+          url: '/componentsPage/landscape/landscape'
+        }
       ]
     },
     {
@@ -114,6 +149,21 @@ export default {
           title: 'Form表单',
           url: '/componentsPage/form/form'
         },
+        {
+          icon: 'square',
+          title: 'Input输入框',
+          url: '/componentsPage/input/input'
+        },
+        {
+          icon: 'circle-fill',
+          title: 'Radio单选框',
+          url: '/componentsPage/radio/radio'
+        },
+        {
+          icon: 'copy',
+          title: 'Checkbox复选框',
+          url: '/componentsPage/check-box/check-box'
+        },
         {
           icon: 'ticket',
           title: 'ActionSheet操作菜单',
@@ -154,6 +204,16 @@ export default {
           title: '签名板',
           url: '/componentsPage/sign-board/sign-board'
         },
+        {
+          icon: 'safe',
+          title: '验证码输入',
+          url: '/componentsPage/verification-code-input/verification-code-input'
+        },
+        {
+          icon: 'expand',
+          title: '分段器',
+          url: '/componentsPage/subsection/subsection'
+        }
       ]
     },
     {

mock/template_page.js

@@ -8,14 +8,82 @@ export default {
       backgroundColor: 'tn-cool-bg-color-1',
       list: [
         {
-          icon: 'order',
+          icon: 'send',
           title: '火箭登录',
+          author: '图鸟北北',
           url: '/templatePage/login/demo1/demo1'
         },
         {
-          icon: 'order',
+          icon: 'send',
           title: '粒子登录',
+          author: '图鸟北北',
           url: '/templatePage/login/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '背景登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '简约登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo4/demo4'
+        }
+      ]
+    },
+    {
+      title: '充值提现',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '蓝色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '绿色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '暗黑充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo3/demo3'
+        }
+      ]
+    },
+    {
+      title: '个人中心',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '夏天个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '图鸟个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '外卖个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '高端个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo4/demo4'
         }
       ]
     },
@@ -24,56 +92,130 @@ export default {
       backgroundColor: 'tn-cool-bg-color-1',
       list: [
         {
-          icon: 'order',
+          icon: 'send',
           title: '音乐首页',
+          author: '图鸟北北',
           url: '/templatePage/home/music/music'
         },
         {
-          icon: 'order',
+          icon: 'send',
           title: '课程首页',
+          author: '图鸟北北',
           url: '/templatePage/home/course/course'
         },
         {
-          icon: 'order',
+          icon: 'send',
           title: '设计首页',
+          author: '图鸟北北',
           url: '/templatePage/home/design/design'
         },
         {
-          icon: 'order',
+          icon: 'send',
           title: '招聘首页',
+          author: '图鸟北北',
           url: '/templatePage/home/job/job'
         },
         {
-          icon: 'order',
+          icon: 'send',
           title: '投屏首页',
+          author: '图鸟北北',
           url: '/templatePage/home/screen/screen'
         },
         {
-          icon: 'order',
+          icon: 'send',
           title: '壁纸首页',
+          author: '图鸟北北',
           url: '/templatePage/home/wallpaper/wallpaper'
         },
       ]
     },
     {
-      title: '其他页面',
+      title: '骚气页面',
       backgroundColor: 'tn-cool-bg-color-1',
       list: [
         {
-          icon: 'order',
+          icon: 'send',
           title: '健康码',
+          author: '图鸟北北',
           url: '/templatePage/health/qrcode/qrcode'
         },
-        
         {
-          icon: 'order',
+          icon: 'send',
+          title: '关于我们',
+          author: 'Jaylen',
+          url: '/templatePage/life/about/about'
+        },
+        {
+          icon: 'send',
+          title: '全新出发',
+          author: '你的小可爱',
+          url: '/templatePage/life/outset/outset'
+        },
+        {
+          icon: 'send',
+          title: '资讯左图',
+          author: '图鸟北北',
+          url: '/templatePage/article/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '资讯右图',
+          author: '图鸟北北',
+          url: '/templatePage/article/demo2/demo2'
+        },
+        {
+          icon: 'send',
           title: '全屏轮播',
+          author: '图鸟北北',
           url: '/templatePage/life/fullpage/fullpage'
         },
         {
-          icon: 'order',
+          icon: 'rocket',
           title: '浏览器',
+          author: '图鸟北北',
           url: '/templatePage/life/browser/browser'
+        },
+        {
+          icon: 'rocket',
+          title: '时钟',
+          author: '图鸟北北',
+          url: '/templatePage/time/clock/clock'
+        }
+      ]
+    },
+    {
+      title: '加载动画',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '加载动画1',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading'
+        },
+        {
+          icon: 'send',
+          title: '加载动画2',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading2'
+        },
+        {
+          icon: 'send',
+          title: '加载动画3',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading3'
+        },
+        {
+          icon: 'send',
+          title: '加载动画4',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading4'
+        },
+        {
+          icon: 'send',
+          title: '加载动画5',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading5'
         }
       ]
     },
@@ -82,24 +224,76 @@ export default {
        backgroundColor: 'tn-cool-bg-color-1',
        list: [
          {
-           icon: 'order',
+           icon: 'send',
-           title: '加载动画',
+           title: '流星悬浮',
-           url: '/templatePage/animate/loading/loading'
+           author: '图鸟北北',
+           url: '/templatePage/animate/suspended/suspended'
          },
          {
-           icon: 'order',
+           icon: 'send',
            title: '随机粒子',
+           author: 'Jaylen',
            url: '/templatePage/animate/particle/particle'
          },
          {
-           icon: 'order',
+           icon: 'send',
            title: '相册图集',
+           author: '你的小可爱',
            url: '/templatePage/animate/photo/photo'
          },
          {
-           icon: 'order',
+           icon: 'send',
            title: '镂空效果',
+           author: '你的小可爱',
            url: '/templatePage/animate/hollow/hollow'
+         },
+         {
+           icon: 'send',
+           title: '泡泡飘出',
+           author: 'Jaylen',
+           url: '/templatePage/animate/bubble/bubble'
+         },
+         {
+           icon: 'send',
+           title: 'css波浪',
+           author: '图鸟北北',
+           url: '/templatePage/animate/wave/wave'
+         }
+       ]
+     },
+     {
+        title: '群友力献',
+        backgroundColor: 'tn-cool-bg-color-1',
+        list: [
+          {
+            icon: 'send',
+            title: '3D全景(第三方，有免费版付费版)',
+            author: '图鸟北北 & 芊云全景',
+            url: '/templatePage/life/pano/pano'
+          },
+          {
+            icon: 'send',
+            title: '3D模型(第三方，有免费版付费版)',
+            author: '图鸟北北 & 芊云全景',
+            url: '/templatePage/life/pano/model'
+          },
+          {
+            icon: 'send',
+            title: '微信红包封面',
+            author: '微信红包封面',
+            url: '/templatePage/life/cover/cover'
+          },
+          {
+            icon: 'send',
+            title: '营销小游戏-魔方',
+            author: '最帅的你',
+            url: '/templatePage/life/cube/cube'
+          },
+          {
+            icon: 'rocket',
+            title: '图鸟生态，期待你的加入',
+            author: '合作微信 tnkewo',
+            url: '/templatePage/life/candle/candle'
           }
         ]
       }

mock/vip_page.js

@@ -0,0 +1,305 @@
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [{
+      title: '圈子博客',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '操作指引',
+          author: '图鸟科技',
+          url: '/vipPage/life/guide/guide'
+        },{
+          icon: 'order',
+          title: '首次指引',
+          author: '图鸟科技',
+          url: '/vipPage/life/start/start'
+        },
+        {
+          icon: 'order',
+          title: '圈子首页',
+          author: '图鸟科技',
+          url: '/vipPage/blog/blog/blog'
+        },
+        {
+          icon: 'order',
+          title: '社交圈子',
+          author: '图鸟科技',
+          url: '/vipPage/blog/socialize/socialize'
+        },
+        {
+          icon: 'order',
+          title: '简约圈子(旧)',
+          author: '图鸟科技',
+          url: '/vipPage/blog/circle/circle'
+        },
+        {
+          icon: 'order',
+          title: '圈子个人',
+          author: '图鸟科技',
+          url: '/vipPage/blog/myblog/myblog'
+        },
+        {
+          icon: 'order',
+          title: '消息通知',
+          author: '图鸟科技',
+          url: '/vipPage/blog/message/message'
+        },
+        {
+          icon: 'order',
+          title: '商品优选',
+          author: '图鸟科技',
+          url: '/vipPage/blog/prefer/prefer'
+        },
+        {
+          icon: 'order',
+          title: '优选详情',
+          author: '图鸟科技',
+          url: '/vipPage/blog/product/product'
+        },
+        {
+          icon: 'order',
+          title: '博客博主',
+          author: '图鸟科技',
+          url: '/vipPage/blog/blogger/blogger'
+        },
+        {
+          icon: 'order',
+          title: '酷炫功能',
+          author: '图鸟科技',
+          url: '/vipPage/home/cool/cool'
+        },
+        {
+          icon: 'order',
+          title: '友情链接',
+          author: '图鸟科技',
+          url: '/vipPage/home/link/link'
+        },
+        {
+          icon: 'order',
+          title: '祝福页面',
+          author: '图鸟科技',
+          url: '/vipPage/life/bless/bless'
+        }
+      ]
+    },
+    {
+      title: '酷炫首页',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '图鸟首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/tuniao/tuniao'
+        },
+        {
+          icon: 'order',
+          title: '奶茶首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/tea/tea'
+        },
+        {
+          icon: 'order',
+          title: '阅读首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/read/read'
+        },
+        {
+          icon: 'order',
+          title: '月亮首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/moon/moon'
+        },
+        {
+          icon: 'order',
+          title: '计划首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/plan/plan'
+        },
+        {
+          icon: 'order',
+          title: '新年首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/year/year'
+        },
+        {
+          icon: 'order',
+          title: '电影首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/movie/movie'
+        },
+        {
+          icon: 'order',
+          title: '食物首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/food/food'
+        },
+        {
+          icon: 'order',
+          title: '拟态首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/mimicry/mimicry'
+        },
+        {
+          icon: 'order',
+          title: '充电首页',
+          author: '图鸟科技',
+          url: '/vipPage/life/power/power'
+        },
+        {
+          icon: 'order',
+          title: '卡片首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/card/card'
+        },
+        {
+          icon: 'order',
+          title: '健康首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/health/health'
+        },
+        {
+          icon: 'order',
+          title: '全景首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/panoramic/panoramic'
+        },
+        {
+          icon: 'order',
+          title: 'uCharts首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/ucharts/ucharts'
+        },
+      ]
+    },
+    {
+      title: '商城店铺',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '店铺商品',
+          author: '图鸟科技',
+          url: '/vipPage/shop/store/store'
+        },
+        {
+          icon: 'order',
+          title: '商品订单',
+          author: '图鸟科技',
+          url: '/vipPage/shop/order/order'
+        },
+        {
+          icon: 'order',
+          title: '商品分类',
+          author: '图鸟科技',
+          url: '/vipPage/shop/classify/classify'
+        },
+        {
+          icon: 'order',
+          title: '积分活动',
+          author: '图鸟科技',
+          url: '/vipPage/shop/money/money'
+        }
+      ]
+    },
+    {
+      title: '会员需求',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: 'Drag长按拖拽随机固定',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/basic-drag/basic-drag'
+        },
+        {
+          icon: 'order',
+          title: '图片上传长按拖拽',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
+        },
+        {
+          icon: 'order',
+          title: 'Cropper图片裁剪',
+          author: '图鸟科技',
+          url: '/vipPage/components/cropper/cropper'
+        },
+        {
+          icon: 'order',
+          title: 'StackSwiper堆叠轮播',
+          author: '图鸟科技',
+          url: '/vipPage/components/stack-swiper/stack-swiper'
+        },
+        {
+          icon: 'order',
+          title: '重力效果',
+          author: '图鸟科技',
+          url: '/vipPage/home/gravity/page1/page1'
+        },
+        {
+          icon: 'order',
+          title: '下拉刷新',
+          author: '图鸟科技',
+          url: '/vipPage/components/scroll-view/index'
+        },
+        {
+          icon: 'order',
+          title: '级联选择',
+          author: '图鸟科技',
+          url: '/vipPage/components/cascade-selection/cascade-selection'
+        },
+        {
+          icon: 'order',
+          title: '瀑布流',
+          author: '图鸟科技',
+          url: '/vipPage/components/waterfall/waterfall'
+        },
+        {
+          icon: 'order',
+          title: '树形菜单',
+          author: '图鸟科技',
+          url: '/vipPage/components/tree-view/tree-view'
+        },
+        {
+          icon: 'order',
+          title: '表格',
+          author: '图鸟科技',
+          url: '/vipPage/components/table/index'
+        },
+        {
+          icon: 'order',
+          title: '取色器',
+          author: '图鸟科技',
+          url: '/vipPage/life/color/color'
+        },
+        {
+          icon: 'order',
+          title: '图鸟轮播(实验)',
+          author: '图鸟科技',
+          url: '/vipPage/components/custom-swiper/index'
+        }
+      ]
+    },
+    {
+      title: '生态支持',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '短视频',
+          author: '图鸟 & 第三方',
+          url: '/thirdPage/short-video/short-video'
+        },{
+          icon: 'order',
+          title: '外卖模板',
+          author: '图鸟 & 第三方',
+          url: '/takeOutPage/walking-route/walking-route'
+        },
+        {
+          icon: 'order',
+          title: '期待你的加入',
+          author: '图鸟 & 第三方',
+          url: '/templatePage/life/candle/candle'
+        }
+      ]
+    }
+  ]
+}

pages.json

@@ -6,18 +6,27 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "Tuniao UI",
+        "mp-weixin": {
-        "enablePullDownRefresh": false
+          "disableScroll": true
+        },
+        "app-plus": {
+          "bounce": "none"
+        },
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "mp-baidu": {
+          "disableScroll": true
+        }
       }
     }
   ],
   "subPackages": [{
     "root": "basicPage",
-    "pages": [
+    "pages": [{
-      {
         "path": "test/test",
         "style": {
-          "navigationStyle":"default",
+          "navigationStyle": "default",
           "navigationBarTitleText": "测试页面",
           "enablePullDownRefresh": false
         }
@@ -82,12 +91,35 @@
           "navigationBarTitleText": "头像",
           "enablePullDownRefresh": false
         }
+      }, {
+        "path": "utils/string/index",
+        "style": {
+          "navigationBarTitleText": "String工具",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/number/index",
+        "style": {
+          "navigationBarTitleText": "Number工具",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/message/index",
+        "style": {
+          "navigationBarTitleText": "Message工具",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/color/index",
+        "style": {
+          "navigationBarTitleText": "Color工具",
+          "enablePullDownRefresh": false
+        }
       }
     ]
-  },{
+  }, {
     "root": "componentsPage",
-    "pages": [
+    "pages": [{
-      {
       "path": "list/list",
       "style": {
         "navigationBarTitleText": "列表",
@@ -273,6 +305,18 @@
         "navigationBarTitleText": "indexList索引列表",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "index-list/base/index-list",
+      "style": {
+        "navigationBarTitleText": "indexList索引列表",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "index-list/avatar/index-list",
+      "style": {
+        "navigationBarTitleText": "indexList索引列表",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "calendar/calendar",
       "style": {
@@ -298,23 +342,124 @@
         "enablePullDownRefresh": false
         // "pageOrientation": "landscape"
       }
+    }, {
+      "path": "fab/fab",
+      "style": {
+        "navigationBarTitleText": "fab悬浮按钮",
+        "enablePullDownRefresh": false
       }
-    ]
+    }, {
-  },{
+      "path": "input/input",
-    "root":"templatePage",
+      "style": {
-    "pages": [
+        "navigationBarTitleText": "输入框",
-      {
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "radio/radio",
+      "style": {
+        "navigationBarTitleText": "单选框",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "check-box/check-box",
+      "style": {
+        "navigationBarTitleText": "复选框",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "lazy-load/lazy-load",
+      "style": {
+        "navigationBarTitleText": "懒加载",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "load-more/load-more",
+      "style": {
+        "navigationBarTitleText": "加载更多",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "skeleton/skeleton",
+      "style": {
+        "navigationBarTitleText": "骨架屏",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "empty/empty",
+      "style": {
+        "navigationBarTitleText": "空页面",
+        "enablePullDownRefresh": false
+      }
+
+    }, {
+      "path": "landscape/landscape",
+      "style": {
+        "navigationBarTitleText": "压屏窗",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "verification-code-input/verification-code-input",
+      "style": {
+        "navigationBarTitleText": "验证码输入",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "subsection/subsection",
+      "style": {
+        "navigationBarTitleText": "分段器",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "goods-nav/goods-nav",
+      "style": {
+        "navigationBarTitleText": "商品导航",
+        "enablePullDownRefresh": false
+      }
+    }]
+  }, {
+    "root": "templatePage",
+    "pages": [{
       "path": "login/demo1/demo1",
       "style": {
         "navigationBarTitleText": "火箭登录",
         "enablePullDownRefresh": false
       }
-      },{
+    }, {
       "path": "login/demo2/demo2",
       "style": {
         "navigationBarTitleText": "粒子登录",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "login/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "背景登录",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "login/demo4/demo4",
+      "style": {
+        "navigationBarTitleText": "简约登录",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "蓝色充值",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "绿色充值",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "暗黑充值",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "health/qrcode/qrcode",
       "style": {
@@ -333,7 +478,7 @@
         "navigationBarTitleText": "音乐首页",
         "enablePullDownRefresh": false
       }
-      },{
+    }, {
       "path": "home/design/design",
       "style": {
         "navigationBarTitleText": "设计首页",
@@ -363,22 +508,89 @@
         "navigationBarTitleText": "全屏轮播",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "life/pano/pano",
+      "style": {
+        "navigationBarTitleText": "3D全景",
+        "enablePullDownRefresh": false
+      }
     },{
+      "path": "life/pano/model",
+      "style": {
+        "navigationBarTitleText": "3D模型",
+        "enablePullDownRefresh": false
+      }
+    }, {
       "path": "life/plus/plus",
       "style": {
         "navigationBarTitleText": "会员协议",
         "enablePullDownRefresh": false
       }
-      },{
+    }, {
       "path": "life/browser/browser",
       "style": {
         "navigationBarTitleText": "浏览器",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "life/share/share",
+      "style": {
+        "navigationBarTitleText": "",
+        // 图鸟公众号
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/candle/candle",
+      "style": {
+        "navigationBarTitleText": "敬请期待",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/cover/cover",
+      "style": {
+        "navigationBarTitleText": "红包封面",
+        "enablePullDownRefresh": false
+      }
     },{
+      "path": "life/cube/cube",
+      "style": {
+        "navigationBarTitleText": "魔方游戏",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "time/clock/clock",
+      "style": {
+        "navigationBarTitleText": "时钟",
+        "enablePullDownRefresh": false
+      }
+    }, {
       "path": "animate/loading/loading",
       "style": {
-          "navigationBarTitleText": "加载动效",
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading2",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading3",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading4",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading5",
+      "style": {
+        "navigationBarTitleText": "加载动画",
         "enablePullDownRefresh": false
       }
     }, {
@@ -399,13 +611,87 @@
         "navigationBarTitleText": "镂空效果",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "my/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "夏天个人",
+        "enablePullDownRefresh": false
       }
-    ]
+    }, {
+      "path": "my/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "图鸟个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "my/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "外卖个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "my/demo4/demo4",
+      "style": {
+        "navigationBarTitleText": "高端个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/suspended/suspended",
+      "style": {
+        "navigationBarTitleText": "流星悬浮",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/bubble/bubble",
+      "style": {
+        "navigationBarTitleText": "泡泡飘出",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "article/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "资讯左图",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "article/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "资讯右图",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/about/about",
+      "style": {
+        "navigationBarTitleText": "关于我们",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/wave/wave",
+      "style": {
+        "navigationBarTitleText": "css波浪",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/outset/outset",
+      "style": {
+        "navigationBarTitleText": "全新出发",
+        "enablePullDownRefresh": false
+      }
+    }]
+  }, {
+    "root": "vipPage",
+    "pages": []
+  }, {
+    "root": "thirdPage",
+    "pages": []
+  },{
+    "root":"takeOutPage",
+    "pages": []
   }],
   "preloadRule": {
     "pages/index/index": {
-      "network":"all",
+      "network": "all",
-      "packages": ["basicPage","componentsPage","templatePage"]
+      "packages": ["basicPage", "componentsPage", "templatePage"]
     }
   },
   "globalStyle": {

pages/basic/basic.vue

@@ -1,38 +1,40 @@
 <template>
-  <view class="basic">
+  <view class="basic tn-safe-area-inset-bottom">
 
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
-    <view class="nav_title--wrap tn-margin-bottom-sm">
-      <view class="nav_title tn-cool-bg-color-15">基 / 础 / 元 / 素</view>
-    </view>
-    
-    <view class='nav-list tn-margin-bottom'>
-      
     <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
           <navigator
             open-type="navigate"
             hover-class='none'
-          :url="item.url"
+            :url="content_item.url"
-          class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between"
             :class="[
-            getRandomCoolBg(index)
+              getRandomCoolBg(content_index)
             ]"
           >
-          <view class="nav-link">
-            <view class='title'>{{ item.title }}</view>
-          </view>
             <view class="icon">
-            <view :class="['tn-icon-' + item.icon]"></view>
+              <view :class="['tn-icon-' + content_item.icon]"></view>
+            </view>
+            <view class="nav-link">
+              <view class='title'>{{ content_item.title }}</view>
             </view>
           </navigator>
         </block>
         
       </view>
+    </block>
     
-    
+    <view class="tn-padding-bottom-xs"></view>
 
   </view>
 </template>
@@ -42,6 +44,21 @@
   
   export default {
     name: 'Basic',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
     data() {
       return {
         // nav菜单列表
@@ -50,7 +67,7 @@
     },
     methods: {
       getRandomCoolBg() {
-        return this.$t.colorUtils.getRandomCoolBgClass()
+        return this.$tn.color.getRandomCoolBgClass()
       }
     }
   }
@@ -83,7 +100,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }
@@ -98,7 +115,7 @@
     
     /* 列表元素 start */
     .nav-list-item {
-      padding: 95rpx 30rpx 5rpx 30rpx;
+      padding: 20rpx 30rpx;
       border-radius: 12rpx;
       width: 45%;
       margin: 0 18rpx 40rpx;
@@ -118,7 +135,7 @@
         
         .title {
           color: #FFFFFF;
-          margin-top: 30rpx;
+          margin-top: 20rpx;
           text-align: center;
         }
       }
@@ -127,10 +144,6 @@
       /* 元素图标 start */
       .icon {
         font-variant: small-caps;
-        position: absolute;
-        top: 20rpx;
-        right: 50rpx;
-        left: 37%;
         width: 90rpx;
         height: 90rpx;
         line-height: 90rpx;

pages/components/components.vue

@@ -1,8 +1,8 @@
 <template>
-  <view class="components">
+  <view class="components tn-safe-area-inset-bottom">
   
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <block v-for="(item, index) in navList" :key="index">
@@ -34,7 +34,7 @@
       </view>
     </block>
     
-    <view class="tn-padding-bottom"></view>
+    <view class="tn-padding-bottom-xs"></view>
 
   </view>
 </template>
@@ -67,7 +67,7 @@
     },
     methods: {
       getRandomCoolBg() {
-        return this.$t.colorUtils.getRandomCoolBgClass()
+        return this.$tn.color.getRandomCoolBgClass()
       }
     }
   }
@@ -99,7 +99,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }

pages/index/index.vue

@@ -1,9 +1,31 @@
 <template>
   <view class="index">
-    <Basic v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}" ref="basic"></Basic>
+            
-    <components v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}" ref="components"></components>
+    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
-    <templatePage v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}" ref="template"></templatePage>
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
-    <tuniao v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}" ref="about"></tuniao>
+        <Basic ref="basic"></Basic>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <components ref="components"></components>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <vip ref="vip"></vip>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <templatePage ref="template"></templatePage>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <tuniao ref="about"></tuniao>
+      </scroll-view>
+    </view>
     
     <tn-tabbar
       v-model="currentIndex"
@@ -23,6 +45,7 @@
   import Basic from '../basic/basic.vue'
   import Components from '../components/components.vue'
   import TemplatePage from '../template/template.vue'
+  import Vip from '../vip/vip.vue'
   import Tuniao from '../tuniao/tuniao.vue'
   
   export default {
@@ -30,6 +53,7 @@
       Basic,
       Components,
       TemplatePage,
+      Vip,
       Tuniao
     },
     data() {
@@ -47,9 +71,19 @@
             inactiveIcon: 'honor'
           },
           {
-            title: '页面',
+            title: '会员',
-            activeIcon: 'discover',
+            activeIcon: 'vip-fill',
-            inactiveIcon: 'discover'
+            inactiveIcon: 'vip',
+            activeIconColor: '#FFFFFF',
+            inactiveIconColor: '#FFFFFF',
+            iconSize: 50,
+            out: true
+          },
+          {
+            title: '发现',
+            activeIcon: 'discover-fill',
+            inactiveIcon: 'discover',
+            count: 100
           },
           {
             title: '图鸟',
@@ -72,10 +106,6 @@
       })
       this.switchTabbar(index)
     },
-    onPageScroll(e) {
-    },
-    onReachBottom() {
-    },
     methods: {
       // 切换导航
       switchTabbar(index) {

pages/template/template.vue

@@ -1,7 +1,8 @@
 <template>
-  <view class="template">
+  <view class="template tn-safe-area-inset-bottom">
+  
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <block v-for="(item, index) in navList" :key="index">
@@ -20,18 +21,26 @@
               getRandomCoolBg(content_index)
             ]"
           >
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
               <view class="nav-link">
                 <view class='title'>{{ content_item.title }}</view>
               </view>
               <view class="icon">
                 <view :class="['tn-icon-' + content_item.icon]"></view>
               </view>
+            </view>
+            <view class="author">
+              <view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
+                <text class="tn-icon-code tn-padding-right-xs"></text>
+                <text class=""> {{ content_item.author }} </text>
+              </view>
+            </view>
           </navigator>
         </block>
       </view>
     </block>
     
-    <view class="tn-padding-bottom"></view>
+    <view class="tn-padding-bottom-xs"></view>
   
   </view>
 </template>
@@ -64,7 +73,7 @@
     },
     methods: {
       getRandomCoolBg() {
-        return this.$t.colorUtils.getRandomCoolBgClass()
+        return this.$tn.color.getRandomCoolBgClass()
       }
     }
   }
@@ -96,7 +105,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }
@@ -109,19 +118,21 @@
     padding: 0rpx 12rpx 0rpx;
     justify-content: space-between;
     
+
+    
     /* 列表元素 start */
     .nav-list-item {
       padding: 50rpx 30rpx 36rpx 30rpx;
       border-radius: 12rpx;
       width: 100%;
-      margin: 0 18rpx 40rpx;
+      margin: 0 18rpx 90rpx;
       background-size: cover;
       background-position: center;
       position: relative;
       z-index: 99;
-      display: flex;
+      // display: flex;
-      align-items: center;
+      // align-items: center;
-      justify-content: space-between;
+      // justify-content: space-between;
       
       /* 元素标题 start */
       .nav-link {
@@ -160,6 +171,22 @@
         border-radius: 5000rpx;
       }
       /* 元素图标 end */
+      
+      /* 作者信息 start*/
+      .author {
+        // background-color: red;
+        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
+        border-radius: 0 0 15rpx 15rpx;
+        position: absolute;
+        width: 85%;
+        line-height: 50rpx;
+        left: 50%;
+        bottom: -50rpx;
+        transform: translateX(-50%);
+        z-index: -1;
+        text-align: center;
+      }
+      /* 作者信息 end*/
     }
     /* 列表元素 end */
   }

pages/tuniao/tuniao.vue

@@ -1,31 +1,60 @@
 <template>
-  <view class="about">
+  <view class="about tn-safe-area-inset-bottom">
   
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <view class="about__wrap">
       <!-- 头像用户信息 -->
       <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
-        <!-- #ifdef H5 -->
         <view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
-          <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
+          <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/tuniao.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
+          </view>
+          <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
+        </view>
+        <view class="user-info__nick-name">图鸟小伙伴</view>
+      </view>
+      
+      <!-- banner start-->
+      <!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
+        <view class="" style="width: 100%;">
+          <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-Vue3.png');">
+             <view class="image-capsule">
+             </view>
+           </view>  
+        </view>  
+      </view> -->
+      <!-- banner end-->
+      
+      <view class="tn-margin-left tn-margin-right">
+        
+        <!-- 方式20 start-->
+        <view class="tn-flex">
+          <view class="tn-flex-1 about-shadow tn-bg-white" style="margin: 50rpx 15rpx 0 0;padding: 30rpx 0;" @click="navTuniaoWebsite">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orangered tn-color-white">
+                <view class="tn-icon-computer-fill"></view>
+              </view>  
+              <view class="tn-text-center" style="font-size: 30rpx;">
+                <view class="tn-text-ellipsis">图鸟官网</view>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 about-shadow tn-bg-white" style="margin: 50rpx 0 0 15rpx;padding: 30rpx 0;" @click="navShare">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purplered tn-color-white">
+                <view class="tn-icon-moon-fill"></view>
+              </view>  
+              <view class="tn-text-center" style="font-size: 30rpx;">
+                <view class="tn-text-ellipsis">图鸟公众号</view>
               </view>
-        <view class="user-info__nick-name">图鸟科技</view>
-        <!-- #endif -->
-        <!-- #ifdef MP-WEIXIN -->
-        <view class="user-info__avatar">
-          <open-data type="userAvatarUrl"></open-data>
             </view>
-        <view class="user-info__nick-name" style="height: 50rpx;">
-          <open-data type="userNickName"></open-data>
           </view>
-        <!-- #endif -->
         </view>
 
         <!-- 数据信息 -->
-      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
+        <!-- <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
           <block v-for="(item, index) in tuniaoData" :key="index">
             <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between about-shadow">
               <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
@@ -44,32 +73,23 @@
               </view>
             </view>
           </block>
-      </view>
+        </view> -->
         
         <!-- 更多信息-->
         <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
-        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoWebsite">
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyDCloud">
             <view class="tn-flex tn-flex-col-center">
-            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" > 
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> 
-              <view class="tn-icon-logo-tuniao"></view>
+                <view class="tn-icon-fire-fill"></view>
               </view>
-            <view class="tn-margin-left-sm tn-flex-1">图鸟官网</view>
+              <view class="tn-margin-left-sm tn-flex-1">插件市场</view>
-            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+              <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
-          </view>
-        </tn-list-cell>
-        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoUI">
-          <view class="tn-flex tn-flex-col-center">
-            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" > 
-              <view class="tn-icon-vip-fill"></view>
-            </view>
-            <view class="tn-margin-left-sm tn-flex-1">图鸟UI</view>
-            <view class="tn-margin-left-sm tn-color-orangeyellow">会员版</view>
             </view>
           </tn-list-cell>
           <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyGitee">
             <view class="tn-flex tn-flex-col-center">
-            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> 
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white"> 
-              <view class="tn-icon-gitee"></view>
+                <view class="tn-icon-star-fill"></view>
               </view>
               <view class="tn-margin-left-sm tn-flex-1">Gitee地址</view>
               <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
@@ -81,7 +101,7 @@
                 <view class="tn-icon-safe-fill"></view>
               </view>
               <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
-            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
+              <view class="tn-margin-left-sm tn-color-red tn-icon-send-fill"></view>
             </view>
           </tn-list-cell>
           <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
@@ -113,9 +133,46 @@
             </button>
           </tn-list-cell>
         </view>
+        
+        <view class="tn-flex tn-flex-row-between">
+          <view class="justify-content-item tn-text-bold tn-text-lg">
+            <text class="">友情链接</text>
+          </view>
+          <view class="justify-content-item tn-text-df">
+            <text class="tn-padding-xs">全部</text>
+            <text class="tn-icon-right"></text>
+          </view>
+        </view>
+        <!-- 更多信息-->
+        <view class="about-shadow tn-margin-top tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
+          <tn-scroll-list :indicator="false">
+            <view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
+              <navigator target="miniProgram" :app-id="item.appid" :path="item.path" version="release" delta="1" hover-class="none" 
+                v-for="(item, index) in linksData" :key="index">  
+                <view class="tn-flex-1 tn-padding-sm tn-radius">
+                  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                    <!-- <view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
+                      :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                      <view :class="[`tn-icon-${item.icon}`]"></view>
+                    </view> -->
+                    <view class="icon5__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" 
+                    :style="'background-image:url('+ item.url + ');background-size:100% 100%;'">
+                    </view>
+                    <view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
+                      <text class="tn-text-ellipsis">{{ item.title }}</text>
+                    </view>
+                  </view>
+                </view>
+              </navigator>
+            </view>
+          </tn-scroll-list>
         </view>
         
-    <view class="tn-padding-bottom"></view>
+      </view>
+    </view>
+    
+    
+    <view class="tn-padding-bottom-xs"></view>
   
   </view>
 </template>
@@ -148,8 +205,63 @@
             title: 'Version',
             icon: 'trusty',
             color: 'green',
-            value: '1.0.0'
+            value: '1.2.0'
           }
+        ],
+        linksData: [{
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646920408332-assets/web-upload/6ea58bb4-cb0d-4034-b9ac-a0155d5c3afb.jpeg',
+            title: 'uCharts',
+            appid: 'wx37a9ee6a7398dec0',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646963464962-assets/web-upload/3c14732e-cc92-4726-9a9c-1fa7133f8147.jpeg',
+            title: '芊云全景',
+            appid: 'wx9f77d65eb4eff65b',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648734439954-assets/web-upload/2e3d3e73-a28c-4c5d-885a-e5cdf2da13af.jpeg',
+            title: '前端铺子',
+            appid: 'wx201efd3f86fa2ba7',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/png/280373/1647178609988-assets/web-upload/37a6d22c-410b-4f51-a083-993306bbc4fa.png',
+            title: 'DIY神器',
+            appid: 'wxda438798441f31f1',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880969854-assets/web-upload/95902944-1be6-4c23-a2f5-47cf78eda072.jpeg',
+            title: '江夏生活',
+            appid: 'wx2257f5c246ad1bcd',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1667656184223-assets/web-upload/cc3dbf5c-1483-4c74-83fc-03c2bd7c373e.jpeg',
+            title: '多客社交',
+            appid: 'wx86cc21f2f7fa3efa',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1647505953019-assets/web-upload/a6c0a823-5b55-4cb7-aee5-5b82990533ed.jpeg',
+            title: '样式库',
+            appid: 'wx853f345b163a00d6',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1647765849135-assets/web-upload/dfcacf41-b1c0-4dbf-8613-3f948e43d125.jpeg',
+            title: '旺石头科技',
+            appid: 'wx6007249d6b2348ea',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1655887617723-assets/web-upload/028185c8-fac6-4863-a00f-7e9bbe3ea54e.jpeg',
+            title: '邻邻邦',
+            appid: 'wxf7512cb916d6d1c2',
+            path: ''
+          },
         ]
       }
     },
@@ -160,10 +272,12 @@
           appId: 'wxa698b1eee960632f'
         })
       },
-      // 跳转到图鸟UI会员版
+      
-      navTuniaoUI() {
+      // 跳转到图鸟Vue3
+      navTuniaoVue3(e) {
+        wx.vibrateLong();
         uni.navigateToMiniProgram({
-          appId: 'wxf3d81a452b88ff4b'
+          appId: 'wxd4296f570b8b39c9'
         })
       },
       
@@ -174,6 +288,20 @@
         })
       },
       
+      // 跳转到图鸟公众号
+      navShare() {
+        uni.navigateTo({
+          url: '/templatePage/life/share/share'
+        })
+      },
+      
+      // 复制插件市场地址
+      copyDCloud() {
+        uni.setClipboardData({
+          data: "https://ext.dcloud.net.cn/publisher?id=356088",
+        })
+      },
+      
       // 复制Gitee地址
       copyGitee() {
         uni.setClipboardData({
@@ -209,7 +337,7 @@
     &__wrap {
       position: relative;
       z-index: 1;
-      margin: 20rpx 30rpx;
+      margin: 20rpx 0rpx;
       margin-top: -180rpx;
     }
   }
@@ -243,7 +371,7 @@
   .tn-info {
     
     &__container {
-      margin-top: 40rpx;
+      margin-top: 0rpx;
     }
     
     &__item {
@@ -268,7 +396,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
         }
       
       &__left {
@@ -294,7 +422,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           }
         }
         
@@ -318,6 +446,67 @@
   }
   /* 信息展示 end */
   
+  /* 图标容器5 start */
+    .icon5 {
+      &__item {
+        // width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 0rpx;
+        margin: 0rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+    
+  .icon20 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+  
   /* 图标容器1 start */
   .icon1 {
     &__item {
@@ -350,10 +539,25 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }
   }
     /* 图标容器1 end */
+    
+    /* 胶囊banner*/
+    .image-capsule{
+      padding: 100rpx 0rpx;
+      font-size: 40rpx;
+      font-weight: 300;
+      position: relative;
+    }
+    .image-piccapsule{
+      background-size: cover;
+      background-repeat:no-repeat;
+      // background-attachment:fixed;
+      background-position:top;
+      border-radius: 20rpx 20rpx 0 0;
+    }
 </style>

pages/vip/vip.vue

@@ -0,0 +1,508 @@
+<template>
+  <view class="vip tn-safe-area-inset-bottom">
+    <view class="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="false" duration="500" interval="180000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper"  style="margin-top: -280rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
+        </view> -->
+        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </view> -->
+        
+        <view class="tnphone-white-min swiper-item  wow fadeInLeft2" @click="navTuniaoMoban">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <!-- <view class="head">
+        			  <text>{{item.name}}</text>
+        		  </view> -->
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+        		  <!-- <view class="area-l">
+        			  <view class="">
+                  <text class="tn-icon-all"></text>
+                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
+        			  </view>
+        		  </view>
+        		  <view class="area-r">
+        			  <view class="">
+                  <text class="tn-icon-light"></text>
+                  <text class="tn-icon-time tn-padding-left-xs"></text>
+                </view>
+        		  </view> -->
+              <!-- <view class="talk"></view> -->
+              
+              <view class="image-banner">
+                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 方式4 start-->
+    <view class="tn-flex tn-padding-bottom-sm">
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoVUE3">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-level-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">图鸟VUE3</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoMoban">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">圈子博客</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navBusiness">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-identity-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">简约商圈</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navXiongJie">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-image-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">凶姐壁纸</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式4 end-->
+    
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-circle2.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+
+    
+    <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="nav-link">
+              <view class='title'>{{ content_item.title }}</view>
+              <view class='author'> <text class="tn-icon-code tn-padding-right-xs"></text> {{ content_item.author }}</view>
+            </view>
+            <!-- <view class="icon">
+              <view :class="['tn-icon-' + content_item.icon]"></view>
+            </view> -->
+          </navigator>
+        </block>
+      </view>
+    </block>
+    
+    <view class="tn-padding-xl tn-text-center tn-color-gray">
+      <view class="tn-padding-bottom-sm" @click="navPlus">
+        关于图鸟会员
+        <text class="tn-icon-rocket tn-padding-left-xs"></text>
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import vipListData from '@/mock/vip_page.js'
+  
+  export default {
+    name: 'Vip',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle2.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle4.jpg',
+        },{
+          id: 4,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle5.jpg',
+        },{
+          id: 5,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle6.jpg',
+        },{
+          id: 6,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle7.jpg',
+        }
+        ],
+        // nav菜单列表
+        navList: vipListData.data
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      },
+      // 跳转到图鸟VUE3
+      navTuniaoVUE3(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wxd4296f570b8b39c9'
+        })
+      },
+      // 跳转到图鸟模板
+      navTuniaoMoban(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx13c0ed55c12d2afb'
+        })
+      },
+      // 跳转到关于作者
+      navSaitolia(e) {
+        wx.vibrateLong();
+        uni.navigateTo({
+          url: '/templatePage/life/plus/plus'
+        })
+      },
+      // 跳转到图鸟模板2
+      navBusiness(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx9056aabd1c0c6a8a'
+        })
+      },
+      // 跳转到图鸟模板3
+      navXiongJie(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx76bb942a2810e8e5'
+        })
+      },
+      
+      // 跳转到会员协议
+      navPlus() {
+        uni.navigateTo({
+          url: '/templatePage/life/plus/plus'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 350rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 轮播 start */
+/* .tnphone-white-min 细边框*/
+  .tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
+  .tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
+  .tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
+  .tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
+  .tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+
+  
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 830rpx !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 260rpx !important;
+    // left: 170rpx;
+    // width: 380rpx !important;
+    box-sizing: border-box;
+    padding: 0rpx 15rpx 90rpx 15rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    display: block;
+    transform: scale(0.45);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: scale(0.65);
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 770rpx;
+    // border: 1rpx solid red;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  
+  /* 轮播 end */
+  
+  /* 图标容器4 start */
+    .tn-cool-color-icon4{
+      // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
+      // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-fill-color: transparent;
+    }
+    .icon4 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 110rpx;
+          height: 110rpx;
+          font-size: 55rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
+            0px -8px 40px rgba(255, 255, 255, 1),
+            inset 0px -10px 10px rgba(70,23,129, 0.05),
+            inset 0px 10px 20px rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  
+  /* 标题start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题end */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 35rpx 30rpx 5rpx 30rpx;
+      border-radius: 12rpx;
+      width: 45%;
+      margin: 0 18rpx 40rpx;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      z-index: 99;
+      
+      
+      
+      /* 元素标题 start */
+      .nav-link {
+        font-size: 32rpx;
+        text-transform: capitalize;
+        padding: 0 0 10rpx 0;
+        position: relative;
+        
+        .title {
+          font-weight: bold;
+          font-size: 36rpx;
+          color: #FFFFFF;
+          margin-top: 30rpx;
+          text-align: center;
+        }
+        .author {
+          font-size: 25rpx;
+          color: #FFFFFF;
+          margin-top: 50rpx;
+          margin-left: -10rpx;
+          text-align: center;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        position: absolute;
+        top: 20rpx;
+        right: 50rpx;
+        left: 37%;
+        width: 90rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 50rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+  
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+</style>

store/$tn.mixin.js

@@ -13,9 +13,9 @@ module.exports = {
   beforeCreate() {
     // 将vuex方法挂在在$t中
     // 使用方法: 
-    // 修改vuex的state中的user.name变量为图鸟小菜 => this.$t.vuex('user.name', '图鸟小菜')
+    // 修改vuex的state中的user.name变量为图鸟小菜 => this.$tn.vuex('user.name', '图鸟小菜')
-    // 修改vuexde state中的version变量为1.0.1 => this.$t.vuex('version', 1.0.1)
+    // 修改vuexde state中的version变量为1.0.1 => this.$tn.vuex('version', 1.0.1)
-    this.$t.vuex = (name, value) => {
+    this.$tn.vuex = (name, value) => {
       this.$store.commit('$tStore', {
         name, value
       })

takeOutPage/walking-route/walking-route.vue

@@ -0,0 +1,226 @@
+<template>
+  <view class="take-out__walking-route">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>路线轨迹</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <map
+        class="take-out__map"
+        :longitude="location.longitude"
+        :latitude="location.latitude"
+        :scale="18"
+        :polyline="mapPolyline"
+        :markers="mapMarkers"
+      ></map>
+    </view>
+    
+    <tn-modal
+      v-model="openSettingFlag"
+      :custom="true"
+      :showCloseBtn="true"
+      width="auto"
+      padding="40rpx 80rpx"
+    >
+      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+        <view class="tn-text-bold tn-text-lg">授权使用位置信息</view>
+        <view class="tn-margin-top-xs tn-color-gray">获取定位失败, 请进行设置</view>
+        <view class="tn-margin-top">
+          <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="openSetting">打开设置</tn-button>
+        </view>
+      </view>
+    </tn-modal>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'takeOutWalkingRoute',
+    data() {
+      return {
+        openSettingFlag: false,
+        location: {
+          latitude: 22.970675,
+          longitude: 113.334259
+        },
+        mapPolyline: [{
+          points: [
+            {latitude: 22.969238, longitude: 113.333890},
+            {latitude: 22.969309, longitude: 113.333878},
+            {latitude: 22.969334, longitude: 113.334132},
+            {latitude: 22.969649, longitude: 113.334130},
+            {latitude: 22.970044, longitude: 113.334130},
+            {latitude: 22.970578, longitude: 113.334130},
+            {latitude: 22.970606, longitude: 113.334255},
+            {latitude: 22.970667, longitude: 113.334345},
+            {latitude: 22.970673, longitude: 113.334458},
+            {latitude: 22.970798, longitude: 113.334452},
+            {latitude: 22.970962, longitude: 113.334530},
+            {latitude: 22.971108, longitude: 113.334564},
+            {latitude: 22.971111, longitude: 113.334631}
+          ],
+          color: '#01BEFFFF',
+          width: 3,
+          arrowLine: true
+        }],
+        mapMarkers: [{
+          id: 0,
+          latitude: 22.971093,
+          longitude: 113.334740,
+          iconPath: '/takeOutPage/static/images/location.png',
+          width: 20,
+          height: 30,
+          callout: {
+            content: '您所在位置',
+            color: '#080808',
+            bgColor: 'transparent',
+            display: 'ALWAYS'
+          }
+        },{
+          id: 1,
+          latitude: 22.969238,
+          longitude: 113.333890,
+          iconPath: '/takeOutPage/static/images/take_out_car.png',
+          width: 30,
+          height: 30,
+          rotate: 270
+        }],
+        // 当前外卖小车的坐标位置Index
+        takeOutCarIndex: 0
+      }
+    },
+    onLoad() {
+      // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
+      // this.getUserAuthorize()
+      // #endif
+      // #ifdef APP-VUE || H5
+      // this.getUserLocation()
+      // #endif
+      
+      this.runIntervalTimer = setInterval(() => {
+        let rotate = 0
+        const pointsLength = this.mapPolyline[0].points.length
+        if (this.takeOutCarIndex >= pointsLength) {
+          this.takeOutCarIndex = 0
+        }
+        
+        if (this.takeOutCarIndex < pointsLength - 2) {
+          const currentPoint = this.mapPolyline[0].points[this.takeOutCarIndex]
+          const nextPoint = this.mapPolyline[0].points[this.takeOutCarIndex+1]
+          rotate = this.getAngle(currentPoint, nextPoint)
+        }
+        
+        this.mapMarkers[1].latitude = this.mapPolyline[0].points[this.takeOutCarIndex].latitude
+        this.mapMarkers[1].longitude = this.mapPolyline[0].points[this.takeOutCarIndex].longitude
+        this.mapMarkers[1].rotate = rotate === 0 ? 0 : rotate - 90
+        this.takeOutCarIndex++
+      }, 500)
+    },
+    onUnload() {
+      if (this.runIntervalTimer) {
+        clearInterval(this.runIntervalTimer)
+      }
+    },
+    methods: {
+      // 获取用户是否已经授权获取位置信息
+      getUserAuthorize() {
+        uni.authorize({
+          scope: 'scope.userLocation',
+          success: (res) => {
+            this.getUserLocation()
+          },
+          fail: (err) => {
+            // 获取权限失败，判断用户是否禁止了获取用户信息
+            // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
+            uni.getSetting({
+              success: (settingRes) => {
+                if (!settingRes.authSetting.hasOwnProperty('scope.userLocation') || !settingRes.authSetting['scope.userLocation']) {
+                  this.openSettingFlag = true
+                }
+              },
+              fail: (settingErr) => {}
+            })
+            // #endif
+            // #ifdef APP-VUE || H5
+            this.$tn.message.toast('获取定位失败, 请重试')
+            // #endif
+          }
+        })
+      },
+      // 获取用户的当前位置信息
+      getUserLocation() {
+        uni.getLocation({
+          type: 'gcj02',
+          success: (res) => {
+            this.location.latitude = res.latitude
+            this.location.longitude = res.longitude
+          },
+          fail: (err) => {
+            this.$tn.message.toast('获取定位失败, 请重试')
+          }
+        })
+      },
+      // 打开设置页面
+      openSetting() {
+        uni.openSetting({
+          success: (res) => {
+            if (res.authSetting.hasOwnProperty('scope.userLocation') && res.authSetting['scope.userLocation'] === true) {
+              this.openSettingFlag = false
+              this.getUserLocation()
+            } else {
+              this.$tn.message.toast('设置获取位置信息失败')
+            }
+          },
+          fail: (err) => {}
+        })
+      },
+      // 获取两点之间的角度
+      getAngle(current, next) {
+        let ret = 0
+        let w1 = current.latitude/180 * Math.PI
+        let j1 = current.longitude/180 * Math.PI
+
+        let w2 = next.latitude/180 * Math.PI
+        let j2 = next.longitude/180 * Math.PI
+
+        ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2)
+        ret = Math.sqrt(ret)
+
+        // var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
+        let temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
+        ret = ret/temp
+
+        ret = Math.atan(ret) / Math.PI * 180 
+        ret += 90
+        
+        // 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
+        if(j1-j2 < 0){
+          if(w1-w2 < 0){
+              ret = ret
+          }else{
+              ret = -ret+180
+          }
+        }else{
+          if(w1-w2 < 0){
+              ret = 180+ret
+          }else{
+              ret = -ret
+          }
+        }
+        return ret
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .take-out {
+    
+    
+    &__map {
+      width: 100%;
+      height: calc(100vh - 300px);
+    }
+  }
+</style>

templatePage/animate/bubble/bubble.vue

@@ -0,0 +1,226 @@
+<template>
+  <view class="template-bubble">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateBubble',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        windowHeight: 0,
+        windowWidth: 0,
+        actionTimer: null,
+        animationTimer: null,
+        queue: {},
+        ctx: null
+      }
+    },
+    onLoad() {
+      this.getSystemInfo()
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.queue = {}
+        this.ctx = uni.createCanvasContext("bubble", this)
+        
+        setTimeout(() => {
+          this.actionTimer = setInterval(() => {
+            this.generateBubble()
+          }, 500)
+        }, 1000)
+      })
+    },
+    onUnload() {
+      this.clearActionTimer()
+      this.clearAnimationTimer()
+    },
+    methods: {
+      // 获取系统信息
+      getSystemInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        if (!systemInfo) {
+          setTimeout(() => {
+            this.getSystemInfo()
+          }, 50)
+          return
+        }
+        
+        this.windowHeight = systemInfo.safeArea.height
+        this.windowWidth = systemInfo.safeArea.width
+      },
+      
+      // 生成泡泡
+      generateBubble() {
+        const image = "https://resource.tuniaokj.com/images/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
+        uni.getImageInfo({
+          src: image,
+          success: (res) => {
+            if (res.errMsg === 'getImageInfo:ok') {
+              const anmationData = {
+                id: new Date().getTime(),
+                timer: 0,
+                opacity: 0,
+                pathData: this.generatePathData(),
+                image: res.path,
+                factor: {
+                  speed: 0.0006, // 运动速度，值越小越慢
+                  t: 0.1 //  贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
+                }
+              }
+              if (Object.keys(this.queue).length > 0) {
+                this.queue[anmationData.id] = anmationData
+              } else {
+                this.queue[anmationData.id] = anmationData
+                this.bubbleAnimate()
+              }
+            }
+          }
+        })
+      },
+      
+      /* 动画相关 */
+      // 生成运动的路径数据
+      generatePathData() {
+        let width = this.windowWidth,
+          height = this.windowHeight;
+        const p0 = {
+          x: 0.72 * width,
+          y: height
+        }
+        const p1 = {
+          x: this.$tn.number.random(0.22 * width, 0.33 * width),
+          y: this.$tn.number.random(0.5 * height, 0.75 * height)
+        }
+        const p2 = {
+          x: this.$tn.number.random(0, 0.88 * width),
+          y: this.$tn.number.random(0.25 * height, 0.5 * height)
+        }
+        const p3 = {
+          x: this.$tn.number.random(0, 0.88 * width),
+          y: this.$tn.number.random(0, 0.125 * height)
+        }
+        return [p0, p1, p2, p3]
+      },
+      // 更新运动的路径
+      updatePath(data, factor) {
+        const p0 = data[0]
+        const p1 = data[1]
+        const p2 = data[2]
+        const p3 = data[3]
+      
+        const t = factor.t
+      
+        /*计算多项式系数 （下同）*/
+        const cx1 = 3 * (p1.x - p0.x)
+        const bx1 = 3 * (p2.x - p1.x) - cx1
+        const ax1 = p3.x - p0.x - cx1 - bx1
+      
+        const cy1 = 3 * (p1.y - p0.y)
+        const by1 = 3 * (p2.y - p1.y) - cy1
+        const ay1 = p3.y - p0.y - cy1 - by1
+      
+        const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
+        const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
+        // console.log(p0.y, p1.y, p2.y, p3.y, y);
+        return {
+          x,
+          y
+        }
+      },
+      // 执行泡泡动画
+      bubbleAnimate() {
+        let width = this.windowWidth,
+          height = this.windowHeight;
+        Object.keys(this.queue).forEach(key => {
+          const anmationData = this.queue[+key];
+          const {
+            x,
+            y
+          } = this.updatePath(
+            anmationData.pathData,
+            anmationData.factor
+          )
+          const speed = anmationData.factor.speed
+          anmationData.factor.t += speed
+      
+          var curWidth = 30
+          curWidth = (height - y) / 1.5
+          curWidth = Math.min(30, curWidth)
+      
+          var curAlpha = anmationData.opacity
+          curAlpha = y / (0.3 * height) //消失的高度适当调一下
+          curAlpha = Math.min(1, curAlpha)
+          this.ctx.globalAlpha = curAlpha
+          this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
+          // this.ctx.setFillStyle('red')
+          // this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
+          if (anmationData.factor.t > 1) {
+            delete this.queue[anmationData.id]
+          }
+          if (y > height) {
+            delete this.queue[anmationData.id]
+          }
+        })
+        this.ctx.draw()
+        if (Object.keys(this.queue).length > 0) {
+          this.animationTimer = setTimeout(() => {
+            this.bubbleAnimate()
+          }, 5)
+        } else {
+          this.clearAnimationTimer()()
+          this.ctx.draw() // 清空画面
+        }
+      },
+      
+      // 清除定时器
+      clearActionTimer() {
+        if (this.actionTimer) {
+          clearInterval(this.actionTimer)
+        }
+      },
+      clearAnimationTimer() {
+        if (this.animationTimer) {
+          clearTimeout(this.animationTimer)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-bubble {
+    position: relative;
+    background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);
+    width: 100vw;
+    height: 100vh;
+    
+    .bubble {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1024;
+      pointer-events: none;
+    }
+  }
+</style>