更新图标库

修复已知bug
2026-06-06 19:44:38 +08:00 · 2022-06-06 13:10:28 +08:00
parent 81579ccee5
commit 1e087b5ac3
226 changed files with 51832 additions and 46044 deletions
@@ -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')
@@ -110,7 +110,7 @@ Vue.mixin(vuexStore)
 在项目根目录的`uni.scss`中引入此文件。

 ```scss
-@import 'tuniao-ui/theme.scss'
+@import 'tuniao-ui/theme.scss';
 ```


@@ -459,12 +459,12 @@
          return
        }
        this.isUpdateColorInfo = true
-        this.$t.messageUtils.loading('加载中...')
+        this.$t.message.loading('加载中...')
        // this.containerScrollTop = Math.random()
        setTimeout(() => {
          // this.containerScrollTop = 0
          this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
-          this.$t.messageUtils.closeLoading()
+          this.$t.message.closeLoading()
          this.isUpdateColorInfo = false
        }, 10)
        // setTimeout(() => {
@@ -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="[$t.color.getRandomCoolBgClass(index)]">
                <view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
              </view>
            </tn-grid-item>
@@ -71,7 +71,7 @@
      // 点击图标
      clickIcon(index, name) {
        this.currentIconIndex = index
-        this.$t.messageUtils.toast(name, false, null, 'none', 5000)
+        this.$t.message.toast(name, false, null, 'none', 5000)
      },
    }
  }
@@ -60,7 +60,9 @@
      <demo-title title="标签使用">
        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
          <view class="origin-demo">
-            <tn-tag class="origin-demo__tag" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
+            <view class="origin-demo__tag">
+              <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
+            </view>
          </view>
          
          <!-- #ifdef H5 -->
@@ -83,6 +85,13 @@
            </tn-tag>
          </view>
          <!-- #endif -->
+          
+          <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>
      
@@ -0,0 +1,261 @@
+<template>
+  <view class="basic-test">
+    <swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
+      <swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
+        <view class="swiper__item__content" :class="[swiperContentClass(index)]">
+          <image :src="item" mode="scaleToFill"></image>
+        </view>
+      </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="demo-image">
+                <image :src="item.url" mode="aspectFill"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+        
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'TestPage',
+    data() {
+      return {
+        swiperList: [
+          'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
+        ],
+        phoneSwiperList: [{
+          id: 0,
+          type: 'image',
+          name: '总有你想不到的创意',
+          text: '海量分享',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
+        }, {
+          id: 1,
+          type: 'image',
+          name: '寻找一起成长的小伙伴',
+          text: '愉快玩耍',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
+        }, {
+          id: 2,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
+        }, {
+          id: 3,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
+        }],
+        currentSwiperIndex: 0,
+        phoneCurrentSwiperIndex: 0
+      }
+    },
+    computed: {
+      // 计算当前对应轮播前后的item对应的类
+      swiperItemClass() {
+        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'
+          }
+        }
+      },
+      // 计算轮播内容对应的类
+      swiperContentClass() {
+        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() {
+      
+    },
+    methods: {
+      // 轮播图切换
+      swiperChange(e) {
+        // console.log(e.detail.current);
+        this.currentSwiperIndex = e.detail.current
+      },
+      phoneSwiperChange(e) {
+        this.phoneCurrentSwiperIndex = e.detail.current
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-test {
+    min-height: 100vh;
+  }
+  
+  .swiper {
+    width: 100%;
+    height: 400rpx;
+    
+    /deep/ .uni-swiper-slides {
+      inset: 0 260rpx;
+    }
+    
+    &__item {
+      
+      &--prev {
+        left: -10rpx;
+      }
+      
+      &--next {
+        left: 10rpx;
+      }
+      
+      &--current {
+        left: 0px;
+      }
+      
+      &__content {
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        border-radius: 30rpx;
+        overflow: hidden;
+        transition: transform 0.25s ease;
+        transform: scale(0.8);
+        
+        &--prev {
+          transform: scale(0.8) perspective(200rpx) rotateY(10deg);
+        }
+        
+        &--next {
+          transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
+        }
+        
+        &--current {
+          transform: scale(1);
+        }
+        
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  
+  .phone-swiper {
+    margin-top: 180rpx;
+    height: 900rpx;
+    
+    /deep/ .uni-swiper-slides {
+      inset: 0 190rpx;
+    }
+    
+    &__item {
+      
+      &__content {
+        transition: transform 0.25s ease;
+        transform: scale(0.8);
+        
+        &--prev {
+          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>
@@ -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.$t.color.getRandomColorClass()
+      },
+      // 获取随机颜色
+      getRandomColor() {
+        this.randomColorClass = this.$t.color.getRandomColorClass('color')
+      },
+      // 获取随机酷炫背景颜色
+      getRandomCoolColor() {
+        this.randomCoolBgColorClass = this.$t.color.getRandomCoolBgClass()
+      },
+      // 将hex与rgb互转
+      convertToRGBOrHex() {
+        if (this.rgbFlag) {
+          this.hexRGBValue = this.$t.color.rgbToHex(this.hexRGBValue)
+        } else {
+          this.hexRGBValue = this.$t.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>
@@ -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.$t.message.toast('弹出toast')
+      },
+      openToast_2() {
+        this.$t.message.toast('弹出toast icon', false, null, 'success')
+      },
+      openToast_3() {
+        this.$t.message.toast('弹出toast mask', true)
+      },
+      openToast_4() {
+        this.$t.message.toast('弹出toast duration', false, null, 'none', 3000)
+      },
+      openToast_5() {
+        this.$t.message.toast('弹出toast cb', true, () => {
+          setTimeout(() => {
+            this.$t.message.toast('执行完毕后弹出', true, null, 'success')
+          }, 500)
+        })
+      },
+      // 关闭Toast
+      closeToast() {
+        this.$t.message.closeToast()
+      },
+      
+      
+      // 弹出loading
+      openLoading() {
+        this.$t.message.loading('弹出loading')
+        setTimeout(() => {
+          this.closeLoading()
+        }, 3000)
+      },
+      // 关闭loading
+      closeLoading() {
+        this.$t.message.closeLoading()
+      },
+      
+      
+      // 弹出modal
+      openModal_1() {
+        this.$t.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$t.message.toast('点击了确认按钮')
+        }, true, () => {
+          this.$t.message.toast('点击了取消按钮')
+        })
+      },
+      openModal_2() {
+        this.$t.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$t.message.toast('点击了确认按钮')
+        }, false, null)
+      },
+      openModal_3() {
+        this.$t.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$t.message.toast('点击了跳转按钮')
+        }, true, () => {
+          this.$t.message.toast('点击了拒绝按钮')
+        }, "跳转登录", "拒绝登录")
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__message {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
@@ -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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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>{{ $t.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.$t.number.random(0, 100.99)
+      },
+      // 获取整数随机值
+      getIntRandomValue() {
+        this.intRandomValue = this.$t.number.randomInt(0, 100)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__number {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
@@ -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.$t.string.trim(this.trimValue)
+      },
+      // 处理将大写字符串转换为指定的连接符连接的字符串
+      handlerHumpChar() {
+        this.humpCharValue = this.$t.string.humpConvertChar(this.humpCharValue, '_')
+      },
+      // 处理将指定的连接字符连接的字符串转换为大写的字符串
+      handlerCharHump() {
+        this.charHumpValue = this.$t.string.charConvertHump(this.charHumpValue, '_')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__string {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
@@ -116,7 +116,7 @@
      // 点击了选项
      clickActionSheetItem(index) {
        if (index === 1) {
-          this.$t.messageUtils.toast('选择正确')
+          this.$t.message.toast('选择正确')
        }
        this.closedActionSheet()
      },
@@ -185,7 +185,7 @@
      
      // 点击悬浮按钮的内容
      clickFabItem(e) {
-        this.$t.messageUtils.toast(`点击了第 ${e.index} 个选项`)
+        this.$t.message.toast(`点击了第 ${e.index} 个选项`)
      }
    }

@@ -448,7 +448,7 @@
          if (valid) {
            // 验证通过
            if (!this.model.agreement) {
-              this.$t.messageUtils.toast('请勾选协议')
+              this.$t.message.toast('请勾选协议')
              return
            }
          } else {
@@ -480,15 +480,15 @@
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$t.message.closeLoading()
+            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 验证码倒计时时间改变
@@ -7,35 +7,39 @@
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
-      <demo-title title="基础">
+      <demo-title title="基础" :contentPadding="false">
        <tn-goods-nav></tn-goods-nav>
      </demo-title>
      
-      <demo-title 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="设置角标">
+      <demo-title title="设置角标" :contentPadding="false">
        <tn-goods-nav :options="countOptions"></tn-goods-nav>
      </demo-title>
      
-      <demo-title title="设置边距按钮">
+      <demo-title title="设置边距按钮" :contentPadding="false">
        <tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
      </demo-title>
      
-      <demo-title title="设置圆角按钮">
+      <demo-title title="设置圆角按钮" :contentPadding="false">
        <tn-goods-nav buttonType="round"></tn-goods-nav>
      </demo-title>
      
-      <demo-title title="不设置选项">
+      <demo-title title="不设置选项" :contentPadding="false">
        <tn-goods-nav :options="[]"></tn-goods-nav>
      </demo-title>
      
-      <demo-title title="自定义颜色">
+      <demo-title title="自定义颜色" :contentPadding="false">
        <tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
      </demo-title>
      
-      <demo-title title="固定在底部">
+      <demo-title title="固定在底部" :contentPadding="false">
        <tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
      </demo-title>
      
@@ -104,11 +108,11 @@
    methods: {
      // 选项点击事件
      onOptionClick(e) {
-        this.$t.messageUtils.toast(`点击了第${e.index}个选项`)
+        this.$t.message.toast(`点击了第${e.index}个选项`)
      },
      // 按钮点击事件
      onButtonClick(e) {
-        this.$t.messageUtils.toast(`点击了第${e.index}个按钮`)
+        this.$t.message.toast(`点击了第${e.index}个按钮`)
      }
    }
  }
@@ -195,14 +195,14 @@
        } else if (this.mode === 'car') {
          // 判断输入的值是否正确
          if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) {
-            this.$t.messageUtils.toast('车牌归属地选择错误')
+            this.$t.message.toast('车牌归属地选择错误')
            return
          } else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) {
-            this.$t.messageUtils.toast('车牌归属地字母选择错误')
+            this.$t.message.toast('车牌归属地字母选择错误')
            return
          }
          if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) {
-            this.$t.messageUtils.toast('车牌号码选择错误')
+            this.$t.message.toast('车牌号码选择错误')
            return
          }
          // this.licensePlateValue[this.currentLicensePlateIndex] = e
@@ -216,11 +216,11 @@
      },
      // 点击了取消按钮
      onCancel() {
-        this.$t.messageUtils.toast('点击了取消按钮')
+        this.$t.message.toast('点击了取消按钮')
      },
      // 点击了确认按钮
      onConfirm() {
-        this.$t.messageUtils.toast('点击了确认按钮')
+        this.$t.message.toast('点击了确认按钮')
        this.value = false
      },
      // 点击了退格按钮
@@ -72,7 +72,7 @@
        this.status = 'loading'
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
-            index = this.$t.number.random(0, this.data.length - 1)
+            index = this.$t.number.randomInt(0, this.data.length - 1)
            this.list.push({
              src: this.data[index].src
            })
@@ -241,7 +241,7 @@
      // 点击按钮
      clickBtn(event) {
        this.show = false
-        this.$t.messageUtils.toast('点击了第'+(event.index + 1)+'个按钮')
+        this.$t.message.toast('点击了第'+(event.index + 1)+'个按钮')
      }

    },
@@ -259,7 +259,7 @@
      
      // 点击取消按钮
      cancelPicker(event) {
-        this.$t.messageUtils.toast('点击了取消按钮')
+        this.$t.message.toast('点击了取消按钮')
      },
      // 点击确认按钮
      confirmPicker(event) {
@@ -14,7 +14,7 @@
            <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="[$t.color.getRandomCoolBgClass(index)]">
                    <view class="tn-icon-gloves-fill"></view>
                  </view>  
                  <view class="tn-color-black tn-text-lg tn-text-center">
@@ -33,7 +33,7 @@
            <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="[$t.color.getRandomCoolBgClass(index)]">
                    <view class="tn-icon-gloves-fill"></view>
                  </view>  
                  <view class="tn-color-black tn-text-lg tn-text-center">
@@ -52,7 +52,7 @@
            <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="[$t.color.getRandomCoolBgClass(index)]">
                    <view class="tn-icon-gloves-fill"></view>
                  </view>  
                  <view class="tn-color-black tn-text-lg tn-text-center">
@@ -326,7 +326,7 @@
      
      // 点击取消按钮
      cancelSelect(event) {
-        this.$t.messageUtils.toast('点击了取消按钮')
+        this.$t.message.toast('点击了取消按钮')
      },
      // 点击确认按钮
      confirmSelect(event) {
@@ -106,7 +106,7 @@
            resolve()
            return
          }
-          this.$t.messageUtils.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
+          this.$t.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
            resolve()
          }, true, () => {
            reject()
@@ -9,8 +9,10 @@
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <demo-title title="基本使用">
-        <tn-swipe-action>
-          <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>
@@ -25,7 +27,6 @@
            </view>
          </view>
        </tn-swipe-action-item>
-        </tn-swipe-action>
      </demo-title>
      
      <demo-title title="多菜单">
@@ -201,6 +202,14 @@
      }
    },
    methods: {
+      // 处理swiperActionItem点击事件
+      onSwiperItemClick(e) {
+        if (e.type === 'button') {
+          this.$t.message.toast(`点击了第${e.index}个按钮`)
+        } else if (e.type === 'item') {
+          this.$t.message.toast(`点击了item标签,name为${e.name}`)
+        }
+      }
    }
  }
 </script>
@@ -120,7 +120,7 @@
      },
      // 关闭Tips
      closeTips() {
-        this.$t.messageUtils.toast('tips提示框关闭了')
+        this.$t.message.toast('tips提示框关闭了')
      }

    },
