update READ.md

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

.gitignore

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

README.md

@@ -1,4 +1,4 @@
-[![图鸟UI](https://tnuiimage.tnkjapp.com/uniapp_market/8.jpg "图鸟UI")](https://tnuiimage.tnkjapp.com/uniapp_market/8.jpg "图鸟UI")
+# <font align="center">Tuniao UI V2开源仓库</font>
 
 <p align="center">
     <a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank">
@@ -13,25 +13,31 @@
 
 ## **说明**
 
-**`图鸟UI`**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
+**`图鸟UI vue2`**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
 
 开源版本中所使用到的图片均做了`防盗链`，只能在调试中使用，不保证在生产环境中可以使用。
 图片资源已上传到 [图鸟社区](https://www.yuque.com/tuniao/)。
 
-## 特点
+## 图鸟UI特点
 
 -   包含基础常用的布局元素，flex、grid、浮动
 -   完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
--   700+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
+-   800+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
 -   酷炫常用的页面模板，更有让你眼前一亮的界面效果
 -   图片素材语雀便捷下载，图鸟生态共同成长
 -   使用文档详尽说明，让你一文读懂图鸟UI
 
-## 链接
+## 预览
 
-[图鸟UI](https://ext.dcloud.net.cn/publisher?id=356088)
+![](./images/mb1-3.gif)
+![](./images/mb1-5.gif)
+![](./images/mbui-3.gif)
 
-[使用文档](https://vue2.tuniaokj.com/)
+## 官方链接
+
+[图鸟UI 开源项目](https://ext.dcloud.net.cn/publisher?id=356088)
+
+[使用文档 vue2](https://vue2.tuniaokj.com/)
 
 ## 快速上手
 
@@ -138,17 +144,48 @@ Vue.mixin(vuexStore)
 
 
 
-## 开源项目
+##  开源模板
+
+[插件市场，可以直接下载使用](https://ext.dcloud.net.cn/publisher?id=356088)
+
+图鸟UI开源项目（图鸟UI、图鸟vue3、图鸟模板1 2 3 4 5 、图鸟图表 已上传；图鸟模板6 7 8 9 10 11 12 13 14 15 16 17 18 19 20暂未上传）
+
+<!-- [![开源项目](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all3.jpg "开源项目")](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all3.jpg "开源项目") -->
+
+
+
+## 图鸟UI-vue3开源项目
+
+- [建议Github下载](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)，
+
+- [Dcloud插件市场下载](https://ext.dcloud.net.cn/plugin?id=13530)
+
+<!-- [![开源项目](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")
+
+[![图鸟vue3](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg) -->
+
+#### **(2023年7月1日上线，图鸟UI vue3正式版，下载链接请看下方)**
+
+- [图鸟UI vue3 Dcloud下载地址-uni_modules](https://ext.dcloud.net.cn/plugin?id=13530)
+
+- [图鸟UI vue3 Github下载地址](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)
+
+- [图鸟UI vue3 Github演示代码](https://github.com/tuniaoTech/tuniaoui-uniapp-v3-demo)
+
+- [图鸟vue3使用文档](https://vue3.tuniaokj.com/)
+
+
 
-[![开源项目](https://tnuiimage.tnkjapp.com/uniapp_market/qr-code-new2.jpg "开源项目")](https://tnuiimage.tnkjapp.com/uniapp_market/qr-code-new2.jpg "开源项目")
 
 ## 联系作者
 
 微信 tnkewo
 
-群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
+微信群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
+
+![](./images/5-image.jpg)
+
 
-[![作者微信 tnkewo](https://tnuiimage.tnkjapp.com/uniapp_market/tn_author_qrcode.jpg)](https://tnuiimage.tnkjapp.com/uniapp_market/tn_author_qrcode.jpg)
 
 ## 版权信息
 

basicPage/avatar/avatar.vue

@@ -120,14 +120,14 @@
     components: {demoTitle},
     data() {
       return {
-        src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
+        src: 'https://resource.tuniaokj.com/images/avatar/xiaomai4.jpg',
         groupList: [
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
           {text: 'TN'},
           {icon: 'logo-tuniao'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
         ]
       }
     },

basicPage/button/button.vue

@@ -14,7 +14,7 @@
       
       <demo-title title="大小">
         <view>
-          <tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button size="sm" margin="10rpx 10rpx" >按钮</tn-button>
           <tn-button margin="10rpx 10rpx">按钮</tn-button>
           <tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
           <tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
@@ -78,6 +78,11 @@
         <tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
       </demo-title>
 	  
+	  <demo-title title="防抖节流(默认间隔200ms,这里用1s)">
+	    <tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了防抖')" :blockTime="1000" scene="debounce">防抖模式</tn-button>
+		<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了节流')" :blockTime="1000" scene="throttle">节流模式</tn-button>
+	  </demo-title>
+      
       <view class="tn-padding-bottom-lg"></view>
       
     </view>
@@ -97,6 +102,10 @@
       }
     },
     methods: {
+		say(msg){
+			this.$tn.message.toast(msg)
+		},
+
     }
   }
 </script>

basicPage/grid-layout/grid-layout.vue

@@ -161,7 +161,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }

basicPage/icon/icon.vue

@@ -216,7 +216,7 @@
 					opacity: 1;
 					transform: scale(1, 1);
 					background-size: 100% 100%;
-					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
 				}
 			}
 

basicPage/test/test.vue

@@ -39,40 +39,40 @@
     data() {
       return {
         swiperList: [
-          'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
+          'https://resource.tuniaokj.com/images/swiper/spring.jpg',
-          'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
+          'https://resource.tuniaokj.com/images/swiper/summer.jpg',
-          'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
+          'https://resource.tuniaokj.com/images/swiper/autumn.jpg',
-          'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
+          'https://resource.tuniaokj.com/images/swiper/winter.jpg',
-          'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
+          'https://resource.tuniaokj.com/images/swiper/winter.jpg'
         ],
         phoneSwiperList: [{
           id: 0,
           type: 'image',
           name: '总有你想不到的创意',
           text: '海量分享',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
+          url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
         }, {
           id: 1,
           type: 'image',
           name: '寻找一起成长的小伙伴',
           text: '愉快玩耍',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
         }, {
           id: 2,
           type: 'image',
           name: '更多彩蛋等你探索',
           text: '酷炫多彩',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
+          url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
         }, {
           id: 3,
           type: 'image',
           name: '更多彩蛋等你探索',
           text: '酷炫多彩',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
         }],
         currentSwiperIndex: 0,
         phoneCurrentSwiperIndex: 0

componentsPage/empty/empty.vue

@@ -23,7 +23,7 @@
       
       <demo-title title="自定义图片">
         <view class="empty__item">
-          <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也"></tn-empty>
+          <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png" text="空空如也"></tn-empty>
         </view>
         <block v-for="(value, key, index) in imgEmpty" :key="index">
           <view class="empty__item">
@@ -34,7 +34,7 @@
       
       <demo-title title="隐藏文字">
         <view class="empty__item">
-          <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" mode=""></tn-empty>
+          <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png" mode=""></tn-empty>
         </view>
         <view class="empty__item tn-margin-top">
           <tn-empty icon="help" mode=""></tn-empty>
@@ -54,7 +54,7 @@
           <tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
         </view>
         <view class="empty__item tn-margin-top">
-          <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
+          <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
         </view>
       </demo-title>
       

componentsPage/goods-nav/goods-nav.vue

@@ -59,7 +59,7 @@
     data() {
       return {
         avatarOptions: [{
-          avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
+          avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'
         },{
           icon: 'service',
           text: '客服'
@@ -68,7 +68,7 @@
           text: '收藏'
         }],
         countOptions: [{
-          avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+          avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
           count: 10
         },{
           icon: 'service',
@@ -79,7 +79,7 @@
           text: '收藏'
         }],
         customOptions: [{
-          avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+          avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
           count: 10,
           countBackgroundColor: '#E83A30'
         },{

componentsPage/keyboard/keyboard.vue

@@ -200,7 +200,7 @@
 						return
 					}
 					// this.licensePlateValue[this.currentLicensePlateIndex] = e
-					this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
+					this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e+"")
 					this.currentLicensePlateIndex++
 					// 判断车牌是否已经选择完成
 					if (this.currentLicensePlateIndex === 8) {

componentsPage/landscape/landscape.vue

@@ -29,7 +29,7 @@
       :maskCloseable="maskCloseable"
       @close="closeLandscape"
     >
-      <image src="https://tnuiimage.tnkjapp.com/landscape/2022-new-year.png" mode="widthFix"></image>
+      <image src="https://resource.tuniaokj.com/images/landscape/2022-new-year.png" mode="widthFix"></image>
     </tn-landscape>
 
   </view>

componentsPage/lazy-load/lazy-load.vue

@@ -32,29 +32,29 @@
         status: 'loadmore',
         list: [],
         data: [
-          { src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/bag1.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/bag2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/banner1.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/banner2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/banner3.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/card.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/computer1.jpg' },
           { src: 'error.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/computer2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/content.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/cup1.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/cup2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/office.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/pillow.jpg' },
           { src: 'error.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/sticker.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/watch1.jpg' },
-          { src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
+          { src: 'https://resource.tuniaokj.com/images/shop/watch2.jpg' },
           { src: 'error.jpg' }
         ]
       }

componentsPage/list/list.vue

@@ -131,7 +131,7 @@
           <tn-list-cell :unlined="true">
             <view class="message">
               <view class="message__left">
-                <tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg"></tn-avatar>
+                <tn-avatar src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>
               </view>
               <view class="message__middle">
                 <view class="message__name">小图鸟</view>
@@ -148,7 +148,7 @@
           <tn-list-cell :unlined="true">
             <view class="message">
               <view class="message__left">
-                <tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar>
+                <tn-avatar src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar>
               </view>
               <view class="message__middle">
                 <view class="message__name">小图鸟</view>
@@ -225,10 +225,10 @@
         cellLineRight: true,
         
         avatarGroupList: [
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
-          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
         ]
       }
     },

componentsPage/scroll-list/scroll-list.vue

@@ -127,7 +127,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }

componentsPage/skeleton/skeleton.vue

@@ -53,97 +53,97 @@
         list: [
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           },
           {
             userInfo: {
-              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
               nickName: '图鸟科技-北北'
             },
             content: {
               title: '全新UI框架，tuniaoUI正式发布',
               desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               releaseDate: '2020年12月30日'
             }
           }

componentsPage/swipe-action/swipe-action.vue

@@ -15,7 +15,7 @@
         <tn-swipe-action-item :options="options1" name="0" @click="onSwiperItemClick">
           <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
             <view class="swipe-action__item__image">
-              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+              <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
             </view>
             <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
               <view class="swipe-action__item__info__title">
@@ -34,7 +34,7 @@
           <tn-swipe-action-item :options="options2">
             <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
               <view class="swipe-action__item__image">
-                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+                <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
               </view>
               <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
                 <view class="swipe-action__item__info__title">
@@ -54,7 +54,7 @@
           <tn-swipe-action-item :options="options3">
             <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
               <view class="swipe-action__item__image">
-                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+                <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
               </view>
               <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
                 <view class="swipe-action__item__info__title">
@@ -74,7 +74,7 @@
           <tn-swipe-action-item :options="options4">
             <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
               <view class="swipe-action__item__image">
-                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+                <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
               </view>
               <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
                 <view class="swipe-action__item__info__title">
@@ -94,7 +94,7 @@
           <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
             <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
               <view class="swipe-action__item__image">
-                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+                <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
               </view>
               <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
                 <view class="swipe-action__item__info__title">
@@ -114,7 +114,7 @@
           <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
             <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
               <view class="swipe-action__item__image">
-                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+                <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
               </view>
               <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
                 <view class="swipe-action__item__info__title">

componentsPage/swiper/swiper.vue

@@ -56,10 +56,10 @@
     data() {
       return {
         list: [
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg', title: '春天'},
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg', title: '夏天'},
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg', title: '秋天'},
-          {image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg', title: '冬天'},
         ]
       }
     },

demo.txt

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

libs/components/nav-index-button.vue

@@ -100,7 +100,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }
@@ -133,7 +133,7 @@
           display: block;
           width: 100%;
           height: 100%;
-          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc3.png) no-repeat center center;
+          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
           background-size: 100% 100%;
           animation: arc 4s linear infinite;
         }

manifest.json

@@ -1,10 +1,11 @@
 {
-    "name" : "TuniaoUI_UniApp",
+    "name" : "TuniaoUI_V2",
     "appid" : "__UNI__C82400B",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
+    "sassImplementationName" : "node-sass",
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,

mock/template_page.js

@@ -33,6 +33,48 @@ export default {
         }
       ]
     },
+    {
+      title: '充值提现',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '蓝色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '绿色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '暗黑充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo3/demo3'
+        }
+      ]
+    },
+    {
+      title: '优惠卡券',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '优惠卡券1',
+          author: '图鸟北北',
+          url: '/templatePage/coupon/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '优惠卡券2',
+          author: '图鸟北北',
+          url: '/templatePage/coupon/demo2/demo2'
+        }
+      ]
+    },
     {
       title: '个人中心',
       backgroundColor: 'tn-cool-bg-color-1',
@@ -159,16 +201,46 @@ export default {
         }
       ]
     },
+    {
+      title: '加载动画',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '加载动画1',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading'
+        },
+        {
+          icon: 'send',
+          title: '加载动画2',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading2'
+        },
+        {
+          icon: 'send',
+          title: '加载动画3',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading3'
+        },
+        {
+          icon: 'send',
+          title: '加载动画4',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading4'
+        },
+        {
+          icon: 'send',
+          title: '加载动画5',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading5'
+        }
+      ]
+    },
     {
        title: '动效元素',
        backgroundColor: 'tn-cool-bg-color-1',
        list: [
-         {
-           icon: 'send',
-           title: '加载动画',
-           author: '图鸟北北',
-           url: '/templatePage/animate/loading/loading'
-         },
          {
            icon: 'send',
            title: '流星悬浮',
@@ -213,33 +285,33 @@ export default {
         list: [
           {
             icon: 'send',
-            title: '3D全景(第三方，约120￥一年)',
+            title: '3D全景(第三方，有免费版付费版)',
             author: '图鸟北北 & 芊云全景',
             url: '/templatePage/life/pano/pano'
           },
           {
-            icon: 'rocket',
+            icon: 'send',
-            title: 'Ucharts图表(第三方，免费开源)',
+            title: '3D模型(第三方，有免费版付费版)',
-            author: '图鸟北北 & Ucharts秋云',
+            author: '图鸟北北 & 芊云全景',
-            url: '/templatePage/life/candle/candle'
+            url: '/templatePage/life/pano/model'
           },
           {
-            icon: 'rocket',
+            icon: 'send',
-            title: '隔壁的小生(第三方，赞赏6￥可商用)',
-            author: '隔壁的小生',
-            url: '/templatePage/life/candle/candle'
-          },
-          {
-            icon: 'rocket',
-            title: '阿凡提·污克西西(第三方，免费开源)',
-            author: '阿凡提·污克西西',
-            url: '/templatePage/life/candle/candle'
-          },
-          {
-            icon: 'rocket',
             title: '微信红包封面',
             author: '微信红包封面',
             url: '/templatePage/life/cover/cover'
+          },
+          {
+            icon: 'send',
+            title: '营销小游戏-魔方',
+            author: '最帅的你',
+            url: '/templatePage/life/cube/cube'
+          },
+          {
+            icon: 'rocket',
+            title: '图鸟生态，期待你的加入',
+            author: '合作微信 tnkewo',
+            url: '/templatePage/life/candle/candle'
           }
         ]
       }

mock/vip_page.js

@@ -203,7 +203,7 @@ export default {
       ]
     },
     {
-      title: '会员需求',
+      title: '定制需求',
       backgroundColor: 'tn-cool-bg-color-1',
       list: [{
           icon: 'order',
@@ -211,6 +211,12 @@ export default {
           author: '图鸟科技',
           url: '/vipPage/components/drag/basic-drag/basic-drag'
         },
+        {
+          icon: 'order',
+          title: '列表长按拖拽排序',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/list-drag/list-drag'
+        },
         {
           icon: 'order',
           title: '图片上传长按拖拽',
@@ -265,11 +271,29 @@ export default {
           author: '图鸟科技',
           url: '/vipPage/components/table/index'
         },
+        {
+          icon: 'order',
+          title: '取色器',
+          author: '图鸟科技',
+          url: '/vipPage/life/color/color'
+        },
         {
           icon: 'order',
           title: '图鸟轮播(实验)',
           author: '图鸟科技',
           url: '/vipPage/components/custom-swiper/index'
+        },
+        {
+          icon: 'order',
+          title: '补光灯',
+          author: '图鸟科技',
+          url: '/vipPage/life/light/light'
+        },
+        {
+          icon: 'order',
+          title: '自适应轮播',
+          author: '图鸟科技',
+          url: '/vipPage/life/active/active'
         }
       ]
     },
@@ -277,11 +301,72 @@ export default {
       title: '生态支持',
       backgroundColor: 'tn-cool-bg-color-1',
       list: [{
+          icon: 'order',
+          title: '过渡轮播',
+          author: '图鸟科技',
+          url: '/thirdPage/change/change'
+        },
+        {
+          icon: 'order',
+          title: '双重轮播',
+          author: '图鸟科技',
+          url: '/thirdPage/double/double'
+        },
+        {
+          icon: 'order',
+          title: '斜侧轮播',
+          author: '图鸟科技',
+          url: '/thirdPage/slope/slope'
+        },
+        {
+          icon: 'order',
+          title: '简约登录',
+          author: '图鸟科技',
+          url: '/thirdPage/simple-login/simple-login'
+        },
+        {
+          icon: 'order',
+          title: '背景登录',
+          author: '图鸟科技',
+          url: '/thirdPage/bg-login/bg-login'
+        },
+        {
+          icon: 'order',
+          title: '授权登录',
+          author: '图鸟科技',
+          url: '/thirdPage/warrant-login/warrant-login'
+        },
+        {
+          icon: 'order',
+          title: '表格餐饮',
+          author: '图鸟科技',
+          url: '/thirdPage/food-table/food-table'
+        },
+        {
+          icon: 'order',
+          title: '智能开门',
+          author: '图鸟科技',
+          url: '/thirdPage/open-door/open-door'
+        },
+        {
+          icon: 'order',
+          title: '暗黑切换',
+          author: '图鸟科技',
+          url: '/thirdPage/theme/theme'
+        },
+        {
+          icon: 'order',
+          title: '视频上传',
+          author: '图鸟科技',
+          url: '/thirdPage/video-upload/video-upload'
+        },
+        {
           icon: 'order',
           title: '短视频',
           author: '图鸟 & 第三方',
           url: '/thirdPage/short-video/short-video'
-        },{
+        },
+        {
           icon: 'order',
           title: '外卖模板',
           author: '图鸟 & 第三方',

pages.json

@@ -416,6 +416,355 @@
         "enablePullDownRefresh": false
       }
     }]
+  },{
+    "root": "vipPage",
+    "pages": [{
+        "path": "blog/circle/circle",
+        "style": {
+          "navigationBarTitleText": "精选圈子",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/blogger/blogger",
+        "style": {
+          "navigationBarTitleText": "博客博主",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/tuniao/tuniao",
+        "style": {
+          "navigationBarTitleText": "图鸟首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/store/store",
+        "style": {
+          "navigationBarTitleText": "店铺商品",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/order/order",
+        "style": {
+          "navigationBarTitleText": "商品订单",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/classify/classify",
+        "style": {
+          "navigationBarTitleText": "商品分类",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/money/money",
+        "style": {
+          "navigationBarTitleText": "积分活动",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "life/guide/guide",
+        "style": {
+          "navigationBarTitleText": "操作指引",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/cool/cool",
+        "style": {
+          "navigationBarTitleText": "酷炫功能",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/link/link",
+        "style": {
+          "navigationBarTitleText": "友情链接",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/movie/movie",
+        "style": {
+          "navigationBarTitleText": "电影首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/mimicry/mimicry",
+        "style": {
+          "navigationBarTitleText": "拟态首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/food/food",
+        "style": {
+          "navigationBarTitleText": "食物首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/tea/tea",
+        "style": {
+          "navigationBarTitleText": "奶茶首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/read/read",
+        "style": {
+          "navigationBarTitleText": "阅读首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/moon/moon",
+        "style": {
+          "navigationBarTitleText": "月亮首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/plan/plan",
+        "style": {
+          "navigationBarTitleText": "计划首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/year/year",
+        "style": {
+          "navigationBarTitleText": "新年首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "life/bless/bless",
+        "style": {
+          "navigationBarTitleText": "祝福页面",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/card/card",
+        "style": {
+          "navigationBarTitleText": "卡片首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/drag/basic-drag/basic-drag",
+        "style": {
+          "navigationBarTitleText": "Drag长按拖拽",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/drag/list-drag/list-drag",
+        "style": {
+          "navigationBarTitleText": "列表长按拖拽排序",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/drag/upload-image-drag/upload-image-drag",
+        "style": {
+          "navigationBarTitleText": "图片上传长按拖拽",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/gravity/page1/page1",
+        "style": {
+          "navigationBarTitleText": "重力首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/cropper/cropper",
+        "style": {
+          "navigationBarTitleText": "Cropper图片裁剪",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/stack-swiper/stack-swiper",
+        "style": {
+          "navigationBarTitleText": "StackSwiper堆叠轮播",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "life/power/power",
+        "style": {
+          "navigationBarTitleText": "充电首页",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/scroll-view/index",
+        "style": {
+          "navigationBarTitleText": "自定义下拉刷新",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/scroll-view/basic/scroll-view",
+        "style": {
+          "navigationBarTitleText": "自定义下拉刷新",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/scroll-view/custom/scroll-view",
+        "style": {
+          "navigationBarTitleText": "自定义下拉刷新",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/cascade-selection/cascade-selection",
+        "style": {
+          "navigationBarTitleText": "级联选择",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/waterfall/waterfall",
+        "style": {
+          "navigationBarTitleText": "瀑布流",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/custom-swiper/index",
+        "style": {
+          "navigationBarTitleText": "图鸟轮播(实验)",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/custom-swiper/horizontal/custom-swiper",
+        "style": {
+          "navigationBarTitleText": "图鸟轮播-横向",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/custom-swiper/vertical/custom-swiper",
+        "style": {
+          "navigationBarTitleText": "图鸟轮播-纵向",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/blog/blog",
+        "style": {
+          "navigationBarTitleText": "圈子首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/prefer/prefer",
+        "style": {
+          "navigationBarTitleText": "商品优选",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/socialize/socialize",
+        "style": {
+          "navigationBarTitleText": "社交圈子",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/myblog/myblog",
+        "style": {
+          "navigationBarTitleText": "圈子中心",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/message/message",
+        "style": {
+          "navigationBarTitleText": "社交圈子",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/product/product",
+        "style": {
+          "navigationBarTitleText": "优选详情",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/health/health",
+        "style": {
+          "navigationBarTitleText": "健康首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/tree-view/tree-view",
+        "style": {
+          "navigationBarTitleText": "树形菜单",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/panoramic/panoramic",
+        "style": {
+          "navigationBarTitleText": "全景首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/index",
+        "style": {
+          "navigationBarTitleText": "表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/basic/index",
+        "style": {
+          "navigationBarTitleText": "基础表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/stripe/index",
+        "style": {
+          "navigationBarTitleText": "斑马纹表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/fixed-header/index",
+        "style": {
+          "navigationBarTitleText": "固定头部表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/fixed-column/index",
+        "style": {
+          "navigationBarTitleText": "固定列表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/multi-header/index",
+        "style": {
+          "navigationBarTitleText": "多表头表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/complex/index",
+        "style": {
+          "navigationBarTitleText": "复杂表格",
+          "enablePullDownRefresh": false
+        }
+      },{
+        "path": "life/start/start",
+        "style": {
+          "navigationBarTitleText": "首次指引",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "home/ucharts/ucharts",
+        "style": {
+          "navigationBarTitleText": "uCharts首页",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "life/color/color",
+        "style": {
+          "navigationBarTitleText": "取色器",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "life/light/light",
+        "style": {
+          "navigationBarTitleText": "补光灯",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "life/active/active",
+        "style": {
+          "navigationBarTitleText": "自适应轮播",
+          "enablePullDownRefresh": false
+        }
+      }
+    ]
   }, {
     "root": "templatePage",
     "pages": [{
@@ -442,6 +791,24 @@
         "navigationBarTitleText": "简约登录",
         "enablePullDownRefresh": false
       }
+    },{
+      "path": "money/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "蓝色充值",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "绿色充值",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "暗黑充值",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "health/qrcode/qrcode",
       "style": {
@@ -496,6 +863,12 @@
         "navigationBarTitleText": "3D全景",
         "enablePullDownRefresh": false
       }
+    },{
+      "path": "life/pano/model",
+      "style": {
+        "navigationBarTitleText": "3D模型",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "life/plus/plus",
       "style": {
@@ -527,6 +900,12 @@
         "navigationBarTitleText": "红包封面",
         "enablePullDownRefresh": false
       }
+    },{
+      "path": "life/cube/cube",
+      "style": {
+        "navigationBarTitleText": "魔方游戏",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "time/clock/clock",
       "style": {
@@ -539,6 +918,30 @@
         "navigationBarTitleText": "加载动画",
         "enablePullDownRefresh": false
       }
+    },{
+      "path": "animate/loading/loading2",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading3",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading4",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "animate/loading/loading5",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "animate/particle/particle",
       "style": {

pages/basic/basic.vue

@@ -2,7 +2,7 @@
   <view class="basic tn-safe-area-inset-bottom">
 
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <block v-for="(item, index) in navList" :key="index">
@@ -100,7 +100,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }

pages/components/components.vue

@@ -2,7 +2,7 @@
   <view class="components tn-safe-area-inset-bottom">
   
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <block v-for="(item, index) in navList" :key="index">
@@ -99,7 +99,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }

pages/template/template.vue

@@ -2,7 +2,7 @@
   <view class="template tn-safe-area-inset-bottom">
   
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <block v-for="(item, index) in navList" :key="index">
@@ -105,7 +105,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }

pages/tuniao/tuniao.vue

@@ -2,14 +2,14 @@
   <view class="about tn-safe-area-inset-bottom">
   
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <view class="about__wrap">
       <!-- 头像用户信息 -->
       <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
         <view class="user-info__avatar tn-bg-grey--light 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.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
+          <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/tuniao.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
           </view>
           <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
         </view>
@@ -19,7 +19,7 @@
       <!-- banner start-->
       <!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
         <view class="" style="width: 100%;">
-          <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-Vue3.png');">
+          <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-Vue3.png');">
              <view class="image-capsule">
              </view>
            </view>  
@@ -396,7 +396,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
         }
       
       &__left {
@@ -422,7 +422,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           }
         }
         
@@ -501,7 +501,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }
@@ -539,7 +539,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }

pages/vip/vip.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="vip tn-safe-area-inset-bottom">
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     <swiper class="card-swiper" :circular="true"
@@ -69,23 +69,23 @@
           </view>
         </view>
       </view>
-      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navBusiness">
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTnCharts">
         <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
           <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-            <view class="tn-icon-identity-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
+            <view class="tn-icon-data-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
           </view>  
           <view class="tn-color-gray--dark tn-text-center">
-            <text class="tn-text-ellipsis">简约商圈</text>
+            <text class="tn-text-ellipsis">图鸟图表</text>
           </view>
         </view>
       </view>
-      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navXiongJie">
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoMoban7">
         <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
           <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-            <view class="tn-icon-image-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
+            <view class="tn-icon-oa tn-cool-color-icon4 tn-cool-bg-color-3"></view>
           </view>  
           <view class="tn-color-gray--dark tn-text-center">
-            <text class="tn-text-ellipsis">凶姐壁纸</text>
+            <text class="tn-text-ellipsis">图鸟OA</text>
           </view>
         </view>
       </view>
@@ -96,7 +96,7 @@
     <!-- banner start-->
     <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
       <view class="" style="width: 100%;">
-        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-circle2.png');">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-circle2.png');">
            <view class="image-capsule">
            </view>
          </view>  
@@ -135,7 +135,7 @@
     
     <view class="tn-padding-xl tn-text-center tn-color-gray">
       <view class="tn-padding-bottom-sm" @click="navPlus">
-        关于图鸟会员
+        关于图鸟
         <text class="tn-icon-rocket tn-padding-left-xs"></text>
       </view>
     </view>
@@ -170,31 +170,31 @@
         swiperList: [{
           id: 0,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle1.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle1.jpg',
         }, {
           id: 1,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle2.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle2.jpg',
         }, {
           id: 2,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle3.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle3.jpg',
         }, {
           id: 3,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle4.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle4.jpg',
         },{
           id: 4,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle5.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle5.jpg',
         },{
           id: 5,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle6.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle6.jpg',
         },{
           id: 6,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle7.jpg',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle7.jpg',
         }
         ],
         // nav菜单列表
@@ -244,13 +244,28 @@
           appId: 'wx76bb942a2810e8e5'
         })
       },
+      // 跳转到图鸟图表
+      navTnCharts(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wxc540d74e56af2d8c'
+        })
+      },
+      // 跳转到图鸟OA
+      navTuniaoMoban7(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx76f9ce42d534b087'
+        })
+      },
       
-      // 跳转到会员协议
+      // 跳转到开源协议
       navPlus() {
         uni.navigateTo({
           url: '/templatePage/life/plus/plus'
         })
       },
+      
     }
   }
 </script>
@@ -410,7 +425,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }

templatePage/animate/bubble/bubble.vue

@@ -66,7 +66,7 @@
       
       // 生成泡泡
       generateBubble() {
-        const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
+        const image = "https://resource.tuniaokj.com/images/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
         uni.getImageInfo({
           src: image,
           success: (res) => {

templatePage/animate/hollow/hollow.vue

@@ -13,14 +13,14 @@
       <view class="tn-flex tn-flex-row-between tn-margin-xl">
         <view class="justify-content-item" style="margin-top: 50rpx;">
           <view class="tn-radius tn-margin-bottom-xl">
-            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
+            <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg')">
               <view class="image-hollow">
               </view>
             </view>
             <view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
           </view>
           <view class="tn-radius tn-margin-bottom">
-            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
+            <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')">
               <view class="image-hollow">
               </view>
             </view>
@@ -29,14 +29,14 @@
         </view>
         <view class="justify-content-item">
           <view class="tn-radius tn-margin-bottom-xl">
-            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
+            <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg')">
               <view class="image-hollow">
               </view>
             </view>
             <view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
           </view>
           <view class="tn-radius tn-margin-bottom">
-            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
+            <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg')">
               <view class="image-hollow">
               </view>
             </view>
@@ -45,14 +45,14 @@
         </view>
         <view class="justify-content-item" style="margin-top: 50rpx;">
           <view class="tn-radius tn-margin-bottom-xl">
-            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
+            <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg')">
               <view class="image-hollow">
               </view>
             </view>
             <view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
           </view>
           <view class="tn-radius tn-margin-bottom">
-            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
+            <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/content_1.jpeg')">
               <view class="image-hollow">
               </view>
             </view>
@@ -63,7 +63,7 @@
     </view>
     
     <view class="bottom-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
     <view class="hollow">
       <view class="tn-text-xxl">

templatePage/animate/loading/loading.vue

@@ -70,7 +70,7 @@
     content: "";
     inline-size: var(--size);
     block-size: var(--size);
-    background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
+    background-image: url("https://resource.tuniaokj.com/images/animate/animate1.jpg");
     background-size: var(--bg-size);
     background-repeat: repeat;
     transform: rotate(45deg);
@@ -90,8 +90,6 @@
     }
   }
 
-  
-  
   /* 加载部分 */
   .components-anloading {
     margin: 0;

templatePage/animate/loading/loading2.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="template-content">
+    <!-- 顶部自定义导航 -->
+    <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-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="load">
+        <text></text>
+        <text></text>
+        <text></text>
+        <text></text>
+      </view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateContent',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  /* 加载 */
+  .load{position:absolute;top:50%;left:42%;transform:translate(-50%, -50%);
+    width:60px;
+    height:60px;
+  }
+  .load text{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
+  
+  .load :first-child{background:#4B98FE;animation-delay:-1.5s}
+  .load :nth-child(2){background:#00D05E;animation-delay:-1s}
+  .load :nth-child(3){background:#FFAC00;animation-delay:-0.5s}
+  .load :last-child{background:#FB6A67}
+  
+  @keyframes spin{
+    0%,100%{transform:translate(0)}
+    25%{transform:translate(160%)}
+    50%{transform:translate(160%, 160%)}
+    75%{transform:translate(0, 160%)}
+  }
+
+</style>

templatePage/animate/loading/loading3.vue

@@ -0,0 +1,153 @@
+<template>
+  <view class="template-loading">
+    <!-- 顶部自定义导航 -->
+    <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="loader-wrapper">
+      <view class="loader">
+        <view class="logo-loading tn-icon-logo-tuniao tn-text-shadow-aquablue">
+        </view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateLoading',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  @-webkit-keyframes img {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(-360deg);
+    }
+  }
+  @keyframes img {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(-360deg);
+      transform: rotate(-360deg);
+    }
+  }
+  @-webkit-keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes spin-reverse {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(0deg);
+    }
+  }
+  @keyframes spin-reverse {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(-360deg);
+      transform: rotate(-360deg);
+    }
+  }
+  
+  .loader-wrapper {
+    // background-color: #00C3FF;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    overflow: hidden;
+  }
+  
+  .loader {
+    display: flex;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #4B98FE;
+    animation: spin 1.7s linear infinite;
+    z-index: 11;
+  }
+  .loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFAC00;
+      animation: spin-reverse 5.6s linear infinite;
+    }
+    
+  .loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #00D05E;
+      animation: spin 2.3s linear infinite;
+  }
+  .logo-loading {
+      font-size: 120rpx;
+      color: #01BEFF;
+      margin: auto;
+      align-items: center;
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+      animation: img 1.7s linear infinite;
+  }
+
+</style>

templatePage/animate/loading/loading4.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="template-content">
+    <!-- 顶部自定义导航 -->
+    <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-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="">
+        <view class="loading loading1 tn-icon-airplane tn-text-shadow-purplered"></view>
+        <view class="loading loading2 tn-icon-flower tn-text-shadow-blue"></view>
+        <view class="loading loading3 tn-icon-gift tn-text-shadow-orangered"></view>
+        <view class="loading loading4 tn-icon-shop tn-text-shadow-indigo"></view>
+        <view class="loading loading5 tn-icon-light tn-text-shadow-orangeyellow"></view>
+        <view class="loading loading6 tn-icon-fire tn-text-shadow-cyan"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateContent',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .loading {
+    font-size: 60rpx;
+    width: 160rpx;
+    height: 160rpx;
+    animation: move 3s linear infinite;
+    backface-visibility: hidden;
+    position: absolute;
+    top: calc(50% - 160rpx);
+    left: 50%;
+    transform-origin: -4vmin center;
+    will-change: transform;
+  }
+  .loading1 {
+    color: #4B98FE;
+    animation-delay: -0.5s;
+    opacity: 0;
+  }
+  .loading2 {
+    color: #00D05E;
+    animation-delay: -1s;
+    opacity: 0;
+  }
+  .loading3 {
+    color: #FFAC00;
+    animation-delay: -1.5s;
+    opacity: 0;
+  }
+  .loading4 {
+    color: #FB6A67;
+    animation-delay: -2s;
+    opacity: 0;
+  }
+  .loading5 {
+    color: #957BFE;
+    animation-delay: -2.5s;
+    opacity: 0;
+  }
+  .loading6 {
+    color: #00B9FE;
+    animation-delay: -3s;
+    opacity: 0;
+  }
+  
+  @keyframes move {
+    0% {
+      transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
+      will-change: transform;
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      z-index: 10;
+      transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
+      will-change: transform;
+    }
+  }
+
+
+</style>

templatePage/animate/loading/loading5.vue

@@ -0,0 +1,224 @@
+<template>
+  <view class="template-loading">
+    <!-- 顶部自定义导航 -->
+    <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="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <!-- 图鸟加载-->
+      <view class="loader">
+        <view class="circle loading1"></view>
+        <view class="circle loading2"></view>
+        <view class="circle loading3"></view>
+        <view class="circle loading4"></view>
+        <view class="circle loading5"></view>
+        <view class="circle loading6"></view>
+        <view class="circle loading7"></view>
+        <view class="circle loading8"></view>
+      </view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateLoading',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  /* 加载动画*/
+  .loader {
+    position:absolute;
+    width:120rpx;
+    height:120rpx;
+    top:50%;
+    left:50%;
+    transform:translate(-50%, -50%);
+  }
+  .circle{
+    color: #01BEFF;
+    position: absolute;
+    border-radius: 100%;
+    width: 30rpx;
+    height: 30rpx;
+    display: inline-block;
+    float: none;
+    background-color: currentColor;
+    border: 0 solid currentColor;
+    -webkit-animation: spin 1s infinite ease-in-out;
+    -moz-animation: spin 1s infinite ease-in-out;
+    -o-animation: spin 1s infinite ease-in-out;
+    animation: spin 1s infinite ease-in-out
+  }
+  
+  .loader :nth-child(1) {
+    top: 5%;
+    left: 50%;
+    -webkit-animation-delay: -.875s;
+    -moz-animation-delay: -.875s;
+    -o-animation-delay: -.875s;
+    animation-delay: -.875s
+  }
+  
+  .loader :nth-child(2) {
+    top: 18.1801948466%;
+    left: 81.8198051534%;
+    -webkit-animation-delay: -.75s;
+    -moz-animation-delay: -.75s;
+    -o-animation-delay: -.75s;
+    animation-delay: -.75s
+  }
+  
+  .loader :nth-child(3) {
+    top: 50%;
+    left: 95%;
+    -webkit-animation-delay: -.625s;
+    -moz-animation-delay: -.625s;
+    -o-animation-delay: -.625s;
+    animation-delay: -.625s
+  }
+  
+  .loader :nth-child(4) {
+    top: 81.8198051534%;
+    left: 81.8198051534%;
+    -webkit-animation-delay: -.5s;
+    -moz-animation-delay: -.5s;
+    -o-animation-delay: -.5s;
+    animation-delay: -.5s
+  }
+  
+  .loader :nth-child(5) {
+    top: 94.9999999966%;
+    left: 50.0000000005%;
+    -webkit-animation-delay: -.375s;
+    -moz-animation-delay: -.375s;
+    -o-animation-delay: -.375s;
+    animation-delay: -.375s
+  }
+  
+  .loader :nth-child(6) {
+    top: 81.8198046966%;
+    left: 18.1801949248%;
+    -webkit-animation-delay: -.25s;
+    -moz-animation-delay: -.25s;
+    -o-animation-delay: -.25s;
+    animation-delay: -.25s
+  }
+  
+  .loader :nth-child(7) {
+    top: 49.9999750815%;
+    left: 5.0000051215%;
+    -webkit-animation-delay: -.125s;
+    -moz-animation-delay: -.125s;
+    -o-animation-delay: -.125s;
+    animation-delay: -.125s
+  }
+  
+  .loader :nth-child(8) {
+    top: 18.179464974%;
+    left: 18.1803700518%;
+    -webkit-animation-delay: 0s;
+    -moz-animation-delay: 0s;
+    -o-animation-delay: 0s;
+    animation-delay: 0s
+  }
+  
+  @-webkit-keyframes spin {
+    0%,
+    100% {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      transform: scale(1)
+    }
+  
+    20% {
+      opacity: 1
+    }
+  
+    80% {
+      opacity: 0;
+      -webkit-transform: scale(0);
+      transform: scale(0)
+    }
+  }
+  
+  @-moz-keyframes spin {
+    0%,
+    100% {
+      opacity: 1;
+      -moz-transform: scale(1);
+      transform: scale(1)
+    }
+  
+    20% {
+      opacity: 1
+    }
+  
+    80% {
+      opacity: 0;
+      -moz-transform: scale(0);
+      transform: scale(0)
+    }
+  }
+  
+  @-o-keyframes spin {
+    0%,
+    100% {
+      opacity: 1;
+      -o-transform: scale(1);
+      transform: scale(1)
+    }
+  
+    20% {
+      opacity: 1
+    }
+  
+    80% {
+      opacity: 0;
+      -o-transform: scale(0);
+      transform: scale(0)
+    }
+  }
+  
+  @keyframes spin {
+    0%,
+    100% {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1)
+    }
+  
+    20% {
+      opacity: 1
+    }
+  
+    80% {
+      opacity: 0;
+      -webkit-transform: scale(0);
+      -moz-transform: scale(0);
+      -o-transform: scale(0);
+      transform: scale(0)
+    }
+  }
+  
+</style>

templatePage/animate/photo/photo.vue

@@ -11,10 +11,10 @@
     
     <!-- 页面内容 -->
     <view class="slideshow">
-      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/cup1.jpg')"></view>
-      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')"></view>
-      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/card.jpg')"></view>
-      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/watch1.jpg')"></view>
     </view>
     
   </view>

templatePage/animate/suspended/suspended.vue

@@ -12,7 +12,7 @@
     <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>
+          <image src="https://resource.tuniaokj.com/images/my/my7.png" class="button-shop shadow"></image>
         </view>
       </view>
       <view class="hx-box pa">
@@ -177,7 +177,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
+    background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
     background-size: 100% 100%;
     animation: hx 4s linear infinite;
   }

templatePage/animate/wave/wave.vue

@@ -15,13 +15,13 @@
     
     <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 class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/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 class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/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 class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
       </view>
     </view>
 

templatePage/article/demo1/demo1.vue

@@ -14,7 +14,7 @@
         <!-- 图标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')">
+            style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')">
             <view class="logo-image">
               <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
               </tn-badge>
@@ -83,8 +83,8 @@
         <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://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-home.png'></image> -->
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -92,8 +92,8 @@
         <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://resource.tuniaokj.com/images/tabbar/information_tnnew.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
         </view>
         <view class="tn-color-black">圈子</view>
       </view>
@@ -113,7 +113,7 @@
               <!-- <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> -->
+                <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-tiger.png'></image> -->
               </view>
             </view>
           </view>
@@ -134,8 +134,8 @@
         <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://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
         </view>
         <view class="tn-color-gray">优选</view>
       </view>
@@ -143,8 +143,8 @@
         <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://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -184,26 +184,26 @@
           }
         ],
         content: [{
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'red',
             label: ['小程序'],
             title: '全新出发，新版本已上线，欢迎三连',
             desc: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 567
@@ -213,26 +213,26 @@
             likeCount: 206
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'cyan',
             label: ['模型'],
             title: '3D模型了解一下？',
             desc: '一个拥有大量3D模型的网站',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 987
@@ -242,26 +242,26 @@
             likeCount: 65
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'blue',
             label: ['UI设计'],
             title: '为什么资讯不显示时间',
             desc: '你确定你经常更新文章吗？',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 321
@@ -271,26 +271,26 @@
             likeCount: 543
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'green',
             label: ['创意'],
             title: '创意一点点',
             desc: '创意灵感从这里开始',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 230
@@ -300,26 +300,26 @@
             likeCount: 342
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'orange',
             label: ['UI设计'],
             title: '语雀素材地址资源',
             desc: '图鸟UI素材免费可商用',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 106
@@ -329,26 +329,26 @@
             likeCount: 91
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'purplered',
             label: ['神器'],
             title: '最强的视频转GIF工具',
             desc: '神器推荐',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 232
@@ -358,26 +358,26 @@
             likeCount: 86
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'purple',
             label: ['粒子'],
             title: '小程序粒子效果',
             desc: '酷炫的小程序粒子效果一览',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 456
@@ -387,26 +387,26 @@
             likeCount: 76
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'brown',
             label: ['工具'],
             title: '小程序任意页面生成二维码',
             desc: '二维码生成器',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 129
@@ -667,7 +667,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }
@@ -700,7 +700,7 @@
           display: block;
           width: 100%;
           height: 100%;
-          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
           background-size: 100% 100%;
           animation: arc 4s linear infinite;
         }

templatePage/article/demo2/demo2.vue

@@ -14,7 +14,7 @@
         <!-- 图标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')">
+            style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')">
             <view class="logo-image">
               <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
               </tn-badge>
@@ -83,8 +83,8 @@
         <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://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-home.png'></image> -->
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -92,8 +92,8 @@
         <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://resource.tuniaokj.com/images/tabbar/information_tnnew.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
         </view>
         <view class="tn-color-black">圈子</view>
       </view>
@@ -113,7 +113,7 @@
               <!-- <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> -->
+                <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-tiger.png'></image> -->
               </view>
             </view>
           </view>
@@ -134,8 +134,8 @@
         <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://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
         </view>
         <view class="tn-color-gray">优选</view>
       </view>
@@ -143,8 +143,8 @@
         <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://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -184,26 +184,26 @@
           }
         ],
         content: [{
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/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',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 567
@@ -213,26 +213,26 @@
             likeCount: 206
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'cyan',
             label: ['模型'],
             title: '一个拥有大量3D模型的网站',
             desc: '3D模型了解一下？',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 987
@@ -242,26 +242,26 @@
             likeCount: 65
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'blue',
             label: ['UI设计'],
             title: '为什么资讯不显示时间？',
             desc: '你确定你经常更新文章吗？',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 321
@@ -271,26 +271,26 @@
             likeCount: 543
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'green',
             label: ['创意'],
             title: '创意一点点',
             desc: '创意灵感从这里开始',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 230
@@ -300,26 +300,26 @@
             likeCount: 342
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'orange',
             label: ['UI设计'],
             title: '图鸟UI素材免费可商用',
             desc: '语雀素材地址资源',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 106
@@ -329,26 +329,26 @@
             likeCount: 91
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'purplered',
             label: ['神器'],
             title: '最强的视频转GIF工具',
             desc: '神器推荐',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 232
@@ -358,26 +358,26 @@
             likeCount: 86
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'purple',
             label: ['粒子'],
             title: '酷炫的小程序粒子效果一览',
             desc: '小程序粒子效果',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 456
@@ -387,26 +387,26 @@
             likeCount: 76
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             color: 'brown',
             label: ['工具'],
             title: '小程序任意页面生成二维码',
             desc: '二维码生成器',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
             viewUser: {
               latestUserAvatar: [{
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                 },
                 {
-                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                  src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                 },
               ],
               viewUserCount: 129
@@ -667,7 +667,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }
@@ -700,7 +700,7 @@
           display: block;
           width: 100%;
           height: 100%;
-          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
           background-size: 100% 100%;
           animation: arc 4s linear infinite;
         }

templatePage/health/qrcode/qrcode.vue

@@ -187,7 +187,7 @@
         <view class="bar-icon">
           <view class="tn-icon-home-smile tn-color-gray--dark">
           </view>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -195,7 +195,7 @@
         <view class="bar-circle tn-shadow-blur">
           <view class="tn-icon-qr-code tn-color-white">
           </view>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
         </view>
         <view class="tn-color-gray">粤码通城</view>
       </view>
@@ -203,7 +203,7 @@
         <view class="bar-icon">
           <view class="tn-icon-emoji-good tn-color-gray--dark">
           </view>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -221,20 +221,20 @@
       return {
         content: [
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
             mainImage:[
-              'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+              'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             ],
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 65
             },
@@ -243,20 +243,20 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
             mainImage:[
-              'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+              'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             ],
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 65
             },
@@ -265,20 +265,20 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
             mainImage:[
-              'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+              'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             ],
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 65
             },
@@ -287,20 +287,20 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['站点','链接'],
             desc: 'https://www.yuque.com/tuniao',
             mainImage:[
-              'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg',
+              'https://resource.tuniaokj.com/images/shop/pillow2.jpg',
             ],
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 65
             },
@@ -309,20 +309,20 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
             mainImage:[
-              'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+              'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
             ],
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 65
             },
@@ -418,7 +418,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
   
             
         }
@@ -526,7 +526,7 @@
     content: "";
     inline-size: var(--size);
     block-size: var(--size);
-    background-image: url("https://tnuiimage.tnkjapp.com/animate/health.png");
+    background-image: url("https://resource.tuniaokj.com/images/animate/health.png");
     background-size: var(--bg-size);
     background-repeat: repeat;
     transform: rotate(0deg);

templatePage/home/course/course.vue

@@ -14,7 +14,7 @@
       <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/logo/logo2.png')">
+          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
             <view class="logo-image">
             </view>
           </view> 
@@ -166,7 +166,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-home-smile">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-course.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/course-course.png'></image>
         </view>
         <view class="tn-color-black">课程</view>
       </view>
@@ -174,7 +174,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-watercup tn-color-gray">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/course-fire-no.png'></image>
         </view>
         <view class="tn-color-gray">精选</view>
       </view>
@@ -182,7 +182,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-ticket tn-color-gray">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/course-play-no.png'></image>
         </view>
         <view class="tn-color-gray">播放</view>
       </view>
@@ -190,7 +190,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-my tn-color-gray">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/course-my-no.png'></image>
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -213,13 +213,13 @@
     data(){
       return {
         banner: [{
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
         }],
         tuniaoData: [
           {
@@ -249,18 +249,18 @@
         ],
         content: [
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -269,18 +269,18 @@
             likeCount: 999
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['炸串','火锅'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -289,18 +289,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -309,18 +309,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -329,18 +329,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -349,18 +349,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '我们都是好孩子',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -369,18 +369,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -389,18 +389,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['烤肉','烤肉'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -550,7 +550,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
         }
       
       &__left {
@@ -576,7 +576,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           }
         }
         

templatePage/home/design/design.vue

@@ -125,7 +125,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-home-smile">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image>
         </view>
         <view class="tn-color-black">首页</view>
       </view>
@@ -133,7 +133,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-discover">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
         </view>
         <view class="tn-color-gray">圈子</view>
       </view>
@@ -141,7 +141,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-image-text">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
         </view>
         <view class="tn-color-gray">案例</view>
       </view>
@@ -149,7 +149,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-my">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -173,28 +173,28 @@
     data(){
       return {
         banner: [{
-          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper1.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/swiper1.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper2.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/swiper2.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper3.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper4.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/swiper4.jpg'
         }],
         content: [
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -203,18 +203,18 @@
             likeCount: 999
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -223,18 +223,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -243,18 +243,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -263,18 +263,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -283,18 +283,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '我们都是好孩子',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -303,18 +303,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -323,18 +323,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -388,7 +388,7 @@
               opacity: 1;
               transform: scale(1, 1);
               background-size: 100% 100%;
-              background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+              background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
             }
           }
         }

templatePage/home/job/job.vue

@@ -14,7 +14,7 @@
       <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
         <!-- 返回按钮 -->
         <view class="custom-nav__back">
-          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
+          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
             <view class="logo-image">
             </view>
           </view> 
@@ -80,7 +80,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-level">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/job-home.png'></image>
         </view>
         <view class="tn-color-black">职位</view>
       </view>
@@ -88,7 +88,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-level">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/job-honor.png'></image>
         </view>
         <view class="tn-color-black">简历</view>
       </view>
@@ -96,7 +96,7 @@
         <view class="bar-circle tn-shadow-blur">
           <view class="tn-icon-message-fill tn-color-white">
           </view>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
         </view>
         <!-- <view class="tn-color-gray">发布</view> -->
       </view>
@@ -104,7 +104,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-level">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/job-up.png'></image>
         </view>
         <view class="tn-color-black">提升</view>
       </view>
@@ -112,7 +112,7 @@
         <view class="bar-icon">
          <!-- <view class="tn-icon-signpost tn-color-gray--dark">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/job-my.png'></image>
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -135,13 +135,13 @@
     data(){
       return {
         banner: [{
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
         }],
         tuniaoData: [
           {
@@ -423,7 +423,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg3.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg3.png);
           }
         }
         

templatePage/home/music/music.vue

@@ -223,28 +223,28 @@
     data(){
       return {
         banner: [{
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
         }],
         content: [
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -253,18 +253,18 @@
             likeCount: 999
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -273,18 +273,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -293,18 +293,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -313,18 +313,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -333,18 +333,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '我们都是好孩子',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -353,18 +353,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -373,18 +373,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -487,7 +487,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
   
             
         }

templatePage/home/screen/screen.vue

@@ -86,7 +86,7 @@
         <view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
           <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
             <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <image class="" src='https://tnuiimage.tnkjapp.com/icon/5.jpg' mode='aspectFit'></image>
+              <image class="" src='https://resource.tuniaokj.com/images/icon/5.jpg' mode='aspectFit'></image>
             </view>
             <view class="tn-text-center">
               <view class="tn-text-ellipsis tn-color-black tn-text-lg ">资料投屏</view>
@@ -97,7 +97,7 @@
         <view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
           <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
             <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <image class="" src='https://tnuiimage.tnkjapp.com/icon/6.jpg' mode='aspectFit'></image>
+              <image class="" src='https://resource.tuniaokj.com/images/icon/6.jpg' mode='aspectFit'></image>
             </view>
             <view class="tn-text-center">
               <view class="tn-text-ellipsis tn-color-black tn-text-lg ">文件投屏</view>
@@ -111,7 +111,7 @@
         <view class="tn-flex-1  screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
           <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
             <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <image class="" src='https://tnuiimage.tnkjapp.com/icon/7.jpg' mode='aspectFit'></image>
+              <image class="" src='https://resource.tuniaokj.com/images/icon/7.jpg' mode='aspectFit'></image>
             </view>
             <view class="tn-text-center">
               <view class="tn-text-ellipsis tn-color-black tn-text-lg ">电脑投屏</view>
@@ -122,7 +122,7 @@
         <view class="tn-flex-1  screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
           <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
             <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <image class="" src='https://tnuiimage.tnkjapp.com/icon/8.jpg' mode='aspectFit'></image>
+              <image class="" src='https://resource.tuniaokj.com/images/icon/8.jpg' mode='aspectFit'></image>
             </view>
             <view class="tn-text-center">
               <view class="tn-text-ellipsis tn-color-black tn-text-lg ">文档投屏</view>
@@ -188,7 +188,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-level">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/home_cur.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/yellow/home_cur.png'></image>
         </view>
         <view class="tn-color-black">首页</view>
       </view>
@@ -196,7 +196,7 @@
         <view class="bar-circle tn-shadow-blur">
           <view class="tn-icon-discover-planet tn-color-white">
           </view>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
         </view>
         <!-- <view class="tn-color-gray">发布</view> -->
       </view>
@@ -204,7 +204,7 @@
         <view class="bar-icon">
          <!-- <view class="tn-icon-signpost tn-color-gray--dark">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/me.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/yellow/me.png'></image>
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -226,28 +226,28 @@
     data(){
       return {
         banner: [{
-          image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+          image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+          image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+          image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
         }, {
-          image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+          image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
         }],
         content: [
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -256,18 +256,18 @@
             likeCount: 999
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -276,18 +276,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -296,18 +296,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -316,18 +316,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -336,18 +336,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '我们都是好孩子',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -356,18 +356,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -376,18 +376,18 @@
             likeCount: 62
           },
           {
-            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
             userName: '可我会像',
             date: '2021年12月20日',
             label: ['开源','创意'],
             desc: '免费开源可商用组件',
-            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
             viewUser: {
               latestUserAvatar: [
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
               ],
               viewUserCount: 129
             },
@@ -609,7 +609,7 @@
     content: "";
     inline-size: var(--size);
     block-size: var(--size);
-    background-image: url("https://tnuiimage.tnkjapp.com/animate/animate3.png");
+    background-image: url("https://resource.tuniaokj.com/images/animate/animate3.png");
     background-size: var(--bg-size);
     background-repeat: repeat;
     transform: rotate(45deg);

templatePage/home/wallpaper/wallpaper.vue

@@ -14,7 +14,7 @@
       <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
         <!-- 返回按钮 -->
         <view class="custom-nav__back">
-          <view class="logo-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
+          <view class="logo-pic" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
             <view class="logo-image">
             </view>
           </view> 
@@ -84,7 +84,7 @@
       <!-- banner start-->
       <view class="tn-flex tn-flex-wrap tn-margin-xs">
         <view class=" " style="width: 100%;">
-          <view class="image-pic tn-margin-sm" style="background-image:url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')">
+          <view class="image-pic tn-margin-sm" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
              <view class="image-wallpaper">
              </view>
            </view>  
@@ -154,7 +154,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-home-smile">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/wallpaper-home.png'></image>
         </view>
         <view class="tn-color-white">首页</view>
       </view>
@@ -162,7 +162,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-watercup tn-color-gray">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/wallpaper-more.png'></image>
         </view>
         <view class="tn-color-gray">投稿</view>
       </view>
@@ -170,7 +170,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-ticket tn-color-gray">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/wallpaper-my.png'></image>
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -194,41 +194,41 @@
       return {
         
           banner: [{
-            image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
           }],
           pic: [{
-            image: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/computer2.jpg'
           },{
-            image: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
           }, {
-            image: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg'
+            image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
           }],
           content: [
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -237,18 +237,18 @@
               likeCount: 999
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -257,18 +257,18 @@
               likeCount: 62
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -277,18 +277,18 @@
               likeCount: 62
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -297,18 +297,18 @@
               likeCount: 62
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -317,18 +317,18 @@
               likeCount: 62
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '我们都是好孩子',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -337,18 +337,18 @@
               likeCount: 62
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -357,18 +357,18 @@
               likeCount: 62
             },
             {
-              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
               userName: '可我会像',
               date: '2021年12月20日',
               label: ['开源','创意'],
               desc: '免费开源可商用组件',
-              mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+              mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
               viewUser: {
                 latestUserAvatar: [
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
-                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                 ],
                 viewUserCount: 129
               },
@@ -482,7 +482,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
   
             
         }

templatePage/life/about/about.vue

@@ -12,7 +12,7 @@
     
     <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 class="container about-bg" style="background-image:url('https://resource.tuniaokj.com/images/about/about.png')">
     </view>
   </view>
 </template>
@@ -68,7 +68,7 @@
       
       // 生成泡泡
       generateBubble() {
-        const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
+        const image = "https://resource.tuniaokj.com/images/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
         uni.getImageInfo({
           src: image,
           success: (res) => {

templatePage/life/cube/cube.vue

@@ -0,0 +1,22 @@
+<template>
+	<view class="">
+    <web-view src="https://www.tuniaokj.com/cube/index.html"></web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>

templatePage/life/fullpage/fullpage.vue

@@ -40,23 +40,23 @@
         swiperList: [{
           id: 0,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg1.jpg',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/full1.png'
         }, {
           id: 1,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg2.jpg',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/full2.png'
         }, {
           id: 2,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg1.jpg',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/full3.png'
         }, {
           id: 3,
           type: 'image',
-          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg2.jpg',
-          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/full4.png'
         }],
       }
     },

templatePage/life/outset/outset.vue

@@ -54,7 +54,7 @@
     <!-- 头像用户信息 -->
     <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 class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
         </view>
       </view>
       <!-- <view class="user-info__nick-name">图鸟UI</view> -->
@@ -75,13 +75,13 @@
     
     <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 class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/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 class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/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 class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
       </view>
     </view>
 

templatePage/life/pano/model.vue

@@ -0,0 +1,24 @@
+<template>
+	<view class="components-pano">
+		<!-- <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/tour/mf926a02a03966a.html"></web-view>
+    <!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>

templatePage/life/share/share.vue

@@ -15,7 +15,7 @@
     </tn-nav-bar>
     
     <view class="bottom-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>    
 
     <nav-index-button></nav-index-button>

templatePage/login/demo1/demo1.vue

@@ -12,10 +12,10 @@
     <view class="login">
       <!-- 顶部背景图片-->
       <view class="login__bg login__bg--top">
-        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
+        <image class="bg" src="https://resource.tuniaokj.com/images/login/1/login_top2.jpg" mode="widthFix"></image>
       </view>
       <view class="login__bg login__bg--top">
-        <image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
+        <image class="rocket rocket-sussuspension" src="https://resource.tuniaokj.com/images/login/1/login_top3.png" mode="widthFix"></image>
       </view>
       
       <view class="login__wrapper">
@@ -121,7 +121,7 @@
       
       <!-- 底部背景图片-->
       <view class="login__bg login__bg--bottom">
-        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
+        <image src="https://resource.tuniaokj.com/images/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
       </view>
     </view>
     
@@ -396,7 +396,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           }
         }
       }

templatePage/login/demo2/demo2.vue

@@ -15,10 +15,10 @@
     <view class="login">
       <!-- 顶部背景图片-->
       <!-- <view class="login__bg login__bg--top">
-        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
+        <image class="bg" src="https://resource.tuniaokj.com/images/login/1/login_top2.jpg" mode="widthFix"></image>
       </view>
       <view class="login__bg login__bg--top">
-        <image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
+        <image class="rocket rocket-sussuspension" src="https://resource.tuniaokj.com/images/login/1/login_top3.png" mode="widthFix"></image>
       </view> -->
       
       <view class="login__wrapper">
@@ -124,7 +124,7 @@
       
       <!-- 底部背景图片-->
       <!-- <view class="login__bg login__bg--bottom">
-        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
+        <image src="https://resource.tuniaokj.com/images/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
       </view> -->
     </view>
     
@@ -477,7 +477,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           }
         }
       }

templatePage/login/demo3/demo3.vue

@@ -12,7 +12,7 @@
     <view class="login">
       <!-- 顶部背景图片-->
       <view class="login__bg login__bg--top">
-        <image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
+        <image class="bg" src="https://resource.tuniaokj.com/images/swiper/banner-animate2.png" mode="aspectFill"></image>
       </view>
       
       <view class="login__wrapper">
@@ -383,7 +383,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           }
         }
       }

templatePage/login/demo4/demo4.vue

@@ -12,7 +12,7 @@
     <view class="login">
       <!-- 顶部背景图片-->
       <view class="login__bg login__bg--top">
-        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
+        <image class="bg" src="https://resource.tuniaokj.com/images/login/2/login-top2.png" mode="widthFix"></image>
       </view>
 
       <view class="login__wrapper">
@@ -134,7 +134,7 @@
       
       <!-- 底部背景图片-->
       <view class="login__bg login__bg--bottom">
-        <image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
+        <image src="https://resource.tuniaokj.com/images/login/2/login-bottom2.png" mode="widthFix"></image>
       </view>
   
     </view>
@@ -402,7 +402,7 @@
           //   opacity: 1;
           //   transform: scale(1, 1);
           //   background-size: 100% 100%;
-          //   background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          //   background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
           // }
         }
       }

templatePage/money/demo1/demo1.vue

@@ -0,0 +1,219 @@
+<template>
+  <view class="template-pay 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>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="background: linear-gradient(180deg, #D8E5FF, #F9FFF9);">
+      <view class="tn-margin">
+        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-blue">
+          <view class="tn-margin-left tn-margin-top-lg">
+            <view class="tn-color-white">
+              我的余额
+            </view>
+            <view class="tn-color-white tn-padding-top-sm">
+              <text class="" style="margin-left: -6rpx;">￥</text>
+              <text class="tn-text-bold" style="font-size: 80rpx;">129.29</text>
+            </view>
+            <view class="tn-color-white" style="padding-top: 45rpx;opacity: 0.6;">6122 **** **** 60606</view>
+          </view>
+          <view class="tn-margin-right tn-margin-top-xl tn-color-white">
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">可用本金</text>
+              ￥129.00
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">赠送金额</text>
+              ￥0.29
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">冻结金额</text>
+              ￥0.00
+            </view>
+          </view>
+          
+        </view>
+      </view>
+    
+    </view>
+
+    
+    <view class="tn-margin tn-padding-top-xl">
+      <view class="tn-bg-gray--light tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
+        <text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-gray--dark">￥</text>
+      	<input placeholder="请输入充值金额" name="input" placeholder-style="color:#AAAAAA" style="width: 100%;"></input>
+      </view>
+    </view>
+    
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-alipay tn-color-blue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">支付宝</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-green--dark">
+        <view class="tn-icon-success-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-wechat tn-color-green--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">微信支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-pay-fill tn-color-aquablue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">银行卡支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
+        <view class="tn-padding-xl">
+          <text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text> 
+          <text class="tn-color-gray">点击充值即表示你已同意</text>
+          <text class="tn-color-blue--disabled">《充值协议》</text>
+        </view>
+        <tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="100%" shadow>
+          <text class="tn-color-white">立 即 充 值</text>
+        </tn-button>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePay',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+    &:before {
+      content: " ";
+      width: 1rpx;
+      height: 110%;
+      position: absolute;
+      top: 22.5%;
+      left: 0;
+      right: 0;
+      margin: auto;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: 0.7;
+      background-color: #FFFFFF;
+    }
+  }
+  
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(60rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 卡 */
+  .button-vip {
+    width: 100%;
+    height: 300rpx;
+    border-radius: 15rpx;
+    position: relative;
+    z-index: 1;
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: inherit;
+      opacity: 1;
+      transform: scale(1, 1);
+      background-size: 100% 100%;
+      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
+    }    
+  }
+  
+  
+  /* 间隔线 start*/
+  .tn-strip-bottom-min {
+    width: 100%;
+    border-bottom: 1rpx solid #F8F9FB;
+  }
+  
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+
+</style>

templatePage/money/demo2/demo2.vue

@@ -0,0 +1,263 @@
+<template>
+  <view class="template-pay 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>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-margin">
+        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur" style="background-color: #56BD48;">
+          <view class="tn-margin-left tn-margin-top-lg">
+            <view class="tn-color-white">
+              余额
+            </view>
+            <view class="tn-color-white tn-padding-top">
+              <text class="" style="margin-left: -6rpx;">￥</text>
+              <text class="tn-text-bold" style="font-size: 80rpx;">129.29</text>
+            </view>
+          </view>
+          <view class="tn-margin-right tn-margin-top-xl tn-color-white">
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">可用本金</text>
+              ￥129.00
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">赠送金额</text>
+              ￥0.29
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">冻结金额</text>
+              ￥0.00
+            </view>
+          </view>
+          
+        </view>
+      </view>
+    
+    </view>
+    
+    <view class="tn-tag-content tn-text-justify tn-margin">
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select">
+        <text class="">30元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">50元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">80元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">100元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">300元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">1000元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">6000元</text>
+      </view>
+    </view>
+
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-alipay tn-color-blue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">支付宝</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-green--dark">
+        <view class="tn-icon-success-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-wechat tn-color-green--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">微信支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-pay-fill tn-color-aquablue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">银行卡支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
+        <view class="tn-padding-xl">
+          <text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text> 
+          <text class="tn-color-gray">点击充值即表示你已同意</text>
+          <text class="tn-color-blue--disabled">《充值协议》</text>
+        </view>
+        <tn-button backgroundColor="#56BD48" padding="40rpx 0" width="100%" shadow>
+          <text class="tn-color-white">立 即 充 值</text>
+        </tn-button>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePay',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+    &:before {
+      content: " ";
+      width: 1rpx;
+      height: 110%;
+      position: absolute;
+      top: 22.5%;
+      left: 0;
+      right: 0;
+      margin: auto;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: 0.7;
+      background-color: #FFFFFF;
+    }
+  }
+  
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(60rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 卡 */
+  .button-vip {
+    width: 100%;
+    height: 240rpx;
+    border-radius: 15rpx;
+    position: relative;
+    z-index: 1;
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: inherit;
+      opacity: 1;
+      transform: scale(1, 1);
+      background-size: 100% 100%;
+    }    
+  }
+  
+  
+  /* 间隔线 start*/
+  .tn-strip-bottom-min {
+    width: 100%;
+    border-bottom: 1rpx solid #F8F9FB;
+  }
+  
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+   
+   /* 选择*/
+  .tag-select{
+    color: #07C160;
+    border: 1rpx solid #07C160;
+    background-color: #07C16010;
+    border-radius: 16rpx;
+  }
+  
+  .tag-select-no{
+    color: #080808;
+    border: 1rpx solid #E6E6E6;
+    background-color: #F9F9F9;
+    border-radius: 16rpx;
+  }
+  
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 45rpx;
+      padding: 20rpx 42rpx;
+      margin: 20rpx 20rpx 5rpx 0rpx;
+      
+      &--prefix {
+        padding-right: 10rpx;
+      }  
+    }
+  }
+  /* 标签内容 end*/
+  
+</style>

templatePage/money/demo3/demo3.vue

@@ -0,0 +1,231 @@
+<template>
+  <view class="template-pay 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>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-margin">
+        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-aquablue">
+          <view class="tn-margin-left tn-margin-top-lg">
+            <view class="tn-color-white tn-padding-top tn-text-center">
+              <text class="tn-icon-rabbit tn-padding-right-sm" style="font-size: 80rpx;margin-left: -10rpx;"></text>
+              <text class="tn-text-bold" style="font-size: 80rpx;">12,929</text>
+            </view>
+            <view class="tn-color-white tn-text-sm" style="padding-top: 65rpx;opacity: 0.6;">充值金额，可用于购买礼物与特权</view>
+          </view>
+        </view>
+      </view>
+    
+    </view>
+    
+    <view class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold">
+      选择充值金额
+    </view>
+    
+    <view class="tn-flex tn-flex-col-center tn-flex-wrap tn-color-white tn-margin-sm">
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">56</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥8.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">118</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥16.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">228</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥30.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">428</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥50.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">1488</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥168.00
+        </view>
+      </view>
+      
+    </view>
+
+
+    <view class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold">
+      或输入充值金额
+    </view>
+    
+    <view class="tn-margin tn-padding-top-xs">
+      <view class="tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;background-color: #FFFFFF30;">
+        <text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-white">￥</text>
+      	<input placeholder="请输入充值金额" name="input" placeholder-style="color:#AAAAAA" style="width: 100%;color: #FFFFFF;"></input>
+      </view>
+    </view>
+    
+
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
+        <view class="tn-padding-xl">
+          <text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text> 
+          <text class="tn-color-gray">点击充值即表示你已同意</text>
+          <text class="tn-color-blue--disabled">《充值协议》</text>
+        </view>
+        <tn-button backgroundColor="#4327DF" padding="40rpx 0" shape="round" width="80%">
+          <text class="tn-color-white">立 即 充 值</text>
+        </tn-button>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePay',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+    &:before {
+      content: " ";
+      width: 1rpx;
+      height: 110%;
+      position: absolute;
+      top: 22.5%;
+      left: 0;
+      right: 0;
+      margin: auto;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: 0.7;
+      background-color: #FFFFFF;
+    }
+  }
+  
+  .template-pay{
+    height: 100vh;
+    background-color: #161324;
+  }
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(60rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 卡 */
+  .button-vip {
+    width: 100%;
+    height: 300rpx;
+    border-radius: 15rpx;
+    position: relative;
+    z-index: 1;
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: inherit;
+      opacity: 1;
+      transform: scale(1, 1);
+      background-size: 100% 100%;
+      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
+    }    
+  }
+  
+  .tag-select{
+    width: 31%;
+    border: 4rpx solid #4327DF;
+    margin: 8rpx 1%;
+    border-radius: 20rpx;
+    background-color: #211E2F50;
+  }
+  .tag-select-no{
+    width: 31%;
+    border: 4rpx solid #211E2F;
+    margin: 8rpx 1%;
+    border-radius: 20rpx;
+    background-color: #211E2F;
+  }
+  
+</style>

templatePage/my/demo1/demo1.vue

@@ -13,18 +13,18 @@
     
     
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/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 class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/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 class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/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 class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
       </view>
     </view>
     
@@ -32,7 +32,7 @@
       <!-- 头像用户信息 -->
       <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-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 170rpx;height: 170rpx;background-size: cover;">
+          <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/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>
@@ -160,7 +160,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-home-smile">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -168,7 +168,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-discover">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
         </view>
         <view class="tn-color-gray">圈子</view>
       </view>
@@ -176,7 +176,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-image-text">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
         </view>
         <view class="tn-color-gray">案例</view>
       </view>
@@ -184,7 +184,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-my">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
         </view>
         <view class="tn-color-black">我的</view>
       </view>
@@ -372,7 +372,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }

templatePage/my/demo2/demo2.vue

@@ -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://resource.tuniaokj.com/images/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     
@@ -48,7 +48,7 @@
             <!-- 图标logo -->
             <view class="logo-pic tn-shadow" >
               <view class="logo-image">
-                <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 class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/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>
@@ -69,7 +69,7 @@
         <view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
           <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
             <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
+              <image class="" src='https://resource.tuniaokj.com/images/my/my17.png' mode='aspectFit'></image>
             </view>
             <view class="tn-text-center">
               <view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
@@ -79,7 +79,7 @@
         <view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
           <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
             <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
-              <image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
+              <image class="" src='https://resource.tuniaokj.com/images/my/my14.png' mode='aspectFit'></image>
             </view>
             <view class="tn-text-center">
               <view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
@@ -169,7 +169,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-home-smile">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -177,7 +177,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-discover">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
         </view>
         <view class="tn-color-gray">圈子</view>
       </view>
@@ -185,7 +185,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-image-text">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
         </view>
         <view class="tn-color-gray">案例</view>
       </view>
@@ -193,7 +193,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-my">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
         </view>
         <view class="tn-color-black">我的</view>
       </view>
@@ -341,7 +341,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }

templatePage/my/demo3/demo3.vue

@@ -11,7 +11,7 @@
     
     
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
     </view>
     
     
@@ -48,7 +48,7 @@
             <!-- 图标logo -->
             <view class="logo-pic tn-shadow" >
               <view class="logo-image">
-                <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 class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/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>
@@ -231,7 +231,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-home-smile">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -239,7 +239,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-discover">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
         </view>
         <view class="tn-color-gray">圈子</view>
       </view>
@@ -247,7 +247,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-image-text">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
         </view>
         <view class="tn-color-gray">福利</view>
       </view>
@@ -255,7 +255,7 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-my">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
         </view>
         <view class="tn-color-black">我的</view>
       </view>
@@ -416,7 +416,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }
@@ -505,7 +505,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+            // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
     
               
           }
@@ -546,7 +546,7 @@
             opacity: 1;
             transform: scale(1, 1);
             background-size: 100% 100%;
-            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
           }
         }
       }

templatePage/my/demo4/demo4.vue

@@ -25,7 +25,7 @@
     
 
     <view class="top-backgroup">
-      <image src='https://tnuiimage.tnkjapp.com/my/my-vip.jpg' mode='widthFix' class='backgroud-image'></image>
+      <image src='https://resource.tuniaokj.com/images/my/my-vip.jpg' mode='widthFix' class='backgroud-image'></image>
     </view>
 
 
@@ -36,7 +36,7 @@
             <!-- 图标logo -->
             <view class="logo-pic tn-shadow">
               <view class="logo-image">
-                <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 100rpx;height: 100rpx;background-size: cover;">
+                <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 100rpx;height: 100rpx;background-size: cover;">
                 </view>
                 <!-- <view class="tn-icon-logo-tuniao" style="font-size: 100rpx;color: #01BEFF;padding: 16rpx 0;"></view> -->
               </view>
@@ -307,8 +307,8 @@
         <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://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-home.png'></image> -->
         </view>
         <view class="tn-color-gray">首页</view>
       </view>
@@ -316,8 +316,8 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-discover tn-color-gray--dark">
           </view>  -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
         </view>
         <view class="tn-color-gray">圈子</view>
       </view>
@@ -336,8 +336,8 @@
             <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">
-                <!-- <image class="" src='https://tnuiimage.tnkjapp.com/login/1/login_top3.png'></image> -->
+                <!-- <image class="" src='https://resource.tuniaokj.com/images/login/1/login_top3.png'></image> -->
-                <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image>
+                <image class="" src='https://resource.tuniaokj.com/images/bless/bless-tiger.png'></image>
               </view>
             </view>
           </view>
@@ -358,8 +358,8 @@
         <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://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
         </view>
         <view class="tn-color-gray">优选</view>
       </view>
@@ -367,8 +367,8 @@
         <view class="bar-icon">
           <!-- <view class="tn-icon-my tn-color-gray--dark">
           </view> -->
-          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
-          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
         </view>
         <view class="tn-color-gray">我的</view>
       </view>
@@ -495,7 +495,7 @@
       align-items: center;
       justify-content: center;
       font-weight: bold;
-      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
       background-size: cover;
     }
   }
@@ -570,7 +570,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
             
         }
       }
@@ -609,7 +609,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }
@@ -745,7 +745,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
         }
       }
     }
@@ -778,7 +778,7 @@
           display: block;
           width: 100%;
           height: 100%;
-          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
           background-size: 100% 100%;
           animation: arc 4s linear infinite;
         }
@@ -849,7 +849,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
 
 
         }
@@ -890,7 +890,7 @@
           opacity: 1;
           transform: scale(1, 1);
           background-size: 100% 100%;
-          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
         }
       }
     }

thirdPage/short-video/short-video.vue

@@ -0,0 +1,456 @@
+<template>
+  <view class="third-page-short-video tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>短视频</tn-nav-bar>
+        
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="container" :style="{height: containerHeight + 'px'}">
+        <tn-custom-swiper
+          class="swiper"
+          :current="current"
+          :duration="250"
+          :circular="!loadingFirst"
+          :vertical="true"
+          @change="handleSwiperChange"
+        >
+          <block v-for="(item, index) in swiperList" :key="index">
+            <tn-custom-swiper-item class="swiper__item">
+              <view class="item__container">
+                
+                
+                <video
+                  v-if="item.loading"
+                  class="item__video"
+                  :id="`video-${index}`"
+                  :src="item.src"
+                  objectFit="cover"
+                  :autoplay="false"
+                  :loop="true"
+                  :controls="false"
+                  :show-progress="false"
+                  :show-fullscreen-btn="false"
+                  :show-center-play-btn="true"
+                  :show-loading="false"
+                  @error="handleVideoError($event, index)"
+                  @loadedmetadata="handleVideoLoadedmetadata($event, index)"
+                ></video>
+                
+                <block v-if="current === index">
+                  <view class="item__content">
+                    <view class="author-name">@{{item.author.name}}</view>
+                    <view class="desc">{{item.desc}}</view>
+                  </view>
+                  
+                  <view class="item__operation">
+                    <view class="avatar">
+                      <image class="image" :src="item.author.avatar"></image>
+                    </view>
+                    <view class="options like" @tap="clickLike(index)">
+                      <view class="icon" :class="[item.like.flag ? 'icon__select tn-icon-like-fill' : 'tn-icon-like']"></view>
+                      <view class="text">{{item.like.count}}</view>
+                    </view>
+                    <view class="options message">
+                      <view class="icon tn-icon-comment"></view>
+                      <view class="text">{{item.message}}</view>
+                    </view>
+                    <view class="options star" @tap="clickStar(index)">
+                      <view class="icon" :class="[item.star.flag ? 'icon__select tn-icon-star-fill' : 'tn-icon-star']"></view>
+                      <view class="text">{{item.star.count}}</view>
+                    </view>
+                    <view class="options share">
+                      <view class="icon tn-icon-share-triangle"></view>
+                      <view class="text">{{item.share}}</view>
+                    </view>
+                  </view>
+                </block>
+              </view>
+            </tn-custom-swiper-item>
+          </block>
+        </tn-custom-swiper>
+        
+        <!-- <video
+          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+        ></video>
+        <video
+          src="http://vjs.zencdn.net/v/oceans.mp4"
+        ></video> -->
+      </view>
+        
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'ThirdPageShortVideo',
+    data() {
+      return {
+        containerHeight: 0,
+        current: 0,
+        videoSrc: ['http://vjs.zencdn.net/v/oceans.mp4','http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'],
+        h5FirstPlay: true,
+        loadingFirst: true,
+        swiperList: [
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。基于图鸟UI开发的第三方插件，图鸟加油，可以的。基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          }
+        ],
+        // 存放当前缓冲视频是否加载成功
+        loadingVideoFlag: []
+      }
+    },
+    computed: {
+      listLength() {
+        return this.swiperList.length
+      }
+    },
+    onLoad() {
+      this.getContainerHeight()
+      this.initData()
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.loadVideo()
+      })
+    },
+    methods: {
+      // 点击喜欢按钮
+      clickLike(index) {
+        let item = this.swiperList[index]
+        item.like.flag = !item.like.flag
+        this.$set(this.swiperList, index, item)
+      },
+      // 点击收藏按钮
+      clickStar(index) {
+        let item = this.swiperList[index]
+        item.star.flag = !item.star.flag
+        this.$set(this.swiperList, index, item)
+      },
+      // 获取可用区域的高度
+      getContainerHeight() {
+        const systemInfo = uni.getSystemInfoSync()
+        this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
+      },
+      // 初始化数据
+      initData() {
+        this.loadingVideoFlag = Array(this.listLength).fill(false)
+      },
+      // 加载以当前current为基准的的前后各一个视频
+      loadVideo() {
+        // 获取当前轮播的index
+        const index = this.current
+        let prevIndex = index - 1 < 0 ? this.listLength - 1 : index - 1
+        let nextIndex = index + 1 > this.listLength - 1 ? 0 : index + 1
+        let currentItem = this.swiperList[index]
+        let prevItem = this.swiperList[prevIndex]
+        let nextItem = this.swiperList[nextIndex]
+        
+        if (!currentItem.loading) {
+          currentItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
+          currentItem.loading = true
+          this.$set(this.swiperList, index, currentItem)
+        }
+        if (!prevItem.loading) {
+          prevItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
+          prevItem.loading = true
+          this.$set(this.swiperList, prevIndex, prevItem)
+        }
+        if (!nextItem.loading) {
+          nextItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
+          nextItem.loading = true
+          this.$set(this.swiperList, nextIndex, nextItem)
+        }
+        
+        // 如果为非当前和前后的item，则进行重置
+        for (let i = 0; i < this.listLength; i++) {
+          if (![index, prevIndex, nextIndex].includes(i)) {
+            let tempItem = this.swiperList[i]
+            tempItem.loading = false
+            tempItem.src = ''
+            this.$set(this.swiperList, i, tempItem)
+            // 重置视频加载标记位
+            this.loadingVideoFlag[i] = false
+          }
+        }
+        
+        // 开始播放当前视频
+        this.playCurrentVideo()
+      },
+      // 开始播放当前视频
+      playCurrentVideo() {
+        // 获取当前轮播的index
+        const index = this.current
+        // 开始播放当前的视频，并且停止其他视频
+        setTimeout(() => {
+          if (!this.loadingVideoFlag[index]) {
+            this.$tn.message.toast('播放失败，请看其他视频')
+            return
+          }
+        }, 800)
+        for (let i = 0; i < this.listLength; i++) {
+          const videoContext = uni.createVideoContext(`video-${i}`, this)
+          if (i === index) {
+            // #ifdef H5
+            if (!this.h5FirstPlay) {
+              videoContext.play()
+            }
+            // #endif
+            // #ifndef H5
+            videoContext.play()
+            // #endif
+            
+          } else {
+            // #ifdef MP-WEIXIN
+            videoContext.stop()
+            // #endif
+            // #ifndef MP-WEIXIN
+            videoContext.pause()
+            // #endif
+          }
+        }
+      },
+      // 处理轮播的切换
+      handleSwiperChange(e) {
+        // console.log(e);
+        this.current = e.current
+        this.loadVideo()
+        // #ifdef H5
+        if (this.h5FirstPlay) {
+          this.h5FirstPlay = false
+        }
+        // #endif
+        
+        // 当滑动到第3个并且是第一次滑动到该位置
+        if (this.loadingFirst && e.current === 2) {
+          this.loadingFirst = false
+        }
+      },
+      // 视频出现元数据时触发
+      handleVideoLoadedmetadata(e, index) {
+        // console.log(index, e);
+        if (!this.loadingVideoFlag[index] && this.current === index) {
+          console.log('loadmetadata');
+          // #ifdef H5
+          if (!this.h5FirstPlay) {
+            const videoContext = uni.createVideoContext(`video-${index}`, this)
+            videoContext.play()
+          }
+          // #endif
+          // #ifndef H5
+          const videoContext = uni.createVideoContext(`video-${index}`, this)
+          videoContext.play()
+          // #endif
+        }
+        this.loadingVideoFlag[index] = true
+      },
+      // 视频加载失败时触发
+      handleVideoError(e, index) {
+        // console.log(index, e);
+        this.loadingVideoFlag[index] = false
+        if (index === this.current) {
+          this.$tn.message.toast('播放失败，请看其他视频')
+        }
+      }
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .swiper {
+    width: 100%;
+    height: 100%;
+    display: block;
+    
+    &__item {
+      background-color: #000000;
+      
+      .item {
+        &__container {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+        
+        &__video {
+          width: 100%;
+          height: 100%;
+        }
+        
+        &__content {
+          width: 70%;
+          color: #FFFFFF;
+          position: absolute;
+          bottom: 30rpx;
+          left: 30rpx;
+          z-index: 1;
+          transition-duration: 0s;
+          
+          .author-name {
+            font-size: 38rpx;
+            font-weight: bold;
+            margin-bottom: 10rpx;
+          }
+          .desc {
+            width: 100%;
+            line-height: 1.3em;
+            white-space: normal !important;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            -webkit-line-clamp: 5;
+          }
+        }
+        
+        &__operation {
+          color: #FFFFFF;
+          position: absolute;
+          right: 30rpx;
+          bottom: 120rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          z-index: 1;
+          transition-duration: 0s;
+          
+          .avatar {
+            width: 80rpx;
+            height: 80rpx;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 6rpx solid #FFFFFF;
+            margin-bottom: 20rpx;
+            
+            .image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          
+          .icon {
+            font-size: 60rpx;
+            
+            &__select {
+              color: #FFCA28;
+              animation: select-keyframes 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            }
+          }
+          
+          .options {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 10rpx;
+            
+            .text {
+              font-size: 24rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  @keyframes select-keyframes {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+</style>

tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue

@@ -14,7 +14,7 @@
       <!-- 提示信息 -->
       <view
         v-if="tips.text"
-        class="tn-action-sheet__tips tn-border-solid-bottom"
+        class="tn-action-sheet__tips border-solid-bottom"
         :style="[tipsStyle]"
       >
         {{tips.text}}
@@ -23,7 +23,7 @@
       <block v-for="(item, index) in list" :key="index">
         <view
           class="tn-action-sheet__item tn-text-ellipsis"
-          :class="[ index < list.length - 1 ? 'tn-border-solid-bottom' : '']"
+          :class="[ index < list.length - 1 ? 'border-solid-bottom' : '']"
           :style="[itemStyle(index)]"
           hover-class="tn-hover-class"
           :hover-stay-time="150"
@@ -166,6 +166,10 @@
 
 <style lang="scss" scoped>
   
+  .border-solid-bottom{
+    border-bottom: 1rpx solid #F8F7F8;
+  }
+  
   .tn-action-sheet {
     &__tips {
       font-size: 26rpx;
@@ -195,7 +199,7 @@
       
       &--gab {
         height: 12rpx;
-        background-color: #eaeaec;
+        background-color: #F8F7F8;
       }
     }
   }

tuniao-ui/components/tn-avatar/tn-avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     class="tn-avatar-class tn-avatar"
-    :class="[backgroundColorClass,avatarClass]"
+    :class="[backgroundColorClass,fontColorClass,avatarClass]"
     :style="[avatarStyle]"
     @tap="click"
   >
@@ -177,6 +177,14 @@
           style.backgroundImage = `url(${this.src})`
         }
 
+        if(this.fontColorStyle) {
+			style.color = this.fontColorStyle
+		}
+		
+		if(this.fontSizeStyle) {
+			style.fontSize = this.fontSizeStyle
+		}
+        
         if (this.border) {
           style.border = `${this.borderSize}rpx solid ${this.borderColor}`
         }

tuniao-ui/components/tn-button/tn-button.vue

@@ -1,302 +1,348 @@
 <template>
-  <button
+	<button class="tn-btn-class tn-btn" :class="[
-    class="tn-btn-class tn-btn"
-    :class="[
       buttonClass,
       backgroundColorClass,
       fontColorClass
-    ]"
+    ]" :style="[buttonStyle]" hover-class="tn-hover" :loading="loading" :disabled="disabled" :form-type="formType"
-    :style="[buttonStyle]"
+		:open-type="openType" @getuserinfo="handleGetUserInfo" @getphonenumber="handleGetPhoneNumber"
-    hover-class="tn-hover"
+		@contact="handleContact" @error="handleError" @tap="handleClick">
-    :loading="loading"
+		<slot></slot>
-    :disabled="disabled"
+	</button>
-    :form-type="formType"
-    :open-type="openType"
-    @getuserinfo="handleGetUserInfo"
-    @getphonenumber="handleGetPhoneNumber"
-    @contact="handleContact"
-    @error="handleError"
-    @tap="handleClick"
-  >
-    <slot></slot>
-  </button>
 </template>
 
 <script>
-  import componentsColorMixin from '../../libs/mixin/components_color.js'
+	import componentsColorMixin from '../../libs/mixin/components_color.js'
-  export default {
+	import {
-    mixins: [componentsColorMixin],
+		debounceFun,
-    name: "tn-button",
+		throttleFun
-    // 解决再微信小程序种，自定义按钮无法触发bindsubmit
+	} from '../../libs/function/applyEven.js'
-    behaviors: ['wx://form-field-button'],
+	let spanTime = 200;
-    props: {
+	export default {
-      // 按钮索引，用于区分多个按钮
+		mixins: [componentsColorMixin],
-      index: {
+		name: "tn-button",
-        type: [Number, String],
+		// 解决再微信小程序种，自定义按钮无法触发bindsubmit
-        default: 0
+		behaviors: ['wx://form-field-button'],
-      },
+		props: {
-      // 按钮形状 default 默认 round 圆角 icon 图标按钮
+			// 按钮索引，用于区分多个按钮
-      shape: {
+			index: {
-        type: String,
+				type: [Number, String],
-        default: 'default'
+				default: 0
-      },
+			},
-      // 是否加阴影
+			// 按钮形状 default 默认 round 圆角 icon 图标按钮
-      shadow: {
+			shape: {
-        type: Boolean,
+				type: String,
-        default: false
+				default: 'default'
-      },
+			},
-      // 宽度 rpx或%
+			// 是否加阴影
-      width: {
+			shadow: {
-        type: String,
+				type: Boolean,
-        default: 'auto'
+				default: false
-      },
+			},
-      // 高度 rpx或%
+			// 宽度 rpx或%
-      height: {
+			width: {
-        type: String,
+				type: String,
-        default: ''
+				default: 'auto'
-      },
+			},
-      // 按钮的尺寸 sm lg
+			// 高度 rpx或%
-      size: {
+			height: {
-        type: String,
+				type: String,
-        default: ''
+				default: ''
-      },
+			},
-      // 字体是否加粗
+			// 按钮的尺寸 sm lg
-      fontBold: {
+			size: {
-        type: Boolean,
+				type: String,
-        default: false
+				default: ''
-      },
+			},
-      padding: {
+			// 字体是否加粗
-        type: String,
+			fontBold: {
-        default: '0 30rpx'
+				type: Boolean,
-      },
+				default: false
-      // 外边距 与css的margin参数用法相同
+			},
-      margin: {
+			padding: {
-        type: String,
+				type: String,
-        default: ''
+				default: '0 30rpx'
-      },
+			},
-      // 是否镂空
+			// 外边距 与css的margin参数用法相同
-      plain: {
+			margin: {
-        type: Boolean,
+				type: String,
-        default: false
+				default: ''
-      },
+			},
-      // 当plain=true时，是否显示边框
+			// 是否镂空
-      border: {
+			plain: {
-        type: Boolean,
+				type: Boolean,
-        default: true
+				default: false
-      },
+			},
-      // 当plain=true时，是否加粗显示边框
+			// 当plain=true时，是否显示边框
-      borderBold: {
+			border: {
-        type: Boolean,
+				type: Boolean,
-        default: false
+				default: true
-      },
+			},
-      // 是否禁用
+			// 当plain=true时，是否加粗显示边框
-      disabled: {
+			borderBold: {
-        type: Boolean,
+				type: Boolean,
-        default: false
+				default: false
-      },
+			},
-      // 是否显示加载图标
+			// 是否禁用
-      loading: {
+			disabled: {
-        type: Boolean,
+				type: Boolean,
-        default: false
+				default: false
-      },
+			},
-      // 触发form表单的事件类型
+			// 是否显示加载图标
-      formType: {
+			loading: {
-        type: String,
+				type: Boolean,
-        default: ''
+				default: false
-      },
+			},
-      // 开放能力
+			// 触发form表单的事件类型
-      openType: {
+			formType: {
-        type: String,
+				type: String,
-        default: ''
+				default: ''
-      },
+			},
-      // 是否阻止重复点击(默认间隔是200ms)
+			// 开放能力
-      blockRepeatClick: {
+			openType: {
-        type: Boolean,
+				type: String,
-        default: false
+				default: ''
-      }
+			},
-    },
+			// 是否阻止重复点击(默认间隔是200ms)
-    computed: {
+			blockRepeatClick: {
-      // 根据不同的参数动态生成class
+				type: Boolean,
-      buttonClass() {
+				default: false
-        let clazz = ''
+			},
-        // 按钮形状
+			//场景：（如果开启blockRepeatClick，这里无效）none ： 不开启防抖节流模式，debounce ：防抖模式 throttle：节流模式
-        switch (this.shape) {
+			scene:{
-          case 'icon':
+				type: String,
-          case 'round':
+				default: 'none'
-            clazz += ' tn-round'
+			},
-            break
+			// 防抖节流间隔时间（毫秒）
-        }
+			blockTime:{
+				type: Number,
+				default: 200
+			}
+		},
+		computed: {
+			// 根据不同的参数动态生成class
+			buttonClass() {
+				let clazz = ''
+				// 按钮形状
+				switch (this.shape) {
+					case 'icon':
+					case 'round':
+						clazz += ' tn-round'
+						break
+				}
 
-        // 阴影
+				// 阴影
-        if (this.shadow) {
+				if (this.shadow) {
-          if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
+					if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
-            const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+						const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
-            clazz += ` tn-shadow-${color}`
+						clazz += ` tn-shadow-${color}`
-          } else {
+					} else {
-            clazz += ' tn-shadow-blur'
+						clazz += ' tn-shadow-blur'
-          }
+					}
-        }
+				}
 
-        // 字体加粗
+				// 字体加粗
-        if (this.fontBold) {
+				if (this.fontBold) {
-          clazz += ' tn-text-bold'
+					clazz += ' tn-text-bold'
-        }
+				}
 
-        // 设置为镂空并且设置镂空便可才进行设置
+				// 设置为镂空并且设置镂空便可才进行设置
-        if (this.plain) {
+				if (this.plain) {
-          clazz += ' tn-btn--plain'
+					clazz += ' tn-btn--plain'
-          if (this.border) {
+					if (this.border) {
-            clazz += ' tn-border-solid'
+						clazz += ' tn-border-solid'
-            if (this.borderBold) {
+						if (this.borderBold) {
-              clazz += ' tn-bold-border'
+							clazz += ' tn-bold-border'
-            }
+						}
-            if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
+						if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
-              const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+							const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
-              clazz += ` tn-border-${color}`
+							clazz += ` tn-border-${color}`
-            }
+						}
-          }
+					}
-        }
+				}
 
-        return clazz
+				return clazz
-      },
+			},
-      // 按钮的样式
+			// 按钮的样式
-      buttonStyle() {
+			buttonStyle() {
-        let style = {}
+				let style = {}
-        switch(this.size) {
+				switch (this.size) {
-          case 'sm':
+					case 'sm':
-            style.padding = '0 20rpx'
+						style.padding = '0 20rpx'
-            style.fontSize = '22rpx'
+						style.fontSize = '22rpx'
-            style.height = this.height || '48rpx'
+						style.height = this.height || '48rpx'
-            break
+						break
-          case 'lg':
+					case 'lg':
-            style.padding = '0 40rpx'
+						style.padding = '0 40rpx'
-            style.fontSize = '32rpx'
+						style.fontSize = '32rpx'
-            style.height = this.height || '80rpx'
+						style.height = this.height || '80rpx'
-            break
+						break
-          default :
+					default:
-            style.padding = '0 30rpx'
+						style.padding = '0 30rpx'
-            style.fontSize = '28rpx'
+						style.fontSize = '28rpx'
-            style.height = this.height || '64rpx'
+						style.height = this.height || '64rpx'
-        }
+				}
 
-        // 是否手动设置了内边距
+				// 是否手动设置了内边距
-        if (this.padding) {
+				if (this.padding) {
-          style.padding = this.padding
+					style.padding = this.padding
-        }
+				}
 
-        // 是否手动设置外边距
+				// 是否手动设置外边距
-        if (this.margin) {
+				if (this.margin) {
-          style.margin = this.margin
+					style.margin = this.margin
-        }
+				}
 
-        // 是否手动设置了字体大小
+				// 是否手动设置了字体大小
-        if (this.fontSize) {
+				if (this.fontSize) {
-          style.fontSize = this.fontSize + this.fontUnit
+					style.fontSize = this.fontSize + this.fontUnit
-        }
+				}
-        style.width = this.shape === 'icon' ? style.height : this.width
+				style.width = this.shape === 'icon' ? style.height : this.width
-        style.padding = this.shape === 'icon' ? '0' : style.padding
+				style.padding = this.shape === 'icon' ? '0' : style.padding
 
-        if (this.fontColorStyle) {
+				if (this.fontColorStyle) {
-          style.color = this.fontColorStyle
+					style.color = this.fontColorStyle
-        }
+				}
 
-        if (!this.backgroundColorClass) {
+				if (!this.backgroundColorClass) {
-          if (this.plain) {
+					if (this.plain) {
-            style.borderColor = this.backgroundColorStyle || '#080808'
+						style.borderColor = this.backgroundColorStyle || '#080808'
-          } else {
+					} else {
-            style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
+						style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
-          }
+					}
-        }
+				}
 
-        // 设置阴影
+				// 设置阴影
-        if (this.shadow && !this.backgroundColorClass) {
+				if (this.shadow && !this.backgroundColorClass) {
-          if (this.backgroundColorStyle.indexOf('#') != -1) {
+					if (this.backgroundColorStyle.indexOf('#') != -1) {
-            style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
+						style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
-          } else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) {
+					} else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf(
-            style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
+						'rgba') != -1 || !this.backgroundColorStyle) {
-          }
+						style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
+					}
 
-        }
+				}
 
-        return style
+				return style
-      },
+			},
-    },
+		},
-    data() {
+		data() {
-      return {
+			return {
-        // 上次点击的时间
+
-        clickTime: 0,
+			}
-        // 两次点击防抖的间隔时间
+		},
-        clickIntervalTime: 200
+		watch:{
-      }
+			//支持动态修改时间，但是这里是没有做撤销上一次的方法，毕竟这种场景非常少
-    },
+			//这里只是防止用户使用时复用了组件，有场景时长要求二次变动，而做的优化
-    methods: {
+			blockTime:{
-      // 按钮点击事件
+				handler(newVal,oldVal){
-      handleClick() {
+				    this.initScene();
-        if (this.disabled) {
+				}
-          return
+			},
-        }
+		},
-        if (this.blockRepeatClick) {
+		mounted() {
-          const nowTime = new Date().getTime()
+			this.initScene()
-          if (nowTime - this.clickTime <= this.clickIntervalTime) {
+		},
-            return
+		methods: {
-          }
+			initScene(){
-          this.clickTime = nowTime
+				// 动态传入blockTime，需要重新初始化,参数
-          setTimeout(() => {
+				//防抖模式
-            this.clickTime = 0
+				this.debounceClick=debounceFun(function() {
-          }, this.clickIntervalTime)
+					this.emitClick();
-        }
+				}, this.blockTime);
-        this.$emit('click', {
+				//节流模式
-          index: Number(this.index)
+				this.throttleClick=throttleFun(function() {
-        })
+					this.emitClick();
-        // 兼容tap事件
+				}, this.blockTime);	
-        this.$emit('tap', {
+			},
-          index: Number(this.index)
+			//防抖模式
-        })
+			debounceClick:debounceFun(function() {
-      },
+				this.emitClick();
-      handleGetUserInfo({ detail = {} } = {}) {
+			}, spanTime),
-      	this.$emit('getuserinfo', detail);
+			//节流模式
-      },
+			throttleClick:throttleFun(function() {
-      handleContact({ detail = {} } = {}) {
+				this.emitClick();
-      	this.$emit('contact', detail);
+			}, spanTime),
-      },
+			emitClick() {
-      handleGetPhoneNumber({ detail = {} } = {}) {
+				//触发事件
-      	this.$emit('getphonenumber', detail);
+				this.$emit('click', {
-      },
+					index: Number(this.index)
-      handleError({ detail = {} } = {}) {
+				})
-      	this.$emit('error', detail);
+				// 兼容tap事件
-      },
+				this.$emit('tap', {
+					index: Number(this.index)
+				})
+			},
+			// 按钮点击事件
+			handleClick() {
+				if (this.disabled) {
+					return
+				}
+				//兼容旧的
+				if (this.blockRepeatClick) {
+					this.throttleClick();
+					return;
+				}
+				//普通模式，触发多少次就回调多少次
+				if(this.scene === 'none'){
+					this.emitClick();
+				}else if(this.scene == 'debounce'){
+					//防抖模式
+					this.debounceClick();
+				}else{
+					//节流模式
+					this.throttleClick();
+				}
+			},
+			handleGetUserInfo({
+				detail = {}
+			} = {}) {
+				this.$emit('getuserinfo', detail);
+			},
+			handleContact({
+				detail = {}
+			} = {}) {
+				this.$emit('contact', detail);
+			},
+			handleGetPhoneNumber({
+				detail = {}
+			} = {}) {
+				this.$emit('getphonenumber', detail);
+			},
+			handleError({
+				detail = {}
+			} = {}) {
+				this.$emit('error', detail);
+			},
 
 
-    }
+		}
-  }
+	}
 </script>
 
 <style lang="scss" scoped>
+	.tn-btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		line-height: 1;
+		text-align: center;
+		text-decoration: none;
+		overflow: visible;
+		transform: translate(0rpx, 0rpx);
+		// background-color: $tn-mai
+		border-radius: 12rpx;
+		// color: $tn-font-color;
+		margin: 0;
 
-  .tn-btn {
+		&--plain {
-    position: relative;
+			background-color: transparent !important;
-    display: inline-flex;
+			background-image: none;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    line-height: 1;
-    text-align: center;
-    text-decoration: none;
-    overflow: visible;
-    transform: translate(0rpx, 0rpx);
-    // background-color: $tn-mai
-    border-radius: 12rpx;
-    // color: $tn-font-color;
-    margin: 0;
-    
-    &--plain {
-      background-color: transparent !important;
-      background-image: none;
-      
-      &.tn-round {
-        border-radius: 1000rpx !important;
-      }
-    }
-  }
 
+			&.tn-round {
+				border-radius: 1000rpx !important;
+			}
+		}
+	}
 </style>

tuniao-ui/components/tn-calendar/tn-calendar.vue

@@ -248,6 +248,7 @@
         return (index, type) => {
           let color = type === 'bg' ? '' : this.color
           let day = index + 1
+
           let date = `${this.year}-${this.month}-${day}`
           let timestamp = new Date(date.replace(/\-/g,'/')).getTime()
           let start = this.startDate.replace(/\-/g,'/')
@@ -487,8 +488,9 @@
         let daysArr = days.map((item) => {
           let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : ''
           let color = this.showLunar ? this.lunarColor : this.activeColor
+          let date = `${this.year}-${this.month}-${item}`
           if (
-            (this.mode === 'date' && this.day == item) || 
+            (this.mode === 'date'  && date == this.activeDate) ||
             (this.mode === 'range' && (this.startDay == item || this.endDay == item))
           ) {
             color = this.activeColor
@@ -534,7 +536,9 @@
       },
       // 关闭窗口
       close() {
-        this.$emit('input', false)
+        this.$emit('input', false);
+        //传递事件
+        this.$emit('close');
       }
     }
   }

tuniao-ui/components/tn-count-down/tn-count-down.vue

@@ -9,18 +9,18 @@
       <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
         {{ d }}
       </view>
+	  <view
+	    class="tn-countdown__separator"
+	    :style="{
+	      fontSize: separatorSize + 'rpx',
+	      color: separatorColor,
+	      paddingBottom: separator === 'en' ? '4rpx' : 0
+	    }"
+	  >
+	    {{ separator === 'en' ? (showHours || showMinutes || showSeconds ? ':' : '')  : '天'}}
+	  </view>
     </view>
-    <view 
+    
-      v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
-      class="tn-countdown__separator"
-      :style="{
-        fontSize: separatorSize + 'rpx',
-        color: separatorColor,
-        paddingBottom: separator === 'en' ? '4rpx' : 0
-      }"
-    >
-      {{ separator === 'en' ? ':' : '天'}}
-    </view>
     
     <view
       v-if="showHours"
@@ -31,18 +31,19 @@
       <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
         {{ h }}
       </view>
+	  <view
+	    v-if="showMinutes"
+	    class="tn-countdown__separator"
+	    :style="{
+	      fontSize: separatorSize + 'rpx',
+	      color: separatorColor,
+	      paddingBottom: separator === 'en' ? '4rpx' : 0
+	    }"
+	  >
+	    {{ separator === 'en' ? ':' : '时'}}
+	  </view>
     </view>
-    <view 
+    
-      v-if="showMinutes"
-      class="tn-countdown__separator"
-      :style="{
-        fontSize: separatorSize + 'rpx',
-        color: separatorColor,
-        paddingBottom: separator === 'en' ? '4rpx' : 0
-      }"
-    >
-      {{ separator === 'en' ? ':' : '时'}}
-    </view>
     
     <view
       v-if="showMinutes"
@@ -53,40 +54,43 @@
       <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
         {{ m }}
       </view>
-    </view>
+		  <view
-    <view 
+			v-if="showSeconds"
-      v-if="showSeconds"
+			class="tn-countdown__separator"
-      class="tn-countdown__separator"
+			:style="{
-      :style="{
+			  fontSize: separatorSize + 'rpx',
-        fontSize: separatorSize + 'rpx',
+			  color: separatorColor,
-        color: separatorColor,
+			  paddingBottom: separator === 'en' ? '4rpx' : 0
-        paddingBottom: separator === 'en' ? '4rpx' : 0
+			}"
-      }"
+		  >
-    >
+			{{ separator === 'en' ? ':' : '分'}}
-      {{ separator === 'en' ? ':' : '分'}}
+		</view>
     </view>
    
-    <view
+	  
+	  <view
+	    class="tn-countdown__item"
+	    :class="[backgroundColorClass]"
+	    :style="[itemStyle]"
       v-if="showSeconds"
-      class="tn-countdown__item"
+	  >
-      :class="[backgroundColorClass]"
+	    <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
-      :style="[itemStyle]"
+	      {{ s }}
-    >
+	    </view>
-      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+			<view
-        {{ s }}
+			  class="tn-countdown__separator"
-      </view>
+			  :style="{
-    </view>
+				fontSize: separatorSize + 'rpx',
-    <view 
+				color: separatorColor,
-      v-if="showSeconds && separator === 'cn'"
+				paddingBottom: separator === 'en' ? '4rpx' : 0
-      class="tn-countdown__separator"
+			  }"
-      :style="{
+			>
-        fontSize: separatorSize + 'rpx',
+			  {{ separator === 'en' ? '' : '秒'}}
-        color: separatorColor,
+			</view>
-        paddingBottom: separator === 'en' ? '4rpx' : 0
-      }"
-    >
-      秒
     </view>
+    
+   
+    
   </view>
 </template>
 

tuniao-ui/components/tn-cropper/index.wxs

@@ -46,8 +46,8 @@ function propChange(prop, oldProp, ownerInstance, instance) {
       cropper.canvasHeight = +dataset.height
       cropper.imgTop = +dataset.windowheight / 2
       cropper.imgLeft = +dataset.windowwidth / 2
-      cropper.imgWidth = +dataset.imgwidth
+      cropper.imgWidth = +dataset.width
-      cropper.imgHeight = +dataset.imgheight
+      cropper.imgHeight = +dataset.height
       cropper.windowHeight = +dataset.windowheight
       cropper.windowWidth = +dataset.windowwidth
       cropper.init = false

tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue

@@ -7,6 +7,7 @@
       }"
       @mouseenter="mouseEnterArea"
       @mouseleave="mouseLeaveArea"
+      v-if="show"
     >
       <block
         v-for="(item, index) in lists"
@@ -298,7 +299,10 @@
           y: 0
         },
         timer: null,
-        dragging: false
+        dragging: false,
+        show:true,
+        h5LongPress:false,
+        h5StarDragging:false
       }
     },
     watch: {
@@ -327,7 +331,11 @@
     mounted() {
       this.$nextTick(() => {
         this.updateDragInfo()
-      })
+      });
+      // #ifdef H5
+      const userAgent = navigator.userAgent.toLowerCase();
+      this.h5LongPress = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent);
+      // #endif
     },
     methods: {
       // 清除列表
@@ -551,22 +559,25 @@
         if (index >= 0 && index < this.lists.length) {
           let currentItemIndex = this.lists[index].index
           this.lists.splice(index, 1)
-          // 重新排列列表信息
+          this.show = false;
-          for (let item of this.lists) {
+          setTimeout(()=>{
-            if (item.index > currentItemIndex) {
+            this.show = true;
-              item.index -= 1
+            // 重新排列列表信息
-              item.x = item.positionX * this.baseData.widthPx
+            for (let item of this.lists) {
-              item.y = item.positionY * this.baseData.heightPx
+              if (item.index > currentItemIndex) {
-              item.positionX = item.index % this.baseData.columns
+                item.index -= 1
-              item.positionY = Math.floor(item.index / this.baseData.columns)
-              this.$nextTick(() => {
                 item.x = item.positionX * this.baseData.widthPx
                 item.y = item.positionY * this.baseData.heightPx
-              })
+                item.positionX = item.index % this.baseData.columns
+                item.positionY = Math.floor(item.index / this.baseData.columns)
+                this.$nextTick(() => {
+                  item.x = item.positionX * this.baseData.widthPx
+                  item.y = item.positionY * this.baseData.heightPx
+                })
+              }
             }
-          }
+            this.updateAddBtnPositioin()
-          
+          },50)
-          this.updateAddBtnPositioin()
         }
       },
       // 预览图片
@@ -684,8 +695,10 @@
       updateAddBtnPositioin() {
         if (this.lists.length >= this.maxCount) return
         
-        this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
+        setTimeout(()=>{
-        this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
+          this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
+          this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
+        },50);
       },
       // 获取排序后数据
       sortList() {
@@ -731,6 +744,11 @@
         // #endif
       },
       movableLongPress(item) {
+        // #ifdef H5
+          //h5必须长按后才允许拖拽
+          this.h5StarDragging = true;
+          this.movableStart(item);
+        // #endif
         // #ifndef H5
           uni.vibrateShort()
           // console.log("LongPress--------------------------------------------------------------");
@@ -797,7 +815,10 @@
         }
       },
       movableStart (item) {
-        // console.log("movableStart");
+        if (this.h5LongPress && !this.h5StarDragging){
+          return
+        }
+        //console.log("movableStart");
         this.lists.forEach(item => {
           item.zIndex = 1
           // #ifdef H5
@@ -818,8 +839,9 @@
         // #endif
       },
       movableEnd (item) {
+        this.h5StarDragging = false;
         if (!this.dragging) return
-        // console.log("movableEnd");
+        //console.log("movableEnd");
         const index = this.lists.findIndex(obj => {
           return obj.id === item.id
         })
@@ -885,6 +907,9 @@
   
   .tn-image-upload {
     position: relative;
+    /*  #ifdef H5 */
+    -webkit-touch-callout:none;
+    /* #endif */
     
     &__movable-area {
       width: 100%;

tuniao-ui/components/tn-input/tn-input.vue

@@ -12,6 +12,12 @@
     }"
     @tap.stop="inputClick"
   >
+    <view
+        v-if="showLeftIcon"
+        class="tn-input__left-icon__item tn-input__left-icon__clear"
+    >
+      <tn-button shape="icon" :scene="scene" :block-time="blockTime" @click="leftIconClick"><view class="icon" :class="[`tn-icon-${leftIcon}`]"></view></tn-button>
+    </view>
     <textarea
       v-if="type === 'textarea'"
       class="tn-input__input tn-input__textarea"
@@ -33,28 +39,39 @@
       @focus="onFocus"
       @confirm="onConfirm"
     />
-    <input
+	<view v-else style="width:100%">
-      v-else
+		
-      class="tn-input__input"
+		<view
-      :type="type === 'password' ? 'text' : type"
+		 v-if="type === 'select'"
-      :style="[inputStyle]"
+		 class="tn-input__text"
-      :value="defaultValue"
+		 > 
-      :password="type === 'password' && !showPassword"
+      <text :class="defaultValue == undefined || defaultValue == '' ? 'tn-input__placeholder':''">{{defaultValue == undefined || defaultValue == '' ? placeholder : defaultValue }}</text>
-      :placeholder="placeholder"
+		 </view>
-      :placeholderStyle="placeholderStyle"
+		 
-      :disabled="disabled || type === 'select'"
+		 <input
-      :maxlength="maxLength"
+		   v-else
-      :focus="focus"
+		   class="tn-input__input"
-      :confirmType="confirmType"
+		   :type="type === 'password' ? 'text' : type"
-      :selectionStart="elSelectionStart"
+		   :style="[inputStyle]"
-      :selectionEnd="elSelectionEnd"
+		   :value="defaultValue"
-      :cursorSpacing="cursorSpacing"
+		   :password="type === 'password' && !showPassword"
-      :showConfirmBar="showConfirmBar"
+		   :placeholder="placeholder"
-      @input="handleInput"
+		   :placeholderStyle="placeholderStyle"
-      @blur="handleBlur"
+		   :disabled="disabled || type === 'select'"
-      @focus="onFocus"
+		   :maxlength="maxLength"
-      @confirm="onConfirm"
+		   :focus="focus"
-    />
+		   :confirmType="confirmType"
+		   :selectionStart="elSelectionStart"
+		   :selectionEnd="elSelectionEnd"
+		   :cursorSpacing="cursorSpacing"
+		   :showConfirmBar="showConfirmBar"
+		   @input="handleInput"
+		   @blur="handleBlur"
+		   @focus="onFocus"
+		   @confirm="onConfirm"
+		 />
+	</view>
+    
     
     <!-- 右边的icon -->
     <view class="tn-input__right-icon tn-flex tn-flex-col-center">
@@ -70,7 +87,7 @@
         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-${rightIcon}`]"></view>
+        <tn-button shape="icon" :scene="scene" :block-time="blockTime" @click="rightIconClick"><view class="icon" :class="[`tn-icon-${rightIcon}`]"></view></tn-button>
       </view>
       <!-- 显示密码按钮 -->
       <view
@@ -97,6 +114,9 @@
 
 <script>
   import Emitter from '../../libs/utils/emitter.js'
+  import {
+    debounceFun
+  } from '../../libs/function/applyEven.js'
 
   export default {
     mixins: [Emitter],
@@ -106,6 +126,7 @@
         type: [String, Number],
         default: ''
       },
+	  
       // 输入框的类型
       type: {
         type: String,
@@ -227,6 +248,26 @@
       rightIcon: {
         type: String,
         default: ''
+      },
+      // 是否在输入框内最左边显示图标
+      showLeftIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 最左边图标的名称
+      leftIcon: {
+        type: String,
+        default: ''
+      },
+      //场景：debounce ：防抖模式 throttle：节流模式
+      scene:{
+        type: String,
+        default: 'debounce'
+      },
+      // 防抖节流间隔时间（毫秒）
+      blockTime:{
+        type: Number,
+        default: 500
       }
     },
     computed: {
@@ -287,31 +328,16 @@
       this.$on("on-form-item-error", this.onFormItemError)
     },
     methods: {
+      leftIconClick(){
+        this.$emit('leftClick', this.defaultValue)
+      },
+      rightIconClick(){
+        this.$emit('rightClick', this.defaultValue)
+      },
       /**
        * input事件
        */
-      handleInput(event) {
+      handleInput:()=>{},
-        let value = event.detail.value
-        // 是否需要去掉空格
-        if (this.trim) value = this.$tn.string.trim(value)
-        // 原生事件
-        this.$emit('input', value)
-        // model赋值
-        this.defaultValue = value
-        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
-        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
-        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
-        setTimeout(() => {
-          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
-          // #ifdef MP-TOUTIAO
-          if (this.$tn.string.trim(value) === this.lastValue) return
-          this.lastValue = value
-          // #endif
-          
-          // 发送当前的值到form-item进行校验
-          this.dispatch('tn-form-item','on-form-change', value)
-        }, 40)
-      },
       /**
        * blur事件
        */
@@ -360,7 +386,35 @@
       inputClick() {
         this.$emit('click')
       }
-    }
+    },
+    mounted() {
+      let that = this;
+      that.handleInput = debounceFun(function(event){
+        let value = event.detail.value
+        // 是否需要去掉空格
+        try {
+          if (that.trim) value = that.$tn.string.trim(value)
+        }catch (e){
+        }
+        // 原生事件
+        that.$emit('input', value)
+        // model赋值
+        that.defaultValue = value
+        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
+        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+        setTimeout(() => {
+          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+          // #ifdef MP-TOUTIAO
+          if (that.$tn.string.trim(value) === that.lastValue) return
+          that.lastValue = value
+          // #endif
+
+          // 发送当前的值到form-item进行校验
+          that.dispatch('tn-form-item','on-form-change', value)
+        }, 40)
+      },that.blockTime);
+    },
   }
 </script>
 
@@ -371,12 +425,25 @@
     position: relative;
     flex: 1;
 
+    &__placeholder{
+      color: $tn-font-sub-color;
+    }
+
     &__input {
       font-size: 28rpx;
       color: $tn-font-color;
       flex: 1;
     }
 	
+    &__text {
+      font-size: 28rpx;
+      color: $tn-font-color;
+      flex: 1;
+	  min-width: 296rpx;
+	  max-width: 100%;
+	  text-overflow:clip;
+    }
+    
     &__textarea {
       width: auto;
       font-size: 28rpx;
@@ -395,6 +462,7 @@
       border-color: $tn-color-red !important;
     }
 
+
     &__right-icon {
       line-height: 1;
       .icon {
@@ -423,5 +491,32 @@
         }
       }
     }
+
+    &__left-icon {
+      line-height: 1;
+      &__item {
+        margin-left: 0rpx;
+        margin-top: 4rpx;
+      }
+
+      &__clear {
+        .icon {
+          font-size: 32rpx;
+          color: $tn-font-sub-color;
+        }
+      }
+
+      &__select {
+        transition: transform .4s;
+
+        .icon {
+          font-size: 26rpx;
+        }
+
+        &--reverse {
+          transform: rotate(-180deg);
+        }
+      }
+    }
   }
 </style>

tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue

@@ -12,7 +12,7 @@
         :fontColor="fontColor"
         :fontSize="fontSize"
         :fontUnit="fontUnit"
-        :list="list"
+        :list="valueList"
         :show="show"
         :playStatus="playStatus"
         :leftIcon="leftIcon"
@@ -38,7 +38,7 @@
         :fontColor="fontColor"
         :fontSize="fontSize"
         :fontUnit="fontUnit"
-        :list="list"
+        :list="valueList"
         :show="show"
         :mode="mode"
         :playStatus="playStatus"
@@ -76,6 +76,18 @@
           return []
         }
       },
+      keyName:{
+        type:String,
+        default: 'key'
+      },
+      valueName:{
+        type:String,
+        default: 'value'
+      },
+      keyValue:{
+        type:String,
+        default: undefined
+      },
       // 是否显示
       show: {
         type: Boolean,
@@ -167,24 +179,67 @@
     computed: {
       // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
       showNotice() {
-        if (this.show === false || (this.autoHidden && this.list.length === 0)) return false
+         return !(this.show === false || (this.autoHidden && this.list.length === 0))
-        else return true
       }
     },
+    watch:{
+      keyValue:{
+        handler(value) {
+            this.loadList();
+        },
+        deep: true
+      },
+      list:{
+        handler(value) {
+          this.loadList();
+        },
+        deep: true
+      },
+    },
     data() {
       return {
-        
+        //显示的值
+        valueList:[],
       }
     },
+    mounted() {
+      this.loadList();
+    },
     methods: {
       // 点击了通知栏
       click(index) {
-        this.$emit('click', index)
+		let value = this.findValue(index);
+        //如果是对象，返回传入的对象
+        if (this.isObj(value)){
+          this.$emit('click', value)
+        }else {
+          this.$emit('click', index)
+        }
       },
+	  findValue(findIndex){
+		  let objList = []
+		  for (let index in this.list){
+		    let v = this.list[index];
+		    if (this.isObj(v)){
+		      //判断是否指定key显示，如果是则显示指定的列表，否则就返回所有列表
+		      if (this.keyValue == undefined || v[this.keyName] == this.keyValue){
+					    objList.push(v);
+		      }
+		    }else{
+				 //兼容旧的，旧的直接返回下表
+				return findIndex;
+			}
+		  }
+		  return findIndex >= objList.length ? undefined : objList[findIndex];
+	  },
       // 点击了关闭按钮
       close() {
         this.$emit('close')
       },
+      //判断元素是否是对象
+      isObj(value){
+        return typeof(value) === 'object';
+      },
       // 点击了左边图标
       clickLeftIcon() {
         this.$emit('clickLeft')
@@ -196,6 +251,21 @@
       // 一个周期滚动结束
       end() {
         this.$emit('end')
+      },
+      loadList() {
+        let tmpList = [];
+        for (let index in this.list) {
+          let v = this.list[index];
+          if (this.isObj(v)) {
+            //判断是否指定key显示，如果是则显示指定的列表，否则就返回所有列表
+            if (this.keyValue == undefined || v[this.keyName] == this.keyValue) {
+              tmpList.push(v[this.valueName]);
+            }
+          } else {
+            tmpList.push(v);
+          }
+        }
+        this.valueList = tmpList;
       }
     }
   }

tuniao-ui/components/tn-picker/tn-picker.vue

@@ -12,7 +12,7 @@
     >
       <view class="tn-picker__content" :style="{ zIndex: elZIndex }">
         <!-- 顶部 -->
-        <view class="tn-picker__content__header tn-border-solid-bottom" @touchmove.stop.prevent>
+        <view class="tn-picker__content__header" @touchmove.stop.prevent>
           <!-- 取消按钮 -->
           <view
             class="tn-picker__content__header__btn tn-picker__content__header--cancel"
@@ -242,7 +242,7 @@
       // 取消按钮的文字
       cancelText: {
         type: String,
-        default: '取消'
+        default: '取 消'
       },
       // 取消按钮的颜色
       cancelColor: {
@@ -252,7 +252,7 @@
       // 确认按钮的文字
       confirmText: {
         type: String,
-        default: '确认'
+        default: '确 认'
       },
       // 确认按钮的演示
       confirmColor: {
@@ -665,7 +665,8 @@
         flex-direction: row;
         width: 100%;
         height: 90rpx;
-        padding: 0 40rpx;
+        margin-top: 10rpx;
+        padding: 0 30rpx;
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
@@ -688,7 +689,10 @@
         }
         
         &--confirm {
-          color: $tn-main-color;
+          background-color: #07C160;
+          color: #FFFFFF;
+          padding: 10rpx 25rpx;
+          border-radius: 10rpx;
         }
       }
       

tuniao-ui/components/tn-popup/tn-popup.vue

@@ -46,13 +46,13 @@
           :style="[closeBtnStyle, {zIndex: elZIndex}]"
           @tap="close"
         ></view>
-        <scroll-view class="tn-popup__content__scroll-view">
+        <scroll-view scroll-y class="tn-popup__content__scroll-view">
           <slot></slot>
         </scroll-view>
       </view>
       
       <!-- 除居中外的其他情况 -->
-      <scroll-view v-else class="tn-popup__content__scroll-view">
+      <scroll-view scroll-y v-else class="tn-popup__content__scroll-view">
         <slot></slot>
       </scroll-view>
       <!-- 关闭按钮 -->
@@ -365,6 +365,7 @@
     right: 0;
     bottom: 0;
     overflow: hidden;
+    z-index: 29091 !important;
     
     &__content {
       /* #ifndef APP-NVUE */

tuniao-ui/components/tn-radio/tn-radio.vue

@@ -12,7 +12,8 @@
     <view
       class="tn-radio__label"
       :style="{
-        fontSize: labelSize ? labelSize + 'rpx' : ''
+        fontSize: labelSize ? labelSize + 'rpx' : '',
+        color: labelColor ? labelColor : '#080808'
       }"
       @tap="onClickLabel"
     >
@@ -64,6 +65,16 @@
       labelSize: {
         type: Number,
         default: 0
+      },
+      //labelColor 字体颜色
+      labelColor: {
+        type: String,
+        default: '#080808'
+      },
+      //边框颜色
+      borderColor: {
+        type: String,
+        default: '#080808'
       }
     },
     computed: {
@@ -111,7 +122,7 @@
         style.height = style.width
         
         style.fontSize = (this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 20)) + 'rpx'
-        
+        style.borderColor = this.borderColor
         return style
       },
       radioStyle() {

tuniao-ui/components/tn-select/tn-select.vue

@@ -200,7 +200,7 @@
       searchResult(value) {
         let result = [];
           // console.log(this.list)
-          let data = this.list.filter(item => item.label.indexOf(value) > -1);
+          let data = this.list.filter(item => item[this.labelName].indexOf(value) > -1);
           if (data.length > 0) {
             result.push(data
             );
@@ -317,13 +317,15 @@
           // 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
           // 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
           columnIndex.map((item, index) => {
-            let data = this.columnData[index][columnIndex[index]]
+            if (this.columnData[index]){
-            let tmp = {
+              let data = this.columnData[index][columnIndex[index]]
-              value: data ? data[this.valueName] : null,
+              let tmp = {
-              label: data ? data[this.labelName] : null
+                value: data ? data[this.valueName] : null,
+                label: data ? data[this.labelName] : null
+              }
+              if (data && data.extra !== undefined) tmp.extra = data.extra
+              this.selectValue.push(tmp)
             }
-            if (data && data.extra !== undefined) tmp.extra = data.extra
-            this.selectValue.push(tmp)
           })
           this.lastSelectIndex = columnIndex
         } else if (this.mode === 'single') {
@@ -396,7 +398,11 @@
         }
 
         &--confirm {
-          color: $tn-main-color;
+          // color: $tn-main-color;
+          background-color: #07C160;
+          color: #FFFFFF;
+          padding: 10rpx 25rpx;
+          border-radius: 10rpx;
         }
       }
 

tuniao-ui/components/tn-slider/tn-slider.vue

@@ -149,6 +149,9 @@
       },
       // 滑动移动中
       touchMove(event) {
+		this._tGetRect('.tn-slider').then(res => {
+		    this.sliderRect = res
+		});
         if (this.disabled) return
         if (!event.changedTouches[0]) return
         
@@ -157,7 +160,9 @@
         if (this.status === 'start') this.$emit('start')
         let movePageX = event.changedTouches[0].pageX
         // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
-        this.distanceX = movePageX - this.sliderRect.left
+        let marginLeft = this.sliderRect.left;
+		    marginLeft = marginLeft < 0 ? 0 : marginLeft;
+        this.distanceX = movePageX - marginLeft;
         // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
         // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
         this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + this.min
@@ -200,6 +205,9 @@
       },
       // 点击事件
       click(event) {
+		this._tGetRect('.tn-slider').then(res => {
+			this.sliderRect = res
+		})
         if (this.disabled) return
         // 直接点击的情况，计算方式和touchMove方法一致
         const value = (((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this.min)) + this.min

tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue

@@ -25,7 +25,7 @@
         :catch:touchmove="touching?wxs.touchMove:''"
         :catch:touchend="touching?wxs.touchEnd:''"
       >
-        <image class="tn-stack-swiper__image" :src="item.image"></image>
+        <image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
       </view>
       <!-- #endif -->
       
@@ -39,7 +39,7 @@
         @touchmove="wxs.touchMove"
         @touchend="wxs.touchEnd"
       >
-        <image class="tn-stack-swiper__image" :src="item.image"></image>
+        <image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
       </view>
       <!-- #endif -->
     </block>

tuniao-ui/components/tn-sticky/tn-sticky.vue

@@ -12,7 +12,8 @@
           top: stickyTop + 'px',
           left: left + 'px',
           width: width === 'auto' ? 'auto' : width + 'px',
-          zIndex: elZIndex
+          zIndex: elZIndex,
+          backgroundColor: backgroundColorStyle
         }"
       >
         <slot></slot>
@@ -83,9 +84,6 @@
       stickyStyle() {
         let style = {}
         style.height = this.fixed ? this.height + 'px' : 'auto'
-        if (this.backgroundColorStyle) {
-          style.color = this.backgroundColorStyle
-        }
         if (this.elZIndex) {
           style.zIndex = this.elZIndex
         }

tuniao-ui/components/tn-subsection/tn-subsection.vue

@@ -1,410 +1,408 @@
 <template>
-  <view
+	<view class="tn-subsection-class tn-subsection" :class="[subsectionBackgroundColorClass]"
-    class="tn-subsection-class tn-subsection"
+		:style="[subsectionStyle]">
-    :class="[subsectionBackgroundColorClass]"
+		<!-- 滑块 -->
-    :style="[subsectionStyle]"
+		<block v-for="(item, index) in listInfo" :key="index">
-  >
+			<view class="tn-subsection__item tn-text-ellipsis" :class="[
-    <!-- 滑块 -->
-    <block v-for="(item, index) in listInfo" :key="index">
-      <view
-        class="tn-subsection__item tn-text-ellipsis"
-        :class="[
           'section-item-' + index,
           noBorderRight(index)
-        ]"
+        ]" :style="[itemStyle(index)]" @tap="click(index)">
-        :style="[itemStyle(index)]"
+				<view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
-        @tap="click(index)"
+					{{ item.name }}
-      >
+				</view>
-        <view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
+			</view>
-          {{ item.name }}
+		</block>
-        </view>
+		<!-- 背景 -->
-      </view>
+		<view class="tn-subsection__bg" :class="[itemBarClass]" :style="[itemBarStyle]"></view>
-    </block>
+	</view>
-    <!-- 背景 -->
-    <view
-      class="tn-subsection__bg"
-      :class="[itemBarClass]"
-      :style="[itemBarStyle]"
-    ></view>
-  </view>
 </template>
 
 <script>
-  import componentsColorMixin from '../../libs/mixin/components_color.js'
+	import componentsColorMixin from '../../libs/mixin/components_color.js'
-  export default {
+	export default {
-    mixins: [componentsColorMixin],
+		mixins: [componentsColorMixin],
-    name: 'tn-subsection',
+		name: 'tn-subsection',
-    props: {
+		props: {
-      // 模式选择
+			// 模式选择
-      // button 按钮模式 subsection 分段模式
+			// button 按钮模式 subsection 分段模式
-      mode: {
+			mode: {
-        type: String,
+				type: String,
-        default: 'subsection'
+				default: 'subsection'
-      },
+			},
-      // 组件高度
+			// 组件高度
-      height: {
+			height: {
-        type: Number,
+				type: Number,
-        default: 60
+				default: 60
-      },
+			},
-      // tab的数据
+			// tab的数据
-      list: {
+			list: {
-        type: Array,
+				type: Array,
-        default() {
+				default () {
-          return []
+					return []
-        }
+				}
-      },
+			},
-      // 当前活动tab的index
+			// 当前活动tab的index
-      current: {
+			current: {
-        type: [Number, String],
+				type: [Number, String],
-        default: 0
+				default: 0
-      },
+			},
-      // 激活时的字体颜色
+			// 激活时的字体颜色
-      activeColor: {
+			activeColor: {
-        type: String,
+				type: String,
-        default: '#FFFFFF'
+				default: '#FFFFFF'
-      },
+			},
-      // 未激活时的字体颜色
+			// 未激活时的字体颜色
-      inactiveColor: {
+			inactiveColor: {
-        type: String,
+				type: String,
-        default: '#AAAAAA'
+				default: '#AAAAAA'
-      },
+			},
-      // 激活tab的字体是否加粗
+			// 激活tab的字体是否加粗
-      bold: {
+			bold: {
-        type: Boolean,
+				type: Boolean,
-        default: false
+				default: false
-      },
+			},
-      backgroundColor: {
+			backgroundColor: {
-        type: String,
+				type: String,
-        default: '#F4F4F4'
+				default: '#F4F4F4'
-      },
+			},
-      // 滑块的颜色
+			// 滑块的颜色
-      buttonColor: {
+			buttonColor: {
-        type: String,
+				type: String,
-        default: '#01BEFF'
+				default: '#01BEFF'
-      },
+			},
-      // 当mode为button时生效，圆角的值，单位rpx
+			// 当mode为button时生效，圆角的值，单位rpx
-      borderRadius: {
+			borderRadius: {
-        type: Number,
+				type: Number,
-        default: 10
+				default: 10
-      },
+			},
-      // 是否开启动画
+			// 是否开启动画
-      animation: {
+			animation: {
-        type: Boolean,
+				type: Boolean,
-        default: true
+				default: true
-      },
+			},
-      // 动画类型
+			// 动画类型
-      // cubic-bezier -> 贝塞尔曲线
+			// cubic-bezier -> 贝塞尔曲线
-      animationType: {
+			animationType: {
-        type: String,
+				type: String,
-        default: ''
+				default: ''
-      },
+			},
-      // 滑动滑块的是否，是否触发震动
+			// 滑动滑块的是否，是否触发震动
-      vibrateShort: {
+			vibrateShort: {
-        type: Boolean,
+				type: Boolean,
-        default: false
+				default: false
-      }
+			}
-    },
+		},
-    data() {
+		data() {
-      return {
+			return {
-        // 列表数据
+				// 列表数据
-        listInfo: [],
+				listInfo: [],
-        // 子元素的背景样式
+				// 子元素的背景样式
-        itemBgStyle: {
+				itemBgStyle: {
-          width: 0,
+					width: 0,
-          left: 0,
+					left: 0,
-          backgroundColor: '#ffffff',
+					backgroundColor: '#ffffff',
-          height: '100%'
+					height: '100%'
-        },
+				},
-        // 当前选中的滑块
+				// 当前选中的滑块
-        currentIndex: this.current,
+				currentIndex: this.current,
-        buttonPadding: 3,
+				buttonPadding: 3,
-        // 组件初始化的是否current变换不应该震动
+				// 组件初始化的是否current变换不应该震动
-        firstVibrateShort: true
+				firstVibrateShort: true
-      }
+			}
-    },
+		},
-    watch: {
+		watch: {
-      current: {
+			list: {
-        handler(val) {
+				handler(val) {
-          this.currentIndex = val
+					this.listInfo = val.map((item, index) => {
-          this.changeSectionStatus(val)
+						if (typeof item !== 'object') {
-        },
+							let obj = {
-        immediate: true
+								width: 0,
-      }
+								name: item
-    },
+							}
-    created() {
+							return obj
-      // 将list的数据，传入listInfo数组
+						} else {
-      // 接受直接数组形式，或者数组元素为对象的形式，如：['开启', '关闭'],或者[{name: '开启'}, {name: '关闭'}]
+							item.width = 0
-      this.listInfo = this.list.map((item, index) => {
+							return obj
-        if (typeof item !== 'object') {
+						}
-          let obj = {
+					})
-            width: 0,
+				},
-            name: item
+				immediate: true,
-          }
+				deep: true
-          return obj
+			},
-        } else {
+			current: {
-          item.width = 0
+				handler(val) {
-          return obj
+					this.currentIndex = val
-        }
+					this.changeSectionStatus(val)
-      })
+				},
-    },
+				immediate: true
-    computed: {
+			}
-      // 设置mode=subsection时，滑块没有样式
+		},
-      noBorderRight() {
+		created() {
-        return index => {
+			// 将list的数据，传入listInfo数组
-          if (this.mode !== 'subsection') return
+			// 接受直接数组形式，或者数组元素为对象的形式，如：['开启', '关闭'],或者[{name: '开启'}, {name: '关闭'}]
-          let clazz = ''
+			this.listInfo = this.list.map((item, index) => {
-          // 不显示右边的边距
+				if (typeof item !== 'object') {
-          if (index < this.list.length - 1) clazz += ' tn-subsection__item--none-border-right'
+					let obj = {
-          // 显示整个组件的左右边圆角
+						width: 0,
-          if (index === 0) clazz += ' tn-subsection__item--first'
+						name: item
-          if (index === this.list.length - 1) clazz += ' tn-subsection__item--last'
+					}
-          return clazz
+					return obj
-        }
+				} else {
-      },
+					item.width = 0
-      // 文字的样式
+					return obj
-      textStyle() {
+				}
-        return index => {
+			})
-          let style = {}
+		},
-          // 设置字体颜色
+		computed: {
-          if (index === this.currentIndex) {
+			// 设置mode=subsection时，滑块没有样式
-            style.color = this.activeColor
+			noBorderRight() {
-          } else {
+				return index => {
-            style.color = this.inactiveColor
+					if (this.mode !== 'subsection') return
-          }
+					let clazz = ''
-          // 字体加粗
+					// 不显示右边的边距
-          if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
+					if (index < this.list.length - 1) clazz += ' tn-subsection__item--none-border-right'
-          // 文字大小
+					// 显示整个组件的左右边圆角
-          style.fontSize = (this.fontSize || 26) + this.fontUnit
+					if (index === 0) clazz += ' tn-subsection__item--first'
-          return style
+					if (index === this.list.length - 1) clazz += ' tn-subsection__item--last'
-        }
+					return clazz
-      },
+				}
-      // 每个分段器item的样式
+			},
-      itemStyle() {
+			// 文字的样式
-        return index => {
+			textStyle() {
-          let style = {}
+				return index => {
-          if (this.fontSizeStyle) {
+					let style = {}
-            style.fontSize = this.fontSizeStyle
+					// 设置字体颜色
-          }
+					if (index === this.currentIndex) {
-          if (this.mode === 'subsection') {
+						style.color = this.activeColor
-            // 设置border的样式
+					} else {
-            style.borderColor = this.buttonColor
+						style.color = this.inactiveColor
-            style.borderWidth = '1rpx'
+					}
-            style.borderStyle = 'solid'
+					// 字体加粗
-          }
+					if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
-          return style
+					// 文字大小
-        }
+					style.fontSize = (this.fontSize || 26) + this.fontUnit
-      },
+					return style
-      // mode = button时，设置外层view的样式
+				}
-      subsectionStyle() {
+			},
-        let style = {}
+			// 每个分段器item的样式
-        style.height = this.height + 'rpx'
+			itemStyle() {
-        if (this.mode === 'button') {
+				return index => {
-          style.backgroundColor = this.backgroundColorStyle
+					let style = {}
-          style.padding = `${this.buttonPadding}px`
+					if (this.fontSizeStyle) {
-          style.borderRadius = `${this.borderRadius}rpx`
+						style.fontSize = this.fontSizeStyle
-        }
+					}
-        return style
+					if (this.mode === 'subsection') {
-      },
+						// 设置border的样式
-      // mode = button时，设置外层view的背景class
+						style.borderColor = this.buttonColor
-      subsectionBackgroundColorClass() {
+						style.borderWidth = '1rpx'
-        let clazz = ''
+						style.borderStyle = 'solid'
-        if (this.mode === 'button' && this.backgroundColorClass) {
+					}
-          clazz = this.backgroundColorClass
+					return style
-        }
+				}
-        return clazz
+			},
-      },
+			// mode = button时，设置外层view的样式
-      itemBarClass() {
+			subsectionStyle() {
-        let clazz = ''
+				let style = {}
-        const buttonBgClass = this.$tn.color.getBackgroundColorInternalClass(this.buttonColor)
+				style.height = this.height + 'rpx'
-        if (this.animation) {
+				if (this.mode === 'button') {
-          clazz += ' tn-subsection__bg__animation'
+					style.backgroundColor = this.backgroundColorStyle
-          if (this.animationType) {
+					style.padding = `${this.buttonPadding}px`
-            clazz += ` tn-subsection__bg__animation--${this.animationType}`
+					style.borderRadius = `${this.borderRadius}rpx`
-          }
+				}
-        }
+				return style
-        if (buttonBgClass) {
+			},
-          clazz += ` ${buttonBgClass}`
+			// mode = button时，设置外层view的背景class
-        }
+			subsectionBackgroundColorClass() {
-        return clazz
+				let clazz = ''
-      },
+				if (this.mode === 'button' && this.backgroundColorClass) {
-      // 滑块样式
+					clazz = this.backgroundColorClass
-      itemBarStyle() {
+				}
-        let style = {}
+				return clazz
-        const buttonBgStyle = this.$tn.color.getBackgroundColorStyle(this.buttonColor)
+			},
-        if (buttonBgStyle) {
+			itemBarClass() {
-          style.backgroundColor = this.buttonColor
+				let clazz = ''
-        }
+				const buttonBgClass = this.$tn.color.getBackgroundColorInternalClass(this.buttonColor)
-        style.zIndex = 1
+				if (this.animation) {
-        if (this.mode === 'button') {
+					clazz += ' tn-subsection__bg__animation'
-          style.borderRadius = `${this.borderRadius}rpx`
+					if (this.animationType) {
-          style.bottom = `${this.buttonPadding}px`
+						clazz += ` tn-subsection__bg__animation--${this.animationType}`
-          style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
+					}
-          style.zIndex = 0
+				}
-        }
+				if (buttonBgClass) {
-        return Object.assign(this.itemBgStyle, style)
+					clazz += ` ${buttonBgClass}`
-      }
+				}
-    },
+				return clazz
-    mounted() {
+			},
-      // 等待加载组件完成
+			// 滑块样式
-      setTimeout(() => {
+			itemBarStyle() {
-        this.getTabsInfo()
+				let style = {}
-      }, 10)
+				const buttonBgStyle = this.$tn.color.getBackgroundColorStyle(this.buttonColor)
-    },
+				if (buttonBgStyle) {
-    methods: {
+					style.backgroundColor = this.buttonColor
-      // 改变滑块样式
+				}
-      changeSectionStatus(val) {
+				style.zIndex = 1
-        if (this.mode === 'subsection') {
+				if (this.mode === 'button') {
-          // 根据滑块在最左和最右时，显示对应的圆角
+					style.borderRadius = `${this.borderRadius}rpx`
-          if (val === this.list.length - 1) {
+					style.bottom = `${this.buttonPadding}px`
-            this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
+					style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
-          }
+					style.zIndex = 0
-          if (val === 0) {
+				}
-            this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
+				return Object.assign(this.itemBgStyle, style)
-          }
+			}
-          if (val > 0 && val < this.list.length - 1) {
+		},
-            this.itemBgStyle.borderRadius = '0'
+		mounted() {
-          }
+			// 等待加载组件完成
-        }
+			setTimeout(() => {
-        // 更新滑块的位置
+				this.getTabsInfo()
-        setTimeout(() => {
+			}, 10)
-          this.itemBgLeft()
+		},
-        }, 10)
+		methods: {
-        if (this.vibrateShort && !this.firstVibrateShort) {
+			// 改变滑块样式
-          // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+			changeSectionStatus(val) {
-          // #ifndef H5
+				if (this.mode === 'subsection') {
-          uni.vibrateShort();
+					// 根据滑块在最左和最右时，显示对应的圆角
-          // #endif
+					if (val === this.list.length - 1) {
-        }
+						this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
-        this.firstVibrateShort = false
+					}
-      },
+					if (val === 0) {
-      // 获取各个tab的节点信息
+						this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
-      getTabsInfo() {
+					}
-        let view = uni.createSelectorQuery().in(this)
+					if (val > 0 && val < this.list.length - 1) {
-        for (let i = 0; i < this.list.length; i++) {
+						this.itemBgStyle.borderRadius = '0'
-          view.select('.section-item-' + i).boundingClientRect()
+					}
-        }
+				}
-        view.exec(res => {
+				// 更新滑块的位置
-          // 如果没有获取到，则重新获取
+				setTimeout(() => {
-          if (!res.length) {
+					this.itemBgLeft()
-            setTimeout(() => {
+				}, 10)
-              this.getTabsInfo()
+				if (this.vibrateShort && !this.firstVibrateShort) {
-              return
+					// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
-            }, 10)
+					// #ifndef H5
-          }
+					uni.vibrateShort();
-          // 将每个分段器的宽度放入listInfo中
+					// #endif
-          res.map((item, index) => {
+				}
-            this.listInfo[index].width = item.width
+				this.firstVibrateShort = false
-          })
+			},
-          // 初始化滑块的宽度
+			// 获取各个tab的节点信息
-          if (this.mode === 'subsection') {
+			getTabsInfo() {
-            this.itemBgStyle.width = this.listInfo[0].width + 'px'
+				let view = uni.createSelectorQuery().in(this)
-          } else if (this.mode === 'button') {
+				for (let i = 0; i < this.list.length; i++) {
-            this.itemBgStyle.width = this.listInfo[0].width + 'px'
+					view.select('.section-item-' + i).boundingClientRect()
-          }
+				}
+				view.exec(res => {
+					// 如果没有获取到，则重新获取
+					if (!res.length) {
+						setTimeout(() => {
+							this.getTabsInfo()
+							return
+						}, 10)
+					}
+					// 将每个分段器的宽度放入listInfo中
+					res.map((item, index) => {
+						this.listInfo[index].width = item.width
+					})
+					// 初始化滑块的宽度
+					if (this.mode === 'subsection') {
+						this.itemBgStyle.width = this.listInfo[0].width + 'px'
+					} else if (this.mode === 'button') {
+						this.itemBgStyle.width = this.listInfo[0].width + 'px'
+					}
 
-          // 初始化滑块的位置
+					// 初始化滑块的位置
-          this.itemBgLeft()
+					this.itemBgLeft()
-        })
+				})
-      },
+			},
-      // 设置滑块的位置
+			// 设置滑块的位置
-      itemBgLeft() {
+			itemBgLeft() {
-        let left = 0
+				let left = 0
-        // 计算当前活跃item到组件左边的距离
+				// 计算当前活跃item到组件左边的距离
-        this.listInfo.map((item, index) => {
+				this.listInfo.map((item, index) => {
-          if (index < this.currentIndex) left += item.width
+					if (index < this.currentIndex) left += item.width
-        })
+				})
-        // 根据不同的模式，计算滑块的位置
+				// 根据不同的模式，计算滑块的位置
-        if (this.mode === 'subsection') {
+				if (this.mode === 'subsection') {
-          this.itemBgStyle.left = left + 'px'
+					this.itemBgStyle.left = left + 'px'
-        } else if (this.mode === 'button') {
+				} else if (this.mode === 'button') {
-          this.itemBgStyle.left = left + this.buttonPadding + 'px'
+					this.itemBgStyle.left = left + this.buttonPadding + 'px'
-        }
+				}
-      },
+			},
 
-      // 点击事件
+			// 点击事件
-      click(index) {
+			click(index) {
-        // 不允许点击当前激活的选项
+				// 不允许点击当前激活的选项
-        if (index === this.currentIndex) return
+				if (index === this.currentIndex) return
-        this.currentIndex = index
+				this.currentIndex = index
-        this.changeSectionStatus(index)
+				this.changeSectionStatus(index)
-        this.$emit('change', {
+				this.$emit('change', {
-          index: Number(index),
+					index: Number(index),
-          name: this.listInfo[index]['name']
+					name: this.listInfo[index]['name']
-        })
+				})
-      }
+			}
-    }
+		}
-  }
+	}
 </script>
 
 <style lang="scss" scoped>
+	.tn-subsection {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		overflow: hidden;
+		position: relative;
 
-  .tn-subsection {
+		&__item {
-    /* #ifndef APP-PLUS */
+			display: flex;
-    display: flex;
+			flex-direction: row;
-    flex-direction: row;
+			flex: 1;
-    /* #endif */
+			text-align: center;
-    align-items: center;
+			font-size: 26rpx;
-    overflow: hidden;
+			height: 100%;
-    position: relative;
+			align-items: center;
-    
+			justify-content: center;
-    &__item {
+			color: #FFFFFF;
-      /* #ifndef APP-PLUS */
+			padding: 0 6rpx;
-      display: flex;
-      flex-direction: row;
-      /* #endif */
-      flex: 1;
-      text-align: center;
-      font-size: 26rpx;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      color: #FFFFFF;
-      padding: 0 6rpx;
 
 
-      &--text {
+			&--text {
-        transition: all 0.3s;
+				transition: all 0.3s;
-        color: #FFFFFF;
+				color: #FFFFFF;
-        /* #ifndef APP-PLUS */
+				display: flex;
-        display: flex;
+				flex-direction: row;
-        flex-direction: row;
+				align-items: center;
-        /* #endif */
+				position: relative;
-        align-items: center;
+				z-index: 3;
-        position: relative;
+			}
-        z-index: 3;
-      }
 
-      &--first {
+			&--first {
-        border-top-left-radius: 8rpx;
+				border-top-left-radius: 8rpx;
-        border-bottom-left-radius: 8rpx;
+				border-bottom-left-radius: 8rpx;
-      }
+			}
 
-      &--last {
+			&--last {
-        border-top-right-radius: 8rpx;
+				border-top-right-radius: 8rpx;
-        border-bottom-right-radius: 8rpx;
+				border-bottom-right-radius: 8rpx;
-      }
+			}
 
-      &--none-border-right {
+			&--none-border-right {
-        border-right: none !important;
+				border-right: none !important;
-      }
+			}
-    }
+		}
 
-    &__bg {
+		&__bg {
-      background-color: $tn-main-color;
+			background-color: $tn-main-color;
-      position: absolute;
+			position: absolute;
-      z-index: -1;
+			z-index: -1;
-      transition-property: all;
+			transition-property: all;
-      transition-duration: 0s;
+			transition-duration: 0s;
-      transition-timing-function: linear;
+			transition-timing-function: linear;
 
-      &__animation {
+			&__animation {
-        transition-duration: 0.25s !important;
+				transition-duration: 0.25s !important;
-        
-        &--cubic-bezier {
-          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-        }
-      }
-    }
-  }
 
+				&--cubic-bezier {
+					transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+				}
+			}
+		}
+	}
 </style>

tuniao-ui/components/tn-switch/tn-switch.vue

@@ -2,7 +2,7 @@
   <view
     class="tn-switch-class tn-switch"
     :class="[
-      value ? 'tn-switch--on' : '',
+      switchState ? 'tn-switch--on' : '',
       disabled ? 'tn-switch--disabled' : '',
       `tn-switch--${shape}`
     ]"
@@ -22,7 +22,7 @@
       class="tn-switch__icon tn-switch__icon--left"
       :class="[
         `tn-icon-${leftIcon}`,
-        value ? 'tn-switch__icon--show' : ''
+        switchState ? 'tn-switch__icon--show' : ''
       ]"
       :style="[iconStyle]"></view>
     <!-- 右图标 -->
@@ -31,7 +31,7 @@
       class="tn-switch__icon tn-switch__icon--right"
       :class="[
         `tn-icon-${rightIcon}`,
-        !value ? 'tn-switch__icon--show' : ''
+        !switchState ? 'tn-switch__icon--show' : ''
       ]"
       :style="[iconStyle]"></view>
   </view>
@@ -42,7 +42,7 @@
     name: 'tn-switch',
     props: {
       value: {
-        type: Boolean,
+        type:  [Number, String, Boolean],
         default: false
       },
       // 按钮的样式
@@ -106,7 +106,7 @@
       switchStyle() {
         let style = {}
         style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
-        style.backgroundColor = this.value ? 
+        style.backgroundColor = this.switchState ?
           this.activeColor ? this.activeColor : '#01BEFF' : 
           this.inactiveColor ? this.inactiveColor : '#AAAAAA'
         return style
@@ -124,22 +124,33 @@
         return style
       },
       loadingColor() {
-        return this.value ? this.activeColor : ''
+        return this.switchState ? this.activeColor : ''
+      }
+    },
+    watch:{
+      value:{
+        handler(newVal,oldVal){
+          this.switchState = (this.value == this.activeValue);
+        }
       }
     },
     data() {
       return {
-        
+         switchState:false
       }
     },
+    mounted() {
+      this.switchState = (this.value == this.activeValue);
+    },
     methods: {
       click() {
+        this.switchState = !this.switchState;
         if (!this.disabled && !this.loading) {
           if (this.vibrateShort) uni.vibrateShort()
-          this.$emit('input', !this.value)
+          this.$emit('input', this.switchState ? this.activeValue : this.inactiveValue)
           // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
           this.$nextTick(() => {
-          	this.$emit('change', this.value ? this.activeValue : this.inactiveValue);
+          	this.$emit('change', this.switchState ? this.activeValue : this.inactiveValue);
           })
         }
       }

tuniao-ui/components/tn-tabs/tn-tabs.vue

@@ -89,6 +89,13 @@
         type: String,
         default: '#080808'
       },
+      // 未选中的item样式
+      inactiveItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
       // 选中的item样式
       activeItemStyle: {
         type: Object,
@@ -171,6 +178,7 @@
             Object.assign(style, this.activeItemStyle)
           } else {
             style.color = this.inactiveColor
+            Object.assign(style, this.inactiveItemStyle)
           }
           return style
         }

tuniao-ui/libs/css/color.scss

@@ -537,27 +537,27 @@
 }
 
 .tn-cool-bg-image:nth-of-type(1n)::after {
-  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/1.png);
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/1.png);
 }
 
 .tn-cool-bg-image:nth-of-type(2n)::after {
-  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/2.png);
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
 }
 
 .tn-cool-bg-image:nth-of-type(3n)::after {
-  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
 }
 
 .tn-cool-bg-image:nth-of-type(4n)::after {
-  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/4.png);
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/4.png);
 }
 
 .tn-cool-bg-image:nth-of-type(5n)::after {
-  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/5.png);
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/5.png);
 }
 
 .tn-cool-bg-image:nth-of-type(6n)::after {
-  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
 }
 
 /* 酷炫背景颜色图片 end */

tuniao-ui/libs/function/applyEven.js

@@ -0,0 +1,27 @@
+//防抖
+export function debounceFun(func, delay=500) {
+	//定时器
+	let timer;
+	return function(...args) {
+		// 清除之前设置的定时器
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			func.apply(this, args);
+		}, delay);
+	};
+}
+
+//节流
+export function throttleFun(func, delay=500) {
+	//定时器
+	let timer = null;
+	return function(...args) {
+		if(!timer){
+			timer = setTimeout(() => {
+				//执行前清空
+				timer = null;
+				func.apply(this, args);
+			}, delay);
+		}
+	};
+}

vipPage/blog/circle/circle.vue

@@ -0,0 +1,814 @@
+<template>
+  <view class="template-circle 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://resource.tuniaokj.com/images/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="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-flex tn-flex-row-between tn-bg-yellow  tn-round tn-padding-xs tn-margin">
+        <view class="justify-content-item tn-text-center tn-flex" style="padding: 25rpx 30rpx">
+          <tn-avatar-group :lists="latestUserAvatar" size="sm"></tn-avatar-group> 
+          <text class="tn-padding-xs">629人</text>
+        </view>
+        <view class="justify-content-item tn-text-right tn-padding-top-xs">
+          <view class="tn-text-bold">
+            北北·图鸟小圈子
+          </view>
+          <view class="tn-text-xs tn-color-gray--dark tn-padding-top-xs">
+            北北们的作品集，一起干巴爹叭
+          </view>
+        </view>
+        <view class="justify-content-item tn-text-right tn-margin-right tn-padding-top-lg">
+          <text class="tn-icon-right tn-color-gray--dark"></text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="tn-flex tn-flex-row-between tn-margin-top">
+      <view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
+      精选博主
+      </view>
+      <view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
+        <text class="tn-padding-right-xs">更多</text>
+        <text class="tn-icon-right"></text>
+      </view>
+    </view>
+    
+    <view class="tn-strip-bottom">
+      <!-- 方式16 start-->
+      <view class="tn-flex tn-flex-wrap tn-margin-bottom">
+        <block v-for="(item, index) in bloggerList" :key="index">
+          <view class="" style="width: 33.3%;">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center ">
+              <view class="tn-radius tn-padding-sm">
+                <view class="image-pic" :style="'background-image:url('+ item.url +')'">
+                  <view class="image-circle">
+                  </view>
+                </view>
+                <view class="tn-text-center tn-text-bold tn-padding-top-xs">{{item.name}}</view>
+                <view class="tn-text-center tn-text-xs tn-color-gray--dark tn-padding-top-xs">{{item.text}}</view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      <!-- 方式16 end-->
+    </view>
+    
+    <!-- 图文 -->
+    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom-xs">
+      
+      <block v-for="(item,index) in content" :key="index">
+        <view class="tn-blogger-content__wrap">
+          <view class="tn-blogger-content__info tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="justify-content-item">
+              <view class="tn-flex tn-flex-row-center">
+                <view class="tn-flex tn-flex-row-center tn-flex-col-center">
+                  <view class="">
+                    <tn-avatar
+                      class=""
+                      shape="circle"
+                      :src="item.userAvatar"
+                      size="lg">
+                    </tn-avatar>
+                  </view>
+                  <view class="tn-padding-right tn-text-ellipsis">
+                    <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">{{ item.userName }}</view>
+                    <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ item.date }}</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="tn-blogger-content__info__btn justify-content-item tn-flex-col-center tn-flex-row-center">
+              <text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
+            </view>
+          </view>
+         
+          <view class="tn-blogger-content__label tn-margin-top-sm tn-text-justify">
+            <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+              <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+            </view>
+            <text class="tn-blogger-content__label__desc">{{ item.desc }}</text>  
+          </view>
+          
+          <view v-if="[1,2,4].indexOf(item.mainImage.length) != -1" class="tn-padding-top-xs">
+            <image v-for="(image_item,image_index) in item.mainImage" :key="image_index" 
+              class="tn-blogger-content__main-image"
+              :class="{
+                'tn-blogger-content__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
+                'tn-blogger-content__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.mainImage.length === 2 || item.mainImage.length === 4
+              }"
+              :src="image_item"
+              mode="aspectFill"
+            ></image>
+          </view>
+          <view v-else class="tn-padding-top-xs">
+            <tn-grid  hoverClass="none" :col="3">
+              <block v-for="(image_item,image_index) in item.mainImage" :key="image_index">
+                <!-- #ifndef MP-WEIXIN -->
+                <tn-grid-item style="width: 30%;margin: 10rpx;">
+                  <image
+                    class="tn-blogger-content__main-image tn-blogger-content__main-image--3"
+                    :src="image_item"
+                    mode="aspectFill"
+                  ></image>
+                </tn-grid-item>
+                <!-- #endif-->
+                <!-- #ifdef MP-WEIXIN -->
+                <tn-grid-item style="width: 30%;margin: 10rpx;">
+                  <image
+                    class="tn-blogger-content__main-image tn-blogger-content__main-image--3"
+                    :src="image_item"
+                    mode="aspectFill"
+                  ></image>
+                </tn-grid-item>
+                <!-- #endif-->
+              </block>
+            </tn-grid>
+          </view>
+         
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
+            <view class="justify-content-item tn-color-gray tn-text-center">
+              <view class="">
+                <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                <text class="tn-padding-right">{{ item.commentCount }}</text>
+                <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                <text class="">{{ item.likeCount }}</text>
+              </view>
+            </view>
+            <view class="justify-content-item tn-flex tn-flex-col-center">
+              <view style="margin-right: 10rpx;margin-left: 20rpx;">
+                <tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
+              </view>
+              <text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 边距间隔 -->
+        <view class="tn-strip-bottom tn-margin-top-sm tn-margin-bottom-sm" v-if="index != content.length - 1"></view>
+      </block>
+      <!-- 1个图 -->
+      
+      <!-- 3个、5个、6个、7个、8个、9个图 -->
+      
+      <!-- 2个、4个图 -->
+    </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://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/tabbar/information_tnnew.png'></image>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
+        </view>
+        <view class="tn-color-gray">圈子</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">
+                  <!-- <image class="" src='https://resource.tuniaokj.com/images/login/1/login_top3.png'></image> -->
+                  <image class="" src='https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/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: 'TemplateCircle',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+          current: 0,
+          scrollList: [
+            {name: '社交'},
+            {name: '视频'},
+            {name: '关注', count: ''}
+          ],
+          latestUserAvatar: [
+            {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+            {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+            {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+            {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+          ],
+          bloggerList: [{
+            id: 0,
+            type: 'image',
+            name: '北北博主',
+            text: '629人关注',
+            url: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+          }, {
+            id: 1,
+            type: 'image',
+            name: '摄影博主',
+            text: '688人关注',
+            url: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+          }, {
+            id: 2,
+            type: 'image',
+            name: '校园博主',
+            text: '552人关注',
+            url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+          }, {
+            id: 3,
+            type: 'image',
+            name: '户外博主',
+            text: '105人关注',
+            url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+          }, {
+            id: 4,
+            type: 'image',
+            name: '电影博主',
+            text: '387人关注',
+            url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+          }, {
+            id: 5,
+            type: 'image',
+            name: '动漫博主',
+            text: '643人关注',
+            url: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
+          }],
+          content: [
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage:[
+                'https://resource.tuniaokj.com/images/blogger/content_1.jpeg'
+              ],
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 12
+              },
+              collectionCount: 902,
+              commentCount: 64,
+              likeCount: 83
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage:[
+                'https://resource.tuniaokj.com/images/shop/computer2.jpg',
+                'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
+              ],
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 56
+              },
+              collectionCount: 431,
+              commentCount: 26,
+              likeCount: 84
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage:[
+                'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
+                'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
+                'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
+              ],
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                ],
+                viewUserCount: 231
+              },
+              collectionCount: 780,
+              commentCount: 89,
+              likeCount: 82
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['站点','链接'],
+              desc: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+              mainImage:[
+                'https://resource.tuniaokj.com/images/shop/watch1.jpg',
+                'https://resource.tuniaokj.com/images/shop/watch2.jpg',
+                'https://resource.tuniaokj.com/images/shop/pillow2.jpg',
+                'https://resource.tuniaokj.com/images/shop/pillow.jpg',
+              ],
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 28
+              },
+              collectionCount: 432,
+              commentCount: 33,
+              likeCount: 12
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage:[
+                'https://resource.tuniaokj.com/images/blogger/y11.jpg',
+                'https://resource.tuniaokj.com/images/blogger/y33.jpg',
+                'https://resource.tuniaokj.com/images/blogger/y22.jpg',
+                'https://resource.tuniaokj.com/images/blogger/y44.jpg',
+                'https://resource.tuniaokj.com/images/blogger/y55.jpg',
+              ],
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 65
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            }
+          ]
+      }
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-circle{
+  }
+  /* 自定义导航栏内容 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-circle{
+    // padding: 95rpx;
+    width: 190rpx;
+    height: 190rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 10rpx;
+  }
+  
+  
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      padding: 30rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #00FFC8;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 55rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx;
+      
+      &--1 {
+        max-width: 80%;
+        max-height: 300rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 40rpx;
+      padding-right: 5rpx;
+    }
+  }
+  /* 文章内容 end*/
+   
+   /* 间隔线 start*/
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+  /* 底部悬浮按钮 start*/ 
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(30rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 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: 52rpx;
+    line-height: 90rpx;
+    // background-color: #01BEFF;
+    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(1, 190, 255, 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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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>

vipPage/blog/message/message.vue

@@ -0,0 +1,479 @@
+<template>
+  <view class="template-message">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <view class="custom-nav__back" @tap.stop="goBack">
+          <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-center tn-color-black">
+            <text class="tn-text-lg tn-padding-left">消息</text>
+            <text class="tn-text-xl tn-padding-left-sm tn-icon-group-circle"></text>  
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
+      <!-- 顶部标签 -->
+      <tn-tabs-swiper class="order__tabs" ref="tabs" :list="list" :current="tabsIndex" :isScroll="false" :bold="true" activeColor="#080808" inactiveColor="#AAAAAA" @change="tabsChange"></tn-tabs-swiper>
+      
+      <!-- 标签内容 -->
+      <swiper class="order__swiper" :style="{top: `${swiperTop}px`, height: `${swiperHeight}px`}" :current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
+        
+        <swiper-item class="order__swiper__item">
+          <scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
+            <view v-for="(item,index) in 6" :key="index" class="order__item">
+              <view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__head__title">
+                  图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
+                <view class="order__item__head__status tn-icon-group-square"></view>
+              </view>
+              
+              <view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
+                <view class="order__item__content__image">
+                  <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
+                </view>
+                <view class="order__item__content__title">
+                  图鸟官方设计 酷炫效果展示 让用户眼前一亮的赶脚
+                </view>
+                <view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+                  <view class="order__item__content__info__price">
+                    <text class="order__item__content__info__price--unit">￥</text>
+                    <text class="order__item__content__info__price__value--integer">1000</text>
+                    <text class="order__item__content__info__price__value--decimal">.00</text>
+                  </view>
+                  <view class="order__item__content__info__count">
+                    <text>共1件</text>
+                  </view>
+                </view>
+              </view>
+              
+              <view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__operaation__left">
+                  <text class="tn-color-gray--disabled">02-22</text>
+                </view>
+                <view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
+                  <view class="order__item__operaation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="tn-padding-bottom"></view>
+          </scroll-view>
+        </swiper-item>
+        
+        <swiper-item class="order__swiper__item">
+          <scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
+            <view v-for="(item,index) in 6" :key="index" class="order__item">
+              <view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
+                <view class="order__item__head__status">完成</view>
+              </view>
+              
+              <view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
+                  </view>
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/bag2.jpg" mode="scaleToFill"></image>
+                  </view>
+                </view>
+                <view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+                  <view class="order__item__content__info__price">
+                    <text class="order__item__content__info__price--unit">￥</text>
+                    <text class="order__item__content__info__price__value--integer">2000</text>
+                    <text class="order__item__content__info__price__value--decimal">.00</text>
+                  </view>
+                  <view class="order__item__content__info__count">
+                    <text>共2件</text>
+                  </view>
+                </view>
+              </view>
+              
+              <view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__operaation__left">
+                  <text class="tn-color-gray--disabled">2022-01-12</text>
+                </view>
+                <view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
+                  <view class="order__item__operaation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="tn-padding-bottom"></view>
+          </scroll-view>
+        </swiper-item>
+        
+        <swiper-item class="order__swiper__item">
+          <scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
+            <view v-for="(item,index) in 6" :key="index" class="order__item">
+              <view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
+                <view class="order__item__head__status">完成</view>
+              </view>
+              
+              <view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
+                  </view>
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/cup1.jpg" mode="scaleToFill"></image>
+                  </view>
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/computer2.jpg" mode="scaleToFill"></image>
+                  </view>
+                </view>
+                <view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+                  <view class="order__item__content__info__price">
+                    <text class="order__item__content__info__price--unit">￥</text>
+                    <text class="order__item__content__info__price__value--integer">3000</text>
+                    <text class="order__item__content__info__price__value--decimal">.00</text>
+                  </view>
+                  <view class="order__item__content__info__count">
+                    <text>共3件</text>
+                  </view>
+                </view>
+              </view>
+              
+              <view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__operaation__left">
+                  <text class="tn-color-gray--disabled">2022-01-12</text>
+                </view>
+                <view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
+                  <view class="order__item__operaation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="tn-padding-bottom"></view>
+          </scroll-view>
+        </swiper-item>
+        
+        <swiper-item class="order__swiper__item">
+          <scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
+            <view v-for="(item,index) in 6" :key="index" class="order__item">
+              <view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
+                <view class="order__item__head__status">完成</view>
+              </view>
+              
+              <view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
+                  </view>
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/computer1.jpg" mode="scaleToFill"></image>
+                  </view>
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/watch1.jpg" mode="scaleToFill"></image>
+                  </view>
+                </view>
+                <view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+                  <view class="order__item__content__info__price">
+                    <text class="order__item__content__info__price--unit">￥</text>
+                    <text class="order__item__content__info__price__value--integer">4000</text>
+                    <text class="order__item__content__info__price__value--decimal">.00</text>
+                  </view>
+                  <view class="order__item__content__info__count">
+                    <text>共4件</text>
+                  </view>
+                </view>
+              </view>
+              
+              <view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
+                <view class="order__item__operaation__left">
+                  <text class="tn-color-gray--disabled">2022-01-12</text>
+                </view>
+                <view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
+                  <view class="order__item__operaation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
+                  </view>
+                  <view class="order__item__operation__right__button">
+                    <tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="tn-padding-bottom"></view>
+          </scroll-view>
+        </swiper-item>
+        
+      </swiper>
+    </view>
+    
+    
+    
+  </view>
+</template>
+
+<script>
+  import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
+  
+  export default {
+    name: 'TemplateMessage',
+    mixins: [templatePageMixin],
+    data() {
+      return {
+        list: [
+          {name: '圈子互动'},
+          {name: '好友私信', count: 10},
+          {name: '商品动态'},
+          {name: '系统通知', count: 5}
+        ],
+        tabsIndex: 0,
+        swiperIndex: 0,
+        swiperTop: 0,
+        swiperHeight: 0
+      }
+    },
+    onLoad() {
+      
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.updateSwiperInfo()
+      })
+    },
+    methods: {
+      // 计算可滑动区域的高度信息
+      updateSwiperInfo() {
+        // 获取可滑动菜单的信息
+        this._tGetRect('.order__tabs').then(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.updateSwiperInfo()
+            }, 10)
+            return
+          }
+          const systemInfo = uni.getSystemInfoSync()
+          this.swiperTop = res.bottom - this.vuex_custom_bar_height
+          this.swiperHeight = systemInfo.safeArea.height - res.bottom + systemInfo.statusBarHeight
+        })
+      },
+      // 标签栏值发生改变
+      tabsChange(index) {
+        this.swiperIndex = index
+      },
+      // swiper-item位置发生改变
+      swiperTransition(event) {
+        this.$refs.tabs.setDx(event.detail.dx)
+      },
+      // swiper动画结束
+      swiperAnimationFinish(event) {
+        const current = event.detail.current
+        this.$refs.tabs.setFinishCurrent(current)
+        this.swiperIndex = current
+        this.tabsIndex = current
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-message {
+  }
+  
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 71%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 60rpx 0;
+        font-size: 24rpx;
+        // background-color: rgba(255,255,255,0.1);
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+      }
+    }
+  }
+  /* 自定义导航栏内容 end */
+  
+  .order {
+    &--wrap {
+      position: fixed;
+      left: 0;
+      right: 0;
+      width: 100%;
+      background-color: inherit;
+    }
+    
+    /* 导航栏 start */
+    &__tabs {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: inherit;
+    }
+    /* 导航栏 end */
+    
+    /* swiper start */
+    &__swiper {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 100%;
+      background-color: inherit;
+      padding: 0 16rpx;
+    }
+    /* swiper end */
+    
+    /* 订单内容 start */
+    &__item {
+      margin: 20rpx;
+      padding: 36rpx 26rpx;
+      background-color: #FFFFFF;
+      border-radius: 18rpx;
+      background-color: #FFFFFF;
+      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+      
+      &:first-child {
+        margin-top: 40rpx;
+      }
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      /* 头部 start */
+      &__head {
+        
+        &__title {
+          font-weight: bold;
+          line-height: normal;
+          
+          &--right-icon {
+            font-size: 24rpx;
+            margin-left: 8rpx;
+          }
+        }
+        
+        &__status {
+          font-size: 28rpx;
+          color: #AAAAAA;
+        }
+      }
+      /* 头部 end */
+      
+      /* 内容 start */
+      &__content {
+        
+        margin-top: 20rpx;
+        
+        &__image {
+          margin-right: 20rpx;
+          
+          image {
+            width: 140rpx;
+            height: 140rpx;
+            border-radius: 10rpx;
+          }
+        }
+        
+        &__title {
+          padding-right: 40rpx;
+          display: -webkit-box;
+          overflow: hidden;
+          white-space: normal !important;
+          text-overflow: ellipsis;
+          word-wrap: break-word;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        
+        &__info {
+          
+          &__price {
+            &--unit {
+              font-size: 20rpx;
+            }
+            &__value--integer, &__value--decimal {
+              font-weight: bold;
+            }
+            &__value--decimal {
+              font-size: 20rpx;
+            }
+          }
+          
+          &__count {
+            color: #AAAAAA;
+            font-size: 24rpx;
+          }
+        }
+      }
+      /* 内容 end */
+      
+      /* 操作按钮 start */
+      &__operation {
+        margin-top: 30rpx;
+        
+        &__right {
+          &__button {
+            margin-left: 10rpx;
+          }
+        }
+      }
+      /* 操作按钮 end */
+    }
+    /* 订单内容 end */
+  }
+  
+  
+</style>

vipPage/blog/prefer/prefer.vue

@@ -0,0 +1,722 @@
+<template>
+  <view class="template-prefer tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view class=""style="width: 72vw;overflow: hidden;">
+        <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true" :fontSize="36"></tn-tabs>
+      </view>
+    </tn-nav-bar>
+    
+    <!-- 更多信息-->
+    <view class="tn-padding-top-sm tn-padding-bottom-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
+        <view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
+          <block v-for="(item, index) in historyData" :key="index">
+            <view class="tn-flex-1 tn-padding-sm tn-radius">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                  <view :class="[`tn-icon-${item.icon}`]"></view>
+                </view>  
+                <view class="tn-color-black tn-text-sm tn-text-center tn-margin-top-sm">
+                  <text class="tn-text-ellipsis" >{{ item.title }}</text>
+                </view>
+              </view>
+            </view>
+          </block>
+        </view>
+      </tn-scroll-list>
+    </view>
+    
+    <view class="">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-15">
+          <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
+          <text class="tn-text-xl">好物推荐 · 商品优选</text>
+          <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
+        </view>
+      </view>
+    </view> 
+       
+    
+    <!-- 页面内容 -->
+    <view>
+      <view class="tn-padding">
+        <tn-waterfall ref="waterfall" v-model="list" @finish="handleWaterFallFinish">
+          <template v-slot:left="{ leftList }">
+            <view v-for="(item, index) in leftList" :key="item.id" class="product__item">
+              <view class="item__image">
+                <tn-lazy-load :threshold="-450" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
+              </view>
+              <view class="item__data">
+                <view class="item__title-container">
+                  <view v-if="item.newProduct" class="item__store-type tn-cool-bg-color-8">图鸟社区</view>
+                  <view v-else-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">自营</view>
+                  <text class="item__title">{{ item.title }}</text>
+                </view>
+                <view v-if="item.tags && item.tags.length > 0" class="item__tags-container">
+                  <view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">{{ tagItem }}</view>
+                </view>
+                <view class="item__price-container">
+                  <text class="item__price--unit">￥</text>
+                  <text class="item__price--integer">{{ item.priceInteger }}</text>
+                  <text class="item__price--dot">.</text>
+                  <text class="item__price--decimal">{{ item.priceDecimal }}</text>
+                </view>
+              </view>
+            </view>
+          </template>
+          <template v-slot:right="{ rightList }">
+            <view v-for="(item, index) in rightList" :key="item.id" class="product__item">
+              <view class="item__image">
+                <tn-lazy-load :threshold="-450" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
+              </view>
+              <view class="item__data">
+                <view class="item__title-container">
+                  <view v-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">自营</view>
+                  <text class="item__title">{{ item.title }}</text>
+                </view>
+                <view class="item__tags-container">
+                  <view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">{{ tagItem }}</view>
+                </view>
+                <view class="item__price-container">
+                  <text class="item__price--unit">￥</text>
+                  <text class="item__price--integer">{{ item.priceInteger }}</text>
+                  <text class="item__price--dot">.</text>
+                  <text class="item__price--decimal">{{ item.priceDecimal }}</text>
+                </view>
+              </view>
+            </view>
+          </template>
+        </tn-waterfall>
+      </view>
+      
+      <tn-load-more :status="loadStatus"></tn-load-more>
+      
+      <!-- 底部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://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
+            <!-- <image class="" src='https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
+            <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
+          </view>
+          <view class="tn-color-gray">圈子</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">
+                    <!-- <image class="" src='https://resource.tuniaokj.com/images/login/1/login_top3.png'></image> -->
+                    <image class="" src='https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/tabbar/case_tnnew.png'></image>
+            <!-- <image class="" src='https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
+            <!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
+          </view>
+          <view class="tn-color-gray">我的</view>
+        </view>
+      </view>
+      
+      
+      
+      <view class="tn-padding-xl tn-margin-bottom"></view>
+      
+      <!-- 回到首页悬浮按钮-->
+      <nav-index-button></nav-index-button>
+
+    </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: 'TemplateMyblog',
+    mixins: [template_page_mixin],
+    components: {
+      NavIndexButton
+    },
+    data() {
+      return {
+        historyData: [
+          {
+            title: '分销中心',
+            icon: 'organizatio',
+            color: 'orange',
+          },
+          {
+            title: '积分商城',
+            icon: 'level',
+            color: 'purple',
+          },
+          {
+            title: '限时秒杀',
+            icon: 'clock',
+            color: 'blue',
+          },
+          {
+            title: '社区团购',
+            icon: 'team',
+            color: 'purplered',
+          },
+          {
+            title: '大转盘',
+            icon: 'group-circle',
+            color: 'teal',
+          },
+          {
+            title: '商品核销',
+            icon: 'scan',
+            color: 'orangered',
+          },
+          {
+            title: '满减优惠',
+            icon: 'coupon',
+            color: 'indigo',
+          },
+          {
+            title: '视频直播',
+            icon: 'video',
+            color: 'green',
+          }
+        ],
+        current: 0,
+        scrollList: [
+          {name: '推荐', count: '10'},
+          {name: '周边'},
+          {name: '科技'},
+          {name: '音乐'},
+          {name: '电影'},
+          {name: '游戏'}
+        ],
+        loadStatus: 'loadmore',
+        list: [],
+        data: [
+          {
+            title: '图鸟科技 设计师专属笔记本 告别卡慢热',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: true, // 是否为新品
+            tags: ['满1000减80','免息'],
+            price: 6999
+          },
+          {
+            title: '图鸟科技 开发便携笔记本 告别笨重外出',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['免息'],
+            price: 7999
+          },
+          {
+            title: '图鸟科技 T10 宇宙9000 10G全网通',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: true, // 是否为新品
+            tags: [],
+            price: 4999
+          },
+          {
+            title: '图鸟科技 T10Pro 宇宙9010 10G全网通',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: true, // 是否为新品
+            tags: [],
+            price: 6999
+          },
+          {
+            title: '图鸟科技 运动手表 不用插卡即可通话',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: [],
+            price: 2999
+          },
+          {
+            title: '图鸟科技 页面设计 专为第三方提供精美酷炫页面',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
+            storeType: 2, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['酷炫'],
+            price: 10999
+          },
+          {
+            title: '图鸟科技 海报设计 想不到就过来聊聊吧',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
+            storeType: 2, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['哎呀'],
+            price: 399
+          },
+          {
+            title: '图鸟科技 环保袋',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/bag1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['合作免费送'],
+            price: 0
+          },
+          {
+            title: '图鸟科技 纸杯',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/cup2.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['合作免费送'],
+            price: 0
+          },
+          {
+            title: '图鸟科技 抱枕',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/pillow.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: [],
+            price: 99
+          }
+        ]
+      }
+    },
+    onLoad() {
+      this.getRandomData()
+    },
+    onReachBottom() {
+      this.getRandomData()
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+      // 获取随机数据
+      getRandomData() {
+        this.loadStatus = 'loading'
+        for (let i = 0; i < 10; i++) {
+          let index = this.$tn.number.randomInt(0, this.data.length - 1)
+          let item = JSON.parse(JSON.stringify(this.data[index]))
+          let price = this.getPrice(item.price)
+          item.id = this.$tn.uuid()
+          item.priceInteger = price[0]
+          item.priceDecimal = price[1]
+          this.list.push(item)
+        }
+      },
+      // 瀑布流加载完毕事件
+      handleWaterFallFinish() {
+        this.loadStatus = 'loadmore'
+      },
+      // 获取价格整数和小数部分
+      getPrice(price) {
+        const priceStr = String(price)
+        if (priceStr.indexOf('.') !== -1) {
+          return priceStr.split('.')
+        } else {
+          return [priceStr, '00']
+        }
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .template-prefer {
+    // background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  
+  /* 图标容器11 start */
+  .icon11 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }  
+  
+  /* 标题 start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题 end */
+  
+  .product__item {
+    background-color: #FFFFFF;
+    border-radius: 10rpx;
+    overflow: hidden;
+    margin: 0 10rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+    
+    .item {
+      /* 图片 start */
+      &__image {
+        width: 100%;
+        height: auto;
+        background-color: #FFFFFF;
+      }
+      /* 图片 end */
+      
+      /* 内容 start */
+      &__data {
+        padding: 8rpx 14rpx;
+      }
+      
+      /* 标题 start */
+      &__title-container {
+        text-align: justify;
+        line-height: 38rpx;
+        vertical-align: middle;
+      }
+      &__store-type {
+        height: 28rpx;
+        font-size: 20rpx;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 4rpx;
+        border-radius: 6rpx;
+        white-space: nowrap;
+        text-align: center;
+        top: -2rpx;
+        margin-right: 6rpx;
+      }
+      &__title {
+        
+      }
+      /* 标题 end */
+      
+      /* 标签 start */
+      &__tags-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      &__tag {
+        margin: 10rpx;
+        color: #E83A30;
+        border: 2rpx solid #E83A30;
+        padding: 0 6rpx;
+        border-radius: 10rpx;
+        font-size: 20rpx;
+        
+        &:first-child {
+          margin-left: 0rpx !important;
+        }
+      }
+      /* 标签 end */
+      
+      /* 价格 start */
+      &__price-container {
+        font-size: 24rpx;
+        color: #E83A30;
+        font-weight: bold;
+      }
+      &__price {
+        &--unit {
+          
+        }
+        &--integer {
+          font-size: 38rpx;
+        }
+        &--decimal {
+          
+        }
+      }
+      /* 价格 end */
+      /* 内容 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: 52rpx;
+    line-height: 90rpx;
+    // background-color: #01BEFF;
+    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(1, 190, 255, 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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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>

vipPage/blog/product/product.vue

@@ -0,0 +1,684 @@
+<template>
+  <view class="template-product 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>
+    
+
+    
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <view class="swiper-item image-banner">
+          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+        </view>
+      </swiper-item>
+    </swiper>
+    <view class="indication">
+        <block v-for="(item,index) in swiperList" :key="index">
+            <view class="spot" :class="cardCur==index?'active':''"></view>
+        </block>
+    </view>
+    
+    <view class="tn-margin">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-text-bold tn-text-xxl">
+          北北带你学设计 & 尽早放弃
+        </view>
+      </view>
+      <view class="tn-flex tn-flex-row-between tn-margin-top">
+        <view class="justify-content-item tn-text-bold tn-color-purplered">
+          <text class="" style="font-size: 50rpx;">118</text>
+          <text class="tn-text-sm">￥</text>
+        </view>
+        <view class="justify-content-item tn-color-gray tn-padding-top-xs">
+          <view class="">已售 729</view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 边距间隔 -->
+    <view class="tn-strip-bottom"></view>
+    
+    
+    <!-- 更多信息-->
+    <view class="tn-padding-top-sm tn-padding-bottom-sm">
+      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
+        <view class="tn-flex tn-flex-col-center">
+          <view class="tn-flex-1">费用</view>
+          <view class="tn-margin-left-sm" style="font-size: 28rpx;">0.01元</view>
+        </view>
+      </tn-list-cell>
+      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
+        <view class="tn-flex tn-flex-col-center">
+          <view class="tn-flex-1">活动人数</view>
+          <view class="tn-margin-left-sm" style="font-size: 28rpx;">129人</view>
+        </view>
+      </tn-list-cell>
+      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
+        <view class="tn-flex tn-flex-col-center">
+          <view class="tn-flex-1">活动时长</view>
+          <view class="tn-margin-left-sm" style="font-size: 28rpx;">90天</view>
+        </view>
+      </tn-list-cell>
+    </view>
+    
+    
+    <!-- 边距间隔 -->
+    <view class="tn-strip-bottom"></view>
+    
+    <view class="tn-margin">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-text-bold tn-text-xl">
+          活动标签
+        </view>
+      </view>
+    </view>
+    
+    <view class="">
+      <view class="tn-tag-content tn-margin tn-text-justify">
+        <view v-for="(item, index) in tagList" :key="index" class="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> {{ item.title }}
+        </view>
+      </view>
+    </view>
+    
+    <!-- <view class="">
+      <view class="tn-tag-content tn-margin tn-text-justify">
+        <view v-for="(item, index) in tagList" :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[getRandomCoolBg(index)]">
+          <text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
+        </view>
+      </view>
+    </view> -->
+    
+    <!-- 边距间隔 -->
+    <view class="tn-strip-bottom"></view>
+
+    
+    <view class="tn-margin">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-text-bold tn-text-xl">
+          内容详情
+        </view>
+      </view>
+    </view>
+    
+    <view class="content-backgroup tn-margin">
+      <image src='https://resource.tuniaokj.com/images/content/rodion.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    
+    <!-- 边距间隔 -->
+    <view class="tn-strip-bottom"></view>
+    
+    <view class="tn-margin-top-sm">
+      <tn-sticky :offsetTop="10" :customNavHeight="vuex_custom_bar_height">
+        <tn-tabs :list="fixedList" :current="current" :isScroll="false" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
+      </tn-sticky>
+    </view>
+   
+    
+    
+    <view class="">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-15">
+          <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
+          <text class="tn-text-xl">好物推荐 · 商品优选</text>
+          <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
+        </view>
+      </view>
+    </view> 
+    
+    <!-- 图文 -->
+    <!-- 比例 start-->
+    <view class="tn-flex tn-flex-wrap tn-margin-sm">
+      <block v-for="(item, index) in content" :key="index">
+        <view class="" style="width: 50%;">
+          <view class="tn-blogger-content__wrap">
+            <view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
+              <view class="image-book">
+              </view>
+            </view> 
+            
+            <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
+              <text class="tn-blogger-content__label__desc">{{ item.desc }}</text>  
+            </view>
+            
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
+              <view class="justify-content-item tn-flex tn-flex-col-center">
+                <view>
+                  <view class="tn-color-gray">
+                    <text class="tn-blogger-content__count-icon">￥</text> 
+                    <text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
+                    <!-- <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                    <text class="tn-padding-right-sm">{{ item.commentCount }}</text> -->
+                    <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                    <text class="">{{ item.likeCount }}</text>
+                  </view>
+                </view>
+              </view>
+              <!-- <view class="justify-content-item tn-text-center">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                  <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+                </view>
+              </view> -->
+            </view>
+            
+            
+          </view>
+        </view>
+      </block>
+    </view>
+    <!-- 比例 end-->
+    <view class="footerfixed tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
+      <tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroups" buttonType="round" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
+    </view>
+    
+    <view class="tn-padding-xl tn-margin"></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: 'TemplateProduct',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: '免费开源',
+          name: '商业合作请联系作者',
+          text: '微信：tnkewo',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟南南',
+          name: '欢迎加入东东们',
+          text: '如果你也有不错的作品',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '一起玩转scss',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟北北',
+          name: '微信号 tnkewo',
+          text: '商业合作请联系作者',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '努力成为大佬',
+          text: '一起加油吖',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad5.jpg',
+        }],
+        current: 0,
+        fixedList: [
+          {name: '推荐'},
+          {name: '同款'},
+          {name: '热卖', count: '99+'},
+          {name: '直播'}
+        ],
+        content: [
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 129,
+            commentCount: 999,
+            likeCount: 999
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['炸串','火锅'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '我们都是好孩子',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ],
+        countOptions: [{
+          icon: 'star',
+          text: '收藏'
+        },{
+          icon: 'share-circle',
+          text: '分享',
+        }],
+        customButtonGroups: [{
+          text: '咨询客服',
+          backgroundColor: 'tn-cool-bg-color-5',
+          color: '#FFFFFF'
+        },{
+          text: '立即预约',
+          backgroundColor: 'tn-cool-bg-color-15--reverse',
+          color: '#FFFFFF'
+        }],
+        tagList: [
+          {
+            color: 'red',
+            title: "酷炫",
+          },
+          {
+            color: 'cyan',
+            title: "设计",
+          },
+          {
+            color: 'blue',
+            title: "图鸟",
+          },
+          {
+            color: 'green',
+            title: "互联网",
+          },
+          {
+            color: 'orange',
+            title: "免费",
+          },
+          {
+            color: 'purplered',
+            title: "配色",
+          },
+          {
+            color: 'purple',
+            title: "软件开发",
+          },
+          {
+            color: 'brown',
+            title: "插画",
+          },
+          {
+            color: 'yellowgreen',
+            title: "C4D",
+          },
+          {
+            color: 'grey',
+            title: "海报",
+          }
+        ],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+      getRandomCoolBg() {
+        return this.$tn.colorUtils.getRandomCoolBgClass()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 750rpx !important;
+  }
+    
+  .card-swiper swiper-item {
+    width: 750rpx !important;
+    left: 0rpx;
+    box-sizing: border-box;
+    // padding: 0rpx 30rpx 90rpx 30rpx;
+    overflow: initial;
+  }
+    
+  .card-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    transform: scale(1);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: none;
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 100%;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #FFFFFF;
+    opacity: 0.6;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    top: -60rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 30rpx;
+    background-color: #FFFFFF;
+  }
+  
+  /* 间隔线 start*/
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+  /* 标题 start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题 end */
+  
+  /* 底部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);
+  }
+  
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 45rpx;
+      padding: 10rpx 30rpx;
+      margin: 20rpx 20rpx 5rpx 0rpx;
+      
+      &--prefix {
+        padding-right: 10rpx;
+      }  
+    }
+  }
+  /* 标签内容 end*/
+  
+  /* 内容图 start */
+  .content-backgroup {
+    z-index: -1;
+  
+    .backgroud-image {
+      border-radius: 15rpx;
+      width: 100%;
+    }
+  }
+  /* 内容图 end */
+  
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
+      border-radius: 20rpx;
+      margin: 15rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #E83A30;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 35rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx 16rpx 0 0;
+      
+      &--1 {
+        max-width: 690rpx;
+        min-width: 690rpx;
+        max-height: 400rpx;
+        min-height: 400rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 30rpx;
+      padding-right: 5rpx;
+    }
+  }
+  
+  .image-book{
+    padding: 150rpx 0rpx;
+    font-size: 16rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-picbook{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  /* 文章内容 end*/
+</style>