@@ -126,7 +126,7 @@
      },
      // 关闭Toast
      closedToast() {
-        this.$t.messageUtils.toast('Toast关闭')
+        this.$t.message.toast('Toast关闭')
      }

    },
@@ -119,15 +119,15 @@
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$t.message.closeLoading()
+            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      
@@ -138,11 +138,11 @@
      
      // 开始倒计时
      codeStart() {
-        this.$t.messageUtils.toast('倒计时开始')
+        this.$t.message.toast('倒计时开始')
      },
      // 结束倒计时
      codeEnd() {
-        this.$t.messageUtils.toast('倒计时结束')
+        this.$t.message.toast('倒计时结束')
      },
      // 正在倒计时
      codeChange(event) {
@@ -21,6 +21,10 @@
 <script>
  export default {
    name: 'demo-title',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
    props: {
      // 标题类型
      type: {
@@ -120,7 +120,7 @@
    data() {
      return {
        // 图鸟颜色列表
-        tuniaoColorList: this.$t.colorUtils.getTuniaoColorList(),
+        tuniaoColorList: this.$t.color.getTuniaoColorList(),
        // 保存选项列表信息（由于prop中的数据时不能被修改的）
        _sectionList: [],
        // 模式列表信息
@@ -21,4 +21,8 @@ const app = new Vue({
  store,
  ...App
 })
+
+// 引入请求封装
+require('./util/request/index')(app)
+
 app.$mount()
@@ -1,7 +1,7 @@
 {
-    "name" : "TuniaoUI_UniApp_Opensource",
+    "name" : "TuniaoUI_UniApp",
    "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,17 @@
    },
    "vueVersion" : "2",
    "h5" : {
-        "template" : "template.h5.html",
        "title" : "Tuniao UI",
+        "template" : "template.h5.html",
        "router" : {
            "mode" : "hash"
        },
        "sdkConfigs" : {
-            "maps" : {}
+            "maps" : {
+                "qqmap" : {
+                    "key" : "IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5"
+                }
+            }
        }
    }
 }
@@ -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'
+        }
+      ]
+    }
+  ]
 }
@@ -10,25 +10,25 @@ export default {
        {
          icon: 'send',
          title: '火箭登录',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/login/demo1/demo1'
        },
        {
          icon: 'send',
          title: '粒子登录',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/login/demo2/demo2'
        },
        {
          icon: 'send',
          title: '背景登录',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/login/demo3/demo3'
        },
        {
          icon: 'send',
          title: '简约登录',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/login/demo4/demo4'
        }
      ]
@@ -40,20 +40,26 @@ export default {
        {
          icon: 'send',
          title: '夏天个人',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/my/demo1/demo1'
        },
        {
          icon: 'send',
          title: '图鸟个人',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/my/demo2/demo2'
        },
        {
          icon: 'send',
          title: '外卖个人',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/my/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '高端个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo4/demo4'
        }
      ]
    },
@@ -64,37 +70,37 @@ export default {
        {
          icon: 'send',
          title: '音乐首页',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/home/music/music'
        },
        {
          icon: 'send',
          title: '课程首页',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/home/course/course'
        },
        {
          icon: 'send',
          title: '设计首页',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/home/design/design'
        },
        {
          icon: 'send',
          title: '招聘首页',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/home/job/job'
        },
        {
          icon: 'send',
          title: '投屏首页',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/home/screen/screen'
        },
        {
          icon: 'send',
          title: '壁纸首页',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/home/wallpaper/wallpaper'
        },
      ]
@@ -106,26 +112,49 @@ export default {
        {
          icon: 'send',
          title: '健康码',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/health/qrcode/qrcode'
        },
-        
+        {
+          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: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/life/fullpage/fullpage'
        },
        {
-          icon: 'like-break',
+          icon: 'rocket',
          title: '浏览器',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/life/browser/browser'
        },
        {
-          icon: 'like-break',
+          icon: 'rocket',
          title: '时钟',
-          author: '可我会像',
+          author: '图鸟北北',
          url: '/templatePage/time/clock/clock'
        }
      ]
@@ -137,9 +166,15 @@ export default {
         {
           icon: 'send',
           title: '加载动画',
-           author: '可我会像',
+           author: '图鸟北北',
           url: '/templatePage/animate/loading/loading'
         },
+         {
+           icon: 'send',
+           title: '流星悬浮',
+           author: '图鸟北北',
+           url: '/templatePage/animate/suspended/suspended'
+         },
         {
           icon: 'send',
           title: '随机粒子',
@@ -157,6 +192,18 @@ export default {
           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'
         }
       ]
     },
@@ -167,29 +214,29 @@ export default {
          {
            icon: 'send',
            title: '3D全景(第三方，约120￥一年)',
-            author: '可我会像 & 芊云全景',
+            author: '图鸟北北 & 芊云全景',
            url: '/templatePage/life/pano/pano'
          },
          {
-            icon: 'like-break',
+            icon: 'rocket',
            title: 'Ucharts图表(第三方，免费开源)',
-            author: '可我会像 & Ucharts秋云',
+            author: '图鸟北北 & Ucharts秋云',
            url: '/templatePage/life/candle/candle'
          },
          {
-            icon: 'like-break',
+            icon: 'rocket',
            title: '隔壁的小生(第三方，赞赏6￥可商用)',
            author: '隔壁的小生',
            url: '/templatePage/life/candle/candle'
          },
          {
-            icon: 'like-break',
+            icon: 'rocket',
            title: '阿凡提·污克西西(第三方，免费开源)',
            author: '阿凡提·污克西西',
            url: '/templatePage/life/candle/candle'
          },
          {
-            icon: 'like-break',
+            icon: 'rocket',
            title: '期待你的加入',
            author: '期待你的加入',
            url: '/templatePage/life/candle/candle'
@@ -6,14 +6,31 @@
    {
      "path": "pages/index/index",
      "style": {
-        "navigationBarTitleText": "Tuniao UI",
-        "enablePullDownRefresh": false
+        "mp-weixin": {
+        },
+        "app-plus": {
+          "bounce": "none"
+        },
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "mp-baidu": {
+          "disableScroll": true
+        }
      }
    }
  ],
  "subPackages": [{
    "root": "basicPage",
    "pages": [{
+        "path": "test/test",
+        "style": {
+          "navigationStyle": "default",
+          "navigationBarTitleText": "测试页面",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
        "path": "flex-layout/flex-layout",
        "style": {
          "navigationBarTitleText": "Flex布局",
@@ -73,7 +90,32 @@
          "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": [{
@@ -459,6 +501,18 @@
        "navigationBarTitleText": "会员协议",
        "enablePullDownRefresh": false
      }
+    }, {
+      "path": "life/browser/browser",
+      "style": {
+        "navigationBarTitleText": "浏览器",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/share/share",
+      "style": {
+        "navigationBarTitleText": "会员分享",
+        "enablePullDownRefresh": false
+      }
    }, {
      "path": "life/candle/candle",
      "style": {
@@ -474,7 +528,7 @@
    }, {
      "path": "animate/loading/loading",
      "style": {
-        "navigationBarTitleText": "加载动效",
+        "navigationBarTitleText": "加载动画",
        "enablePullDownRefresh": false
      }
    }, {
@@ -513,6 +567,54 @@
        "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
+      }
    }]
  }],
  "preloadRule": {
@@ -5,32 +5,34 @@
      <image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
    </view>
    
+    <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">基 / 础 / 元 / 素</view>
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
      </view>
      
      <view class='nav-list'>
        
-      <block v-for="(item, index) in navList" :key="index">
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
          <navigator
            open-type="navigate"
            hover-class='none'
-          :url="item.url"
-          class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            :url="content_item.url"
+            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>

@@ -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.$t.color.getRandomCoolBgClass()
      }
    }
  }
@@ -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;
@@ -67,7 +67,7 @@
    },
    methods: {
      getRandomCoolBg() {
-        return this.$t.colorUtils.getRandomCoolBgClass()
+        return this.$t.color.getRandomCoolBgClass()
      }
    }
  }
@@ -73,7 +73,7 @@
    },
    methods: {
      getRandomCoolBg() {
-        return this.$t.colorUtils.getRandomCoolBgClass()
+        return this.$t.color.getRandomCoolBgClass()
      }
    }
  }
@@ -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://tnuiimage.tnkjapp.com/bubble/" + this.$t.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.$t.number.random(0.22 * width, 0.33 * width),
+          y: this.$t.number.random(0.5 * height, 0.75 * height)
+        }
+        const p2 = {
+          x: this.$t.number.random(0, 0.88 * width),
+          y: this.$t.number.random(0.25 * height, 0.5 * height)
+        }
+        const p3 = {
+          x: this.$t.number.random(0, 0.88 * width),
+          y: this.$t.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>
@@ -0,0 +1,214 @@
+<template>
+  <view class="template-suspended">
+    <!-- 顶部自定义导航 -->
+    <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>    
+    
+    <view class="wechat tnxuanfu" @click="navTuniaoUI">
+      <view class="bg0 pa">
+        <view class="bg1">
+          <image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
+        </view>
+      </view>
+      <view class="hx-box pa">
+        <view class="pr">
+          <view class="hx-k1 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k2 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k3 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k4 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k5 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k6 pa0">
+            <view class="span"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateSuspended',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      // 跳转到
+      navTuniaoUI(e) {
+        wx.vibrateShort();
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-suspended{
+    background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
+    width: 100vw;
+    height: 100vh;
+  }  
+  /* 悬浮 */
+  .tnxuanfu{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+  /* 悬浮按钮 */
+  .button-shop {
+    width: 90rpx;
+    height: 90rpx;
+    display: flex;
+    flex-direction: row;
+    position: fixed;
+    /* bottom:200rpx;
+      right: 20rpx; */
+    left: 5rpx;
+    top: 5rpx;
+    z-index: 1001;
+    border-radius: 100px;
+    opacity: 0.9;
+  }
+  
+  
+  /* 按钮 */
+  .wechat {
+    bottom: 300rpx;
+    right: 75rpx;
+    position: fixed;
+    z-index: 9999;
+  }
+  
+  
+  .pa,
+  .pa0 {
+    position: absolute
+  }
+  
+  .pa0 {
+    left: 0;
+    top: 0
+  }
+  
+  
+  .bg0 {
+    width: 100rpx;
+    height: 100rpx;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .bg1 {
+    width: 100%;
+    height: 100%;
+  }
+  
+  
+  
+  
+  .hx-box {
+    top: 50%;
+    left: 50%;
+    width: 100rpx;
+    height: 100rpx;
+    transform-style: preserve-3d;
+    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+  }
+  
+  .hx-box .pr {
+    width: 100rpx;
+    height: 100rpx;
+    transform-style: preserve-3d;
+    animation: hxz 20s linear infinite;
+  }
+  
+  @keyframes hxz {
+    0% {
+      transform: rotateX(0deg);
+    }
+  
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+  
+  
+  
+  .hx-box .pr .pa0 {
+    width: 100rpx;
+    height: 100rpx;
+    /* border: 4px solid #5ec0ff; */
+    border-radius: 1000px;
+  }
+  
+  .hx-box .pr .pa0 .span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
+    background-size: 100% 100%;
+    animation: hx 4s linear infinite;
+  }
+  
+  @keyframes hx {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .hx-k1 {
+    transform: rotateX(-60deg) rotateZ(-60deg)
+  }
+  
+  .hx-k2 {
+    transform: rotateX(-30deg) rotateZ(-30deg)
+  }
+  
+  .hx-k3 {
+    transform: rotateX(0deg) rotateZ(0deg)
+  }
+  
+  .hx-k4 {
+    transform: rotateX(30deg) rotateZ(30deg)
+  }
+  
+  .hx-k5 {
+    transform: rotateX(60deg) rotateZ(60deg)
+  }
+  
+  .hx-k6 {
+    transform: rotateX(90deg) rotateZ(90deg)
+  }
+</style>
@@ -0,0 +1,122 @@
+<template>
+  <view class="template-wave">
+    <!-- 顶部自定义导航 -->
+    <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>
+    
+    <view class="">
+      
+    </view>
+    
+    <view class="tnwave waveAnimation">
+      <view class="waveWrapperInner bgTop">
+        <view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgMiddle">
+        <view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgBottom">
+        <view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
+      </view>
+    </view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateWave',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-wave{
+    background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
+    width: 100vw;
+    height: 100vh;
+  }
+  @keyframes move_wave {
+      0% {
+          transform: translateX(0) translateZ(0) scaleY(1)
+      }
+      50% {
+          transform: translateX(-25%) translateZ(0) scaleY(1)
+      }
+      100% {
+          transform: translateX(-50%) translateZ(0) scaleY(1)
+      }
+  }
+  .tnwave {
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+  }
+  .waveWrapperInner {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+  }
+  .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-repeat: repeat no-repeat;
+      background-position: 0 bottom;
+      transform-origin: center bottom;
+  }
+  
+  .bgTop {
+      opacity: 0.4;
+  }
+  .waveTop {
+      background-size: 50% 45px;
+  }
+  .waveAnimation .waveTop {
+    animation: move_wave 4s linear infinite;
+  }
+  
+  .bgMiddle {
+      opacity: 0.6;
+  }
+  .waveMiddle {
+      background-size: 50% 40px;
+  }
+  .waveAnimation .waveMiddle {
+      animation: move_wave 3.5s linear infinite;
+  }
+  
+  .bgBottom {
+      opacity: 0.95;
+  }
+  .waveBottom {
+      background-size: 50% 35px;
+  }
+  .waveAnimation .waveBottom {
+      animation: move_wave 2s linear infinite;
+  }
+</style>
@@ -0,0 +1,739 @@
+<template>
+  <view class="tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <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> -->
+
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="logo-pic tn-shadow-blur"
+            style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
+            <view class="logo-image">
+              <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
+              </tn-badge>
+            </view>
+          </view>
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
+          </view>
+        </view> -->
+        <view class="tn-margin-top tn-margin-left">
+          <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
+            :fontSize="36"></tn-tabs>
+        </view>
+      </view>
+
+    </tn-nav-bar>
+
+
+    <!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <block v-for="(item, index) in content" :key="index">
+        <view class="article-shadow tn-margin">
+          <view class="tn-flex">
+            <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
+              <view class="image-article">
+              </view>
+            </view>
+            <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
+              <view class="tn-text-lg tn-text-bold clamp-text-1">
+                {{ item.title }}
+              </view>
+              <view class="tn-padding-top-xs" style="min-height: 100rpx;">
+                <text class=" tn-text-sm tn-color-gray clamp-text-2">
+                  {{ item.desc }}
+                </text>
+              </view>
+              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index"
+                  class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                  <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
+                </view>
+                <view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 5rpx;">
+                  <text class="tn-icon-footprint tn-padding-right-xs"></text>
+                  <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                  <text class="tn-icon-like-lack tn-padding-right-xs"></text>
+                  <text class="">{{ item.likeCount }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+
+
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover tn-color-gray--dark">
+          </view>  -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+        </view>
+        <view class="tn-color-black">圈子</view>
+      </view>
+
+      <!-- <view class="action bar-center">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+        </view>
+        <view class="tn-color-gray">发布</view>
+      </view> -->
+
+      <view class="action bar-center" @click="">
+        <view class="nav-index-button">
+          <view class="nav-index-button__content">
+            <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <!-- <view class="tn-icon-logo-tuniao"></view> -->
+              <view class="bar-circle tn-shadow-blur">
+                <view class="tn-icon-add tn-color-white"></view>
+                <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
+              </view>
+            </view>
+          </view>
+
+          <view class="nav-index-button__meteor">
+            <view class="nav-index-button__meteor__wrapper">
+              <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
+                :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+                <view class="nav-index-button__meteor__item--pic"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+        </view>
+        <view class="tn-color-gray">优选</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+
+
+
+    <view class="tn-padding-xl"></view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: {
+      NavIndexButton
+    },
+    data() {
+      return {
+        current: 0,
+        scrollList: [{
+            name: '资讯'
+          },
+          {
+            name: '博客'
+          },
+          {
+            name: '学习',
+            count: ''
+          }
+        ],
+        content: [{
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'red',
+            label: ['小程序'],
+            title: '全新出发，新版本已上线，欢迎三连',
+            desc: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 567
+            },
+            collectionCount: 543,
+            commentCount: 543,
+            likeCount: 206
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'cyan',
+            label: ['模型'],
+            title: '3D模型了解一下？',
+            desc: '一个拥有大量3D模型的网站',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 987
+            },
+            collectionCount: 567,
+            commentCount: 69,
+            likeCount: 65
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'blue',
+            label: ['UI设计'],
+            title: '为什么资讯不显示时间',
+            desc: '你确定你经常更新文章吗？',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 321
+            },
+            collectionCount: 654,
+            commentCount: 232,
+            likeCount: 543
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'green',
+            label: ['创意'],
+            title: '创意一点点',
+            desc: '创意灵感从这里开始',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 230
+            },
+            collectionCount: 987,
+            commentCount: 236,
+            likeCount: 342
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'orange',
+            label: ['UI设计'],
+            title: '语雀素材地址资源',
+            desc: '图鸟UI素材免费可商用',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 106
+            },
+            collectionCount: 765,
+            commentCount: 32,
+            likeCount: 91
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purplered',
+            label: ['神器'],
+            title: '最强的视频转GIF工具',
+            desc: '神器推荐',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 232
+            },
+            collectionCount: 776,
+            commentCount: 48,
+            likeCount: 86
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purple',
+            label: ['粒子'],
+            title: '小程序粒子效果',
+            desc: '酷炫的小程序粒子效果一览',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 456
+            },
+            collectionCount: 342,
+            commentCount: 42,
+            likeCount: 76
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'brown',
+            label: ['工具'],
+            title: '小程序任意页面生成二维码',
+            desc: '二维码生成器',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ],
+      }
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+
+  .logo-image {
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    margin-top: -15rpx;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+  }
+
+  /* 自定义导航栏内容 end */
+
+  /* 资讯主图 start*/
+  .image-article {
+    border-radius: 8rpx;
+    border: 1rpx solid #F8F7F8;
+    width: 200rpx;
+    height: 200rpx;
+    position: relative;
+  }
+
+  .image-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 10rpx;
+  }
+
+  .article-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 35rpx;
+      padding: 5rpx 25rpx;
+
+      &--prefix {
+        padding-right: 10rpx;
+      }
+    }
+  }
+
+  /* 标签内容 end*/
+
+  /* 底部tabbar start*/
+  .footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 999;
+    background-color: #FFFFFF;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+    padding: 0;
+    height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+
+  .tabbar .action {
+    font-size: 22rpx;
+    position: relative;
+    flex: 1;
+    text-align: center;
+    padding: 0;
+    display: block;
+    height: auto;
+    line-height: 1;
+    margin: 0;
+    overflow: initial;
+  }
+
+  .bar-center {
+    animation: suspension 3s ease-in-out infinite;
+  }
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+
+  .tabbar .action .bar-icon {
+    width: 100rpx;
+    position: relative;
+    display: block;
+    height: auto;
+    margin: 0 auto 10rpx;
+    text-align: center;
+    font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+
+  .tabbar .action .bar-icon image {
+    width: 50rpx;
+    height: 50rpx;
+    display: inline-block;
+  }
+
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: 0rpx auto 0rpx;
+    text-align: center;
+    font-size: 60rpx;
+    line-height: 100rpx;
+    background-color: #FBBF18;
+    width: 100rpx !important;
+    height: 100rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    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);
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
+  }
+
+  .tabbar .action .bar-circle image {
+    width: 100rpx;
+    height: 100rpx;
+    display: inline-block;
+    margin: 0rpx auto 0rpx;
+  }
+
+  /* 流星+悬浮 */
+  .nav-index-button {
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+
+
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+
+        &::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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.6rem);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
@@ -0,0 +1,739 @@
+<template>
+  <view class="tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <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> -->
+
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="logo-pic tn-shadow-blur"
+            style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
+            <view class="logo-image">
+              <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
+              </tn-badge>
+            </view>
+          </view>
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
+          </view>
+        </view> -->
+        <view class="tn-margin-top tn-margin-left">
+          <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
+            :fontSize="36"></tn-tabs>
+        </view>
+      </view>
+
+    </tn-nav-bar>
+
+
+    <!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <block v-for="(item, index) in content" :key="index">
+        <view class="article-shadow tn-margin">
+          <view class="tn-flex">
+            <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
+              <view class="tn-text-lg tn-text-bold clamp-text-2 tn-text-justify" style="min-height: 95rpx;">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" style="transform: translate(0,-5rpx);"
+                  class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                  <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
+                </view>
+                <text class="">{{ item.title }}</text>
+              </view>
+              <view class="tn-padding-top-xs">
+                <text class=" tn-text-sm tn-color-gray clamp-text-1">
+                  {{ item.desc }}
+                </text>
+              </view>
+              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
+                <view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 15rpx;">
+                  <text class="tn-icon-footprint tn-padding-right-xs"></text>
+                  <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                  <text class="tn-icon-like-lack tn-padding-right-xs"></text>
+                  <text class="">{{ item.likeCount }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
+              <view class="image-article">
+              </view>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+
+
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover tn-color-gray--dark">
+          </view>  -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+        </view>
+        <view class="tn-color-black">圈子</view>
+      </view>
+
+      <!-- <view class="action bar-center">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+        </view>
+        <view class="tn-color-gray">发布</view>
+      </view> -->
+
+      <view class="action bar-center" @click="">
+        <view class="nav-index-button">
+          <view class="nav-index-button__content">
+            <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <!-- <view class="tn-icon-logo-tuniao"></view> -->
+              <view class="bar-circle tn-shadow-blur">
+                <view class="tn-icon-add tn-color-white"></view>
+                <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
+              </view>
+            </view>
+          </view>
+
+          <view class="nav-index-button__meteor">
+            <view class="nav-index-button__meteor__wrapper">
+              <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
+                :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+                <view class="nav-index-button__meteor__item--pic"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+        </view>
+        <view class="tn-color-gray">优选</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+
+
+
+    <view class="tn-padding-xl"></view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: {
+      NavIndexButton
+    },
+    data() {
+      return {
+        current: 0,
+        scrollList: [{
+            name: '资讯'
+          },
+          {
+            name: '博客'
+          },
+          {
+            name: '学习',
+            count: ''
+          }
+        ],
+        content: [{
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'red',
+            label: ['小程序'],
+            title: '小程序官网源码，免费开源欢迎白嫖嗷嗷',
+            desc: '2.2.0版本已上线，欢迎三连',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 567
+            },
+            collectionCount: 543,
+            commentCount: 543,
+            likeCount: 206
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'cyan',
+            label: ['模型'],
+            title: '一个拥有大量3D模型的网站',
+            desc: '3D模型了解一下？',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 987
+            },
+            collectionCount: 567,
+            commentCount: 69,
+            likeCount: 65
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'blue',
+            label: ['UI设计'],
+            title: '为什么资讯不显示时间？',
+            desc: '你确定你经常更新文章吗？',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 321
+            },
+            collectionCount: 654,
+            commentCount: 232,
+            likeCount: 543
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'green',
+            label: ['创意'],
+            title: '创意一点点',
+            desc: '创意灵感从这里开始',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 230
+            },
+            collectionCount: 987,
+            commentCount: 236,
+            likeCount: 342
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'orange',
+            label: ['UI设计'],
+            title: '图鸟UI素材免费可商用',
+            desc: '语雀素材地址资源',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 106
+            },
+            collectionCount: 765,
+            commentCount: 32,
+            likeCount: 91
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purplered',
+            label: ['神器'],
+            title: '最强的视频转GIF工具',
+            desc: '神器推荐',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 232
+            },
+            collectionCount: 776,
+            commentCount: 48,
+            likeCount: 86
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purple',
+            label: ['粒子'],
+            title: '酷炫的小程序粒子效果一览',
+            desc: '小程序粒子效果',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 456
+            },
+            collectionCount: 342,
+            commentCount: 42,
+            likeCount: 76
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'brown',
+            label: ['工具'],
+            title: '小程序任意页面生成二维码',
+            desc: '二维码生成器',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ],
+      }
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+
+  .logo-image {
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    margin-top: -15rpx;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+  }
+
+  /* 自定义导航栏内容 end */
+
+  /* 资讯主图 start*/
+  .image-article {
+    border-radius: 8rpx;
+    border: 1rpx solid #F8F7F8;
+    width: 250rpx;
+    height: 200rpx;
+    position: relative;
+  }
+
+  .image-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 10rpx;
+  }
+
+  .article-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 35rpx;
+      padding: 5rpx 25rpx;
+
+      &--prefix {
+        padding-right: 10rpx;
+      }
+    }
+  }
+
+  /* 标签内容 end*/
+
+  /* 底部tabbar start*/
+  .footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 999;
+    background-color: #FFFFFF;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+    padding: 0;
+    height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+
+  .tabbar .action {
+    font-size: 22rpx;
+    position: relative;
+    flex: 1;
+    text-align: center;
+    padding: 0;
+    display: block;
+    height: auto;
+    line-height: 1;
+    margin: 0;
+    overflow: initial;
+  }
+
+  .bar-center {
+    animation: suspension 3s ease-in-out infinite;
+  }
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+
+  .tabbar .action .bar-icon {
+    width: 100rpx;
+    position: relative;
+    display: block;
+    height: auto;
+    margin: 0 auto 10rpx;
+    text-align: center;
+    font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+
+  .tabbar .action .bar-icon image {
+    width: 50rpx;
+    height: 50rpx;
+    display: inline-block;
+  }
+
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: 0rpx auto 0rpx;
+    text-align: center;
+    font-size: 60rpx;
+    line-height: 100rpx;
+    background-color: #FBBF18;
+    width: 100rpx !important;
+    height: 100rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    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);
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
+  }
+
+  .tabbar .action .bar-circle image {
+    width: 100rpx;
+    height: 100rpx;
+    display: inline-block;
+    margin: 0rpx auto 0rpx;
+  }
+
+  /* 流星+悬浮 */
+  .nav-index-button {
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+
+
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+
+        &::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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.6rem);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
@@ -63,7 +63,7 @@
        <view class=" " style="width: 25%;">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center  tn-padding-xl">
            <view class="icon16__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <view class="tn-cool-color-icon16" :class="[$t.colorUtils.getRandomCoolBgClass(index) + ' tn-icon-' + item.icon]"></view>
+              <view class="tn-cool-color-icon16" :class="[$t.color.getRandomCoolBgClass(index) + ' tn-icon-' + item.icon]"></view>
            </view>  
            <view class="tn-color-black tn-text-lg tn-text-center">
              <text class="tn-text-ellipsis">{{item.title}}</text>
@@ -0,0 +1,267 @@
+<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 class="container about-bg" style="background-image:url('https://tnuiimage.tnkjapp.com/about/about.png')">
+    </view>
+  </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://tnuiimage.tnkjapp.com/bubble/" + this.$t.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.$t.number.random(0.22 * width, 0.33 * width),
+          y: this.$t.number.random(0.5 * height, 0.75 * height)
+        }
+        const p2 = {
+          x: this.$t.number.random(0, 0.88 * width),
+          y: this.$t.number.random(0.25 * height, 0.5 * height)
+        }
+        const p3 = {
+          x: this.$t.number.random(0, 0.88 * width),
+          y: this.$t.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 {
+    margin: 0;
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
+    /* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
+    /* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
+    /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
+    background-size: 500% 500%;
+    animation: gradientBG 15s ease infinite;
+    
+    position: relative;
+    
+    .bubble {
+      position: fixed;
+      bottom: -10vh;
+      right: 0;
+      z-index: 1024;
+      pointer-events: none;
+      // background-color: red;
+    }
+  }
+  
+  
+  .about-bg {
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
+  }
+  
+
+  
+
+  @keyframes gradientBG {
+    0% {
+      background-position: 0% 50%;
+    }
+  
+    50% {
+      background-position: 100% 50%;
+    }
+  
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  
+  .container {
+    width: 100%;
+    position: absolute;
+    text-align: center;
+  }
+  
+</style>
@@ -0,0 +1,37 @@
+<template>
+  <view class="template-course">
+    <!-- 顶部自定义导航 -->
+    <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>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+</style>
@@ -0,0 +1,477 @@
+<template>
+  <view class="template-outset">
+    <!-- 顶部自定义导航 -->
+    <!-- <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> -->
+    
+    
+    <!-- 流星-->
+    <view class="tn-satr">
+      <view class="sky"></view>
+      <view class="stars">
+        <view class="falling-stars">
+          <view class="star-fall"></view>
+          <view class="star-fall"></view>
+          <view class="star-fall"></view>
+          <view class="star-fall"></view>
+        </view>
+        <view class="small-stars">
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+        </view>
+        <view class="medium-stars">
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 头像用户信息 -->
+    <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+      <view class="user-info__avatar tn-flex tn-flex-col-center tn-flex-row-center">
+        <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
+        </view>
+      </view>
+      <!-- <view class="user-info__nick-name">图鸟UI</view> -->
+    </view>
+    
+    <view class="tn-text-center tn-color-gray--disabled" style="padding: 60vh 0 0 0;">
+      <view class="" style="font-size: 45rpx;">
+        图鸟UI，不止于此
+      </view>
+      <view class="tn-color-gray--disabled tn-text-df tn-padding-top">
+        新触动 新感受 新创意
+      </view>
+    </view>
+    
+    <view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
+      <tn-button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="100%" height="70rpx">全新出发</tn-button>
+    </view>
+    
+    <view class="tnwave waveAnimation">
+      <view class="waveWrapperInner bgTop">
+        <view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgMiddle">
+        <view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgBottom">
+        <view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
+      </view>
+    </view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateWave',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+/* 用户信息 start */
+  .user-info {
+    &__container {
+      position: absolute;
+      top: 25vh;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    }
+    
+    &__avatar {
+      width: 200rpx;
+      height: 200rpx;
+      border: 8rpx solid rgba(255,255,255,0.05);
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    }
+    
+    &__nick-name {
+      color: #FFFFFF;
+      margin-top: 26rpx;
+      font-size: 36rpx;
+      font-weight: 600;
+      text-align: center;
+    }
+  }
+  /* 用户信息 end */
+  
+  /* 流星*/
+  .tn-satr {
+    position: fixed;
+    width: 100%;
+    height: 600px;
+    overflow: hidden;
+    flex-shrink: 0;
+    z-index: 998;
+  }
+  
+  .stars {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 400px;
+  }
+  
+  .star {
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
+  }
+  
+  .small-stars .star {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+  }
+  .small-stars .star:nth-child(2n) {
+    opacity: 0;
+    -webkit-animation: star-blink 1.2s linear infinite alternate;
+            animation: star-blink 1.2s linear infinite alternate;
+  }
+  .small-stars .star:nth-child(1) {
+    left: 40px;
+    bottom: 50px;
+  }
+  .small-stars .star:nth-child(2) {
+    left: 200px;
+    bottom: 40px;
+  }
+  .small-stars .star:nth-child(3) {
+    left: 60px;
+    bottom: 120px;
+  }
+  .small-stars .star:nth-child(4) {
+    left: 140px;
+    bottom: 250px;
+  }
+  .small-stars .star:nth-child(5) {
+    left: 400px;
+    bottom: 300px;
+  }
+  .small-stars .star:nth-child(6) {
+    left: 170px;
+    bottom: 80px;
+  }
+  .small-stars .star:nth-child(7) {
+    left: 200px;
+    bottom: 360px;
+    -webkit-animation-delay: .2s;
+            animation-delay: .2s;
+  }
+  .small-stars .star:nth-child(8) {
+    left: 250px;
+    bottom: 320px;
+  }
+  .small-stars .star:nth-child(9) {
+    left: 300px;
+    bottom: 340px;
+  }
+  .small-stars .star:nth-child(10) {
+    left: 130px;
+    bottom: 320px;
+    -webkit-animation-delay: .5s;
+            animation-delay: .5s;
+  }
+  .small-stars .star:nth-child(11) {
+    left: 230px;
+    bottom: 330px;
+    -webkit-animation-delay: 7s;
+            animation-delay: 7s;
+  }
+  .small-stars .star:nth-child(12) {
+    left: 300px;
+    bottom: 360px;
+    -webkit-animation-delay: .3s;
+            animation-delay: .3s;
+  }
+  @-webkit-keyframes star-blink {
+    50% {
+      width: 3px;
+      height: 3px;
+      opacity: 1;
+    }
+  }
+  @keyframes star-blink {
+    50% {
+      width: 3px;
+      height: 3px;
+      opacity: 1;
+    }
+  }
+  .medium-stars .star {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    opacity: 0;
+    -webkit-animation: star-blink 1.2s ease-in infinite alternate;
+            animation: star-blink 1.2s ease-in infinite alternate;
+  }
+  .medium-stars .star:nth-child(1) {
+    left: 300px;
+    bottom: 50px;
+  }
+  .medium-stars .star:nth-child(2) {
+    left: 400px;
+    bottom: 40px;
+    -webkit-animation-delay: .4s;
+            animation-delay: .4s;
+  }
+  .medium-stars .star:nth-child(3) {
+    left: 330px;
+    bottom: 300px;
+    -webkit-animation-delay: .2s;
+            animation-delay: .2s;
+  }
+  .medium-stars .star:nth-child(4) {
+    left: 460px;
+    bottom: 300px;
+    -webkit-animation-delay: .9s;
+            animation-delay: .9s;
+  }
+  .medium-stars .star:nth-child(5) {
+    left: 300px;
+    bottom: 150px;
+    -webkit-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+  }
+  .medium-stars .star:nth-child(6) {
+    left: 440px;
+    bottom: 120px;
+    -webkit-animation-delay: 1s;
+            animation-delay: 1s;
+  }
+  .medium-stars .star:nth-child(7) {
+    left: 200px;
+    bottom: 140px;
+    -webkit-animation-delay: .8s;
+            animation-delay: .8s;
+  }
+  .medium-stars .star:nth-child(8) {
+    left: 30px;
+    bottom: 480px;
+    -webkit-animation-delay: .3s;
+            animation-delay: .3s;
+  }
+  .medium-stars .star:nth-child(9) {
+    left: 460px;
+    bottom: 400px;
+    -webkit-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+  }
+  .medium-stars .star:nth-child(10) {
+    left: 150px;
+    bottom: 10px;
+    -webkit-animation-delay: 1s;
+            animation-delay: 1s;
+  }
+  .medium-stars .star:nth-child(11) {
+    left: 420px;
+    bottom: 450px;
+    -webkit-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+  }
+  .medium-stars .star:nth-child(12) {
+    left: 340px;
+    bottom: 180px;
+    -webkit-animation-delay: 1.1s;
+            animation-delay: 1.1s;
+  }
+  @keyframes star-blink {
+    50% {
+      width: 4px;
+      height: 4px;
+      opacity: 1;
+    }
+  }
+  .star-fall {
+    position: relative;
+    border-radius: 2px;
+    width: 80px;
+    height: 2px;
+    overflow: hidden;
+    -webkit-transform: rotate(-20deg);
+            transform: rotate(-20deg);
+  }
+  .star-fall:after {
+    content: "";
+    position: absolute;
+    width: 50px;
+    height: 2px;
+    background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
+    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
+    left: 100%;
+    -webkit-animation: star-fall 3.6s linear infinite;
+            animation: star-fall 3.6s linear infinite;
+  }
+  
+  .star-fall:nth-child(1) {
+    left: 80px;
+    bottom: -100px;
+  }
+  .star-fall:nth-child(1):after {
+    -webkit-animation-delay: 2.4s;
+            animation-delay: 2.4s;
+  }
+  
+  .star-fall:nth-child(2) {
+    left: 200px;
+    bottom: -200px;
+  }
+  .star-fall:nth-child(2):after {
+    -webkit-animation-delay: 2s;
+            animation-delay: 2s;
+  }
+  
+  .star-fall:nth-child(3) {
+    left: 430px;
+    bottom: -50px;
+  }
+  .star-fall:nth-child(3):after {
+    -webkit-animation-delay: 3.6s;
+            animation-delay: 3.6s;
+  }
+  
+  .star-fall:nth-child(4) {
+    left: 400px;
+    bottom: 100px;
+  }
+  .star-fall:nth-child(4):after {
+    -webkit-animation-delay: .2s;
+            animation-delay: .2s;
+  }
+  
+  @-webkit-keyframes star-fall {
+    20% {
+      left: -100%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+  
+  @keyframes star-fall {
+    20% {
+      left: -100%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+
+  
+  /* 波浪*/
+  .template-outset{
+    background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
+    width: 100vw;
+    height: 100vh;
+  }
+  @keyframes move_wave {
+      0% {
+          transform: translateX(0) translateZ(0) scaleY(1)
+      }
+      50% {
+          transform: translateX(-25%) translateZ(0) scaleY(1)
+      }
+      100% {
+          transform: translateX(-50%) translateZ(0) scaleY(1)
+      }
+  }
+  .tnwave {
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+  }
+  .waveWrapperInner {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+  }
+  .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-repeat: repeat no-repeat;
+      background-position: 0 bottom;
+      transform-origin: center bottom;
+  }
+  
+  .bgTop {
+      opacity: 0.4;
+  }
+  .waveTop {
+      background-size: 50% 45px;
+  }
+  .waveAnimation .waveTop {
+    animation: move_wave 4s linear infinite;
+  }
+  
+  .bgMiddle {
+      opacity: 0.6;
+  }
+  .waveMiddle {
+      background-size: 50% 40px;
+  }
+  .waveAnimation .waveMiddle {
+      animation: move_wave 3.5s linear infinite;
+  }
+  
+  .bgBottom {
+      opacity: 0.95;
+  }
+  .waveBottom {
+      background-size: 50% 35px;
+  }
+  .waveAnimation .waveBottom {
+      animation: move_wave 2s linear infinite;
+  }
+</style>
@@ -1,7 +1,8 @@
 <template>
 	<view class="components-pano">
-		<!-- <web-view src="https://j4zgq9xbby.720yun.com/t/98vkswdwr8y"></web-view> -->
+		<!-- <web-view src="https://sketchfab.com/models/1e9cb6b98a5b4bc39f0e48ec0261000d/embed?autostart=1&internal=1&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_watermark=0"></web-view> -->
    <web-view src="https://vr.he29.com/v3/tour/index?id=3095"></web-view>
+    <!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
 	</view>
 </template>

@@ -18,14 +18,14 @@
      <view class="plus-text">
        <view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
        <view class="tn-text-bold">
-          <text class="tn-text-xl-xxl">399￥</text>
-          <text class="tn-text-xl" style="">699￥</text>
+          <text class="tn-text-xl-xxl">699￥</text>
+          <text class="tn-text-xl" style="">1299￥</text>
          <!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
          <text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
          <text class="tn-text-xl-xxl"> / </text>
          <text class="tn-text-xxl tn-padding-left-sm">终身</text>
        </view>
-        <view class="tn-margin-bottom-xl">（大约等于1个前端页面价格💕）</view>
+        <view class="tn-margin-bottom-xl">（大约等于2个酷炫前端页面价格💕）</view>
      </view>
      
      <view class="plus-text">
@@ -0,0 +1,53 @@
+<template>
+  <view class="template-course">
+    <!-- 顶部自定义导航 -->
+    <!-- <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> -->
+    
+    <view class="bottom-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>    
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+    /* 背景图 start */
+    .bottom-backgroup {
+      height: 700rpx;
+      z-index: -1;
+    
+      .backgroud-image {
+        border-radius: 60rpx 60rpx 0 0;
+        width: 100%;
+        height: 4100rpx;
+        // z-index: -1;
+      }
+    }
+    /* 背景图 end */
+</style>
@@ -169,15 +169,15 @@
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$t.message.closeLoading()
+            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 获取验证码倒计时被修改
@@ -261,15 +261,15 @@
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$t.message.closeLoading()
+            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 获取验证码倒计时被修改
@@ -161,15 +161,15 @@
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$t.message.closeLoading()
+            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 获取验证码倒计时被修改
@@ -183,15 +183,15 @@
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
-          this.$t.messageUtils.loading('正在获取验证码')
+          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
-            this.$t.messageUtils.closeLoading()
-            this.$t.messageUtils.toast('验证码已经发送')
+            this.$t.message.closeLoading()
+            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
-          this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
+          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 获取验证码倒计时被修改
@@ -10,21 +10,39 @@
    </tn-nav-bar> -->
    

+    
+    
    <view class="top-backgroup">
      <image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
    </view>
    
+    <view class="tnwave waveAnimation">
+      <view class="waveWrapperInner bgTop">
+        <view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgMiddle">
+        <view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgBottom">
+        <view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
+      </view>
+    </view>
+    
    <view class="about__wrap">
      <!-- 头像用户信息 -->
      <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
        <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://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 170rpx;height: 170rpx;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>
      
+
+      
      <!-- 消息&数据 -->
-      <view class="tn-shadow-warp" style="margin-top: 100rpx;border-radius: 12rpx;background-color: rgba(255,255,255,1);">
+      <view class="tn-shadow-warp" style="margin-top: 100rpx;background-color: rgba(255,255,255,1);">
        <view class="tn-flex">
          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
@@ -64,7 +82,7 @@
      
      
      <!-- 更多信息-->
-      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <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" > 
@@ -95,7 +113,7 @@
      </view>
      
      <!-- 更多信息-->
-      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <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" > 
@@ -207,12 +225,81 @@
  
    .backgroud-image {
      width: 100%;
-      height: 667rpx;
+      height: 450rpx;
      // z-index: -1;
    }
  }
  /* 顶部背景图 end */
  
+  /* 波浪*/
+  @keyframes move_wave {
+      0% {
+          transform: translateX(0) translateZ(0) scaleY(1)
+      }
+      50% {
+          transform: translateX(-25%) translateZ(0) scaleY(1)
+      }
+      100% {
+          transform: translateX(-50%) translateZ(0) scaleY(1)
+      }
+  }
+  .tnwave {
+      overflow: hidden;
+      position: absolute;
+      z-index: 9999;
+      height: 200rpx;
+      left: 0;
+      right: 0;
+      top: 290rpx;
+      bottom: auto;
+  }
+  .waveWrapperInner {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+  }
+  .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-repeat: repeat no-repeat;
+      background-position: 0 bottom;
+      transform-origin: center bottom;
+  }
+  
+  .bgTop {
+      opacity: 0.4;
+  }
+  .waveTop {
+      background-size: 50% 45px;
+  }
+  .waveAnimation .waveTop {
+    animation: move_wave 4s linear infinite;
+  }
+  
+  .bgMiddle {
+      opacity: 0.6;
+  }
+  .waveMiddle {
+      background-size: 50% 40px;
+  }
+  .waveAnimation .waveMiddle {
+      animation: move_wave 3.5s linear infinite;
+  }
+  
+  .bgBottom {
+      opacity: 0.95;
+  }
+  .waveBottom {
+      background-size: 50% 35px;
+  }
+  .waveAnimation .waveBottom {
+      animation: move_wave 2s linear infinite;
+  }
+  /* 波浪*/
+  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
@@ -224,7 +311,7 @@
    &__wrap {
      position: relative;
      z-index: 1;
-      margin: 20rpx 30rpx;
+      // margin: 20rpx 30rpx;
      margin-top: -330rpx;
    }
  }
@@ -48,7 +48,9 @@
            <!-- 图标logo -->
            <view class="logo-pic tn-shadow" >
              <view class="logo-image">
-                <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
+                <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
+                </view>
+                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
              </view>
            </view>
            <view class="tn-padding-right tn-color-white">
@@ -239,7 +241,7 @@
  
    .backgroud-image {
      width: 100%;
-      height: 667rpx;
+      height: 450rpx;
      // z-index: -1;
    }
  }
@@ -11,7 +11,7 @@
    
    
    <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://tnuiimage.tnkjapp.com/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
    </view>
    
    
@@ -48,7 +48,9 @@
            <!-- 图标logo -->
            <view class="logo-pic tn-shadow" >
              <view class="logo-image">
-                <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
+                <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
+                </view>
+                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
              </view>
            </view>
            <view class="tn-padding-right tn-color-white">
@@ -343,7 +345,7 @@
  
    .backgroud-image {
      width: 100%;
-      height: 667rpx;
+      height: 450rpx;
      // z-index: -1;
    }
  }
@@ -239,7 +239,7 @@
          } else {
            // 超出最大可选项，弹出提示
            if (this.parentData.value.length >= this.parentData.max) {
-              return this.$t.messageUtils.toast(`最多可选${this.parent.max}项`)
+              return this.$t.message.toast(`最多可选${this.parent.max}项`)
            }
            // 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
            this.emitEvent();
@@ -122,7 +122,7 @@
                if (this.errorType.indexOf('none') === -1 && 
                    this.errorType.indexOf('toast') >= 0 &&
                    errors.length > 0) {
-                  this.$t.messageUtils.toast(errors[0])
+                  this.$t.message.toast(errors[0])
                }
                // 调用回调方法
                if (typeof callback == 'function') callback(valid)
@@ -5,7 +5,8 @@
      backgroundColorClass,
      {
        'tn-goods-nav--fixed': fixed,
-        'tn-safe-area-inset-bottom': safeAreaInsetBottom
+        'tn-safe-area-inset-bottom': safeAreaInsetBottom,
+        'tn-goods-nav--shadow': shadow
      }
    ]"
    :style="[backgroundColorStyle, navStyle]"
@@ -114,6 +115,11 @@
        type: Number,
        default: 0
      },
+      // 显示阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
      // 导航的层级
      zIndex: {
        type: Number,
@@ -138,10 +144,10 @@
    },
    computed: {
      backgroundColorStyle() {
-        return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
      },
      backgroundColorClass() {
-        return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
      },
      navStyle() {
        let style = {}
@@ -254,12 +260,12 @@
        this.buttonGroupsData = this.buttonGroups.map((item) => {
          let button = {...item}
          if (item.hasOwnProperty('backgroundColor')) {
-            button.backgroundColorClass = this.$t.colorUtils.getBackgroundColorInternalClass(item.backgroundColor)
-            button.backgroundColorStyle = this.$t.colorUtils.getBackgroundColorStyle(item.backgroundColor)
+            button.backgroundColorClass = this.$t.color.getBackgroundColorInternalClass(item.backgroundColor)
+            button.backgroundColorStyle = this.$t.color.getBackgroundColorStyle(item.backgroundColor)
          }
          if (item.hasOwnProperty('color')) {
-            button.colorClass = this.$t.colorUtils.getBackgroundColorInternalClass(item.color)
-            button.colorStyle = this.$t.colorUtils.getBackgroundColorStyle(item.color)
+            button.colorClass = this.$t.color.getBackgroundColorInternalClass(item.color)
+            button.colorStyle = this.$t.color.getBackgroundColorStyle(item.color)
          }
          return button
        })
@@ -278,6 +284,23 @@
    width: 100%;
    box-sizing: content-box;
    
+    &--shadow {
+      box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+      
+      &::before {
+        content: " ";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background-color: transparent;
+        z-index: -1;
+      }
+    }
+    
    &--fixed {
      position: fixed;
      bottom: 0;
@@ -342,7 +342,7 @@
      // 提示用户信息
      showToast(message, force = false) {
        if (this.showTips || force) {
-          this.$t.messageUtils.toast(message)
+          this.$t.message.toast(message)
        }
      },
      // 手动上传，通过ref进行调用
@@ -354,7 +354,7 @@
        this.lists[index].progress = 0
        this.lists[index].error = false
        this.lists[index].response = null
-        this.$t.messageUtils.loading('重新上传')
+        this.$t.message.loading('重新上传')
        this.uploadFile(index)
      },
      // 上传文件
@@ -424,7 +424,7 @@
            this.uploadError(index, err)
          },
          complete: res => {
-            this.$t.messageUtils.closeLoading()
+            this.$t.message.closeLoading()
            this.uploading = false
            this.uploadFile(index + 1)
            this.$emit('on-change', res, index, this.lists, this.index)
@@ -449,7 +449,7 @@
      // 删除一个图片
      deleteItem(index) {
        if (!this.deleteable) return
-        this.$t.messageUtils.modal(
+        this.$t.message.modal(
          '提示',
          '您确定要删除吗？',
          async () => {
@@ -67,10 +67,10 @@
        <view class="icon tn-icon-close"></view>
      </view>
      <view
-        v-else-if="type === 'text' && !focused && showLeftIcon && leftIcon !== ''"
+        v-else-if="type === 'text' && !focused && showRightIcon && rightIcon !== ''"
        class="tn-input__right-icon__item tn-input__right-icon__clear"
      >
-        <view class="icon" :class="[`tn-icon-${leftIcon}`]"></view>
+        <view class="icon" :class="[`tn-icon-${rightIcon}`]"></view>
      </view>
      <!-- 显示密码按钮 -->
      <view
@@ -219,12 +219,12 @@
        default: true
      },
      // 是否在输入框内最右边显示图标
-      showLeftIcon: {
+      showRightIcon: {
        type: Boolean,
        default: false
      },
      // 最右边图标的名称
-      leftIcon: {
+      rightIcon: {
        type: String,
        default: ''
      }
@@ -6,7 +6,7 @@
    <view
      class="tn-line-progress--active"
      :class="[
-        $t.colorUtils.getBackgroundColorInternalClass(activeColor),
+        $t.color.getBackgroundColorInternalClass(activeColor),
        striped ? stripedAnimation ? 'tn-line-progress__striped tn-line-progress__striped--active' : 'tn-line-progress__striped' : '',
      ]"
      :style="[progressActiveStyle]"
@@ -80,8 +80,8 @@
      progressActiveStyle() {
        let style = {}
        style.width = this.percent + '%'
-        if (this.$t.colorUtils.getBackgroundColorStyle(this.activeColor)) {
-          style.backgroundColor = this.$t.colorUtils.getBackgroundColorStyle(this.activeColor)
+        if (this.$t.color.getBackgroundColorStyle(this.activeColor)) {
+          style.backgroundColor = this.$t.color.getBackgroundColorStyle(this.activeColor)
        }
        return style
      }
@@ -2,7 +2,10 @@
  <view
    v-if="show"
    class="tn-loading-class tn-loading"
-    :class="mode === 'circle' ? 'tn-loading-circle' : 'tn-loading-flower'"
+    :class="[
+      `tn-loading-${mode}`,
+      animation ? `tn-loading-${mode}--animation` : ''
+    ]"
    :style="[loadStyle]"
  ></view>
 </template>
@@ -17,11 +20,16 @@
        type: String,
        default: 'circle'
      },
-      // 是否显示动画
+      // 是否显示
      show: {
        type: Boolean,
        default: true
      },
+      // 是否显示加载动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
      // 圆圈颜色
      color: {
        type: String,
@@ -59,9 +67,12 @@
    border-radius: 50%;
    border: 2px solid;
    border-color: #E6E6E6 #E6E6E6 #E6E6E6 #AAAAAA;
+    
+    &--animation {
      animation: tn-circle 1s linear infinite;
      -webkit-animation: tn-circle 1s linear infinite;
    }
+  }
  
  .tn-loading-flower {
    display: inline-block;
@@ -70,9 +81,12 @@
    height: 28rpx;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;;
    background-size: 100%;
+    
+    &--animation {
      animation: tn-flower 1s steps(12) infinite;
      -webkit-animation: tn-flower 1s steps(12) infinite;
    }
+  }
  
  @keyframes tn-flower {
  	0% {
@@ -22,7 +22,7 @@
        :style="[boxStyle]"
      >
        <!-- 不是自定义弹框内容 -->
-        <!-- <view v-if="!custom">
+        <view v-if="!custom">
          <view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
          <view
            class="tn-modal__box__content"
@@ -57,43 +57,8 @@
        </view>
        <view v-else>
          <slot></slot>
-        </view> -->
-        <slot>
-          <view v-if="!custom">
-            <view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
-            <view
-              class="tn-modal__box__content"
-              :class="[
-                fontColorClass,
-                contentClass
-              ]"
-              :style="contentStyle"
-            >{{ content }}</view>
-            <view v-if="button && button.length" class="tn-modal__box__btn-box" :class="[button.length != 2 ? 'tn-flex-direction-column' : '']">
-              <block v-for="(item, index) in button" :key="index">
-                <tn-button
-                  width="100%"
-                  height="68rpx"
-                  :fontSize="26"
-                  :backgroundColor="item.backgroundColor || ''"
-                  :fontColor="item.fontColor || ''"
-                  :plain="item.plain || false"
-                  :shape="item.shape || 'round'"
-                  :class="[
-                    button.length > 2 ? 'tn-margin-bottom' : ''
-                  ]"
-                  @click="handleClick(index)"
-                  :style="{
-                    width: button.length != 2 ? '80%' : '46%'
-                  }"
-                >
-                  {{ item.text }}
-                </tn-button>
-              </block>
        </view>
      </view>
-        </slot>
-      </view>
    </tn-popup>
  </view>
 </template>
@@ -290,14 +290,14 @@
              this.getRotateImage(res.tempFilePath).then((res) => {
                this.$emit('save', res)
              }).catch(err => {
-                this.$t.messageUtils.toast('旋转图片失败')
+                this.$t.message.toast('旋转图片失败')
              })
            } else {
              this.$emit('save', res.tempFilePath)
            }
          },
          fail: () => {
-            this.$t.messageUtils.toast('保存失败')
+            this.$t.message.toast('保存失败')
          }
        }, this)
      },
@@ -315,7 +315,7 @@
                  urls: [res]
                })
              }).catch(err => {
-                this.$t.messageUtils.toast('旋转图片失败')
+                this.$t.message.toast('旋转图片失败')
              })
            } else {
              uni.previewImage({
@@ -324,13 +324,13 @@
            }
          },
          fail: (e) => {
-            this.$t.messageUtils.toast('预览失败')
+            this.$t.message.toast('预览失败')
          }
        }, this)
      },
      // 关闭签名板
      closeBoard() {
-        this.$t.messageUtils.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
+        this.$t.message.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
          this.$emit('closed')
        }, true)
      },
@@ -75,10 +75,10 @@
    },
    computed: {
      elBackgroundColorStyle() {
-        return this.$t.colorUtils.getBackgroundColorStyle(this.elBackgroundColor)
+        return this.$t.color.getBackgroundColorStyle(this.elBackgroundColor)
      },
      elBackgroundColorClass() {
-        return this.$t.colorUtils.getBackgroundColorInternalClass(this.elBackgroundColor)
+        return this.$t.color.getBackgroundColorInternalClass(this.elBackgroundColor)
      },
      // 骨架屏样式
      skeletonStyle() {
@@ -215,6 +215,7 @@

 <style lang="scss" scoped>
  .tn-slider {
+    width: 100%;
    position: relative;
    border-radius: 1000rpx;
    // 增加点击的范围
@@ -67,10 +67,10 @@
        return this.zIndex ? this.zIndex : this.$t.zIndex.sticky
      },
      backgroundColorStyle() {
-        return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
      },
      backgroundColorClass() {
-        return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
      },
      stickyClass() {
        let clazz = ''
@@ -21,7 +21,11 @@
      </view>
    </block>
    <!-- 背景 -->
-    <view class="tn-subsection__bg" :style="[itemBarStyle]"></view>
+    <view
+      class="tn-subsection__bg"
+      :class="[itemBarClass]"
+      :style="[itemBarStyle]"
+    ></view>
  </view>
 </template>

@@ -35,7 +39,7 @@
      // button 按钮模式 subsection 分段模式
      mode: {
        type: String,
-        default: 'button'
+        default: 'subsection'
      },
      // 组件高度
      height: {
@@ -78,11 +82,22 @@
        type: String,
        default: '#01BEFF'
      },
+      // 当mode为button时生效，圆角的值，单位rpx
+      borderRadius: {
+        type: Number,
+        default: 10
+      },
      // 是否开启动画
      animation: {
        type: Boolean,
        default: true
      },
+      // 动画类型
+      // cubic-bezier -> 贝塞尔曲线
+      animationType: {
+        type: String,
+        default: ''
+      },
      // 滑动滑块的是否，是否触发震动
      vibrateShort: {
        type: Boolean,
@@ -98,13 +113,11 @@
          width: 0,
          left: 0,
          backgroundColor: '#ffffff',
-          height: '100%',
-          transition: ''
+          height: '100%'
        },
        // 当前选中的滑块
        currentIndex: this.current,
        buttonPadding: 3,
-        borderRadius: 5,
        // 组件初始化的是否current变换不应该震动
        firstVibrateShort: true
      }
@@ -153,19 +166,11 @@
        return index => {
          let style = {}
          // 设置字体颜色
-          if (this.mode === 'subsection') {
-            if (index === this.currentIndex) {
-              style.color = '#FFFFFF'
-            } else {
-              style.color = this.inactiveColor
-            }
-          } else {
          if (index === this.currentIndex) {
            style.color = this.activeColor
          } else {
            style.color = this.inactiveColor
          }
-          }
          // 字体加粗
          if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
          // 文字大小
@@ -177,9 +182,12 @@
      itemStyle() {
        return index => {
          let style = {}
+          if (this.fontSizeStyle) {
+            style.fontSize = this.fontSizeStyle
+          }
          if (this.mode === 'subsection') {
            // 设置border的样式
-            style.borderColor = this.inactiveColor
+            style.borderColor = this.buttonColor
            style.borderWidth = '1rpx'
            style.borderStyle = 'solid'
          }
@@ -193,7 +201,7 @@
        if (this.mode === 'button') {
          style.backgroundColor = this.backgroundColorStyle
          style.padding = `${this.buttonPadding}px`
-          style.borderRadius = `${this.borderRadius}px`
+          style.borderRadius = `${this.borderRadius}rpx`
        }
        return style
      },
@@ -205,14 +213,30 @@
        }
        return clazz
      },
+      itemBarClass() {
+        let clazz = ''
+        const buttonBgClass = this.$t.color.getBackgroundColorInternalClass(this.buttonColor)
+        if (this.animation) {
+          clazz += ' tn-subsection__bg__animation'
+          if (this.animationType) {
+            clazz += ` tn-subsection__bg__animation--${this.animationType}`
+          }
+        }
+        if (buttonBgClass) {
+          clazz += ` ${buttonBgClass}`
+        }
+        return clazz
+      },
      // 滑块样式
      itemBarStyle() {
        let style = {}
+        const buttonBgStyle = this.$t.color.getBackgroundColorStyle(this.buttonColor)
+        if (buttonBgStyle) {
          style.backgroundColor = this.buttonColor
+        }
        style.zIndex = 1
        if (this.mode === 'button') {
-          style.backgroundColor = this.buttonColor
-          style.borderRadius = `${this.borderRadius}px`
+          style.borderRadius = `${this.borderRadius}rpx`
          style.bottom = `${this.buttonPadding}px`
          style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
          style.zIndex = 0
@@ -284,13 +308,6 @@
      },
      // 设置滑块的位置
      itemBgLeft() {
-        // 是否开启动画
-        if(this.animation) {
-          this.itemBgStyle.transition = 'all 0.3s'
-        } else {
-          this.itemBgStyle.transition = 'all 0s'
-        }
-        
        let left = 0
        // 计算当前活跃item到组件左边的距离
        this.listInfo.map((item, index) => {
@@ -344,8 +361,9 @@
      color: #FFFFFF;
      padding: 0 6rpx;
      
+      
      &--text {
-        transform: all 0.3s;
+        transition: all 0.3s;
        color: #FFFFFF;
        /* #ifndef APP-PLUS */
        display: flex;
@@ -375,6 +393,17 @@
      background-color: $tn-main-color;
      position: absolute;
      z-index: -1;
+      transition-property: all;
+      transition-duration: 0s;
+      transition-timing-function: linear;
+      
+      &__animation {
+        transition-duration: 0.25s !important;
+        
+        &--cubic-bezier {
+          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+        }
+      }
    }
  }
  
@@ -18,6 +18,8 @@ function touchStart(event, ownerInstance) {
  // 记录触摸开始点的坐标点
  state.startX = touches[0].pageX
  state.startY = touches[0].pageY
+  // 记录开始触摸的时间
+  state.touchStartTime = getDate().getTime()
  
  ownerInstance.callMethod('closeOther')
 }
@@ -38,8 +40,8 @@ function touchMove(event, ownerInstance) {
  
  // 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
  if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
-    event.preventDefault && event.preventDefault()
-    event.stopPropagation && event.stopPropagation()
+    // event.preventDefault && event.preventDefault()
+    // event.stopPropagation && event.stopPropagation()
  }
  // 移动的Y轴距离大于X轴距离，也即终点与起点位置连线，与Y轴夹角小于45度时，认为页面时上下滑动而不是左右滑动单元格
  if (Math.abs(moveX) < Math.abs(moveY)) return
@@ -91,6 +93,14 @@ function touchEnd(event, ownerInstance) {
      closeSwipeAction(instance, ownerInstance)
    }
  } else {
+    
+    // 获取手指离开的时间
+    var touchEndTime = getDate().getTime()
+    // 判断是否点击了
+    if (Math.abs(pageX - state.startX) < 5 && Math.abs(pageY - state.startY) < 5 && touchEndTime - state.touchStartTime < 100) {
+      ownerInstance.callMethod('handlerItemClick')
+    }
+    
    // 在关闭状态下，忽略右滑动
    if (moveX > 0) return
    if (Math.abs(moveX) < state.threshold) {
@@ -159,8 +159,15 @@
      // 按钮点击
      buttonClickHandler(item, index) {
        this.$emit('click', {
-          index,
-          name: item.name
+          type: 'button',
+          index
+        })
+      },
+      // item点击
+      handlerItemClick() {
+        this.$emit('click', {
+          type: 'item',
+          name: this.name
        })
      },
      // 关闭时执行
@@ -184,7 +191,7 @@
  .tn-swipe-action-item {
    position: relative;
    overflow: hidden;
-    touch-action: none;
+    // touch-action: none;
    
    &__right {
      display: flex;
@@ -27,6 +27,7 @@
            transform: effect3d && swiperIndex !== index ? 'scaleY(0.9)' : 'scaleY(1)',
            margin: effect3d && swiperIndex !== index ? '0 20rpx' : 0
          }"
+          @click="click(index)"
        >
          <image class="tn-swiper__item__image" :src="item[name] || item" :mode="imageMode"></image>
          <view
@@ -176,10 +177,10 @@
    },
    computed: {
      backgroundColorStyle() {
-        return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
      },
      backgroundColorClass() {
-        return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
      },
      swiperStyle() {
        let style = {}
@@ -220,13 +220,13 @@
          }
          // 判断是否获取内部样式
          if (style) {
-            if (this.$t.colorUtils.getFontColorStyle(color) !== '') {
+            if (this.$t.color.getFontColorStyle(color) !== '') {
              return color
            } else {
              return ''
            }
          } else {
-            if (this.$t.colorUtils.getFontColorStyle(color) === '') {
+            if (this.$t.color.getFontColorStyle(color) === '') {
              return color
            } else {
              return ''
@@ -246,13 +246,13 @@
          }
          // 判断是否获取内部样式
          if (style) {
-            if (this.$t.colorUtils.getFontColorStyle(color) !== '') {
+            if (this.$t.color.getFontColorStyle(color) !== '') {
              return color
            } else {
              return ''
            }
          } else {
-            if (this.$t.colorUtils.getFontColorStyle(color) === '') {
+            if (this.$t.color.getFontColorStyle(color) === '') {
              return color + ' tn-tabbar__content__item__icon--clip'
            } else {
              return ''
@@ -277,7 +277,7 @@
          let clazz = ''
          if (this.list[index]['out']) {
            clazz += 'tn-tabbar__content__item__button--out'
-            if (this.$t.colorUtils.getFontColorStyle(this.activeIconColor) === '') {
+            if (this.$t.color.getFontColorStyle(this.activeIconColor) === '') {
              clazz += ` ${this.activeIconColor}`
            }
            if (this.value === index) {
@@ -297,7 +297,7 @@
        return (index) => {
          let style = {}
          if (this.list[index]['out']) {
-            if (this.$t.colorUtils.getFontColorStyle(this.activeIconColor) !== '') {
+            if (this.$t.color.getFontColorStyle(this.activeIconColor) !== '') {
              style.backgroundColor = this.activeIconColor
            }
            style.width = `${this.outHeight - 35}rpx`
@@ -245,7 +245,7 @@
          this.setScrollViewToCenter()
        })
        // 获取渐变颜色数组
-        this.colorGradientArr = this.$t.colorUtils.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)
+        this.colorGradientArr = this.$t.color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)
      },
      // 发送事件
      emit(index) {
@@ -17,6 +17,10 @@
  import componentsColorMixin from '../../libs/mixin/components_color.js'
  export default {
    mixins: [ componentsColorMixin ],
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
    name: 'tn-tag',
    props: {
      // 序号，用于区分多个标签
@@ -72,16 +72,16 @@
        return style
      },
      backgroundColorStyle() {
-        return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
      },
      backgroundColorClass() {
-        return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
      },
      fontColorStyle() {
-        return this.$t.colorUtils.getFontColorStyle(this.fontColor)
+        return this.$t.color.getFontColorStyle(this.fontColor)
      },
      fontColorClass() {
-        return this.$t.colorUtils.getFontColorInternalClass(this.fontColor)
+        return this.$t.color.getFontColorInternalClass(this.fontColor)
      },
    },
    data() {
@@ -16,9 +16,9 @@ function wranning(str) {
 // 更新自定义状态栏的信息
 import updateCustomBarInfo from './libs/function/updateCustomBarInfo.js'
 // 获取颜色工具
-import colorUtils from './libs/function/colorUtils.js'
+import color from './libs/function/color.js'
 // 消息工具
-import messageUtils from './libs/function/messageUtils.js'
+import message from './libs/function/message.js'
 // 获取唯一id
 import uuid from './libs/function/uuid.js'
 // 数组工具
@@ -38,13 +38,13 @@ import deepClone from './libs/function/deepClone.js'
 // z-index配置信息
 import zIndex from './libs/config/zIndex.js'
 // 主题颜色信息
-import color from './libs/config/color.js'
+import colorInfo from './libs/config/color.js'

 const $t = {
  http: new Request(),
  updateCustomBar: updateCustomBarInfo,
-  colorUtils,
-  messageUtils,
+  color,
+  message,
  uuid,
  array,
  test,
@@ -53,7 +53,7 @@ const $t = {
  number,
  deepClone,
  zIndex,
-  color,
+  colorInfo,
 }

 // 挂载到uni对象上
@@ -12,4 +12,6 @@ export default {
  indexListSticky: 19070,
  fab: 19060,
  mask: 9999,
+  tableTr: 1001,
+  tableTd: 1000
 }
@@ -42,6 +42,10 @@
 }
 /* 双标签 end*/

+page {
+  // overflow-y: auto;
+}
+
 /* #endif */
 /* 微信小程序编译后页面有组件名的元素，特别处理 end */

@@ -0,0 +1,270 @@
+let color = [
+  'red',
+  'purplered',
+  'purple',
+  'bluepurple',
+  'aquablue',
+  'blue',
+  'indigo',
+  'cyan',
+  'teal',
+  'green',
+  'yellowgreen',
+  'lime',
+  'yellow',
+  'orangeyellow',
+  'orange',
+  'orangered',
+  'brown',
+  'grey',
+  'gray'
+]
+
+// 酷炫颜色的数量
+const COOL_BG_COLOR_COUNT = 16
+
+/**
+ * 获取图鸟配色颜色列表
+ */
+function getTuniaoColorList() {
+  return color
+}
+
+/**
+ * 获取指定类型的随机颜色对应的类
+ * @param {String} type 颜色类型
+ */
+function getRandomColorClass(type = 'bg') {
+  const index = Math.floor(Math.random() * color.length)
+  const colorValue = color[index]
+
+  return 'tn-' + type + '-' + colorValue
+}
+
+/**
+ * 随机获取酷炫背景对应的类
+ */
+function getRandomCoolBgClass() {
+  const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
+  return 'tn-cool-bg-color-' + Math.floor(index)
+}
+
+/**
+ * 根据传入的值获取内部背景颜色类
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorInternalClass(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取背景颜色样式
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorStyle(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (!backgroundColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取内部字体颜色类
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorInternalClass(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (['tn-color'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取字体颜色样式
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorStyle(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (!fontColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 求两个颜色之间的渐变值
+ * 
+ * @param {String} startColor 开始颜色
+ * @param {String} endColor 结束颜色
+ * @param {Number} step 颜色等分的份额 
+ */
+function colorGradient(startColor = 'rgb(0, 0, 0)', endColor='rgb(255, 255, 255)', step = 10) {
+  let startRGB = hexToRGB(startColor, false)
+  let startR = startRGB[0]
+  let startG = startRGB[1]
+  let startB = startRGB[2]
+  
+  let endRGB = hexToRGB(endColor, false)
+  let endR = endRGB[0]
+  let endG = endRGB[1]
+  let endB = endRGB[2]
+  
+  // 求差值
+  let R = (endR - startR) / step
+  let G = (endG - startG) / step
+  let B = (endB - startB) / step
+  
+  let colorArr = []
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    let hex = rgbToHex(`rgb(${Math.round(R * i + startR)}, ${Math.round(G * i + startG)}, ${Math.round(B * i + startB)})`)
+    colorArr.push(hex)
+  }
+  return colorArr
+}
+
+/**
+ * 将hex的颜色表示方式转换为rgb表示方式
+ * 
+ * @param {String} color 颜色
+ * @param {Boolean} str 是否返回字符串
+ * @return {Array|String} rgb的值
+ */
+function hexToRGB(color, str = true) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    if (!str) {
+      return colorChange
+    } else {
+      return `rgb(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]})`
+    }
+  } else if (/^(rgb|RGB)/.test(color)) {
+    let arr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(',')
+    return arr.map(item => Number(item))
+  } else {
+    return color
+  }
+}
+
+/**
+ * 将rgb的颜色表示方式转换成hex表示方式
+ * 
+ * @param {Object} rgb rgb颜色值
+ */
+function rgbToHex(rgb) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  if (/^(rgb|RGB)/.test(rgb)) {
+    let color = rgb.replace(/(?:\(|\)|rgb|GRB)*/g, "").split(',')
+    let strHex = '#'
+    for (let i = 0; i < color.length; i++) {
+      let hex = Number(color[i]).toString(16)
+      // 保证每个值否是两位数
+      hex = String(hex).length === 1 ? 0 + '' + hex: hex
+      if (hex === '0') {
+        hex += hex
+      }
+      strHex += hex
+    }
+    if (strHex.length !== 7) {
+      strHex = rgb
+    }
+    return strHex
+  } else if (reg.test(rgb)) {
+    let num = rgb.replace(/#/, '').split('')
+    if (num.length === 6) {
+      return rgb
+    } else if (num.length === 3) {
+      let numHex = '#'
+      for (let i = 0; i < num.length; i++) {
+        numHex += (num[i] + num[i])
+      }
+      return numHex
+    }
+  } else {
+    return rgb
+  }
+}
+
+/**
+ * 将传入的颜色值转换为rgba字符串
+ * 
+ * @param {String} color 颜色
+ * @param {Number} alpha 透明度
+ */
+function colorToRGBA(color, alpha = 0.3) {
+  color = rgbToHex(color)
+  // 十六进制颜色值的正则表达式
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    return `rgba(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]}, ${alpha})`
+  } else {
+    return color
+  }
+}
+
+export default {
+  COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
+  getTuniaoColorList,
+  getRandomColorClass,
+  getRandomCoolBgClass,
+  getBackgroundColorInternalClass,
+  getBackgroundColorStyle,
+  getFontColorInternalClass,
+  getFontColorStyle,
+  colorGradient,
+  hexToRGB,
+  rgbToHex,
+  colorToRGBA
+}
@@ -0,0 +1,74 @@
+/**
+ * 弹出系统内置的toast
+ */
+function toast(title, mask = false, cb = null, icon = 'none', duration = 1500) {
+  uni.showToast({
+    title: title,
+    icon: icon,
+    mask: mask,
+    duration: duration,
+    success: () => {
+      setTimeout(() => {
+        cb && cb()
+      }, duration)
+    }
+  })
+}
+
+/**
+ * 弹出内置的加载框
+ */
+function loading(title) {
+  uni.showLoading({
+    title: title,
+    mask: true
+  })
+}
+
+/**
+ * 弹出系统内置的modal
+ */
+function modal(title,
+  content,
+  confirmCb,
+  showCancel = false,
+  cancelCb = null,
+  confirmText = "确定",
+  cancelText = "取消") {
+  uni.showModal({
+    title: title,
+    content: content,
+    showCancel: showCancel,
+    cancelText: cancelText,
+    confirmText: confirmText,
+    success: (res) => {
+      if (res.cancel) {
+        cancelCb && cancelCb()
+      } else if (res.confirm) {
+        confirmCb && confirmCb()
+      }
+    }
+  })
+}
+
+/**
+ * 关闭系统内置toast
+ */
+function closeToast() {
+  uni.hideToast()
+}
+
+/**
+ * 关闭系统内置的加载框
+ */
+function closeLoading() {
+  uni.hideLoading()
+}
+
+export default {
+  toast,
+  loading,
+  modal,
+  closeToast,
+  closeLoading
+}
@@ -50,7 +50,7 @@ function formatNumberAddZero(value) {
 * @param {Object} value 待格式化的数值
 * @param {Object} digits 保留位数
 */
-function formatNumberAddUnit(value, digits = 2) {
+function formatNumberAddPriceUnit(value, digits = 2) {
  // 数值分割点
  const unitSplit = [
    { value: 1, symbol: ''},
@@ -90,12 +90,27 @@ function getDigit(number) {
 }

 /**
- * 获取指定范围的随机数
+ * 获取指定范围的随机数(返回整数)
 
 * @param {Object} min 最小值
 * @param {Object} max 最大值
 */
 function random(min, max) {
+  if (min >= 0 && max > 0 && max >= min) {
+    let gab = max - min
+    return Math.random() * gab + min
+  } else {
+    return 0
+  }
+}
+
+/**
+ * 获取指定范围的随机数(返回整数)
+ 
+ * @param {Object} min 最小值
+ * @param {Object} max 最大值
+ */
+function randomInt(min, max) {
  if (min >= 0 && max > 0 && max >= min) {
    let gab = max - min + 1
    return Math.floor(Math.random() * gab + min)
@@ -107,6 +122,7 @@ function random(min, max) {
 export default {
  formatNumberString,
  formatNumberAddZero,
-  formatNumberAddUnit,
-  random
+  formatNumberAddPriceUnit,
+  random,
+  randomInt
 }
@@ -45,11 +45,17 @@ function humpConvertChar(string, replace = '_') {
  return string.replace(/([A-Z])/g, `${replace}$1`).toLowerCase()
 }

+/**
+ * 将用指定连接符来进行连接的字符串转为驼峰命名的字符串
+ * 
+ * @param {Object} string 待转换的字符串
+ * @param {Object} replace 进行连接的字符
+ */
 function charConvertHump(string, replace = '_') {
  if (!string || !replace) {
    return ''
  }
-  let reg = RegExp("//" + replace + "(/w)/", "g")
+  let reg = RegExp(replace + "(\\w)", "g")
  return string.replace(reg, function(all, letter) {
    return letter.toUpperCase()
  })
@@ -26,16 +26,16 @@ module.exports = {
  },
  computed: {
    backgroundColorStyle() {
-      return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
+      return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
    },
    backgroundColorClass() {
-      return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
+      return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
    },
    fontColorStyle() {
-      return this.$t.colorUtils.getFontColorStyle(this.fontColor)
+      return this.$t.color.getFontColorStyle(this.fontColor)
    },
    fontColorClass() {
-      return this.$t.colorUtils.getFontColorInternalClass(this.fontColor)
+      return this.$t.color.getFontColorInternalClass(this.fontColor)
    },
    fontSizeStyle() {
      return this.$t.string.getLengthUnitValue(this.fontSize, this.fontUnit)
@@ -0,0 +1,13 @@
+// 引入配置
+import config from '@/common/config'
+// 初始化请求配置
+uni.$t.http.setConfig((defaultConfig) => {
+  // defaultConfig 为默认全局配置
+  defaultConfig.baseURL = config.baseUrl // 根域名
+  return defaultConfig
+})
+
+module.exports = (vm) => {
+  require('./requestInterceptors')(vm)
+  require('./responseInterceptors')(vm)
+}
@@ -0,0 +1,15 @@
+/**
+ * 请求拦截
+ * @param {Object} http 
+ */
+module.exports = (vm) => {
+  uni.$t.http.interceptors.request.use((config) => { // 可以使用async await 做异步操作
+    // 初始化请求拦截器时，会执行此方法，此时data为undefined，默认赋予{}
+    config.data = config.data || {}
+    // 可以在此通过vm引用vuex中的变量，具体值在vm.vuex_[name]中
+    // console.log(vm.vuex_user);
+    return config
+  }, (config) => { // 可以使用async await 做异步操作
+    Promise.reject(config)
+  })
+}
@@ -0,0 +1,28 @@
+/**
+ * 相应拦截
+ * @param {Object} http 
+ */
+module.exports = (vm) => {
+  uni.$t.http.interceptors.response.use((response) => { // 可以使用async await 做异步操作
+    const data = response.data
+    // 自定义参数
+    const custom = response.config?.custom
+    // 服务端返回的状态码不等于200，则reject()
+    if (data.code !== 200) {
+      // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
+      if (custom.toast !== false) {
+        uni.$t.message.toast(data.message)
+      }
+      // 如果需要catch返回，则进行reject
+      if (custom?.catch) {
+        return Promise.reject(data)
+      } else {
+        // 返回pending中的promise
+        return new Promise(() => {})
+      }
+    }
+    return data.data || {}
+  }, (response) => { // 对响应错误做点什么 （statusCode !== 200）
+    return Promise.reject(response)
+  })
+}