diff --git a/manifest.json b/manifest.json
index c42ef23..003e264 100644
--- a/manifest.json
+++ b/manifest.json
@@ -5,6 +5,7 @@
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
+    "sassImplementationName" : "node-sass",
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,
diff --git a/mock/template_page.js b/mock/template_page.js
index 8aa836d..d9da8c7 100644
--- a/mock/template_page.js
+++ b/mock/template_page.js
@@ -1,301 +1,319 @@
-/**
- * 页面展示列表数据
- */
-export default {
-  data: [
-    {
-      title: '登录注册',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [
-        {
-          icon: 'send',
-          title: '火箭登录',
-          author: '图鸟北北',
-          url: '/templatePage/login/demo1/demo1'
-        },
-        {
-          icon: 'send',
-          title: '粒子登录',
-          author: '图鸟北北',
-          url: '/templatePage/login/demo2/demo2'
-        },
-        {
-          icon: 'send',
-          title: '背景登录',
-          author: '图鸟北北',
-          url: '/templatePage/login/demo3/demo3'
-        },
-        {
-          icon: 'send',
-          title: '简约登录',
-          author: '图鸟北北',
-          url: '/templatePage/login/demo4/demo4'
-        }
-      ]
-    },
-    {
-      title: '充值提现',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [
-        {
-          icon: 'send',
-          title: '蓝色充值',
-          author: '图鸟北北',
-          url: '/templatePage/money/demo1/demo1'
-        },
-        {
-          icon: 'send',
-          title: '绿色充值',
-          author: '图鸟北北',
-          url: '/templatePage/money/demo2/demo2'
-        },
-        {
-          icon: 'send',
-          title: '暗黑充值',
-          author: '图鸟北北',
-          url: '/templatePage/money/demo3/demo3'
-        }
-      ]
-    },
-    {
-      title: '个人中心',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [
-        {
-          icon: 'send',
-          title: '夏天个人',
-          author: '图鸟北北',
-          url: '/templatePage/my/demo1/demo1'
-        },
-        {
-          icon: 'send',
-          title: '图鸟个人',
-          author: '图鸟北北',
-          url: '/templatePage/my/demo2/demo2'
-        },
-        {
-          icon: 'send',
-          title: '外卖个人',
-          author: '图鸟北北',
-          url: '/templatePage/my/demo3/demo3'
-        },
-        {
-          icon: 'send',
-          title: '高端个人',
-          author: '图鸟北北',
-          url: '/templatePage/my/demo4/demo4'
-        }
-      ]
-    },
-    {
-      title: '常用首页',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [
-        {
-          icon: 'send',
-          title: '音乐首页',
-          author: '图鸟北北',
-          url: '/templatePage/home/music/music'
-        },
-        {
-          icon: 'send',
-          title: '课程首页',
-          author: '图鸟北北',
-          url: '/templatePage/home/course/course'
-        },
-        {
-          icon: 'send',
-          title: '设计首页',
-          author: '图鸟北北',
-          url: '/templatePage/home/design/design'
-        },
-        {
-          icon: 'send',
-          title: '招聘首页',
-          author: '图鸟北北',
-          url: '/templatePage/home/job/job'
-        },
-        {
-          icon: 'send',
-          title: '投屏首页',
-          author: '图鸟北北',
-          url: '/templatePage/home/screen/screen'
-        },
-        {
-          icon: 'send',
-          title: '壁纸首页',
-          author: '图鸟北北',
-          url: '/templatePage/home/wallpaper/wallpaper'
-        },
-      ]
-    },
-    {
-      title: '骚气页面',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [
-        {
-          icon: 'send',
-          title: '健康码',
-          author: '图鸟北北',
-          url: '/templatePage/health/qrcode/qrcode'
-        },
-        {
-          icon: 'send',
-          title: '关于我们',
-          author: 'Jaylen',
-          url: '/templatePage/life/about/about'
-        },
-        {
-          icon: 'send',
-          title: '全新出发',
-          author: '你的小可爱',
-          url: '/templatePage/life/outset/outset'
-        },
-        {
-          icon: 'send',
-          title: '资讯左图',
-          author: '图鸟北北',
-          url: '/templatePage/article/demo1/demo1'
-        },
-        {
-          icon: 'send',
-          title: '资讯右图',
-          author: '图鸟北北',
-          url: '/templatePage/article/demo2/demo2'
-        },
-        {
-          icon: 'send',
-          title: '全屏轮播',
-          author: '图鸟北北',
-          url: '/templatePage/life/fullpage/fullpage'
-        },
-        {
-          icon: 'rocket',
-          title: '浏览器',
-          author: '图鸟北北',
-          url: '/templatePage/life/browser/browser'
-        },
-        {
-          icon: 'rocket',
-          title: '时钟',
-          author: '图鸟北北',
-          url: '/templatePage/time/clock/clock'
-        }
-      ]
-    },
-    {
-      title: '加载动画',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [
-        {
-          icon: 'send',
-          title: '加载动画1',
-          author: '图鸟北北',
-          url: '/templatePage/animate/loading/loading'
-        },
-        {
-          icon: 'send',
-          title: '加载动画2',
-          author: '图鸟北北',
-          url: '/templatePage/animate/loading/loading2'
-        },
-        {
-          icon: 'send',
-          title: '加载动画3',
-          author: '图鸟北北',
-          url: '/templatePage/animate/loading/loading3'
-        },
-        {
-          icon: 'send',
-          title: '加载动画4',
-          author: '图鸟北北',
-          url: '/templatePage/animate/loading/loading4'
-        },
-        {
-          icon: 'send',
-          title: '加载动画5',
-          author: '图鸟北北',
-          url: '/templatePage/animate/loading/loading5'
-        }
-      ]
-    },
-    {
-       title: '动效元素',
-       backgroundColor: 'tn-cool-bg-color-1',
-       list: [
-         {
-           icon: 'send',
-           title: '流星悬浮',
-           author: '图鸟北北',
-           url: '/templatePage/animate/suspended/suspended'
-         },
-         {
-           icon: 'send',
-           title: '随机粒子',
-           author: 'Jaylen',
-           url: '/templatePage/animate/particle/particle'
-         },
-         {
-           icon: 'send',
-           title: '相册图集',
-           author: '你的小可爱',
-           url: '/templatePage/animate/photo/photo'
-         },
-         {
-           icon: 'send',
-           title: '镂空效果',
-           author: '你的小可爱',
-           url: '/templatePage/animate/hollow/hollow'
-         },
-         {
-           icon: 'send',
-           title: '泡泡飘出',
-           author: 'Jaylen',
-           url: '/templatePage/animate/bubble/bubble'
-         },
-         {
-           icon: 'send',
-           title: 'css波浪',
-           author: '图鸟北北',
-           url: '/templatePage/animate/wave/wave'
-         }
-       ]
-     },
-     {
-        title: '群友力献',
-        backgroundColor: 'tn-cool-bg-color-1',
-        list: [
-          {
-            icon: 'send',
-            title: '3D全景(第三方，有免费版付费版)',
-            author: '图鸟北北 & 芊云全景',
-            url: '/templatePage/life/pano/pano'
-          },
-          {
-            icon: 'send',
-            title: '3D模型(第三方，有免费版付费版)',
-            author: '图鸟北北 & 芊云全景',
-            url: '/templatePage/life/pano/model'
-          },
-          {
-            icon: 'send',
-            title: '微信红包封面',
-            author: '微信红包封面',
-            url: '/templatePage/life/cover/cover'
-          },
-          {
-            icon: 'send',
-            title: '营销小游戏-魔方',
-            author: '最帅的你',
-            url: '/templatePage/life/cube/cube'
-          },
-          {
-            icon: 'rocket',
-            title: '图鸟生态，期待你的加入',
-            author: '合作微信 tnkewo',
-            url: '/templatePage/life/candle/candle'
-          }
-        ]
-      }
-  ]
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [
+    {
+      title: '登录注册',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '火箭登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '粒子登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '背景登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '简约登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo4/demo4'
+        }
+      ]
+    },
+    {
+      title: '充值提现',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '蓝色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '绿色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '暗黑充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo3/demo3'
+        }
+      ]
+    },
+    {
+      title: '优惠卡券',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '优惠卡券1',
+          author: '图鸟北北',
+          url: '/templatePage/coupon/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '优惠卡券2',
+          author: '图鸟北北',
+          url: '/templatePage/coupon/demo2/demo2'
+        }
+      ]
+    },
+    {
+      title: '个人中心',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '夏天个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '图鸟个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '外卖个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '高端个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo4/demo4'
+        }
+      ]
+    },
+    {
+      title: '常用首页',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '音乐首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/music/music'
+        },
+        {
+          icon: 'send',
+          title: '课程首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/course/course'
+        },
+        {
+          icon: 'send',
+          title: '设计首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/design/design'
+        },
+        {
+          icon: 'send',
+          title: '招聘首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/job/job'
+        },
+        {
+          icon: 'send',
+          title: '投屏首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/screen/screen'
+        },
+        {
+          icon: 'send',
+          title: '壁纸首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/wallpaper/wallpaper'
+        },
+      ]
+    },
+    {
+      title: '骚气页面',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '健康码',
+          author: '图鸟北北',
+          url: '/templatePage/health/qrcode/qrcode'
+        },
+        {
+          icon: 'send',
+          title: '关于我们',
+          author: 'Jaylen',
+          url: '/templatePage/life/about/about'
+        },
+        {
+          icon: 'send',
+          title: '全新出发',
+          author: '你的小可爱',
+          url: '/templatePage/life/outset/outset'
+        },
+        {
+          icon: 'send',
+          title: '资讯左图',
+          author: '图鸟北北',
+          url: '/templatePage/article/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '资讯右图',
+          author: '图鸟北北',
+          url: '/templatePage/article/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '全屏轮播',
+          author: '图鸟北北',
+          url: '/templatePage/life/fullpage/fullpage'
+        },
+        {
+          icon: 'rocket',
+          title: '浏览器',
+          author: '图鸟北北',
+          url: '/templatePage/life/browser/browser'
+        },
+        {
+          icon: 'rocket',
+          title: '时钟',
+          author: '图鸟北北',
+          url: '/templatePage/time/clock/clock'
+        }
+      ]
+    },
+    {
+      title: '加载动画',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '加载动画1',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading'
+        },
+        {
+          icon: 'send',
+          title: '加载动画2',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading2'
+        },
+        {
+          icon: 'send',
+          title: '加载动画3',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading3'
+        },
+        {
+          icon: 'send',
+          title: '加载动画4',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading4'
+        },
+        {
+          icon: 'send',
+          title: '加载动画5',
+          author: '图鸟北北',
+          url: '/templatePage/animate/loading/loading5'
+        }
+      ]
+    },
+    {
+       title: '动效元素',
+       backgroundColor: 'tn-cool-bg-color-1',
+       list: [
+         {
+           icon: 'send',
+           title: '流星悬浮',
+           author: '图鸟北北',
+           url: '/templatePage/animate/suspended/suspended'
+         },
+         {
+           icon: 'send',
+           title: '随机粒子',
+           author: 'Jaylen',
+           url: '/templatePage/animate/particle/particle'
+         },
+         {
+           icon: 'send',
+           title: '相册图集',
+           author: '你的小可爱',
+           url: '/templatePage/animate/photo/photo'
+         },
+         {
+           icon: 'send',
+           title: '镂空效果',
+           author: '你的小可爱',
+           url: '/templatePage/animate/hollow/hollow'
+         },
+         {
+           icon: 'send',
+           title: '泡泡飘出',
+           author: 'Jaylen',
+           url: '/templatePage/animate/bubble/bubble'
+         },
+         {
+           icon: 'send',
+           title: 'css波浪',
+           author: '图鸟北北',
+           url: '/templatePage/animate/wave/wave'
+         }
+       ]
+     },
+     {
+        title: '群友力献',
+        backgroundColor: 'tn-cool-bg-color-1',
+        list: [
+          {
+            icon: 'send',
+            title: '3D全景(第三方，有免费版付费版)',
+            author: '图鸟北北 & 芊云全景',
+            url: '/templatePage/life/pano/pano'
+          },
+          {
+            icon: 'send',
+            title: '3D模型(第三方，有免费版付费版)',
+            author: '图鸟北北 & 芊云全景',
+            url: '/templatePage/life/pano/model'
+          },
+          {
+            icon: 'send',
+            title: '微信红包封面',
+            author: '微信红包封面',
+            url: '/templatePage/life/cover/cover'
+          },
+          {
+            icon: 'send',
+            title: '营销小游戏-魔方',
+            author: '最帅的你',
+            url: '/templatePage/life/cube/cube'
+          },
+          {
+            icon: 'rocket',
+            title: '图鸟生态，期待你的加入',
+            author: '合作微信 tnkewo',
+            url: '/templatePage/life/candle/candle'
+          }
+        ]
+      }
+  ]
 }
\ No newline at end of file
diff --git a/mock/vip_page.js b/mock/vip_page.js
index 2688e19..491dd64 100644
--- a/mock/vip_page.js
+++ b/mock/vip_page.js
@@ -1,305 +1,384 @@
-/**
- * 页面展示列表数据
- */
-export default {
-  data: [{
-      title: '圈子博客',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [{
-          icon: 'order',
-          title: '操作指引',
-          author: '图鸟科技',
-          url: '/vipPage/life/guide/guide'
-        },{
-          icon: 'order',
-          title: '首次指引',
-          author: '图鸟科技',
-          url: '/vipPage/life/start/start'
-        },
-        {
-          icon: 'order',
-          title: '圈子首页',
-          author: '图鸟科技',
-          url: '/vipPage/blog/blog/blog'
-        },
-        {
-          icon: 'order',
-          title: '社交圈子',
-          author: '图鸟科技',
-          url: '/vipPage/blog/socialize/socialize'
-        },
-        {
-          icon: 'order',
-          title: '简约圈子(旧)',
-          author: '图鸟科技',
-          url: '/vipPage/blog/circle/circle'
-        },
-        {
-          icon: 'order',
-          title: '圈子个人',
-          author: '图鸟科技',
-          url: '/vipPage/blog/myblog/myblog'
-        },
-        {
-          icon: 'order',
-          title: '消息通知',
-          author: '图鸟科技',
-          url: '/vipPage/blog/message/message'
-        },
-        {
-          icon: 'order',
-          title: '商品优选',
-          author: '图鸟科技',
-          url: '/vipPage/blog/prefer/prefer'
-        },
-        {
-          icon: 'order',
-          title: '优选详情',
-          author: '图鸟科技',
-          url: '/vipPage/blog/product/product'
-        },
-        {
-          icon: 'order',
-          title: '博客博主',
-          author: '图鸟科技',
-          url: '/vipPage/blog/blogger/blogger'
-        },
-        {
-          icon: 'order',
-          title: '酷炫功能',
-          author: '图鸟科技',
-          url: '/vipPage/home/cool/cool'
-        },
-        {
-          icon: 'order',
-          title: '友情链接',
-          author: '图鸟科技',
-          url: '/vipPage/home/link/link'
-        },
-        {
-          icon: 'order',
-          title: '祝福页面',
-          author: '图鸟科技',
-          url: '/vipPage/life/bless/bless'
-        }
-      ]
-    },
-    {
-      title: '酷炫首页',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [{
-          icon: 'order',
-          title: '图鸟首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/tuniao/tuniao'
-        },
-        {
-          icon: 'order',
-          title: '奶茶首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/tea/tea'
-        },
-        {
-          icon: 'order',
-          title: '阅读首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/read/read'
-        },
-        {
-          icon: 'order',
-          title: '月亮首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/moon/moon'
-        },
-        {
-          icon: 'order',
-          title: '计划首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/plan/plan'
-        },
-        {
-          icon: 'order',
-          title: '新年首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/year/year'
-        },
-        {
-          icon: 'order',
-          title: '电影首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/movie/movie'
-        },
-        {
-          icon: 'order',
-          title: '食物首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/food/food'
-        },
-        {
-          icon: 'order',
-          title: '拟态首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/mimicry/mimicry'
-        },
-        {
-          icon: 'order',
-          title: '充电首页',
-          author: '图鸟科技',
-          url: '/vipPage/life/power/power'
-        },
-        {
-          icon: 'order',
-          title: '卡片首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/card/card'
-        },
-        {
-          icon: 'order',
-          title: '健康首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/health/health'
-        },
-        {
-          icon: 'order',
-          title: '全景首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/panoramic/panoramic'
-        },
-        {
-          icon: 'order',
-          title: 'uCharts首页',
-          author: '图鸟科技',
-          url: '/vipPage/home/ucharts/ucharts'
-        },
-      ]
-    },
-    {
-      title: '商城店铺',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [{
-          icon: 'order',
-          title: '店铺商品',
-          author: '图鸟科技',
-          url: '/vipPage/shop/store/store'
-        },
-        {
-          icon: 'order',
-          title: '商品订单',
-          author: '图鸟科技',
-          url: '/vipPage/shop/order/order'
-        },
-        {
-          icon: 'order',
-          title: '商品分类',
-          author: '图鸟科技',
-          url: '/vipPage/shop/classify/classify'
-        },
-        {
-          icon: 'order',
-          title: '积分活动',
-          author: '图鸟科技',
-          url: '/vipPage/shop/money/money'
-        }
-      ]
-    },
-    {
-      title: '会员需求',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [{
-          icon: 'order',
-          title: 'Drag长按拖拽随机固定',
-          author: '图鸟科技',
-          url: '/vipPage/components/drag/basic-drag/basic-drag'
-        },
-        {
-          icon: 'order',
-          title: '图片上传长按拖拽',
-          author: '图鸟科技',
-          url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
-        },
-        {
-          icon: 'order',
-          title: 'Cropper图片裁剪',
-          author: '图鸟科技',
-          url: '/vipPage/components/cropper/cropper'
-        },
-        {
-          icon: 'order',
-          title: 'StackSwiper堆叠轮播',
-          author: '图鸟科技',
-          url: '/vipPage/components/stack-swiper/stack-swiper'
-        },
-        {
-          icon: 'order',
-          title: '重力效果',
-          author: '图鸟科技',
-          url: '/vipPage/home/gravity/page1/page1'
-        },
-        {
-          icon: 'order',
-          title: '下拉刷新',
-          author: '图鸟科技',
-          url: '/vipPage/components/scroll-view/index'
-        },
-        {
-          icon: 'order',
-          title: '级联选择',
-          author: '图鸟科技',
-          url: '/vipPage/components/cascade-selection/cascade-selection'
-        },
-        {
-          icon: 'order',
-          title: '瀑布流',
-          author: '图鸟科技',
-          url: '/vipPage/components/waterfall/waterfall'
-        },
-        {
-          icon: 'order',
-          title: '树形菜单',
-          author: '图鸟科技',
-          url: '/vipPage/components/tree-view/tree-view'
-        },
-        {
-          icon: 'order',
-          title: '表格',
-          author: '图鸟科技',
-          url: '/vipPage/components/table/index'
-        },
-        {
-          icon: 'order',
-          title: '取色器',
-          author: '图鸟科技',
-          url: '/vipPage/life/color/color'
-        },
-        {
-          icon: 'order',
-          title: '图鸟轮播(实验)',
-          author: '图鸟科技',
-          url: '/vipPage/components/custom-swiper/index'
-        }
-      ]
-    },
-    {
-      title: '生态支持',
-      backgroundColor: 'tn-cool-bg-color-1',
-      list: [{
-          icon: 'order',
-          title: '短视频',
-          author: '图鸟 & 第三方',
-          url: '/thirdPage/short-video/short-video'
-        },{
-          icon: 'order',
-          title: '外卖模板',
-          author: '图鸟 & 第三方',
-          url: '/takeOutPage/walking-route/walking-route'
-        },
-        {
-          icon: 'order',
-          title: '期待你的加入',
-          author: '图鸟 & 第三方',
-          url: '/templatePage/life/candle/candle'
-        }
-      ]
-    }
-  ]
-}
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [{
+      title: '圈子博客',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '操作指引',
+          author: '图鸟科技',
+          url: '/vipPage/life/guide/guide'
+        },{
+          icon: 'order',
+          title: '首次指引',
+          author: '图鸟科技',
+          url: '/vipPage/life/start/start'
+        },
+        {
+          icon: 'order',
+          title: '圈子首页',
+          author: '图鸟科技',
+          url: '/vipPage/blog/blog/blog'
+        },
+        {
+          icon: 'order',
+          title: '社交圈子',
+          author: '图鸟科技',
+          url: '/vipPage/blog/socialize/socialize'
+        },
+        {
+          icon: 'order',
+          title: '简约圈子(旧)',
+          author: '图鸟科技',
+          url: '/vipPage/blog/circle/circle'
+        },
+        {
+          icon: 'order',
+          title: '圈子个人',
+          author: '图鸟科技',
+          url: '/vipPage/blog/myblog/myblog'
+        },
+        {
+          icon: 'order',
+          title: '消息通知',
+          author: '图鸟科技',
+          url: '/vipPage/blog/message/message'
+        },
+        {
+          icon: 'order',
+          title: '商品优选',
+          author: '图鸟科技',
+          url: '/vipPage/blog/prefer/prefer'
+        },
+        {
+          icon: 'order',
+          title: '优选详情',
+          author: '图鸟科技',
+          url: '/vipPage/blog/product/product'
+        },
+        {
+          icon: 'order',
+          title: '博客博主',
+          author: '图鸟科技',
+          url: '/vipPage/blog/blogger/blogger'
+        },
+        {
+          icon: 'order',
+          title: '酷炫功能',
+          author: '图鸟科技',
+          url: '/vipPage/home/cool/cool'
+        },
+        {
+          icon: 'order',
+          title: '友情链接',
+          author: '图鸟科技',
+          url: '/vipPage/home/link/link'
+        },
+        {
+          icon: 'order',
+          title: '祝福页面',
+          author: '图鸟科技',
+          url: '/vipPage/life/bless/bless'
+        }
+      ]
+    },
+    {
+      title: '酷炫首页',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '图鸟首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/tuniao/tuniao'
+        },
+        {
+          icon: 'order',
+          title: '奶茶首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/tea/tea'
+        },
+        {
+          icon: 'order',
+          title: '阅读首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/read/read'
+        },
+        {
+          icon: 'order',
+          title: '月亮首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/moon/moon'
+        },
+        {
+          icon: 'order',
+          title: '计划首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/plan/plan'
+        },
+        {
+          icon: 'order',
+          title: '新年首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/year/year'
+        },
+        {
+          icon: 'order',
+          title: '电影首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/movie/movie'
+        },
+        {
+          icon: 'order',
+          title: '食物首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/food/food'
+        },
+        {
+          icon: 'order',
+          title: '拟态首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/mimicry/mimicry'
+        },
+        {
+          icon: 'order',
+          title: '充电首页',
+          author: '图鸟科技',
+          url: '/vipPage/life/power/power'
+        },
+        {
+          icon: 'order',
+          title: '卡片首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/card/card'
+        },
+        {
+          icon: 'order',
+          title: '健康首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/health/health'
+        },
+        {
+          icon: 'order',
+          title: '全景首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/panoramic/panoramic'
+        },
+        {
+          icon: 'order',
+          title: 'uCharts首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/ucharts/ucharts'
+        },
+      ]
+    },
+    {
+      title: '商城店铺',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '店铺商品',
+          author: '图鸟科技',
+          url: '/vipPage/shop/store/store'
+        },
+        {
+          icon: 'order',
+          title: '商品订单',
+          author: '图鸟科技',
+          url: '/vipPage/shop/order/order'
+        },
+        {
+          icon: 'order',
+          title: '商品分类',
+          author: '图鸟科技',
+          url: '/vipPage/shop/classify/classify'
+        },
+        {
+          icon: 'order',
+          title: '积分活动',
+          author: '图鸟科技',
+          url: '/vipPage/shop/money/money'
+        }
+      ]
+    },
+    {
+      title: '定制需求',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: 'Drag长按拖拽随机固定',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/basic-drag/basic-drag'
+        },
+        {
+          icon: 'order',
+          title: '列表长按拖拽排序',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/list-drag/list-drag'
+        },
+        {
+          icon: 'order',
+          title: '图片上传长按拖拽',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
+        },
+        {
+          icon: 'order',
+          title: 'Cropper图片裁剪',
+          author: '图鸟科技',
+          url: '/vipPage/components/cropper/cropper'
+        },
+        {
+          icon: 'order',
+          title: 'StackSwiper堆叠轮播',
+          author: '图鸟科技',
+          url: '/vipPage/components/stack-swiper/stack-swiper'
+        },
+        {
+          icon: 'order',
+          title: '重力效果',
+          author: '图鸟科技',
+          url: '/vipPage/home/gravity/page1/page1'
+        },
+        {
+          icon: 'order',
+          title: '下拉刷新',
+          author: '图鸟科技',
+          url: '/vipPage/components/scroll-view/index'
+        },
+        {
+          icon: 'order',
+          title: '级联选择',
+          author: '图鸟科技',
+          url: '/vipPage/components/cascade-selection/cascade-selection'
+        },
+        {
+          icon: 'order',
+          title: '瀑布流',
+          author: '图鸟科技',
+          url: '/vipPage/components/waterfall/waterfall'
+        },
+        {
+          icon: 'order',
+          title: '树形菜单',
+          author: '图鸟科技',
+          url: '/vipPage/components/tree-view/tree-view'
+        },
+        {
+          icon: 'order',
+          title: '表格',
+          author: '图鸟科技',
+          url: '/vipPage/components/table/index'
+        },
+        {
+          icon: 'order',
+          title: '取色器',
+          author: '图鸟科技',
+          url: '/vipPage/life/color/color'
+        },
+        {
+          icon: 'order',
+          title: '图鸟轮播(实验)',
+          author: '图鸟科技',
+          url: '/vipPage/components/custom-swiper/index'
+        },
+        {
+          icon: 'order',
+          title: '补光灯',
+          author: '图鸟科技',
+          url: '/vipPage/life/light/light'
+        },
+        {
+          icon: 'order',
+          title: '自适应轮播',
+          author: '图鸟科技',
+          url: '/vipPage/life/active/active'
+        }
+      ]
+    },
+    {
+      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: '图鸟 & 第三方',
+          url: '/takeOutPage/walking-route/walking-route'
+        },
+        {
+          icon: 'order',
+          title: '期待你的加入',
+          author: '图鸟 & 第三方',
+          url: '/templatePage/life/candle/candle'
+        }
+      ]
+    }
+  ]
+}
diff --git a/pages.json b/pages.json
index cde90c2..2e0ab2d 100644
--- a/pages.json
+++ b/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": [{
diff --git a/pages/template/template.vue b/pages/template/template.vue
index 5df6388..b37284f 100644
--- a/pages/template/template.vue
+++ b/pages/template/template.vue
@@ -1,194 +1,194 @@
-<template>
-  <view class="template tn-safe-area-inset-bottom">
-  
-    <view class="top-backgroup">
-      <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">
-      <view class="nav_title--wrap tn-margin-bottom-sm">
-        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
-      </view>
-      
-      <view class='nav-list'>
-        <block v-for="(content_item, content_index) in item.list" :key="content_index">
-          <navigator
-            open-type="navigate"
-            hover-class='none'
-            :url="content_item.url"
-            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
-            :class="[
-              getRandomCoolBg(content_index)
-            ]"
-          >
-            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
-              <view class="nav-link">
-                <view class='title'>{{ content_item.title }}</view>
-              </view>
-              <view class="icon">
-                <view :class="['tn-icon-' + content_item.icon]"></view>
-              </view>
-            </view>
-            <view class="author">
-              <view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
-                <text class="tn-icon-code tn-padding-right-xs"></text>
-                <text class=""> {{ content_item.author }} </text>
-              </view>
-            </view>
-          </navigator>
-        </block>
-      </view>
-    </block>
-    
-    <view class="tn-padding-bottom-xs"></view>
-  
-  </view>
-</template>
-
-<script>
-  import templateListData from '@/mock/template_page.js'
-  
-  export default {
-    name: 'TemplatePage',
-    filters: {
-      titleFilter(value) {
-        if (value.length === 0) {
-          return ''
-        }
-        let newString = ''
-        for (let i = 0; i < value.length; i++) {
-          if (i !== 0) {
-            newString += ' / '
-          }
-          newString += value[i]
-        }
-        return newString
-      }
-    },
-    data() {
-      return {
-        // nav菜单列表
-        navList: templateListData.data
-      }
-    },
-    methods: {
-      getRandomCoolBg() {
-        return this.$tn.color.getRandomCoolBgClass()
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  /* 顶部背景图 start */
-  .top-backgroup {
-    height: 450rpx;
-    z-index: -1;
-  
-    .backgroud-image {
-      width: 100%;
-      height: 667rpx;
-    }
-  }
-  /* 顶部背景图 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 */
-  
-  /* 组件导航列表 start*/
-  .nav-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0rpx 12rpx 0rpx;
-    justify-content: space-between;
-    
-
-    
-    /* 列表元素 start */
-    .nav-list-item {
-      padding: 50rpx 30rpx 36rpx 30rpx;
-      border-radius: 12rpx;
-      width: 100%;
-      margin: 0 18rpx 90rpx;
-      background-size: cover;
-      background-position: center;
-      position: relative;
-      z-index: 99;
-      // display: flex;
-      // align-items: center;
-      // justify-content: space-between;
-      
-      /* 元素标题 start */
-      .nav-link {
-        flex: 1;
-        font-size: 32rpx;
-        text-transform: capitalize;
-        padding: 10rpx 0 20rpx 0;
-        position: relative;
-        
-        .title {
-          color: #FFFFFF;
-          text-align: left;
-        }
-      }
-      /* 元素标题 end */
-      
-      /* 元素图标 start */
-      .icon {
-        font-variant: small-caps;
-        width: 70rpx;
-        height: 70rpx;
-        line-height: 70rpx;
-        margin: 0;
-        padding: 0;
-        display: inline-flex;
-        text-align: center;
-        justify-content: center;
-        vertical-align: middle;
-        font-size: 45rpx;
-        color: #FFFFFF;
-        white-space: nowrap;
-        opacity: 0.9;
-        background-color: rgba(0, 0, 0, 0.05);
-        background-size: cover;
-        background-position: 50%;
-        border-radius: 5000rpx;
-      }
-      /* 元素图标 end */
-      
-      /* 作者信息 start*/
-      .author {
-        // background-color: red;
-        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
-        border-radius: 0 0 15rpx 15rpx;
-        position: absolute;
-        width: 85%;
-        line-height: 50rpx;
-        left: 50%;
-        bottom: -50rpx;
-        transform: translateX(-50%);
-        z-index: -1;
-        text-align: center;
-      }
-      /* 作者信息 end*/
-    }
-    /* 列表元素 end */
-  }
-  /* 组件导航列表 end*/
-</style>
+<template>
+  <view class="template tn-safe-area-inset-bottom">
+  
+    <view class="top-backgroup">
+      <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">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="nav-link">
+                <view class='title'>{{ content_item.title }}</view>
+              </view>
+              <view class="icon">
+                <view :class="['tn-icon-' + content_item.icon]"></view>
+              </view>
+            </view>
+            <view class="author">
+              <view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
+                <text class="tn-icon-code tn-padding-right-xs"></text>
+                <text class=""> {{ content_item.author }} </text>
+              </view>
+            </view>
+          </navigator>
+        </block>
+      </view>
+    </block>
+    
+    <view class="tn-padding-bottom-xs"></view>
+  
+  </view>
+</template>
+
+<script>
+  import templateListData from '@/mock/template_page.js'
+  
+  export default {
+    name: 'TemplatePage',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        // nav菜单列表
+        navList: templateListData.data
+      }
+    },
+    methods: {
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 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 */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 50rpx 30rpx 36rpx 30rpx;
+      border-radius: 12rpx;
+      width: 100%;
+      margin: 0 18rpx 90rpx;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      z-index: 99;
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
+      
+      /* 元素标题 start */
+      .nav-link {
+        flex: 1;
+        font-size: 32rpx;
+        text-transform: capitalize;
+        padding: 10rpx 0 20rpx 0;
+        position: relative;
+        
+        .title {
+          color: #FFFFFF;
+          text-align: left;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        width: 70rpx;
+        height: 70rpx;
+        line-height: 70rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 45rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+      
+      /* 作者信息 start*/
+      .author {
+        // background-color: red;
+        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
+        border-radius: 0 0 15rpx 15rpx;
+        position: absolute;
+        width: 85%;
+        line-height: 50rpx;
+        left: 50%;
+        bottom: -50rpx;
+        transform: translateX(-50%);
+        z-index: -1;
+        text-align: center;
+      }
+      /* 作者信息 end*/
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+</style>
diff --git a/pages/vip/vip.vue b/pages/vip/vip.vue
index c823b2e..258abe3 100644
--- a/pages/vip/vip.vue
+++ b/pages/vip/vip.vue
@@ -1,508 +1,523 @@
-<template>
-  <view class="vip tn-safe-area-inset-bottom">
-    <view class="top-backgroup">
-      <image src='https://resource.tuniaokj.com/images/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
-    </view>
-    
-    <swiper class="card-swiper" :circular="true"
-      :autoplay="false" duration="500" interval="180000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper"  style="margin-top: -280rpx;"> 
-      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
-        <!-- <view class="swiper-item image-banner">
-          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
-        </view> -->
-        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
-        </view> -->
-        
-        <view class="tnphone-white-min swiper-item  wow fadeInLeft2" @click="navTuniaoMoban">
-        	<view class="skin wow fadeInRight2">
-        	  <view class="screen wow fadeInUp2">
-        		  <!-- <view class="head">
-        			  <text>{{item.name}}</text>
-        		  </view> -->
-        		  <view class="peak wow">
-        			  <view class="sound"></view>
-        			  <view class="lens"></view>
-        		  </view>
-        		  <!-- <view class="area-l">
-        			  <view class="">
-                  <text class="tn-icon-all"></text>
-                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
-        			  </view>
-        		  </view>
-        		  <view class="area-r">
-        			  <view class="">
-                  <text class="tn-icon-light"></text>
-                  <text class="tn-icon-time tn-padding-left-xs"></text>
-                </view>
-        		  </view> -->
-              <!-- <view class="talk"></view> -->
-              
-              <view class="image-banner">
-                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
-              </view>
-        
-        		</view>
-        	</view>
-        </view>
-      </swiper-item>
-    </swiper>
-    
-    <!-- 方式4 start-->
-    <view class="tn-flex tn-padding-bottom-sm">
-      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoVUE3">
-        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
-          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-            <view class="tn-icon-level-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
-          </view>  
-          <view class="tn-color-gray--dark tn-text-center">
-            <text class="tn-text-ellipsis">图鸟VUE3</text>
-          </view>
-        </view>
-      </view>
-      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoMoban">
-        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
-          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
-          </view>  
-          <view class="tn-color-gray--dark tn-text-center">
-            <text class="tn-text-ellipsis">圈子博客</text>
-          </view>
-        </view>
-      </view>
-      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navBusiness">
-        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
-          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-            <view class="tn-icon-identity-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
-          </view>  
-          <view class="tn-color-gray--dark tn-text-center">
-            <text class="tn-text-ellipsis">简约商圈</text>
-          </view>
-        </view>
-      </view>
-      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navXiongJie">
-        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
-          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
-            <view class="tn-icon-image-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
-          </view>  
-          <view class="tn-color-gray--dark tn-text-center">
-            <text class="tn-text-ellipsis">凶姐壁纸</text>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- 方式4 end-->
-    
-    
-    <!-- banner start-->
-    <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
-      <view class="" style="width: 100%;">
-        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-circle2.png');">
-           <view class="image-capsule">
-           </view>
-         </view>  
-      </view>  
-    </view>
-    <!-- banner end-->
-
-    
-    <block v-for="(item, index) in navList" :key="index">
-      <view class="nav_title--wrap tn-margin-bottom-sm">
-        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
-      </view>
-      
-      <view class='nav-list'>
-        <block v-for="(content_item, content_index) in item.list" :key="content_index">
-          <navigator
-            open-type="navigate"
-            hover-class='none'
-            :url="content_item.url"
-            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
-            :class="[
-              getRandomCoolBg(content_index)
-            ]"
-          >
-            <view class="nav-link">
-              <view class='title'>{{ content_item.title }}</view>
-              <view class='author'> <text class="tn-icon-code tn-padding-right-xs"></text> {{ content_item.author }}</view>
-            </view>
-            <!-- <view class="icon">
-              <view :class="['tn-icon-' + content_item.icon]"></view>
-            </view> -->
-          </navigator>
-        </block>
-      </view>
-    </block>
-    
-    <view class="tn-padding-xl tn-text-center tn-color-gray">
-      <view class="tn-padding-bottom-sm" @click="navPlus">
-        关于图鸟会员
-        <text class="tn-icon-rocket tn-padding-left-xs"></text>
-      </view>
-    </view>
-    
-    
-  </view>
-</template>
-
-<script>
-  import vipListData from '@/mock/vip_page.js'
-  
-  export default {
-    name: 'Vip',
-    filters: {
-      titleFilter(value) {
-        if (value.length === 0) {
-          return ''
-        }
-        let newString = ''
-        for (let i = 0; i < value.length; i++) {
-          if (i !== 0) {
-            newString += ' / '
-          }
-          newString += value[i]
-        }
-        return newString
-      }
-    },
-    data() {
-      return {
-        cardCur: 0,
-        swiperList: [{
-          id: 0,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle1.jpg',
-        }, {
-          id: 1,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle2.jpg',
-        }, {
-          id: 2,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle3.jpg',
-        }, {
-          id: 3,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle4.jpg',
-        },{
-          id: 4,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle5.jpg',
-        },{
-          id: 5,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle6.jpg',
-        },{
-          id: 6,
-          type: 'image',
-          url: 'https://resource.tuniaokj.com/images/index_bg/circle7.jpg',
-        }
-        ],
-        // nav菜单列表
-        navList: vipListData.data
-      }
-    },
-    methods: {
-      // cardSwiper
-      cardSwiper(e) {
-        this.cardCur = e.detail.current
-      },
-      getRandomCoolBg() {
-        return this.$tn.color.getRandomCoolBgClass()
-      },
-      // 跳转到图鸟VUE3
-      navTuniaoVUE3(e) {
-        wx.vibrateLong();
-        uni.navigateToMiniProgram({
-          appId: 'wxd4296f570b8b39c9'
-        })
-      },
-      // 跳转到图鸟模板
-      navTuniaoMoban(e) {
-        wx.vibrateLong();
-        uni.navigateToMiniProgram({
-          appId: 'wx13c0ed55c12d2afb'
-        })
-      },
-      // 跳转到关于作者
-      navSaitolia(e) {
-        wx.vibrateLong();
-        uni.navigateTo({
-          url: '/templatePage/life/plus/plus'
-        })
-      },
-      // 跳转到图鸟模板2
-      navBusiness(e) {
-        wx.vibrateLong();
-        uni.navigateToMiniProgram({
-          appId: 'wx9056aabd1c0c6a8a'
-        })
-      },
-      // 跳转到图鸟模板3
-      navXiongJie(e) {
-        wx.vibrateLong();
-        uni.navigateToMiniProgram({
-          appId: 'wx76bb942a2810e8e5'
-        })
-      },
-      
-      // 跳转到会员协议
-      navPlus() {
-        uni.navigateTo({
-          url: '/templatePage/life/plus/plus'
-        })
-      },
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  /* 顶部背景图 start */
-  .top-backgroup {
-    height: 350rpx;
-    z-index: -1;
-  
-    .backgroud-image {
-      width: 100%;
-      height: 667rpx;
-    }
-  }
-  /* 顶部背景图 end */
-  
-  /* 轮播 start */
-/* .tnphone-white-min 细边框*/
-  .tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
-  	box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
-  .tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
-  .tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
-  .tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
-  .tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
-  .tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
-  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
-  .tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
-  .tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
-  .tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
-  .tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
-  .tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
-  .tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
-  .tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
-  .tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
-  .tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
-  .tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
-  .tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
-  .tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
-  .tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
-
-  
-  /* 轮播样机样式 start*/
-  .card-swiper {
-    height: 830rpx !important;
-  }
-  
-  .card-swiper swiper-item {
-    width: 260rpx !important;
-    // left: 170rpx;
-    // width: 380rpx !important;
-    box-sizing: border-box;
-    padding: 0rpx 15rpx 90rpx 15rpx;
-    overflow: initial;
-  }
-  
-  .card-swiper swiper-item .swiper-item {
-    display: block;
-    transform: scale(0.45);
-    transition: all 0.2s ease-in 0s;
-    overflow: hidden;
-  }
-  
-  .card-swiper swiper-item.cur .swiper-item {
-    transform: scale(0.65);
-    transition: all 0.2s ease-in 0s;
-  }
-  
-  .image-banner{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .image-banner image{
-    width: 100%;
-    height: 770rpx;
-    // border: 1rpx solid red;
-  }
-  
-  /* 轮播指示点 start*/
-  .indication{
-    z-index: 9999;
-    width: 100%;
-    height: 36rpx;
-    position: absolute;
-    display:flex;
-    flex-direction:row;
-    align-items:center;
-    justify-content:center;
-  }
-  
-  .spot{
-    background-color: #000;
-    opacity: 0;
-    width: 10rpx;
-    height: 10rpx;
-    border-radius: 20rpx;
-    margin: 0 8rpx !important;
-    top: -80rpx;
-    position: relative;
-  }
-  
-  .spot.active{
-    opacity: 0;
-    width: 30rpx;
-    background-color: #000;
-  }
-  
-  /* 轮播 end */
-  
-  /* 图标容器4 start */
-    .tn-cool-color-icon4{
-      // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
-      // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
-      -webkit-background-clip: text;
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-      text-fill-color: transparent;
-    }
-    .icon4 {
-      &__item {
-        width: 30%;
-        background-color: #FFFFFF;
-        border-radius: 10rpx;
-        padding: 30rpx;
-        margin: 20rpx 10rpx;
-        transform: scale(1);
-        transition: transform 0.3s linear;
-        transform-origin: center center;
-        
-        &--icon {
-          width: 110rpx;
-          height: 110rpx;
-          font-size: 55rpx;
-          border-radius: 50%;
-          margin-bottom: 18rpx;
-          position: relative;
-          z-index: 1;
-          box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
-            0px -8px 40px rgba(255, 255, 255, 1),
-            inset 0px -10px 10px rgba(70,23,129, 0.05),
-            inset 0px 10px 20px rgba(255, 255, 255, 1);
-        }
-      }
-    }
-  
-  /* 标题start */
-  .nav_title {
-    -webkit-background-clip: text;
-    color: transparent;
-    
-    &--wrap {
-      position: relative;
-      display: flex;
-      height: 120rpx;
-      font-size: 46rpx;
-      align-items: center;
-      justify-content: center;
-      font-weight: bold;
-      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
-      background-size: cover;
-    }
-  }
-  /* 标题end */
-  
-  /* 组件导航列表 start*/
-  .nav-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0rpx 12rpx 0rpx;
-    justify-content: space-between;
-    
-    /* 列表元素 start */
-    .nav-list-item {
-      padding: 35rpx 30rpx 5rpx 30rpx;
-      border-radius: 12rpx;
-      width: 45%;
-      margin: 0 18rpx 40rpx;
-      background-size: cover;
-      background-position: center;
-      position: relative;
-      z-index: 99;
-      
-      
-      
-      /* 元素标题 start */
-      .nav-link {
-        font-size: 32rpx;
-        text-transform: capitalize;
-        padding: 0 0 10rpx 0;
-        position: relative;
-        
-        .title {
-          font-weight: bold;
-          font-size: 36rpx;
-          color: #FFFFFF;
-          margin-top: 30rpx;
-          text-align: center;
-        }
-        .author {
-          font-size: 25rpx;
-          color: #FFFFFF;
-          margin-top: 50rpx;
-          margin-left: -10rpx;
-          text-align: center;
-        }
-      }
-      /* 元素标题 end */
-      
-      /* 元素图标 start */
-      .icon {
-        font-variant: small-caps;
-        position: absolute;
-        top: 20rpx;
-        right: 50rpx;
-        left: 37%;
-        width: 90rpx;
-        height: 90rpx;
-        line-height: 90rpx;
-        margin: 0;
-        padding: 0;
-        display: inline-flex;
-        text-align: center;
-        justify-content: center;
-        vertical-align: middle;
-        font-size: 50rpx;
-        color: #FFFFFF;
-        white-space: nowrap;
-        opacity: 0.9;
-        background-color: rgba(0, 0, 0, 0.05);
-        background-size: cover;
-        background-position: 50%;
-        border-radius: 5000rpx;
-      }
-      /* 元素图标 end */
-    }
-    /* 列表元素 end */
-  }
-  /* 组件导航列表 end*/
-  
-  /* 胶囊banner*/
-  .image-capsule{
-    padding: 100rpx 0rpx;
-    font-size: 40rpx;
-    font-weight: 300;
-    position: relative;
-  }
-  .image-piccapsule{
-    background-size: cover;
-    background-repeat:no-repeat;
-    // background-attachment:fixed;
-    background-position:top;
-    border-radius: 20rpx 20rpx 0 0;
-  }
-</style>
+<template>
+  <view class="vip tn-safe-area-inset-bottom">
+    <view class="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="false" duration="500" interval="180000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper"  style="margin-top: -280rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
+        </view> -->
+        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </view> -->
+        
+        <view class="tnphone-white-min swiper-item  wow fadeInLeft2" @click="navTuniaoMoban">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <!-- <view class="head">
+        			  <text>{{item.name}}</text>
+        		  </view> -->
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+        		  <!-- <view class="area-l">
+        			  <view class="">
+                  <text class="tn-icon-all"></text>
+                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
+        			  </view>
+        		  </view>
+        		  <view class="area-r">
+        			  <view class="">
+                  <text class="tn-icon-light"></text>
+                  <text class="tn-icon-time tn-padding-left-xs"></text>
+                </view>
+        		  </view> -->
+              <!-- <view class="talk"></view> -->
+              
+              <view class="image-banner">
+                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 方式4 start-->
+    <view class="tn-flex tn-padding-bottom-sm">
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoVUE3">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-level-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">图鸟VUE3</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoMoban">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">圈子博客</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="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-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>
+          </view>
+        </view>
+      </view>
+      <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-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">图鸟OA</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式4 end-->
+    
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-circle2.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+
+    
+    <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="nav-link">
+              <view class='title'>{{ content_item.title }}</view>
+              <view class='author'> <text class="tn-icon-code tn-padding-right-xs"></text> {{ content_item.author }}</view>
+            </view>
+            <!-- <view class="icon">
+              <view :class="['tn-icon-' + content_item.icon]"></view>
+            </view> -->
+          </navigator>
+        </block>
+      </view>
+    </block>
+    
+    <view class="tn-padding-xl tn-text-center tn-color-gray">
+      <view class="tn-padding-bottom-sm" @click="navPlus">
+        关于图鸟
+        <text class="tn-icon-rocket tn-padding-left-xs"></text>
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import vipListData from '@/mock/vip_page.js'
+  
+  export default {
+    name: 'Vip',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle2.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle4.jpg',
+        },{
+          id: 4,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle5.jpg',
+        },{
+          id: 5,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle6.jpg',
+        },{
+          id: 6,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/circle7.jpg',
+        }
+        ],
+        // nav菜单列表
+        navList: vipListData.data
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      },
+      // 跳转到图鸟VUE3
+      navTuniaoVUE3(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wxd4296f570b8b39c9'
+        })
+      },
+      // 跳转到图鸟模板
+      navTuniaoMoban(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx13c0ed55c12d2afb'
+        })
+      },
+      // 跳转到关于作者
+      navSaitolia(e) {
+        wx.vibrateLong();
+        uni.navigateTo({
+          url: '/templatePage/life/plus/plus'
+        })
+      },
+      // 跳转到图鸟模板2
+      navBusiness(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx9056aabd1c0c6a8a'
+        })
+      },
+      // 跳转到图鸟模板3
+      navXiongJie(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx76bb942a2810e8e5'
+        })
+      },
+      // 跳转到图鸟图表
+      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>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 350rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 轮播 start */
+/* .tnphone-white-min 细边框*/
+  .tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
+  .tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
+  .tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
+  .tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
+  .tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+
+  
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 830rpx !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 260rpx !important;
+    // left: 170rpx;
+    // width: 380rpx !important;
+    box-sizing: border-box;
+    padding: 0rpx 15rpx 90rpx 15rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    display: block;
+    transform: scale(0.45);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: scale(0.65);
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 770rpx;
+    // border: 1rpx solid red;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  
+  /* 轮播 end */
+  
+  /* 图标容器4 start */
+    .tn-cool-color-icon4{
+      // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
+      // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-fill-color: transparent;
+    }
+    .icon4 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 110rpx;
+          height: 110rpx;
+          font-size: 55rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
+            0px -8px 40px rgba(255, 255, 255, 1),
+            inset 0px -10px 10px rgba(70,23,129, 0.05),
+            inset 0px 10px 20px rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  
+  /* 标题start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题end */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 35rpx 30rpx 5rpx 30rpx;
+      border-radius: 12rpx;
+      width: 45%;
+      margin: 0 18rpx 40rpx;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      z-index: 99;
+      
+      
+      
+      /* 元素标题 start */
+      .nav-link {
+        font-size: 32rpx;
+        text-transform: capitalize;
+        padding: 0 0 10rpx 0;
+        position: relative;
+        
+        .title {
+          font-weight: bold;
+          font-size: 36rpx;
+          color: #FFFFFF;
+          margin-top: 30rpx;
+          text-align: center;
+        }
+        .author {
+          font-size: 25rpx;
+          color: #FFFFFF;
+          margin-top: 50rpx;
+          margin-left: -10rpx;
+          text-align: center;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        position: absolute;
+        top: 20rpx;
+        right: 50rpx;
+        left: 37%;
+        width: 90rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 50rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+  
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+</style>
diff --git a/vipPage/blog/blog/blog.vue b/vipPage/blog/blog/blog.vue
new file mode 100644
index 0000000..61d810f
--- /dev/null
+++ b/vipPage/blog/blog/blog.vue
@@ -0,0 +1,1153 @@
+<template>
+  <view class="template-tuniao 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 fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
+      <view id="navbar" 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/logo/logo2.png')">
+            <view class="logo-image">
+            </view>
+          </view> 
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" :style="[navBarStyle]">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230,230,230,0.3);">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">搜索 图鸟UI</view>
+          </view>
+        </view>
+      </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>
+        <view class="swiper-item-text" id="page_tips">
+          <view class="tn-text-xl tn-text-bold tn-color-white">{{item.title}}</view>
+          <view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 50rpx;">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
+        </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>
+    
+    
+    <!-- 方式12 start-->
+    <view class="tn-flex tn-margin-xs tn-padding-top-sm">
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
+            <view class="tn-icon-fire-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">今日热榜</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-indigo--light tn-color-indigo">
+            <view class="tn-icon-identity-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">智能名片</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
+            <view class="tn-icon-star-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">博主模板</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-orange--light tn-color-orange">
+            <view class="tn-icon-like-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">图鸟UI</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式12 end-->
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-tnui.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    
+<!--    <view class="tn-margin-top">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-5">
+          <text class="tn-icon-copy tn-padding-right-sm"></text>
+          推 / 荐 / 博 / 主
+          <text class="tn-icon-copy tn-padding-left-sm"></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-xxl">
+        推荐博主
+      </view>
+      <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+        <text class="tn-padding-xs">全部</text>
+        <text class="tn-icon-topics"></text>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper2 tn-margin-top-sm" :circular="true"
+      :autoplay="false" duration="500" interval="5000" @change="resume"> 
+      <swiper-item v-for="(item,index) in resumeList" :key="index" :class="cardCur2==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+        </view> -->
+        <view class="swiper-item image-banner tn-shadow-blur" :style="'background-image:url('+ item.url + ');width: 660rpx;height: 100%;background-size: cover;border-radius: 15rpx;'">
+        </view>
+        <view class="swiper-item2 image-banner tn-shadow-blur" :style="'background-image:url('+ item.avatar +');width: 120rpx;height: 120rpx;background-size: cover;'">
+        </view> 
+        <view class="swiper-item-text tn-text-shadow-indigo">
+          <view class="tn-text-bold tn-color-blue--dark" style="font-size: 45rpx;">{{item.title}}</view>
+          <view class="tn-color-blue--dark tn-padding-top-sm">{{item.name}}</view>
+          <view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx;">
+            <view class="tn-flex-1 tn-padding-sm tn-margin-right">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-blue">{{item.hot}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-fire"></text>
+                  <text class="tn-padding-left-xs">人气</text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-flex-1 tn-padding-sm tn-margin-left tn-margin-right">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-orange">{{item.share}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-share-circle"></text>
+                  <text class="tn-padding-left-xs">分享</text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-flex-1 tn-padding-sm tn-margin-left">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-red">{{item.love}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-like"></text>
+                  <text class="tn-padding-left-xs">爱心</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+<!--    <view class="indication">
+        <block v-for="(item,index) in resumeList" :key="index">
+            <view class="spot" :class="cardCur==index?'active':''"></view>
+        </block>
+    </view> -->
+    
+    
+    <view class="">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          热门项目
+        </view>
+        <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view>
+      </view>
+      
+      <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
+        <view class="tn-flex-2">
+          
+          <view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/card.jpg')">
+            <view class="image-tuniao1">
+            </view>
+          </view> 
+          
+        </view>
+        <view class="tn-flex-1">
+          <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </view> 
+          <view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </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-xxl">
+          业务范围
+        </view>
+        <!-- <view class="justify-content-item tn-margin tn-text-xxl tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view> -->
+      </view>
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view> -->
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
+                <view class="tn-info__item__left__content--data tn-padding-top-xs">
+                {{ item.value }}
+                <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+    </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_tnnew.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_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: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: '',
+          name: '',
+          text: '',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad5.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '',
+          name: '',
+          text: '',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '',
+          name: '',
+          text: '',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '',
+          name: '',
+          text: '',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '努力成为大佬',
+          text: '一起加油吖',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
+        }],
+        cardCur2: 0,
+        resumeList: [{
+          id: 0,
+          type: 'image',
+          title: '蔡东东',
+          name: '产品总监',
+          hot: '1.29W',
+          share: '216',
+          love: '962',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟北北',
+          name: 'UI设计师',
+          hot: '964',
+          share: '94',
+          love: '186',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '高级前端',
+          hot: '3.26K',
+          share: '146',
+          love: '379',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟南南',
+          name: '项目经理',
+          hot: '6.32K',
+          share: '133',
+          love: '432',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '纯打杂',
+          hot: '8.65K',
+          share: '321',
+          love: '886',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }],
+
+        tuniaoData: [
+          {
+            title: 'UI设计',
+            icon: 'image-text-fill',
+            color: 'red',
+            value: '前往咨询'
+          },
+          {
+            title: '小程序',
+            icon: 'data-fill',
+            color: 'orange',
+            value: '前往咨询'
+          },
+          {
+            title: '网站开发',
+            icon: 'statistics-fill',
+            color: 'purple',
+            value: '前往咨询'
+          },
+          {
+            title: '其他业务',
+            icon: 'bankcard-fill',
+            color: 'blue',
+            value: '前往咨询'
+          }
+        ],
+        navBarRectInfo: {},
+        navBarChangebaseLineHeight: 0,
+        navBarStyle: {
+          color:'#FFFFFF',
+          opacity: 1,
+          display: 'flex'
+        },
+        navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
+        activeBgAnimation: {}
+      }
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.initNavBarRectInfo()
+      })
+    },
+    onPageScroll() {
+      this.updateNavBarRectInfo()
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // resume
+      resume(e) {
+        this.cardCur2 = e.detail.current
+      },
+      // 初始化导航栏信息
+      async initNavBarRectInfo() {
+        const navBarRectInfo = await this._tGetRect('#navbar')
+        const pageTipsRectInfo = await this._tGetRect('#page_tips')
+        // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
+        if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
+          setTimeout(() => {
+            this.initNavBarRectInfo()
+          }, 10)
+          return
+        }
+        this.navBarRectInfo = {
+          top: navBarRectInfo.top
+        }
+        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
+      },
+      // 更新导航栏信息
+      updateNavBarRectInfo() {
+        this._tGetRect('#page_tips').then((res) => {
+          const top = res?.top || 0
+          if (!top) {
+            return
+          }
+          const differHeight = top - this.navBarRectInfo.top
+          const opacity = differHeight / this.navBarChangebaseLineHeight
+          if (opacity < 0) {
+            // this.navBarStyle.opacity = 1
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`
+          } else {
+            // this.navBarStyle.opacity = 1 - opacity
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(255, 255, 255, 1)'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`
+          }
+          
+          // console.log(top, differHeight, opacity);
+        })
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-tuniao {
+    // background-color: #FBFBFB;
+  }
+  
+
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 540rpx !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;
+  }
+    
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -220rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -280rpx;
+    width: 100%;
+    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 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 */
+  .card-swiper2 {
+    height: 420rpx !important;
+    overflow: hidden;
+  }
+    
+  .card-swiper2 swiper-item {
+    width: 680rpx !important;
+    left: 30rpx;
+    box-sizing: border-box;
+    overflow: initial;
+    padding: 0 0rpx 40rpx 0;
+  }
+    
+  .card-swiper2 swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    transform: scale(0.97);
+    transition: all 0.2s ease-in 0s;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item {
+    transform: none;
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .card-swiper2 swiper-item .swiper-item2 {
+    margin-top: -120rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 50%;
+    transform: translate(480rpx, -150rpx) scale(0.9, 0.9);
+    transition: all 0.3s ease 0s;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item2 {
+    margin-top: -180rpx;
+    width: 100%;
+    transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
+    transition: all 0.3s ease 0s;
+  }
+
+  .card-swiper2 swiper-item .swiper-item-text {
+    margin-top: -210rpx;
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 10rpx;
+    transform: translate(30rpx, -80rpx) scale(0.8, 0.8);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item-text {
+    margin-top: -270rpx;
+    width: 100%;
+    transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+  }
+  
+
+  
+  /* 底部tabbar假阴影 start*/
+  .bg-tabbar-shadow{
+    background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
+    position: fixed;
+    bottom: 0;
+    height: 450rpx;
+    width: 100vw;
+    z-index: -1;
+  }
+  
+ /* 图标容器12 start */
+ .tn-three{
+     position: absolute;
+     top: 50%;
+     right: 50%;
+     bottom: 50%;
+     left: 50%;
+     transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
+     text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
+ }
+ .icon12 {
+   &__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_bg6.png);
+ 
+           
+       }
+     }
+   }
+ }
+  
+  /* 自定义导航栏内容 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: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+
+  /* 热门图片 start*/
+  .image-tuniao1{
+    padding: 164rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao2{
+    padding: 75rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao3{
+    padding: 90rpx 0rpx;
+    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;
+  }
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  
+  /* 标题 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/title00.png);
+      background-size: cover;
+    }
+  }
+  /* 标题 end */
+  
+  /* 业务展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      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/2.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          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_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 25rpx;          
+          
+          &--data {
+            color: rgba(255,255,255,0.5);
+            margin-top: 5rpx;
+            // font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0rpx;
+          top: 50rpx;
+          font-size: 100rpx;
+          width: 108rpx;
+          height: 108rpx;
+          text-align: center;
+          line-height: 60rpx;
+          opacity: 0.15;  
+        }
+      }
+    }
+  }
+  /* 业务展示 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>
diff --git a/vipPage/blog/blogger/blogger.vue b/vipPage/blog/blogger/blogger.vue
new file mode 100644
index 0000000..6cce9dc
--- /dev/null
+++ b/vipPage/blog/blogger/blogger.vue
@@ -0,0 +1,1018 @@
+<template>
+  <view class="template-blogger">
+    <!-- 顶部自定义导航 -->
+    <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='cube' :style="'background-image: url(https://resource.tuniaokj.com/images/blogger/bg_image_1.jpg);'">
+      <view class="cube__container">
+        <view class="cube__container__body">
+          <view class="cube__container__body__item cube__container__body__item--front" :style="{backgroundImage: `url(${userInfo.avatar[0]})`}"></view>
+          <view class="cube__container__body__item cube__container__body__item--back" :style="{backgroundImage: `url(${userInfo.avatar[0]})`}"></view>
+          <view class="cube__container__body__item cube__container__body__item--right" :style="{backgroundImage: `url(${userInfo.avatar[1]})`}"></view>
+          <view class="cube__container__body__item cube__container__body__item--left" :style="{backgroundImage: `url(${userInfo.avatar[1]})`}"></view>
+          <view class="cube__container__body__item cube__container__body__item--top" :style="{backgroundImage: `url(${userInfo.avatar[2]})`}"></view>
+          <view class="cube__container__body__item cube__container__body__item--bottom" :style="{backgroundImage: `url(${userInfo.avatar[2]})`}"></view>
+        </view>
+      </view>
+      
+      
+      <view class='tn-text-center tn-margin-top-lg'>
+        <view class="tn-padding tn-text-bold tn-text-lg">{{ userInfo.username }}</view>
+        <view class="tn-padding-bottom-xl tn-text-lg">{{ userInfo.desc }}</view>
+      </view>
+    </view>
+    
+    <!-- 消息&数据 -->
+    <view class="blogger-tips-data">
+      <view class="blogger-tips-data__wrap tn-bg-white">
+        <view class="blogger-tips-data__message tn-flex tn-flex-row-center">
+          <view class="blogger-tips-data__message__container tn-flex tn-flex-row-center tn-flex-col-center tn-bg-gray--light">
+            <view class="blogger-tips-data__message__avatar">
+              <tn-avatar
+                class=""
+                :src="tipsDataMessage.latestMessageUserAvatar"
+                size="sm">
+              </tn-avatar>
+            </view>
+            <view class="tn-padding-right tn-padding-left">{{ tipsDataMessage.messageCount }} 条新消息</view>
+          </view>
+        </view>
+        <view class="blogger-tips-data__info tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-orange">{{ $tn.number.formatNumberAddPriceUnit(tipsDataMessage.likeCount) }}</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-like"></text>
+                <text class="tn-padding-left-xs">爱心</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-blue">{{ $tn.number.formatNumberAddPriceUnit(tipsDataMessage.hotReviewsCount) }}</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-message"></text>
+                <text class="tn-padding-left-xs">热评</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-red">{{ $tn.number.formatNumberAddPriceUnit(tipsDataMessage.fansCount) }}</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-vip"></text>
+                <text class="tn-padding-left-xs">粉丝</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-cyan">{{ $tn.number.formatNumberAddPriceUnit(tipsDataMessage.focusCount) }}</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-star"></text>
+                <text class="tn-padding-left-xs">关注</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>      
+    
+    <!-- 内容 -->
+    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">
+   
+      <!-- 图文信息 -->
+      <block v-for="(item,index) in content" :key="index">
+        <view class="blogger__item">
+          <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="justify__author__info">
+              <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="blogger__author__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="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex tn-flex-col-center tn-flex-row-left">
+            <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+              <text class="blogger__desc__label--prefix">#</text> 
+              <text class="tn-text-df">{{ label_item }}</text>
+            </view>
+            <view v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-ellipsis tn-text-justify tn-text-df">{{ item.desc }}</view>  
+          </view>
+          
+          <view
+            v-if="item.content"
+            class="blogger__content"
+            :id="`blogger__content--${index}`"
+          >
+            <view
+              class="blogger__content__data"
+              :style="{
+                height: `${item.contentContainerInit ? (!item.showAllContent ? contentHideShowHeight : item.contentContainerHeight) + 'px' : 'auto'}`
+              }"
+            >
+              {{ item.content }}
+            </view>
+            <view v-if="item.hideContent" class="blogger__content__status" @tap="switchContentShowStatus(index)">{{ item.showAllContent ? '收起' : '全文'}}</view>
+          </view>
+          
+          <block v-if="item.mainImage">
+            <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="blogger__main-image"
+                :class="{
+                  'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
+                  'blogger__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="blogger__main-image blogger__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="blogger__main-image blogger__main-image--3"
+                      :src="image_item"
+                      mode="aspectFill"
+                    ></image>
+                  </tn-grid-item>
+                  <!-- #endif-->
+                </block>
+              </tn-grid>
+            </view>
+          </block>
+         
+          <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="blogger__count-icon tn-icon-flower"></text> 
+                <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                <text class="blogger__count-icon tn-icon-message"></text>
+                <text class="tn-padding-right">{{ item.commentCount }}</text>
+                <text class="blogger__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" v-if="index != content.length - 1"></view>
+      </block>
+      
+      <!-- 边距间隔 -->
+      <view class="tn-strip-bottom"></view>
+      
+      <!-- 广告 -->
+      <view class="blogger__item">
+      <!-- <swiper
+          class="blogger__ad"
+          :current="adSwiperCurrentIndex"
+          :circular="true"
+          @change="adSwiperChange"
+        >
+          <block v-for="(item, index) in adContent" :key="index">
+            <swiper-item
+              class="blogger__ad__item"
+              :class="[adSwiperItemClass(index)]"
+            >
+                <view class="blogger__ad__content">
+                  <image class="blogger__ad__image" :src="item.image"></image>
+                </view>
+            </swiper-item>
+          </block>
+        </swiper> -->
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+          <view class="justify-content-item">
+            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+              <!-- 图标logo -->
+              <view class="ad-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
+                <view class="ad-image">
+                </view>
+              </view>
+              <view class="tn-padding-right" style="width: 65vw;">
+                <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">抓住那只猪科技有限公司</view>
+                <view class="tn-padding-right tn-padding-left-sm tn-color-gray tn-text-ellipsis">我们都是好好孩子</view>
+              </view>
+              
+            </view>
+          </view>
+          <view class="tn-color-gray">广告</view>
+        </view>
+        <tn-stack-swiper ref="stackSwiper" :list="adList" :switchRate="30" :height="360" width="92%" :autoplay="adAutoplay"></tn-stack-swiper>
+      </view>
+      
+      <!-- 边距间隔 -->
+      <view class="tn-strip-bottom"></view>
+      
+      <!-- 图文信息 -->
+      <block v-for="(item,index) in content" :key="index">
+        <view class="blogger__item">
+          <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="justify__author__info">
+              <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="blogger__author__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="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex tn-flex-col-center tn-flex-row-left">
+            <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+              <text class="blogger__desc__label--prefix">#</text> 
+              <text class="tn-text-df">{{ label_item }}</text>
+            </view>
+            <view v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-ellipsis tn-text-justify tn-text-df">{{ item.desc }}</view>  
+          </view>
+          
+          <view
+            v-if="item.content"
+            class="blogger__content"
+            :id="`blogger__content--${index}`"
+          >
+            <view
+              class="blogger__content__data"
+              :style="{
+                height: `${item.contentContainerInit ? (!item.showAllContent ? contentHideShowHeight : item.contentContainerHeight) + 'px' : 'auto'}`
+              }"
+            >
+              {{ item.content }}
+            </view>
+            <view v-if="item.hideContent" class="blogger__content__status" @tap="switchContentShowStatus(index)">{{ item.showAllContent ? '收起' : '全文'}}</view>
+          </view>
+          
+          <block v-if="item.mainImage">
+            <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="blogger__main-image"
+                :class="{
+                  'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
+                  'blogger__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="blogger__main-image blogger__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="blogger__main-image blogger__main-image--3"
+                      :src="image_item"
+                      mode="aspectFill"
+                    ></image>
+                  </tn-grid-item>
+                  <!-- #endif-->
+                </block>
+              </tn-grid>
+            </view>
+          </block>
+         
+          <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="blogger__count-icon tn-icon-flower"></text> 
+                <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                <text class="blogger__count-icon tn-icon-message"></text>
+                <text class="tn-padding-right">{{ item.commentCount }}</text>
+                <text class="blogger__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" v-if="index != content.length - 1"></view>
+      </block>
+       
+          
+    </view>
+    
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-flex-row-between tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
+        <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold>
+          <text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
+          <text class="tn-color-black">关 注</text>
+        </tn-button>
+      </view>
+      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
+        <tn-button backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold>
+          <text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
+          <text class="tn-color-black">分 享</text>
+        </tn-button>
+      </view>
+    </view>
+    
+    <view class='tn-tabbar-height'></view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateBlogger',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        // 内容默认隐藏显示的高度
+        contentHideShowHeight: 0,
+        userInfo: {
+          avatar: [
+            'https://resource.tuniaokj.com/images/blogger/blogger_avatar_1.jpeg',
+            'https://resource.tuniaokj.com/images/blogger/blogger_avatar_2.jpeg',
+            'https://resource.tuniaokj.com/images/blogger/blogger_avatar_3.jpeg',
+          ],
+          username: '可我会像',
+          desc: '你是不是傻，菜的一撇的北北'
+        },
+        tipsDataMessage: {
+          latestMessageUserAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+          messageCount: 3,
+          likeCount: 1290,
+          hotReviewsCount: 896,
+          fansCount: 962,
+          focusCount: 86
+        },
+        content: [
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意','UI框架'],
+            desc: '免费开源可商用组件，助你开发酷炫UI一臂之力',
+            content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+            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: 62
+            },
+            collectionCount: 439,
+            commentCount: 46,
+            likeCount: 83
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意','UI框架'],
+            desc: '免费开源可商用组件，助你开发酷炫UI一臂之力',
+            content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+            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_3.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.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/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: [],
+            desc: '',
+            content: '',
+            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_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: 56
+            },
+            collectionCount: 431,
+            commentCount: 26,
+            likeCount: 84
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了 基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+            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_1.jpeg'},
+                {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'},
+              ],
+              viewUserCount: 231
+            },
+            collectionCount: 780,
+            commentCount: 89,
+            likeCount: 82
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','链接'],
+            desc: 'https://www.yuque.com/tuniao',
+            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_2.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.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_4.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_1.jpeg'},
+              ],
+              viewUserCount: 65
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ],
+        // adSwiperCurrentIndex: 0,
+        adList: [
+          {image: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/ad5.jpg'}
+        ],
+        adAutoplay: false
+      }
+    },
+    computed: {
+      // adSwiperItemClass() {
+      //   return (index) => {
+      //     const adLength = this.adContent.length
+      //     let activeIndex = 0
+      //     if (index < this.adSwiperCurrentIndex) {
+      //       activeIndex = adLength - this.adSwiperCurrentIndex + index
+      //     } else if (index === this.adSwiperCurrentIndex) {
+      //       activeIndex = 0
+      //     } else if (index > this.adSwiperCurrentIndex) {
+      //       activeIndex = index - this.adSwiperCurrentIndex
+      //     }
+      //     return `blogger__ad__item--${activeIndex}`
+      //   }
+      // },
+      // adSwiperItemStyle() {
+      //   return (index) => {
+          
+      //     let style = {
+      //       transform: `translate3d(0%, 0px, 0px) scale(1)`,
+      //       zIndex: 1
+      //     }
+          
+      //     switch (index) {
+      //       case 0:
+      //         style.zIndex = 4
+      //         break
+      //       case 1:
+      //         style.zIndex = 3
+      //         style.transform = `translate3d(10%, 0px, 0px) scale(0.9)`
+      //         break
+      //       case 2:
+      //         style.zIndex = 2
+      //         style.transform = `translate3d(20%, 0px, 0px) scale(0.8)`
+      //         break
+      //       default:
+      //         break
+      //     }
+          
+      //     return style
+      //   }
+      // }
+    },
+    onLoad() {
+      this.initContentData()
+      this.contentHideShowHeight = uni.upx2px(56) * 3
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.getContentRectInfo()
+      })
+    },
+    onShow() {
+      this.adAutoplay = true
+    },
+    onHide() {
+      this.adAutoplay = false
+    },
+    methods: {
+      // 处理内容，给内容添加对应的标识信息
+      initContentData() {
+        this.content.forEach((item, index) => {
+          // 是否需要隐藏内容
+          item.hideContent = false
+          // 显示所有内容
+          item.showAllContent = false
+          // 内容容器的实际高度
+          item.contentContainerHeight = 0
+          // 内容容器是否初始化完成
+          item.contentContainerInit = false
+          this.$set(this.content, index, item)
+        })
+      },
+      // 获取内容容器的信息
+      getContentRectInfo() {
+        let contentRect = {}
+        const query = uni.createSelectorQuery().in(this)
+        // 筛选出存在内容的数据
+        this.content.forEach((item, index) => {
+          if (item?.content) {
+            query.select(`#blogger__content--${index}`).boundingClientRect()
+            contentRect[index] = item
+          }
+        })
+        // 获取所有内容的宽高信息
+        query.exec(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.getContentRectInfo()
+            }, 10)
+            return
+          }
+          // console.log(res);
+          res.map((item) => {
+            // console.log(item.height, this.contentHideShowHeight);
+            // 获取对应的标号
+            const id = item.id
+            const idIndex = /blogger__content--(\d)/.exec(id)[1]
+            let contentItem = this.content[idIndex]
+            contentItem.hideContent = item.height > this.contentHideShowHeight
+            contentItem.showAllContent = false
+            contentItem.contentContainerHeight = item.height
+            contentItem.contentContainerInit = true
+            this.$set(this.content, idIndex, contentItem)
+            
+            // console.log(/blogger__content--(\d)/.exec(id)[1]);
+          })
+        })
+      },
+      // 切换内容的显示与隐藏
+      switchContentShowStatus(index) {
+        const contentItem = this.content[index]
+        contentItem.showAllContent = !contentItem.showAllContent
+        this.$set(this.content, index, contentItem)
+      },
+      
+      
+      // adSwiperChange(e) {
+      //   // console.log(e);
+      //   this.adSwiperCurrentIndex = e.detail.current
+      // }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  $cube-size: 120rpx;
+  $cube-split: 60rpx;
+  
+  /* 立体头像 start*/
+  
+  .cube {
+    background: #fff;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 550rpx;
+    display: flex;
+    justify-content: center;
+    padding-top: 40rpx;
+    overflow: hidden;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    font-weight: 300;
+    
+    &__container {
+      margin-top: 180rpx;
+      position: relative;
+      width: $cube-size;
+      height: $cube-size;
+      -webkit-perspective: 500px;
+      perspective: 500px;//透视太大会超过屏幕就不好了吖
+      
+      &:before {
+        content: '';
+        width: $cube-size;
+        height: $cube-size;
+        position: absolute;
+        // top: calc(50% - ($cube-split - 30px));
+        // left: calc(50% - $cube-split);
+        background-color: #3c6496;
+        filter: blur(60px);
+        opacity: .8;
+      }
+      
+      &__body {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform-style: preserve-3d;
+        transform: translateZ(-75px);
+        animation: cubeFrame 35s cubic-bezier(0.36, -0.03, 0.46, 0.95) infinite alternate;
+        will-change: transform;
+        
+        &__item {
+          position: absolute;
+          display: block;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: $cube-size;
+          height: $cube-size;
+          font-size: 30px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          
+          &--front {
+            transform: rotateY(0deg) translateZ($cube-split);
+            background-color: #BEEBFF;
+          }
+          &--back {
+            transform: rotateX(180deg) translateZ($cube-split);
+            background-color: #BEEBFF;
+          }
+          &--right {
+            transform: rotateY(90deg) translateZ($cube-split);
+            background-color: #BEEBFF;
+          }
+          &--left {
+            transform: rotateY(-90deg) translateZ($cube-split);
+            background-color: #BEEBFF;
+          }
+          &--top {
+            transform: rotateX(90deg) translateZ($cube-split);
+            background-color: #BEEBFF;
+          }
+          &--bottom {
+            transform: rotateX(-90deg) translateZ($cube-split);
+            background-color: #BEEBFF;
+          }
+        }
+      }
+    }
+  }
+  
+  @keyframes cubeFrame {
+    10% {
+      transform: translateZ(-75px) rotateX(40deg) rotateY(60deg);
+    }
+    15% {
+      transform: translateZ(-75px) rotateX(80deg) rotateY(20deg);
+    }
+    20% {
+      transform: translateZ(-75px) rotateX(-180deg) rotateY(-70deg);
+    }
+    30% {
+      transform: translateZ(-75px) rotateX(90deg) rotateY(180deg);
+    }
+    40% {
+      transform: translateZ(-75px) rotateX(-10deg) rotateY(-140deg);
+    }
+    45% {
+      transform: translateZ(-75px) rotateX(-100deg) rotateY(20deg);
+    }
+    55% {
+      transform: translateZ(-75px) rotateX(-10deg) rotateY(-35deg);
+    }
+    60% {
+      transform: translateZ(-75px) rotateX(180deg) rotateY(360deg);
+    }
+    70% {
+      transform: translateZ(-75px) rotateX(-180deg) rotateY(-360deg);
+    }
+    80% {
+      transform: translateZ(-75px) rotateX(45deg) rotateY(-70deg);
+    }
+    90% {
+      transform: translateZ(-75px) rotateX(-45deg) rotateY(70deg);
+    }
+    100% {
+      transform: translateZ(-75px) rotateX(-360deg) rotateY(360deg);
+    }
+  }
+  /* 立体头像 end*/
+  
+  /* 信息提示 start */
+  .blogger-tips-data {
+    background-color: #F8F7F3;
+    
+    &__wrap {
+      border-radius: 60rpx 60rpx 0 0;
+    }
+    
+    &__message {
+      padding-top: 60rpx;
+      
+      &__container {
+        padding: 5rpx;
+        border-radius: 100rpx;
+      }
+      
+      &__avatar {
+        margin: 6rpx 0 0 6rpx;
+      }
+    }
+    
+    &__info {
+      padding: 40rpx 0 0 0;
+    }
+  }
+  /* 信息提示 end */
+  
+  /* 文章内容 start*/
+  .blogger {
+    &__item {
+      padding: 30rpx;
+    }
+    
+    &__author {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__desc {
+      line-height: 55rpx;
+      
+      &__label {
+        padding: 0 20rpx;
+        margin: 0rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #00FFC8;
+          padding-right: 10rpx;
+        }
+      }
+      &__content {
+        
+      }
+    }
+    
+    &__content {
+      margin-top: 18rpx;
+      padding-right: 18rpx;
+      
+      &__data {
+        line-height: 46rpx;
+        text-align: justify;
+        overflow: hidden;
+        transition: all 0.25s ease-in-out;
+      }
+      
+      &__status {
+        margin-top: 10rpx;
+        font-size: 30rpx;
+        color: $tn-main-color;
+      }
+    }
+    
+    &__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;
+    }
+    
+    &__ad {
+      width: 100%;
+      height: 500rpx;
+      transform: translate3d(0px, 0px, 0px) !important;
+      
+      ::v-deep .uni-swiper-slide-frame {
+        transform: translate3d(0px, 0px, 0px) !important;
+      }
+      .uni-swiper-slide-frame {
+        transform: translate3d(0px, 0px, 0px) !important;
+      }
+      
+      &__item {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform-origin: left center;
+        transform: translate3d(100%, 0px, 0px) scale(1) !important;
+        transition: transform 0.25s ease-in-out;
+        z-index: 1;
+        
+        &--0 {
+          transform: translate3d(0%, 0px, 0px) scale(1) !important;
+          z-index: 4;
+        }
+        &--1 {
+          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
+          z-index: 3;
+        }
+        &--2 {
+          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
+          z-index: 2;
+        }
+      }
+      
+      &__content {
+        border-radius: 40rpx;
+        width: 640rpx;
+        height: 500rpx;
+        overflow: hidden;
+      }
+      
+      &__image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  /* 文章内容 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*/
+  
+  /* 广告内容 start */
+  .ad-image{
+    width: 80rpx;
+    height: 80rpx;
+    position: relative;
+  }
+  .ad-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20%;
+  }
+  /* 自定义导航栏内容 end */
+</style>
diff --git a/vipPage/blog/circle/circle.vue b/vipPage/blog/circle/circle.vue
new file mode 100644
index 0000000..118c77d
--- /dev/null
+++ b/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>
diff --git a/vipPage/blog/message/message.vue b/vipPage/blog/message/message.vue
new file mode 100644
index 0000000..a893595
--- /dev/null
+++ b/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>
diff --git a/vipPage/blog/myblog/myblog.vue b/vipPage/blog/myblog/myblog.vue
new file mode 100644
index 0000000..33207db
--- /dev/null
+++ b/vipPage/blog/myblog/myblog.vue
@@ -0,0 +1,1199 @@
+<template>
+  <view class="template-myblog 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="tn-icon-notice tn-color-white tn-text-shadow-brown" style="font-size: 50rpx;">
+            <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
+              <text>12</text>
+            </tn-badge>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+
+    <view class="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
+    </view>
+
+
+    <button @click="navTuniaoHome">
+      <view class="dong">
+        <view class="monster">
+          <view class="monster__face">
+            <view class="monster__eye avatar-eye avatar-eye--green eye--left">
+              <view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span
+                    class="avatar-eye-pupil-lightReflection"></span></span></view>
+            </view>
+            <view class="monster__eye avatar-eye avatar-eye--violet eye--right">
+              <view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span
+                    class="avatar-eye-pupil-lightReflection"></span></span></view>
+            </view>
+            <view class="monster__noses">
+              <view class="monster__nose"></view>
+              <view class="monster__nose"></view>
+            </view>
+            <view class="monster__mouth">
+              <view class="monster__top"></view>
+              <view class="monster__bottom"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </button>
+
+
+
+    <view class="about__wrap">
+
+      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+        <view class="justify-content-item">
+          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+            <!-- 图标logo -->
+            <view class="logo-pic tn-shadow">
+              <view class="logo-image">
+                <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>
+            </view>
+            <view class="tn-padding-right tn-color-white">
+              <view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
+                图鸟小伙伴
+              </view>
+              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">亲爱的会员你好吖</view>
+            </view>
+
+          </view>
+        </view>
+      </view>
+
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white">
+        <!-- 方式12 start-->
+        <view class="tn-flex tn-flex-row-center tn-radius">
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-vip"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">我的订单</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-money"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">余额充值</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-ticket"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">消费明细</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-lucky-money"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">红包卡券</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-row-center tn-radius">
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-shop"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">积分商城</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-order"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">积分订单</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-star"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">店铺收藏</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-map"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">收货地址</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 方式12 end-->
+      </view>
+
+      <view class="tn-flex tn-flex-row-between tn-padding-top-xl">
+        <view class="justify-content-item tn-text-bold tn-text-lg">
+          <text class="">更多功能</text>
+        </view>
+        <view class="justify-content-item tn-text-df">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-right"></text>
+        </view>
+      </view>
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
+        <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-df 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="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white">
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
+              <view class="tn-icon-message-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
+            <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
+              <view class="tn-icon-phone-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
+            <view
+              class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">
+              136****0470</view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
+              <view class="tn-icon-safe-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
+            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
+          </view>
+        </tn-list-cell>
+      </view>
+
+    </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_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_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_tnnew.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: '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',
+          }
+        ]
+      }
+    },
+    methods: {
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+      // 跳转到
+      navTuniaoHome(e) {
+        wx.vibrateLong();
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  .template-myblog {}
+  
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      flex-basis: 5%;
+      width: 100rpx;
+      position: absolute;
+    }
+  }
+  /* 自定义导航栏内容 end */
+
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+
+  /* 顶部背景图 end */
+
+  /* 用户头像 start */
+  .logo-image {
+    width: 120rpx;
+    height: 120rpx;
+    position: relative;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: #FFFFFF;
+  }
+
+  /* 页面 start*/
+  .about-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .about {
+
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 30rpx;
+      margin-top: -230rpx;
+    }
+  }
+
+  /* 页面 end*/
+
+  /* 图标容器1 start */
+  .icon1 {
+    &__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: 40rpx;
+        height: 40rpx;
+        font-size: 28rpx;
+        border-radius: 50%;
+        position: relative;
+        z-index: 1;
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+
+  /* 图标容器1 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);
+    }
+  }
+
+
+  /* 图标容器12 start */
+  .icon12 {
+    &__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: 0rpx;
+        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);
+
+
+        }
+      }
+    }
+  }
+
+  /* 图标容器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);
+        }
+      }
+    }
+  }
+
+  /* 大嘴鸟*/
+  .dong {
+    z-index: 9999;
+    position: fixed;
+    top: -40px;
+    right: -80px;
+    transform: scale(0.24);
+    -webkit-transform: scale(0.24);
+    -moz-transform: scale(0.24);
+
+  }
+
+  .monster {
+    transform: rotate(-50deg);
+    -ms-transform: rotate(-50deg);
+    /* IE 9 */
+    -moz-transform: rotate(-50deg);
+    /* Firefox */
+    -webkit-transform: rotate(-50deg);
+    /* Safari 和 Chrome */
+    -o-transform: rotate(-50deg);
+    /* Opera */
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 170px;
+    height: 400px;
+    border-top-left-radius: 200px;
+    border-top-right-radius: 200px;
+    background-color: #3C47D7;
+    box-shadow: 20px 20px 60px #4650E5;
+  }
+
+  .monster__face {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: absolute;
+    top: 14%;
+    width: 75%;
+    height: 160px;
+  }
+
+  .monster__noses {
+    top: 50%;
+    display: flex;
+    justify-content: space-between;
+    width: 28%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  .monster__nose {
+    width: 8px;
+    height: 12px;
+    border-radius: 20px;
+    background: rgba(0, 0, 0, 0.5);
+    box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .monster__mouth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: 0%;
+    overflow: hidden;
+    border: 25px solid #FFC333;
+    border-radius: 100px;
+    background-color: #810332;
+    animation: mouth 1.75s infinite;
+    box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+  }
+
+  .monster__mouth::before {
+    content: '';
+    position: absolute;
+    width: 150px;
+    height: 80px;
+    border-radius: 100px;
+    background-color: #400018;
+  }
+
+  .monster__mouth::after {
+    content: '';
+    position: absolute;
+    bottom: -80px;
+    width: 160px;
+    height: 80px;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    background-color: #DC1B50;
+    animation: tongue 1.75s infinite;
+  }
+
+  .monster__top {
+    position: absolute;
+    top: -30px;
+    width: 170px;
+    height: 30px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    background-color: #ffffff;
+    z-index: 100;
+    animation: t 1.75s infinite;
+  }
+
+  .monster__bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100px;
+    height: 30px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    background-color: #ffffff;
+    z-index: 100;
+    animation: b 1.75s infinite;
+  }
+
+
+  .avatar-eye {
+    position: absolute;
+    top: -10%;
+    width: 65px;
+    height: 65px;
+    background: linear-gradient(105deg, white, #cb87f4);
+    border-radius: 100%;
+    box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
+    margin: 3px;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+
+
+  .avatar-eye--green {
+    background: linear-gradient(to bottom, #fdfdfd, #c3efea);
+  }
+
+  .avatar-eye--violet {
+    background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
+  }
+
+
+  .eye--left {
+    left: 10%;
+  }
+
+  .eye--right {
+    left: 85%;
+  }
+
+  .eye--center {
+    left: 45%;
+    top: 10%;
+  }
+
+  .avatar-eye-pupil {
+    position: absolute;
+    width: 55%;
+    height: 55%;
+    left: 50%;
+    top: 25%;
+    -webkit-transform: translate(-50%);
+    transform: translate(-50%);
+    z-index: 100;
+    border-radius: 100%;
+  }
+
+
+  .pupil--green {
+    background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
+  }
+
+  .pupil--pink {
+    background: linear-gradient(135deg, #f1a183, #8535cd);
+  }
+
+
+  .avatar-eye-pupil-blackThing {
+    position: absolute;
+    width: 55%;
+    height: 55%;
+    left: 50%;
+    top: 25%;
+    background: #2c2f32;
+    -webkit-transform: translate(-50%);
+    transform: translate(-50%);
+    border-radius: 100%;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .avatar-eye-pupil-lightReflection {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    left: 25%;
+    top: 10%;
+    background: #ebebeb;
+    -webkit-transform: translate(-50%);
+    transform: translate(-50%);
+    border-radius: 100%;
+    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
+  }
+
+
+
+
+
+  /**/
+  @keyframes t {
+
+    0%,
+    10%,
+    80%,
+    100% {
+      top: -30px;
+    }
+
+    20% {
+      top: 0px;
+    }
+
+    30% {
+      top: -20px;
+    }
+
+    40% {
+      top: -0px;
+    }
+
+    50% {
+      top: -25px;
+    }
+
+    70% {
+    		top: 0px;
+    }
+  }
+
+  @keyframes b {
+
+    0%,
+    10%,
+    80%,
+    100% {
+      bottom: -30px;
+    }
+
+    20% {
+      bottom: 0px;
+    }
+
+    30% {
+      bottom: -20px;
+    }
+
+    40% {
+      bottom: -0px;
+    }
+
+    50% {
+      bottom: -25px;
+    }
+
+    70% {
+      bottom: 0px;
+    }
+  }
+
+  @keyframes mouth {
+
+    0%,
+    10%,
+    100% {
+      width: 100%;
+      height: 0%;
+    }
+
+    15% {
+      width: 90%;
+      height: 30%;
+    }
+
+    20% {
+      width: 50%;
+      height: 70%;
+    }
+
+    25% {
+      width: 70%;
+    	 height: 70%;
+    }
+
+    30% {
+    		width: 80%;
+      height: 60%;
+    }
+
+    35% {
+      width: 60%;
+      height: 70%;
+    }
+
+    40% {
+      width: 55%;
+      height: 75%;
+    }
+
+    45% {
+    		width: 50%;
+      height: 90%;
+    }
+
+    50% {
+      width: 40%;
+      height: 70%;
+    }
+
+    55% {
+      width: 70%;
+      height: 95%;
+    }
+
+    60% {
+    	 width: 40%;
+      height: 50%;
+    }
+
+    65% {
+      width: 100%;
+      height: 60%;
+    }
+
+    70% {
+      width: 100%;
+      height: 70%;
+    }
+
+    75% {
+      width: 90%;
+      height: 70%;
+    }
+
+    80% {
+      width: 50%;
+      height: 70%;
+    }
+
+    85% {
+      width: 90%;
+      height: 50%;
+    }
+
+    85% {
+      width: 40%;
+      height: 70%;
+    }
+
+    90% {
+      width: 90%;
+      height: 30%;
+    }
+
+    95% {
+      width: 100%;
+      height: 10%;
+    }
+  }
+
+  @keyframes tongue {
+
+    0%,
+    20%,
+    100% {
+      bottom: -80px;
+    }
+
+    30%,
+    90% {
+    		bottom: -40px;
+    }
+
+    40% {
+      bottom: -45px;
+    }
+
+    50% {
+      bottom: -50px;
+    }
+
+    70% {
+      bottom: -80px;
+    }
+
+    90% {
+      bottom: -40px;
+    }
+  }
+</style>
diff --git a/vipPage/blog/prefer/prefer.vue b/vipPage/blog/prefer/prefer.vue
new file mode 100644
index 0000000..914fc71
--- /dev/null
+++ b/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>
diff --git a/vipPage/blog/product/product.vue b/vipPage/blog/product/product.vue
new file mode 100644
index 0000000..993e72a
--- /dev/null
+++ b/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>
diff --git a/vipPage/blog/socialize/socialize.vue b/vipPage/blog/socialize/socialize.vue
new file mode 100644
index 0000000..5778879
--- /dev/null
+++ b/vipPage/blog/socialize/socialize.vue
@@ -0,0 +1,1166 @@
+<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">
+   
+      <!-- 图文信息 -->
+      <block v-for="(item,index) in content" :key="index">
+        <view class="blogger__item">
+          <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="justify__author__info">
+              <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="blogger__author__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="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex tn-flex-col-center tn-flex-row-left">
+            <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+              <text class="blogger__desc__label--prefix">#</text> 
+              <text class="tn-text-df">{{ label_item }}</text>
+            </view>
+            <view v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-ellipsis tn-text-justify tn-text-df">{{ item.desc }}</view>  
+          </view>
+          
+          <view
+            v-if="item.content"
+            class="blogger__content"
+            :id="`blogger__content--${index}`"
+          >
+            <view
+              class="blogger__content__data"
+              :style="{
+                height: `${item.contentContainerInit ? (!item.showAllContent ? contentHideShowHeight : item.contentContainerHeight) + 'px' : 'auto'}`
+              }"
+            >
+              {{ item.content }}
+            </view>
+            <view v-if="item.hideContent" class="blogger__content__status" @tap="switchContentShowStatus(index)">{{ item.showAllContent ? '收起' : '全文'}}</view>
+          </view>
+          
+          <block v-if="item.mainImage">
+            <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="blogger__main-image"
+                :class="{
+                  'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
+                  'blogger__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="blogger__main-image blogger__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="blogger__main-image blogger__main-image--3"
+                      :src="image_item"
+                      mode="aspectFill"
+                    ></image>
+                  </tn-grid-item>
+                  <!-- #endif-->
+                </block>
+              </tn-grid>
+            </view>
+          </block>
+         
+          <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="blogger__count-icon tn-icon-flower"></text> 
+                <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                <text class="blogger__count-icon tn-icon-message"></text>
+                <text class="tn-padding-right">{{ item.commentCount }}</text>
+                <text class="blogger__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" v-if="index != content.length - 1"></view>
+      </block>
+      
+      <!-- 边距间隔 -->
+      <view class="tn-strip-bottom"></view>
+      
+      <!-- 广告 -->
+      <view class="blogger__item">
+      <!-- <swiper
+          class="blogger__ad"
+          :current="adSwiperCurrentIndex"
+          :circular="true"
+          @change="adSwiperChange"
+        >
+          <block v-for="(item, index) in adContent" :key="index">
+            <swiper-item
+              class="blogger__ad__item"
+              :class="[adSwiperItemClass(index)]"
+            >
+                <view class="blogger__ad__content">
+                  <image class="blogger__ad__image" :src="item.image"></image>
+                </view>
+            </swiper-item>
+          </block>
+        </swiper> -->
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+          <view class="justify-content-item">
+            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+              <!-- 图标logo -->
+              <view class="ad-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
+                <view class="ad-image">
+                </view>
+              </view>
+              <view class="tn-padding-right" style="width: 65vw;">
+                <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">抓住那只猪科技有限公司</view>
+                <view class="tn-padding-right tn-padding-left-sm tn-color-gray tn-text-ellipsis">我们都是好好孩子</view>
+              </view>
+              
+            </view>
+          </view>
+          <view class="tn-color-gray">广告</view>
+        </view>
+        <tn-stack-swiper ref="stackSwiper" :list="adList" :switchRate="30" :height="360" width="92%" :autoplay="adAutoplay"></tn-stack-swiper>
+      </view>
+      
+      <!-- 边距间隔 -->
+      <view class="tn-strip-bottom"></view>
+      
+      <!-- 图文信息 -->
+      <block v-for="(item,index) in content" :key="index">
+        <view class="blogger__item">
+          <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="justify__author__info">
+              <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="blogger__author__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="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex tn-flex-col-center tn-flex-row-left">
+            <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+              <text class="blogger__desc__label--prefix">#</text> 
+              <text class="tn-text-df">{{ label_item }}</text>
+            </view>
+            <view v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-ellipsis tn-text-justify tn-text-df">{{ item.desc }}</view>  
+          </view>
+          
+          <view
+            v-if="item.content"
+            class="blogger__content"
+            :id="`blogger__content--${index}`"
+          >
+            <view
+              class="blogger__content__data"
+              :style="{
+                height: `${item.contentContainerInit ? (!item.showAllContent ? contentHideShowHeight : item.contentContainerHeight) + 'px' : 'auto'}`
+              }"
+            >
+              {{ item.content }}
+            </view>
+            <view v-if="item.hideContent" class="blogger__content__status" @tap="switchContentShowStatus(index)">{{ item.showAllContent ? '收起' : '全文'}}</view>
+          </view>
+          
+          <block v-if="item.mainImage">
+            <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="blogger__main-image"
+                :class="{
+                  'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
+                  'blogger__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="blogger__main-image blogger__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="blogger__main-image blogger__main-image--3"
+                      :src="image_item"
+                      mode="aspectFill"
+                    ></image>
+                  </tn-grid-item>
+                  <!-- #endif-->
+                </block>
+              </tn-grid>
+            </view>
+          </block>
+         
+          <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="blogger__count-icon tn-icon-flower"></text> 
+                <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                <text class="blogger__count-icon tn-icon-message"></text>
+                <text class="tn-padding-right">{{ item.commentCount }}</text>
+                <text class="blogger__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" v-if="index != content.length - 1"></view>
+      </block>
+       
+          
+    </view>
+
+
+
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      
+      
+      <view class="action" @click="navTuniaoUI">
+        <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="navTuniaoUI">
+        <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="navTuniaoUI">
+        <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="navTuniaoUI">
+        <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="navTuniaoUI">
+        <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',
+          }],
+          // 内容默认隐藏显示的高度
+          contentHideShowHeight: 0,
+          content: [
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意','UI框架'],
+              desc: '免费开源可商用组件，助你开发酷炫UI一臂之力',
+              content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+              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: 62
+              },
+              collectionCount: 439,
+              commentCount: 46,
+              likeCount: 83
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意','UI框架'],
+              desc: '免费开源可商用组件，助你开发酷炫UI一臂之力',
+              content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+              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_3.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.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_2.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: [],
+              desc: '',
+              content: '',
+              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_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: 56
+              },
+              collectionCount: 431,
+              commentCount: 26,
+              likeCount: 84
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了 基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
+              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_1.jpeg'},
+                  {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'},
+                ],
+                viewUserCount: 231
+              },
+              collectionCount: 780,
+              commentCount: 89,
+              likeCount: 82
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','链接'],
+              desc: 'https://www.yuque.com/tuniao',
+              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_2.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
+                  {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
+                ],
+                viewUserCount: 28
+              },
+              collectionCount: 432,
+              commentCount: 33,
+              likeCount: 12
+            },
+            {
+              userAvatar: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
+              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_4.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_1.jpeg'},
+                ],
+                viewUserCount: 65
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            }
+          ],
+          adList: [
+            {image: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg'},
+            {image: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg'},
+            {image: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg'},
+            {image: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg'},
+            {image: 'https://resource.tuniaokj.com/images/swiper/ad5.jpg'}
+          ],
+          adAutoplay: false
+      }
+    },
+    onLoad() {
+      this.initContentData()
+      this.contentHideShowHeight = uni.upx2px(56) * 3
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.getContentRectInfo()
+      })
+    },
+    onShow() {
+      this.adAutoplay = true
+    },
+    onHide() {
+      this.adAutoplay = false
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+      // 处理内容，给内容添加对应的标识信息
+      initContentData() {
+        this.content.forEach((item, index) => {
+          // 是否需要隐藏内容
+          item.hideContent = false
+          // 显示所有内容
+          item.showAllContent = false
+          // 内容容器的实际高度
+          item.contentContainerHeight = 0
+          // 内容容器是否初始化完成
+          item.contentContainerInit = false
+          this.$set(this.content, index, item)
+        })
+      },
+      // 获取内容容器的信息
+      getContentRectInfo() {
+        let contentRect = {}
+        const query = uni.createSelectorQuery().in(this)
+        // 筛选出存在内容的数据
+        this.content.forEach((item, index) => {
+          if (item?.content) {
+            query.select(`#blogger__content--${index}`).boundingClientRect()
+            contentRect[index] = item
+          }
+        })
+        // 获取所有内容的宽高信息
+        query.exec(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.getContentRectInfo()
+            }, 10)
+            return
+          }
+          // console.log(res);
+          res.map((item) => {
+            // console.log(item.height, this.contentHideShowHeight);
+            // 获取对应的标号
+            const id = item.id
+            const idIndex = /blogger__content--(\d)/.exec(id)[1]
+            let contentItem = this.content[idIndex]
+            contentItem.hideContent = item.height > this.contentHideShowHeight
+            contentItem.showAllContent = false
+            contentItem.contentContainerHeight = item.height
+            contentItem.contentContainerInit = true
+            this.$set(this.content, idIndex, contentItem)
+            
+            // console.log(/blogger__content--(\d)/.exec(id)[1]);
+          })
+        })
+      },
+      // 切换内容的显示与隐藏
+      switchContentShowStatus(index) {
+        const contentItem = this.content[index]
+        contentItem.showAllContent = !contentItem.showAllContent
+        this.$set(this.content, index, contentItem)
+      },
+    }
+  }
+</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*/
+  .blogger {
+    &__item {
+      padding: 30rpx;
+    }
+    
+    &__author {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__desc {
+      line-height: 55rpx;
+      
+      &__label {
+        padding: 0 20rpx;
+        margin: 0rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #00FFC8;
+          padding-right: 10rpx;
+        }
+      }
+      &__content {
+        
+      }
+    }
+    
+    &__content {
+      margin-top: 18rpx;
+      padding-right: 18rpx;
+      
+      &__data {
+        line-height: 46rpx;
+        text-align: justify;
+        overflow: hidden;
+        transition: all 0.25s ease-in-out;
+      }
+      
+      &__status {
+        margin-top: 10rpx;
+        font-size: 30rpx;
+        color: $tn-main-color;
+      }
+    }
+    
+    &__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;
+    }
+    
+    &__ad {
+      width: 100%;
+      height: 500rpx;
+      transform: translate3d(0px, 0px, 0px) !important;
+      
+      ::v-deep .uni-swiper-slide-frame {
+        transform: translate3d(0px, 0px, 0px) !important;
+      }
+      .uni-swiper-slide-frame {
+        transform: translate3d(0px, 0px, 0px) !important;
+      }
+      
+      &__item {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform-origin: left center;
+        transform: translate3d(100%, 0px, 0px) scale(1) !important;
+        transition: transform 0.25s ease-in-out;
+        z-index: 1;
+        
+        &--0 {
+          transform: translate3d(0%, 0px, 0px) scale(1) !important;
+          z-index: 4;
+        }
+        &--1 {
+          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
+          z-index: 3;
+        }
+        &--2 {
+          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
+          z-index: 2;
+        }
+      }
+      
+      &__content {
+        border-radius: 40rpx;
+        width: 640rpx;
+        height: 500rpx;
+        overflow: hidden;
+      }
+      
+      &__image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  /* 文章内容 end*/
+   
+   /* 间隔线 start*/
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+  
+  /* 广告内容 start */
+  .ad-image{
+    width: 80rpx;
+    height: 80rpx;
+    position: relative;
+  }
+  .ad-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20%;
+  }
+  /* 自定义导航栏内容 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>
diff --git a/vipPage/components/cascade-selection/cascade-selection.vue b/vipPage/components/cascade-selection/cascade-selection.vue
new file mode 100644
index 0000000..edc6178
--- /dev/null
+++ b/vipPage/components/cascade-selection/cascade-selection.vue
@@ -0,0 +1,209 @@
+<template>
+  <view class="vip-component-cascade-selection tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>级联选择</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-cascade-selection :list="list" @complete="handleCompleteSelection"></tn-cascade-selection>
+      </demo-title>
+      
+      <demo-title title="设置默认值">
+        <tn-cascade-selection :list="list" :defaultValue="defaultValue" @complete="handleCompleteSelection"></tn-cascade-selection>
+      </demo-title>
+      
+      <demo-title title="异步加载">
+        <tn-cascade-selection :list="asyncList" request :receiveData="receiveData" @complete="handleCompleteSelection2" @change="handleChangeSelection"></tn-cascade-selection>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  import city from '../../static/mock/cascade-city.js'
+  export default {
+    name: 'VipComponentsCascadeSelection',
+    components: {demoTitle},
+    data() {
+      return {
+        list: city,
+        asyncList: [
+          {
+            text: '总经办',
+            subText: '10人',
+            src: '/static/favicon.ico',
+            value: 1
+          },
+          {
+            text: '财务',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 2
+          },
+          {
+            text: '采购',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 3
+          },
+          {
+            text: '销售',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 4
+          },
+          {
+            text: '售后',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 5
+          },
+          {
+            text: '研发',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 6
+          },
+          {
+            text: '质检',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 7
+          },
+          {
+            text: '生产',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 8
+          }
+        ],
+        receiveData: [],
+        defaultValue: ['440000','440100','440113']
+      }
+    },
+    methods: {
+      // 处理完成选中回调
+      handleCompleteSelection(e) {
+        this.$tn.message.toast(e.text)
+      },
+      // 处理异步请求完成选中回调
+      handleCompleteSelection2(e) {
+        this.$tn.message.toast(e.text)
+      },
+      // 处理异步请求列切换
+      handleChangeSelection(e) {
+        const {
+          index,
+          text,
+          value
+        } = e
+        if (index === 7) {
+          //实际中以请求数据为准，无下级数据则传空数组
+          this.receiveData = []
+        } else {
+          uni.showLoading({
+            title: '请求中...'
+          })
+          setTimeout(() => {
+            //请求完成后将数据处理成以下格式，传入，最后一级没有则传空数组
+            switch (index) {
+              case 0:
+                const data = []
+                for (let i = 0; i < (value === 1 ? 10 : 30); i++) {
+                  data.push({
+                    text: text + '员工' + (i + 1),
+                    subText: i % 2 === 0 ? '男' : '女',
+                    value: Number(value + i + '')
+                  })
+                }
+                this.receiveData = data
+                break
+              case 1:
+                this.receiveData = [
+                  {
+                    text: '他说',
+                    value: 0
+                  },{
+                    text: '她说',
+                    value: 1
+                  }
+                ]
+                break
+              case 2:
+                this.receiveData = [
+                  {
+                    text: '我要加工资',
+                    value: 0
+                  },{
+                    text: '我要加班班',
+                    value: 1
+                  }
+                ]
+                break
+              case 3:
+                this.receiveData = [
+                  {
+                    text: '老板回复',
+                    value: 0
+                  },{
+                    text: '直接辞退',
+                    value: 1
+                  }
+                ]
+                break
+              case 4:
+                if (value === 0) {
+                  this.receiveData = [
+                    {
+                      text: '等明年吧',
+                      value: 0
+                    },{
+                      text: '批准',
+                      value: 1
+                    }
+                  ]
+                } else {
+                  this.receiveData = []
+                }
+                break
+              case 5:
+                this.receiveData = [
+                  {
+                    text: '巴拉巴拉',
+                    value: 0
+                  },{
+                    text: '沉默了啊',
+                    value: 1
+                  }
+                ]
+                break
+              case 6:
+                this.receiveData = [
+                  {
+                    text: '结束了',
+                    value: 0
+                  }
+                ]
+                break
+            }
+            uni.hideLoading()
+          }, 2000)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-component-cascade-selection {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/cropper/cropper.vue b/vipPage/components/cropper/cropper.vue
new file mode 100644
index 0000000..5e090cc
--- /dev/null
+++ b/vipPage/components/cropper/cropper.vue
@@ -0,0 +1,106 @@
+<template>
+  <view class="vip-component-cropper">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Cropper图片裁剪</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="cropper-options">
+        <view class="cropper-options__item" @tap="chooseImage">选择图片</view>
+        <view class="cropper-options__item" @tap="switchBorderRect">{{ switchText }}</view>
+      </view>
+      
+    </view>
+    
+    <tn-cropper
+      :imageUrl="imageUrl"
+      :isRound="isRound"
+      @cropper="cropperFinish"
+    ></tn-cropper>
+    
+    <tn-popup
+      v-model="showCropperImage"
+      :marginTop="vuex_custom_bar_height"
+      length="80%"
+      mode="center"
+      :closeBtn="true"
+    >
+      <view class="tn-flex tn-flex-col-center tn-flex-row-center" style="margin: 40rpx 60rpx;">
+        <image :src="cropperImageUrl" style="width: 80%;" mode="widthFix"></image>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
+  export default {
+    name: 'vipComponentCropper',
+    components: { multipleOptionsDemo },
+    data() {
+      return {
+        imageUrl: '',
+        isRound: false,
+        switchText: '切换为圆形裁剪框',
+        showCropperImage: false,
+        cropperImageUrl: ''
+      }
+    },
+    methods: {
+      // 选择图片
+      chooseImage() {
+        uni.chooseImage({
+          count: 1,
+          sizeType: ['original', 'compressed'],
+          sourceType: ['album','camera'],
+          success: (res) => {
+            const tempFilePaths = res.tempFilePaths[0]
+            this.imageUrl = tempFilePaths
+          }
+        })
+      },
+      // 切换裁剪框形状
+      switchBorderRect() {
+        this.isRound = !this.isRound
+        if (this.isRound) {
+          this.switchText = '切换为正方形裁剪框'
+        } else {
+          this.switchText = '切换为圆形裁剪框'
+        }
+      },
+      // 裁剪完成
+      cropperFinish(res) {
+        // console.log(res);
+        this.showCropperImage = true
+        if (res.url) {
+          this.cropperImageUrl = res.url
+        }
+        if (res.base64) {
+          this.cropperImageUrl = `${res.base64}`
+        }
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .cropper-options {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    margin-top: 80rpx;
+    
+    &__item {
+      color: #FFFFFF;
+      font-size: 28rpx;
+      padding: 18rpx 36rpx;
+      border: 2rpx solid #FFFFFF;
+      z-index: 1000;
+      
+      &:nth-child(1) {
+        border-right: none;
+      }
+    }
+  }
+</style>
diff --git a/vipPage/components/custom-swiper/horizontal/custom-swiper.vue b/vipPage/components/custom-swiper/horizontal/custom-swiper.vue
new file mode 100644
index 0000000..2f0c469
--- /dev/null
+++ b/vipPage/components/custom-swiper/horizontal/custom-swiper.vue
@@ -0,0 +1,110 @@
+<template>
+  <view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>图鸟轮播(横向)</tn-nav-bar>
+        
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-custom-swiper
+        class="swiper"
+        :current="current"
+        :intervel="3000"
+        :autoplay="true"
+        :circular="true"
+        indicatorType="round"
+        :indicator="true"
+        indicatorPosition="topCenter"
+        indicatorActiveColor="#838383"
+        :customSwiperStyle="customSwiperStyle"
+        :prevSwiperStyle="prevSwiperStyle"
+        :nextSwiperStyle="nextSwiperStyle"
+      >
+        <block v-for="(item, index) in swiperList" :key="index">
+          <tn-custom-swiper-item class="swiper__item">
+            <image :src="item.image" style="width: 100%;" mode="widthFix"></image>
+            <view class="text">{{ item.title }}</view>
+          </tn-custom-swiper-item>
+        </block>
+      </tn-custom-swiper>
+        
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'VipComponentCustomHorizontalSwiper',
+    data() {
+      return {
+        current: 0,
+        swiperList: [
+          {
+            title: '图鸟UI 会员促销1',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI 会员促销2',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI 会员促销3',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI 会员促销4',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI 会员促销5',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          }
+        ],
+        // 当前swiper的自定义样式
+        customSwiperStyle: {
+          transform: 'scale(0.7)',
+          transformOrigin: 'center center',
+          transition: 'all 0.5s ease-out',
+          left: '0px'
+        },
+        // 前一个swiper的自定义样式
+        prevSwiperStyle: {
+          transform: 'scale(0.8) perspective(200rpx) rotateY(-10deg)  translateZ(-280rpx)',
+          left: '280rpx'
+        },
+        // 后一个swiper的自定义样式
+        nextSwiperStyle: {
+          transform: 'scale(0.8) perspective(200rpx) rotateY(10deg) translateZ(-280rpx)',
+          left: '-280rpx'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-component-custom-swiper--horizontal {
+    background-color: $tn-bg-gray-color;
+  }
+  
+  .swiper {
+    width: 100%;
+    height: 390rpx;
+    display: block;
+    
+    &__item {
+      image {
+        border-radius: 10rpx;
+        width: 100%;
+        height: 100%;
+      }
+      .text {
+        position: absolute;
+        left: 10rpx;
+        bottom: 0;
+        font-size: 46rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+</style>
diff --git a/vipPage/components/custom-swiper/index.vue b/vipPage/components/custom-swiper/index.vue
new file mode 100644
index 0000000..74e88d0
--- /dev/null
+++ b/vipPage/components/custom-swiper/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view class="vip-component-custom-swiper">
+  
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>图鸟轮播(实验)</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <multiple-options-demo
+        :list="optionsList"
+      ></multiple-options-demo>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script>
+  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
+  
+  export default {
+    name: 'VipComponentsCustomSwiper',
+    components: { multipleOptionsDemo },
+    data() {
+      return {
+        // 选项列表数据
+        optionsList: [
+          { title: '横向滑动', desc: '横向滑动轮播', url: '/vipPage/components/custom-swiper/horizontal/custom-swiper' },
+          { title: '纵向滑动', desc: '纵向滑动轮播', url: '/vipPage/components/custom-swiper/vertical/custom-swiper' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/vipPage/components/custom-swiper/vertical/custom-swiper.vue b/vipPage/components/custom-swiper/vertical/custom-swiper.vue
new file mode 100644
index 0000000..8071260
--- /dev/null
+++ b/vipPage/components/custom-swiper/vertical/custom-swiper.vue
@@ -0,0 +1,106 @@
+<template>
+  <view class="vip-component-custom-swiper--horizontal 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="0"
+          :duration="450"
+          :autoplay="true"
+          :circular="true"
+          :vertical="true"
+          :indicator="true"
+          indicatorType="round"
+          indicatorPosition="topCenter"
+          indicatorActiveColor="#838383"
+        >
+          <block v-for="(item, index) in swiperList" :key="index">
+            <tn-custom-swiper-item class="swiper__item">
+              <image :src="item.image" mode="heightFix"></image>
+              <view class="text">{{ item.title }}</view>
+            </tn-custom-swiper-item>
+          </block>
+        </tn-custom-swiper>
+      </view>
+        
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'VipComponentCustomVerticalSwiper',
+    data() {
+      return {
+        containerHeight: 0,
+        swiperList: [
+          {
+            title: '图鸟UI YYDS-1',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI YYDS-2',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI YYDS-3',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI YYDS-4',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          },
+          {
+            title: '图鸟UI YYDS-5',
+            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
+          }
+        ],
+      }
+    },
+    onLoad() {
+      this.getContainerHeight()
+    },
+    methods: {
+      // 获取可用区域的高度
+      getContainerHeight() {
+        const systemInfo = uni.getSystemInfoSync()
+        this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-component-custom-swiper--horizontal {
+    background-color: $tn-bg-gray-color;
+  }
+  
+  .swiper {
+    width: 100%;
+    height: 100%;
+    display: block;
+    
+    &__item {
+      width: 100%;
+      height: 100%;
+      
+      image {
+        border-radius: 10rpx;
+        width: 100%;
+        height: 100%;
+      }
+      .text {
+        position: absolute;
+        left: 10rpx;
+        bottom: 0;
+        font-size: 46rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+</style>
diff --git a/vipPage/components/drag/basic-drag/basic-drag.vue b/vipPage/components/drag/basic-drag/basic-drag.vue
new file mode 100644
index 0000000..a249563
--- /dev/null
+++ b/vipPage/components/drag/basic-drag/basic-drag.vue
@@ -0,0 +1,159 @@
+<template>
+  <view class="vip-component-basic-drag">
+  
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Drag拖拽</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="operation">
+        <view class="operation__item">
+          <view class="operation__title">设置columns</view>
+          <view class="operation__content">
+            <view class="tn-margin-right">columns:</view>
+            <tn-number-box v-model="columns" :min="3" :max="5" :disabledInput="true"></tn-number-box>
+          </view>
+        </view>
+        <view class="operation__item">
+          <view class="operation__title">设置固定项</view>
+          <view class="operation__content">
+            <view class="tn-margin-right">随机固定:</view>
+            <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="setFixed">随机固定</tn-button>
+          </view>
+        </view>
+      </view>
+      
+      <view class="drag__wrap tn-margin-top">
+        <tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
+          <template slot-scope="{entity, height, fixed}">
+            <view class="drag__item" :style="{height: `${height}rpx`}">
+              <image :src="entity.url" :style="{height: `${height}rpx`}" mode="widthFix"></image>
+              <view v-if="fixed" class="drag__item__fixed">Fixed</view>
+            </view>
+          </template>
+        </tn-drag>
+      </view>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script> 
+  export default {
+    name: 'VipComponentBasicDrag',
+    data() {
+      return {
+        list: [],
+        scrollTop: 0,
+        columns: 3,
+        itemHeight: 210,
+        sliderValue: 3,
+      }
+    },
+    onLoad() {
+      const list = []
+      for (let i = 0; i < 15; i++) {
+        list.push({
+          url: i % 2 == 0 ? 'https://resource.tuniaokj.com/images/shop/bag1.jpg' : 'https://resource.tuniaokj.com/images/shop/bag2.jpg',
+          fixed: false
+        })
+      }
+      this.list = list
+    },
+    watch: {
+      columns(val) {
+        uni.pageScrollTo({
+          scrollTop: 0
+        })
+        this.itemHeight = [210, 160, 120][val - 3]
+      }
+    },
+    methods: {
+      onChange(data) {
+        // console.log(data.data);
+      },
+      onEnd(data) {
+        console.log(data.data);
+      },
+      // 设置动态固定项
+      setFixed() {
+        const rand = Math.floor(Math.random() * (15 - 1))
+        console.log(rand);
+        this.list.forEach((item) => {
+          item.fixed = false
+        })
+        this.list[rand].fixed = true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .operation {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0 100rpx;
+    margin-top: 100rpx;
+    
+    &__item {
+      width: 100%;
+      margin-top: 20rpx;
+    }
+    
+    &__title {
+      font-size: 36rpx;
+    }
+    
+    &__content {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      margin-top: 10rpx;
+    }
+  }
+  
+  .drag {
+    &__wrap {
+      padding-left: 30rpx;
+      padding-right: 30rpx;
+    }
+    
+    &__item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #FFFFFF;
+      padding: 20rpx;
+      box-sizing: border-box;
+      border: 1rpx solid #F6F6F6;
+      position: relative;
+      
+      image {
+        display: block;
+        flex-shrink: 0;
+        width: 100%;
+      }
+      
+      &__fixed {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.5);
+        font-size: 40rpx;
+      }
+    }
+  }
+</style>
diff --git a/vipPage/components/drag/list-drag/list-drag.vue b/vipPage/components/drag/list-drag/list-drag.vue
new file mode 100644
index 0000000..47e66a6
--- /dev/null
+++ b/vipPage/components/drag/list-drag/list-drag.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class="">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>列表排序长按拖拽</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view class="tn-bg-gray--light" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
+      
+      <view class="drag__wrap tn-margin-top-sm tn-padding-bottom-xl">
+        
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;background-color: #FFFFFF;margin: 10rpx;border-radius: 10rpx;">
+          <view class="justify-content-item tn-text-bold tn-text-lg">
+            推荐
+          </view>
+          <view class="justify-content-item">
+            <text class="tn-icon-expand tn-text-xl tn-color-gray--disabled"></text>
+          </view>
+        </view>
+        
+        <tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
+          <template slot-scope="{entity, height}">
+            <view class="drag__item" :style="{height: `${height}rpx`}">
+              <view class="drag__item__name">
+                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;">
+                  <view class="justify-content-item tn-text-bold tn-text-lg">
+                    {{entity.name}}
+                  </view>
+                  <view class="justify-content-item">
+                    <text class="tn-icon-expand tn-text-xl"></text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </template>
+        </tn-drag>
+      </view>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script> 
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateSet',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        list: [
+          {name: '商城'},
+          {name: '关注'},
+          {name: '团购'},
+          {name: '同城'},
+          {name: '经验'},
+          {name: '视频'},
+          {name: '直播'},
+          {name: '热点'},
+          {name: '治愈'}
+        ],
+        scrollTop: 0,
+        columns: 1,
+        itemHeight: 120,
+        sliderValue: 1,
+      }
+    },
+    methods: {
+      onChange(data) {
+        // console.log(data.data);
+      },
+      onEnd(data) {
+        // console.log(data.data);
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .drag {
+    &__wrap {
+      padding-left: 20rpx;
+      padding-right: 20rpx;
+    }
+    
+    &__item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background-color: #FF5656;
+      box-sizing: border-box;
+      padding: 10rpx;
+      // border: 1rpx solid #000000;
+      position: relative;
+      
+      &__fixed {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+      }
+      
+      &__name {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+      }
+    }
+  }
+</style>
diff --git a/vipPage/components/drag/upload-image-drag/upload-image-drag.vue b/vipPage/components/drag/upload-image-drag/upload-image-drag.vue
new file mode 100644
index 0000000..60b3cba
--- /dev/null
+++ b/vipPage/components/drag/upload-image-drag/upload-image-drag.vue
@@ -0,0 +1,91 @@
+<template>
+	<view class="vip-component-upload-image-drag">
+
+		<!-- 顶部自定义导航 -->
+		<tn-nav-bar fixed>可拖拽图片上传</tn-nav-bar>
+
+		<!-- 页面内容 -->
+		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+
+			<view class="drag__wrap tn-margin-top">
+				<tn-image-upload-drag ref="imageUpload" :action="action" :height="220" :width="220" :formData="formData"
+					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
+					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
+					:customBtn="customBtn" @sort-list="onSortList" />
+				<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
+					<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
+					<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx"
+						@tap="clear">清空列表</tn-button>
+				</view>
+			</view>
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'VipComponentUploadImageDrag',
+		data() {
+			return {
+				action: 'https://www.hualigs.cn/api/upload',
+				// action: '',
+				formData: {
+					apiType: 'this,ali',
+					token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
+					image: null
+				},
+				fileList: [{
+					url: 'https://resource.tuniaokj.com/images/shop/bag1.jpg'
+				}],
+				showUploadList: true,
+				customBtn: false,
+				autoUpload: true,
+				showProgress: true,
+				deleteable: true,
+				customStyle: false,
+				maxCount: 9,
+				disabled: false,
+			}
+		},
+		onLoad() {
+			this.pushFileList().then(res=>{
+				this.fileList=[...this.fileList,...res]
+			})
+		},
+		methods: {
+			//模拟异步获取数据
+			async pushFileList() {
+				return [{
+					url: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
+				}, {
+					url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
+				}, {
+					url: 'https://resource.tuniaokj.com/images/shop/cup2.jpg'
+				}]
+			},
+			// 手动上传文件
+			upload() {
+				this.$refs.imageUpload.upload()
+			},
+			// 手动清空列表
+			clear() {
+				this.$refs.imageUpload.clear()
+			},
+			// 图片拖拽重新排序
+			onSortList(list) {
+				console.log(list);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.drag {
+		&__wrap {
+			padding-left: 30rpx;
+			padding-right: 30rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/vipPage/components/scroll-view/basic/scroll-view.vue b/vipPage/components/scroll-view/basic/scroll-view.vue
new file mode 100644
index 0000000..cff2a96
--- /dev/null
+++ b/vipPage/components/scroll-view/basic/scroll-view.vue
@@ -0,0 +1,89 @@
+<template>
+  <view class="vip-component-basic-scroll-view">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-scroll-view
+        :customNavHeight="vuex_custom_bar_height"
+        :refreshState="refreshState"
+        @refresh="handleRefresh"
+      >
+        <view class="scroll-view__content">
+          <block v-for="i in 10" :key="i">
+            <view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
+              <view class="list__image">
+                <image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
+              </view>
+              <view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
+                <view class="list__content__title">tuniaoUI</view>
+                <view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
+              </view>
+            </view>
+          </block>
+        </view>
+      </tn-scroll-view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'VipComponentBasicScrollView',
+    data() {
+      return {
+        refreshState: false
+      }
+    },
+    methods: {
+      // 处理触发刷新事件
+      handleRefresh() {
+        this.refreshState = true
+        setTimeout(() => {
+          this.refreshState = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .scroll-view {
+    
+    &__content {
+      
+      .list {
+        &__item {
+          height: 140rpx;
+          margin: 0 10rpx;
+          margin-top: 24rpx;
+        }
+        
+        &__image {
+          width: 140rpx;
+          height: 140rpx;
+          
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        
+        &__content {
+          padding-left: 16rpx;
+          height: 100%;
+          width: 580rpx;
+          
+          &__title {
+            padding-bottom: 10rpx;
+            font-size: 40rpx;
+          }
+          &__desc {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/vipPage/components/scroll-view/custom/scroll-view.vue b/vipPage/components/scroll-view/custom/scroll-view.vue
new file mode 100644
index 0000000..ec59e9a
--- /dev/null
+++ b/vipPage/components/scroll-view/custom/scroll-view.vue
@@ -0,0 +1,131 @@
+<template>
+  <view class="vip-component-basic-scroll-view">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-scroll-view
+        :customNavHeight="vuex_custom_bar_height"
+        :refreshState="refreshState"
+        @refresh="handleRefresh"
+        @refreshReady="handleRefreshReady"
+        @refreshStop="resetRefresh"
+      >
+        <template v-slot:pulldown>
+          <view class="refresh">
+            <view class="refresh__icon" :class="[`tn-icon-down-arrow`, {'refresh__icon--revolve': refreshIconRevolve}]"></view>
+            <view class="refresh__text">{{ refreshText }}</view>
+          </view>
+        </template>
+        <view class="scroll-view__content">
+          <block v-for="i in 10" :key="i">
+            <view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
+              <view class="list__image">
+                <image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
+              </view>
+              <view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
+                <view class="list__content__title">tuniaoUI</view>
+                <view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
+              </view>
+            </view>
+          </block>
+        </view>
+      </tn-scroll-view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'VipComponentBasicScrollView',
+    data() {
+      return {
+        refreshState: false,
+        refreshText: '下拉刷新',
+        refreshIconRevolve: false
+      }
+    },
+    methods: {
+      // 处理触发刷新事件
+      handleRefresh() {
+        this.refreshState = true
+        this.refreshText = '正在刷新'
+        setTimeout(() => {
+          this.refreshState = false
+          this.resetRefresh()
+        }, 2000)
+      },
+      // 处理刷新准备事件
+      handleRefreshReady() {
+        this.refreshText = '松开刷新'
+        this.refreshIconRevolve = true
+      },
+      // 重置刷新
+      resetRefresh() {
+        this.refreshText = '下拉刷新'
+        this.refreshIconRevolve = false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .scroll-view {
+    
+    &__content {
+      
+      .list {
+        &__item {
+          height: 140rpx;
+          margin: 0 10rpx;
+          margin-top: 24rpx;
+        }
+        
+        &__image {
+          width: 140rpx;
+          height: 140rpx;
+          
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        
+        &__content {
+          padding-left: 16rpx;
+          height: 100%;
+          width: 580rpx;
+          
+          &__title {
+            padding-bottom: 10rpx;
+            font-size: 40rpx;
+          }
+          &__desc {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  
+  .refresh {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 40rpx;
+    text-align: center;
+    
+    &__icon {
+      transition: transform 0.25s ease-in-out;
+      transform-origin: center center;
+      &--revolve {
+        transform: rotateZ(180deg);
+      }
+    }
+    
+    &__text {
+      padding-left: 10rpx;
+    }
+  }
+</style>
diff --git a/vipPage/components/scroll-view/index.vue b/vipPage/components/scroll-view/index.vue
new file mode 100644
index 0000000..642aaad
--- /dev/null
+++ b/vipPage/components/scroll-view/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view class="vip-component-scroll-view">
+  
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <multiple-options-demo
+        :list="optionsList"
+      ></multiple-options-demo>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script>
+  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
+  
+  export default {
+    name: 'VipComponentsScrollView',
+    components: { multipleOptionsDemo },
+    data() {
+      return {
+        // 选项列表数据
+        optionsList: [
+          { title: '普通下拉加载', desc: '使用默认的下拉样式', url: '/vipPage/components/scroll-view/basic/scroll-view' },
+          { title: '自定义下拉加载', desc: '通过传递的事件自定义下拉样式', url: '/vipPage/components/scroll-view/custom/scroll-view' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/vipPage/components/stack-swiper/stack-swiper.vue b/vipPage/components/stack-swiper/stack-swiper.vue
new file mode 100644
index 0000000..476eb0f
--- /dev/null
+++ b/vipPage/components/stack-swiper/stack-swiper.vue
@@ -0,0 +1,73 @@
+<template>
+  <view class="vip-component-stack-swiper tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>StackSwiper堆叠轮播</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础使用">
+        <tn-stack-swiper :list="list"></tn-stack-swiper>
+      </demo-title>
+      
+      <demo-title title="自动轮播">
+        <tn-stack-swiper :list="list" :autoplay="autoplay"></tn-stack-swiper>
+      </demo-title>
+      
+      <demo-title title="切换阈值">
+        <tn-stack-swiper :list="list" :switchRate="50"></tn-stack-swiper>
+      </demo-title>
+      
+      <demo-title title="修改轮播图的宽高">
+        <tn-stack-swiper :list="list" :height="300" width="80%"></tn-stack-swiper>
+      </demo-title>
+      
+      <demo-title title="垂直堆叠轮播">
+        <view class="tn-flex tn-flex-row-center tn-flex-col-center">
+          <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="navVerticalStackSwiper">演示(建议全屏使用)</tn-button>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentStackSwiper',
+    components: { demoTitle },
+    data() {
+      return {
+        autoplay: false,
+        list: [
+          {image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg'},
+          {image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg'}
+        ]
+      }
+    },
+    onShow() {
+      // 一定要这样，否者会导致定时器不工作
+      this.autoplay = true
+    },
+    onHide() {
+      this.autoplay = false
+    },
+    methods: {
+      navVerticalStackSwiper() {
+        uni.navigateTo({
+          url: '/vipPage/home/card/card'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-component-stack-swiper {
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/table/basic/index.vue b/vipPage/components/table/basic/index.vue
new file mode 100644
index 0000000..7fea5d6
--- /dev/null
+++ b/vipPage/components/table/basic/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <view class="vip-components-table__basic">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>基础表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="默认表格">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="调整宽度 方式1">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="index === 2 ? 16 : 8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="idx === 2 ? 16 : 8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="调整宽度 方式2">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :grow="index === 2" :width="['90px','160rpx','auto'][index]" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :grow="idx === 2" :width="['90px','160rpx','auto'][idx]" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="居中对齐">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="右对齐">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" alignItems="right" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" alignItems="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="居中对齐之文字右对齐">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" textAlign="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="去掉纵向边框">
+        <tn-table :borderRight="true">
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :borderRight="false" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :borderRight="false" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="无边框">
+        <tn-table borderWidth="0">
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-table borderColor="#FFFFFF">
+          <tn-tr backgroundColor="transparent" borderColor="#FFFFFF" fontColor="#01BEFF" :fontSize="34">
+            <tn-td v-for="(item, index) in header" :key="index" borderColor="#FFFFFF" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" backgroundColor="transparent" borderColor="#FFFFFF">
+            <tn-td v-for="(data, idx) in header" :key="idx" borderColor="#FFFFFF" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="文字超出隐藏">
+        <tn-table>
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :ellipsis="true" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsBasicTable',
+    components: { demoTitle },
+    data() {
+      return {
+        header: [
+          { title: '日期', key: 'date' },
+          { title: '金额', key: 'price' },
+          { title: '备注', key: 'note' }
+        ],
+        listData: [
+          { id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
+        ]
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick(e, id) {
+        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__basic {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/table/complex/index.vue b/vipPage/components/table/complex/index.vue
new file mode 100644
index 0000000..8ae481c
--- /dev/null
+++ b/vipPage/components/table/complex/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <view class="vip-components-table__basic">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>基础表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="默认表格">
+        <tn-table>
+          <tn-tr>
+            <tn-td height="80rpx" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">图鸟UI 2月开发进度</tn-td>
+          </tn-tr>
+          <tn-tr>
+            <tn-td :span="8">页面模板</tn-td>
+            <tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
+              <tn-tr>
+                <tn-td :span="8">博客页面</tn-td>
+                <tn-td :span="16" alignItems="right">2天</tn-td>
+              </tn-tr>
+              <tn-tr>
+                <tn-td :span="8">炫酷首页</tn-td>
+                <tn-td :span="16" alignItems="right">3天</tn-td>
+              </tn-tr>
+              <tn-tr borderWidth="0">
+                <tn-td :span="8" borderWidth="1rpx">会员需求</tn-td>
+                <tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
+                  <tn-tr>
+                    <tn-td :span="12" borderWidth="1rpx">功能首页</tn-td>
+                    <tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
+                  </tn-tr>
+                  <tn-tr borderWidth="0">
+                    <tn-td :span="12" borderWidth="1rpx">短视频页面</tn-td>
+                    <tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
+                  </tn-tr>
+                </tn-td>
+              </tn-tr>
+            </tn-td>
+          </tn-tr>
+          <tn-tr>
+            <tn-td :span="8">组件开发</tn-td>
+            <tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
+              <tn-tr>
+                <tn-td :span="8">免费组件</tn-td>
+                <tn-td :span="16" alignItems="right">2天</tn-td>
+              </tn-tr>
+              <tn-tr borderWidth="0">
+                <tn-td :span="8" borderWidth="1rpx">会员组件</tn-td>
+                <tn-td :span="16" alignItems="right" borderWidth="1rpx">3天</tn-td>
+              </tn-tr>
+            </tn-td>
+          </tn-tr>
+          <tn-tr>
+            <tn-td :bold="true" :span="8">合计</tn-td>
+            <tn-td alignItems="right" :span="16">16天</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsComplexTable',
+    components: { demoTitle },
+    data() {
+      return {}
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__complex {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/table/fixed-column/index.vue b/vipPage/components/table/fixed-column/index.vue
new file mode 100644
index 0000000..be365ba
--- /dev/null
+++ b/vipPage/components/table/fixed-column/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <view class="vip-components-table__fixed-column">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>固定列表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="表格叠加">
+        <view style="position: relative;">
+          <tn-table :borderLeft="false">
+            <tn-tr>
+              <tn-td
+                v-for="(item, index) in header"
+                :key="index"
+                :bold="true"
+                :span="8"
+                :borderLeft="index === 0"
+                :backgroundColor="index === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
+                :hidden="index !== 0"
+                :fixed="index === 0"
+                :shrink="false"
+                :keys="item.key"
+              >{{ item.title }}</tn-td>
+            </tn-tr>
+            <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+              <tn-td
+                v-for="(data, idx) in header"
+                :key="idx"
+                :span="8"
+                :borderLeft="idx === 0"
+                :backgroundColor="idx === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
+                :hidden="idx !== 0"
+                :fixed="idx === 0"
+                :shrink="false"
+                :keys="data.key"
+                @click="handleClick($event, item.id)"
+              >{{ item[data.key] }}</tn-td>
+            </tn-tr>
+          </tn-table>
+          <scroll-view class="scroll-view" scroll-x>
+            <tn-table :borderLeft="false">
+              <tn-tr>
+                <tn-td
+                  v-for="(item, index) in header"
+                  :key="index"
+                  :bold="true"
+                  :span="8"
+                  :hidden="index === 0"
+                  :shrink="false"
+                  :keys="item.key"
+                >{{ item.title }}</tn-td>
+              </tn-tr>
+              <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+                <tn-td
+                  v-for="(data, idx) in header"
+                  :key="idx"
+                  :span="8"
+                  :hidden="idx === 0"
+                  :shrink="false"
+                  :keys="data.key"
+                  @click="handleClick($event, item.id)"
+                >{{ item[data.key] }}</tn-td>
+              </tn-tr>
+            </tn-table>
+          </scroll-view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="表格叠加-多列">
+        <view style="position: relative;">
+          <tn-table :borderLeft="false">
+            <tn-tr>
+              <tn-td
+                v-for="(item, index) in header"
+                :key="index"
+                :bold="true"
+                :span="[0,1].includes(index) ? 6 : 8"
+                :borderLeft="index === 0"
+                :backgroundColor="[0,1].includes(index) ? 'tn-bg-blue--light' : '#FFFFFF'"
+                :hidden="![0,1].includes(index)"
+                :fixed="[0,1].includes(index)"
+                :shrink="false"
+                :keys="item.key"
+              >{{ item.title }}</tn-td>
+            </tn-tr>
+            <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+              <tn-td
+                v-for="(data, idx) in header"
+                :key="idx"
+                :span="[0,1].includes(idx) ? 6 : 8"
+                :borderLeft="idx === 0"
+                :backgroundColor="[0,1].includes(idx) ? 'tn-bg-blue--light' : '#FFFFFF'"
+                :hidden="![0,1].includes(idx)"
+                :fixed="[0,1].includes(idx)"
+                :shrink="false"
+                :keys="data.key"
+                @click="handleClick($event, item.id)"
+              >{{ item[data.key] }}</tn-td>
+            </tn-tr>
+          </tn-table>
+          <scroll-view class="scroll-view" scroll-x>
+            <tn-table :borderLeft="false">
+              <tn-tr>
+                <tn-td
+                  v-for="(item, index) in header"
+                  :key="index"
+                  :bold="true"
+                  :span="[0,1].includes(index) ? 6 : 8"
+                  :hidden="[0,1].includes(index)"
+                  :shrink="false"
+                  :keys="item.key"
+                >{{ item.title }}</tn-td>
+              </tn-tr>
+              <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+                <tn-td
+                  v-for="(data, idx) in header"
+                  :key="idx"
+                  :span="[0,1].includes(idx) ? 6 : 8"
+                  :hidden="[0,1].includes(idx)"
+                  :shrink="false"
+                  :keys="data.key"
+                  @click="handleClick($event, item.id)"
+                >{{ item[data.key] }}</tn-td>
+              </tn-tr>
+            </tn-table>
+          </scroll-view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsFixedColumnTable',
+    components: { demoTitle },
+    data() {
+      return {
+        header: [
+          { title: '日期', key: 'date' },
+          { title: '销售金额', key: 'salePrice' },
+          { title: '收益', key: 'income' },
+          { title: '顾客数量', key: 'customers' },
+          { title: '备注', key: 'note' }
+        ],
+        listData: [
+          { id: 1, date: '20220301', salePrice: '1,000', income: '800', customers: '600', note: '今天的销售额一般般呀' },
+          { id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', customers: '2000', note: '今天的销售额还不错嘛' },
+          { id: 3, date: '20220303', salePrice: '4000', income: '2000', customers: '1500', note: '今天的销售额还行啦' }
+        ]
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick(e, id) {
+        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__fixed-column {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+    max-width: 100vw;
+    overflow: hidden;
+    
+    .scroll-view {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+    }
+  }
+</style>
diff --git a/vipPage/components/table/fixed-header/index.vue b/vipPage/components/table/fixed-header/index.vue
new file mode 100644
index 0000000..a0d12cf
--- /dev/null
+++ b/vipPage/components/table/fixed-header/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <view class="vip-components-table__fixed-header">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>固定头部表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view>
+        <tn-table :borderTop="false" :borderLeft="false">
+          <tn-tr :fixed="true" :borderTop="true" :top="vuex_custom_bar_height + 'px'">
+            <tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :margin="index === 0 ? '48rpx 0 0 0' : ''">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </view>
+      
+      <demo-title title="配合scroll-view使用">
+        <tn-table>
+          <tn-tr left="32rpx" right="30rpx" width="auto">
+            <tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <scroll-view style="height: 400px" scroll-y>
+            <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+              <tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+            </tn-tr>
+          </scroll-view>
+          
+        </tn-table>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsFixedHeaderTable',
+    components: { demoTitle },
+    data() {
+      return {
+        header: [
+          { title: '日期', key: 'date' },
+          { title: '金额', key: 'price' },
+          { title: '备注', key: 'note' }
+        ],
+        listData: [
+          { id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 4, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 5, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 6, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 7, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 8, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 9, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 10, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 11, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 12, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 13, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 14, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 15, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 16, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 17, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 18, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 19, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 20, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 21, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
+          { id: 22, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 23, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 24, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
+        ]
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick(e, id) {
+        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__fixed-header {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/table/index.vue b/vipPage/components/table/index.vue
new file mode 100644
index 0000000..7a1a3a3
--- /dev/null
+++ b/vipPage/components/table/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <view class="vip-component-table tn-safe-area-inset-bottom">
+  
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>表格</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <multiple-options-demo
+        :list="optionsList"
+      ></multiple-options-demo>
+      
+      <view class="tn-padding-bottom-lg"></view>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script>
+  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
+  
+  export default {
+    name: 'VipComponentsTable',
+    components: { multipleOptionsDemo },
+    data() {
+      return {
+        // 选项列表数据
+        optionsList: [
+          { title: '普通表格', desc: '表格基本使用', url: '/vipPage/components/table/basic/index' },
+          { title: '斑马纹表格', desc: '带斑马纹的表格', url: '/vipPage/components/table/stripe/index' },
+          { title: '固定头部表格', desc: '固定头部表格', url: '/vipPage/components/table/fixed-header/index' },
+          { title: '固定列表格', desc: '固定列表格', url: '/vipPage/components/table/fixed-column/index' },
+          { title: '多表头表格', desc: '多表头表格', url: '/vipPage/components/table/multi-header/index' },
+          { title: '复杂表格', desc: '复杂表格', url: '/vipPage/components/table/complex/index' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/vipPage/components/table/multi-header/index.vue b/vipPage/components/table/multi-header/index.vue
new file mode 100644
index 0000000..8fa8467
--- /dev/null
+++ b/vipPage/components/table/multi-header/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <view class="vip-components-table__multi-header">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>多表头表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="多表头表格">
+        <tn-table>
+          <tn-tr backgroundColor="tn-bg-green--light">
+            <tn-td :bold="true" :span="6">日期</tn-td>
+            <tn-td :borderRight="true" :bold="true" :span="12" :ellipsis="true" padding="0">
+              <tn-td :bold="true" :borderBottom="true" :borderRight="false" alignItems="center">金额</tn-td>
+              <tn-tr borderWidth="0" backgroundColor="tn-bg-green--light">
+                <tn-td :bold="true" alignItems="center" borderWidth="1rpx">金额</tn-td>
+                <tn-td :bold="true" alignItems="center">收益</tn-td>
+              </tn-tr>
+            </tn-td>
+            <tn-td :span="6">备注</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="6" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsMultiHeaderTable',
+    components: { demoTitle },
+    data() {
+      return {
+        header: [
+          { title: '日期', key: 'date' },
+          { title: '金额', key: 'salePrice' },
+          { title: '收益', key: 'income' },
+          { title: '备注', key: 'note' }
+        ],
+        listData: [
+          { id: 1, date: '20220301', salePrice: '1,000', income: '800', note: '今天的销售额一般般呀' },
+          { id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', note: '今天的销售额还不错嘛' },
+          { id: 3, date: '20220303', salePrice: '4000', income: '2000', note: '今天的销售额还行啦' }
+        ]
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick(e, id) {
+        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__multi-header {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/table/stripe/index.vue b/vipPage/components/table/stripe/index.vue
new file mode 100644
index 0000000..672dfbf
--- /dev/null
+++ b/vipPage/components/table/stripe/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view class="vip-components-table__stripe">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>斑马纹表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="表格样式-1">
+        <tn-table borderWidth="0">
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? '#FFFFFF' : '#E6E6E6'">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <demo-title title="表格样式-2">
+        <tn-table borderWidth="0">
+          <tn-tr>
+            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? 'tn-bg-green--light' : 'tn-bg-red--light'">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsStripeTable',
+    components: { demoTitle },
+    data() {
+      return {
+        header: [
+          { title: '日期', key: 'date' },
+          { title: '金额', key: 'price' },
+          { title: '备注', key: 'note' }
+        ],
+        listData: [
+          { id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
+          { id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
+          { id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
+        ]
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick(e, id) {
+        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__stripe {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/vipPage/components/tree-view/tree-view.vue b/vipPage/components/tree-view/tree-view.vue
new file mode 100644
index 0000000..d53024a
--- /dev/null
+++ b/vipPage/components/tree-view/tree-view.vue
@@ -0,0 +1,123 @@
+<template>
+  <view class="vip-component-tree-view tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>树形菜单</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-tree-view :treeData="treeData" @click="onClick"></tn-tree-view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentTreeView',
+    components: { demoTitle },
+    data() {
+      return {
+        treeData: [{
+          text: 'TuniaoUI',
+          value: 1,
+          image: '/vipPage/static/images/tree_view/folder.png',
+          activeImage: '/vipPage/static/images/tree_view/folder_open.png',
+          collapsed: false,
+          children: [{
+            text: 'tn-button',
+            value: 10,
+            image: '/vipPage/static/images/tree_view/folder.png',
+            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
+            collapsed: false,
+            children: [{
+              text: 'tn-button.vue',
+              value: 100,
+              image: '/vipPage/static/images/tree_view/file_vue.png'
+            },{
+              text: 'tn-button.js',
+              value: 101,
+              image: '/vipPage/static/images/tree_view/file_js.png'
+            },{
+              text: 'tn-button.css',
+              value: 102,
+              image: '/vipPage/static/images/tree_view/file_css.png'
+            }]
+          },{
+            text: 'tn-avatar',
+            value: 11,
+            image: '/vipPage/static/images/tree_view/folder.png',
+            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
+            collapsed: true,
+            children: [{
+              text: 'tn-avatar.vue',
+              value: 110,
+              image: '/vipPage/static/images/tree_view/file_vue.png'
+            },{
+              text: 'tn-avatar.js',
+              value: 111,
+              image: '/vipPage/static/images/tree_view/file_js.png'
+            },{
+              text: 'tn-avatar.css',
+              value: 112,
+              image: '/vipPage/static/images/tree_view/file_css.png'
+            }]
+          },{
+            text: 'tn-icon',
+            value: 12,
+            image: '/vipPage/static/images/tree_view/folder.png',
+            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
+            collapsed: true,
+            children: [{
+              text: 'tn-icon.vue',
+              value: 120,
+              image: '/vipPage/static/images/tree_view/file_vue.png'
+            },{
+              text: 'tn-icon.js',
+              value: 121,
+              image: '/vipPage/static/images/tree_view/file_js.png'
+            },{
+              text: 'tn-icon.css',
+              value: 122,
+              image: '/vipPage/static/images/tree_view/file_css.png'
+            }]
+          },{
+            text: 'tn-navbar',
+            value: 13,
+            image: '/vipPage/static/images/tree_view/folder.png',
+            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
+            collapsed: true,
+            children: [{
+              text: 'tn-navbar.vue',
+              value: 130,
+              image: '/vipPage/static/images/tree_view/file_vue.png'
+            },{
+              text: 'tn-navbar.js',
+              value: 131,
+              image: '/vipPage/static/images/tree_view/file_js.png'
+            },{
+              text: 'tn-navbar.css',
+              value: 132,
+              image: '/vipPage/static/images/tree_view/file_css.png'
+            }]
+          }]
+        }]
+      }
+    },
+    methods: {
+      onClick(e) {
+        this.$tn.message.toast(`点击了${e.text}节点`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/vipPage/components/waterfall/waterfall.vue b/vipPage/components/waterfall/waterfall.vue
new file mode 100644
index 0000000..36ba7b5
--- /dev/null
+++ b/vipPage/components/waterfall/waterfall.vue
@@ -0,0 +1,286 @@
+<template>
+  <view class="vip-component-waterfall">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>瀑布流</tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <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>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        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: {
+      // 获取随机数据
+      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']
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-component-waterfall {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  
+  .product__item {
+    background-color: #FFFFFF;
+    border-radius: 10rpx;
+    overflow: hidden;
+    margin: 0 10rpx;
+    margin-bottom: 20rpx;
+    
+    .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-left: 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 */
+    }
+  }
+</style>
diff --git a/vipPage/home/card/card.vue b/vipPage/home/card/card.vue
new file mode 100644
index 0000000..a33e6fa
--- /dev/null
+++ b/vipPage/home/card/card.vue
@@ -0,0 +1,275 @@
+<template>
+  <view class="template-card 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <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/blogger_beibei.jpg')">
+            <view class="logo-image">
+            </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>
+    </tn-nav-bar>
+
+    <!-- 内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+
+      <!-- 广告 -->
+      <view class="swiper tn-padding" :style="{height: swiperContainerHeight + 'px'}">
+        <tn-stack-swiper :list="list" direction="vertical" height="100%" :switchRate="10" :scaleRate="0.05" :translateRate="8"></tn-stack-swiper>
+      </view>
+
+    </view>
+
+
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-home.png'></image>
+        </view>
+        <view class="tn-color-black">门店</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-watercup tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-buy.png'></image>
+        </view>
+        <view class="tn-color-gray">点餐</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-shop tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-shop.png'></image>
+        </view>
+        <view class="tn-color-gray">商城</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-ticket tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-list.png'></image>
+        </view>
+        <view class="tn-color-gray">订单</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-my.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+
+  </view>
+</template>
+
+<script>
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'VipTemplateCard',
+    components: {
+      NavIndexButton
+    },
+    data() {
+      return {
+        // swiper容器高度
+        swiperContainerHeight: 0,
+        list: [{
+            image: 'https://resource.tuniaokj.com/images/bless/bless-1.jpg'
+          },
+          {
+            image: 'https://resource.tuniaokj.com/images/bless/bless-2.jpg'
+          },
+          {
+            image: 'https://resource.tuniaokj.com/images/bless/bless-3.jpg'
+          },
+          {
+            image: 'https://resource.tuniaokj.com/images/bless/bless-4.jpg'
+          }
+        ],
+        autoplay: false
+      }
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.initSwiperContainer()
+      })
+    },
+    onShow() {
+      this.autoplay = true
+    },
+    onHide() {
+      this.autoplay = false
+    },
+    methods: {
+      // 初始化轮播图容器
+      initSwiperContainer() {
+        // 获取底部tabbar信息
+        this._tGetRect('.tabbar').then((res) => {
+          if (!res.height) {
+            setTimeout(() => {
+              this.initSwiperContainer()
+            }, 10)
+            return
+          }
+          // 获取系统信息
+          const systemInfo = uni.getSystemInfoSync()
+          this.swiperContainerHeight = systemInfo.safeArea.height - res.height - 10
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+
+  .logo-image {
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    margin-top: -15rpx;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+  }
+
+  /* 自定义导航栏内容 end */
+  
+  /* 轮播图 start */
+  .swiper {
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+  /* 轮播图 end */
+
+  /* 间隔线 start*/
+  .tn-strip-bottom {
+    width: 100%;
+    border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+
+  /* 间隔线 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;
+  }
+
+  .tabbar .action .bar-icon {
+    width: 100rpx;
+    position: relative;
+    display: block;
+    height: auto;
+    margin: 0 auto 10rpx;
+    text-align: center;
+    font-size: 42rpx;
+  }
+
+  .tabbar .action .bar-icon image {
+    width: 50rpx;
+    height: 50rpx;
+    display: inline-block;
+  }
+</style>
diff --git a/vipPage/home/cool/cool.vue b/vipPage/home/cool/cool.vue
new file mode 100644
index 0000000..18bce02
--- /dev/null
+++ b/vipPage/home/cool/cool.vue
@@ -0,0 +1,786 @@
+<template>
+  <view class="template-cool 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="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/index_bg/tuniao2.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="18000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper"  style="margin-top: -280rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
+        </view> -->
+        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </view> -->
+        
+        <view class="tnphone-white-min swiper-item  wow fadeInLeft2">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <!-- <view class="head">
+        			  <text>{{item.name}}</text>
+        		  </view> -->
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+        		  <!-- <view class="area-l">
+        			  <view class="">
+                  <text class="tn-icon-all"></text>
+                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
+        			  </view>
+        		  </view>
+        		  <view class="area-r">
+        			  <view class="">
+                  <text class="tn-icon-light"></text>
+                  <text class="tn-icon-time tn-padding-left-xs"></text>
+                </view>
+        		  </view> -->
+              <!-- <view class="talk"></view> -->
+              
+              <view class="image-banner">
+                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"  style="margin-top: -80rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </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> -->
+    
+    <!-- 方式4 start-->
+    <view class="tn-flex">
+      <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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">活动预约</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius">
+        <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-text-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">博主主页</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius">
+        <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-honor-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">图鸟业务</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius">
+        <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-team-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">简历王者</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式4 end-->
+    
+    <view class="tn-margin-top-lg">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-15">
+          <text class="tn-icon-star tn-padding-right-sm"></text>
+          群 / 友 / 作 / 品
+          <text class="tn-icon-star tn-padding-left-sm"></text>
+        </view>
+      </view>
+    </view>
+    
+    <view class='nav-list tn-margin-bottom tn-margin-top'>
+      
+      <block v-for="(item, index) in navList" :key="index">
+        <view class="nav-list-item tn-shadow-blur tn-cool-bg-image" :class="['tn-cool-bg-color-' + item.color]">
+          <view class="nav-link">
+            <view class='title'>{{ item.title }}</view>
+          </view>
+          <view class="icon">
+            <view :class="['tn-icon-' + item.icon]"></view>
+          </view>
+        </view>
+      </block>
+      
+    </view>
+    
+    <view class="">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-15">
+          <text class="tn-icon-star tn-padding-right-sm"></text>
+          友 / 情 / 链 / 接
+          <text class="tn-icon-star tn-padding-left-sm"></text>
+        </view>
+      </view>
+    </view>
+    
+    <view class='nav-list tn-margin-bottom tn-margin-top'>
+      
+      <block v-for="(item, index) in navList2" :key="index">
+        <view class="nav-list-item tn-shadow-blur tn-cool-bg-image" :class="['tn-cool-bg-color-' + item.color]">
+          <view class="nav-link">
+            <view class='title'>{{ item.title }}</view>
+          </view>
+          <view class="icon">
+            <view :class="['tn-icon-' + item.icon]"></view>
+          </view>
+        </view>
+      </block>
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      
+      
+      <view class="action">
+        <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_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </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">
+        <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 tn-cool-bg-color-7">
+                <!-- <view class="tn-icon-logo-tuniao"></view> -->
+                <view class="bar-circle">
+                  <image class="" src='https://resource.tuniaokj.com/images/logo/logo.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">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">资讯</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateCool',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro2.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro4.jpg',
+        },{
+          id: 4,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro5.jpg',
+        },{
+          id: 5,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro6.jpg',
+        }],
+        
+        navList: [
+          {
+            icon: 'menu-more',
+            title: '税费计算器',
+            color: '1'
+          },
+          {
+            icon: 'menu-circle',
+            title: '夜路行者',
+            color: '5'
+          },
+          {
+            icon: 'gloves',
+            title: '全能时钟',
+            color: '2'
+          },
+          {
+            icon: 'topics',
+            title: '轻小轻',
+            color: '6'
+          },
+          {
+            icon: 'circle-fill',
+            title: '7he·kevin',
+            color: '3'
+          },
+          {
+            icon: 'tag',
+            title: 'DataFuture',
+            color: '7'
+          },
+          {
+            icon: 'flower',
+            title: '全能恋人',
+            color: '4'
+          },
+          {
+            icon: 'copy-fill',
+            title: '全能圆周率',
+            color: '8'
+          }
+        ],
+        navList2: [
+          {
+            icon: 'menu-circle',
+            title: '西科小确幸',
+            color: '5'
+          },
+          {
+            icon: 'gloves',
+            title: '峡谷飞机大战',
+            color: '2'
+          },
+          {
+            icon: 'topics',
+            title: '签云全景',
+            color: '6'
+          },
+          {
+            icon: 'circle-fill',
+            title: 'OA轻办公',
+            color: '3'
+          },
+          {
+            icon: 'tag',
+            title: '啊叭叭叭',
+            color: '7'
+          },
+          {
+            icon: 'square',
+            title: '博物馆',
+            color: '4'
+          },
+          {
+            icon: 'copy-fill',
+            title: '全能文案',
+            color: '8'
+          },
+          {
+            icon: 'menu-more',
+            title: '吱富宝',
+            color: '1'
+          }
+        ],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+/* .tnphone-white-min 细边框*/
+  .tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
+  .tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
+  .tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
+  .tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
+  .tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+
+  
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 830rpx !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 260rpx !important;
+    // left: 170rpx;
+    // width: 380rpx !important;
+    // left: 185rpx;
+    box-sizing: border-box;
+    padding: 0rpx 15rpx 90rpx 15rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    display: block;
+    transform: scale(0.45);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: scale(0.65);
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 770rpx;
+    // border: 1rpx solid red;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  
+  /* 图标容器4 start */
+    .tn-cool-color-icon4{
+      // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
+      // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-fill-color: transparent;
+    }
+    .icon4 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 110rpx;
+          height: 110rpx;
+          font-size: 55rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
+            0px -8px 40px rgba(255, 255, 255, 1),
+            inset 0px -10px 10px rgba(70,23,129, 0.05),
+            inset 0px 10px 20px rgba(255, 255, 255, 1);
+        }
+      }
+    }
+    
+    /* 标题 start */
+    .nav_title {
+      -webkit-background-clip: text;
+      color: transparent;
+      
+      &--wrap {
+        position: relative;
+        display: flex;
+        height: 120rpx;
+        font-size: 42rpx;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+        background-size: cover;
+      }
+    }
+    /* 标题 end */
+    
+    /* 组件导航列表 start*/
+    .nav-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0rpx 12rpx 0rpx;
+      justify-content: space-between;
+      
+      /* 列表元素 start */
+      .nav-list-item {
+        padding: 95rpx 30rpx 5rpx 30rpx;
+        border-radius: 12rpx;
+        width: 45%;
+        margin: 0 18rpx 40rpx;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+        z-index: 99;
+        
+        /* 元素标题 start */
+        .nav-link {
+          font-size: 32rpx;
+          text-transform: capitalize;
+          padding: 0 0 10rpx 0;
+          position: relative;
+          
+          .title {
+            color: #FFFFFF;
+            margin-top: 30rpx;
+            text-align: center;
+          }
+        }
+        /* 元素标题 end */
+        
+        /* 元素图标 start */
+        .icon {
+          font-variant: small-caps;
+          position: absolute;
+          top: 20rpx;
+          right: 50rpx;
+          left: 37%;
+          width: 90rpx;
+          height: 90rpx;
+          line-height: 90rpx;
+          margin: 0;
+          padding: 0;
+          display: inline-flex;
+          text-align: center;
+          justify-content: center;
+          vertical-align: middle;
+          font-size: 50rpx;
+          color: #FFFFFF;
+          white-space: nowrap;
+          opacity: 0.9;
+          background-color: rgba(0, 0, 0, 0.05);
+          background-size: cover;
+          background-position: 50%;
+          border-radius: 5000rpx;
+        }
+        /* 元素图标 end */
+      }
+      /* 列表元素 end */
+    }
+    /* 组件导航列表 end*/
+    
+    /* 底部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/arc2.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>
diff --git a/vipPage/home/food/food.vue b/vipPage/home/food/food.vue
new file mode 100644
index 0000000..9f7b735
--- /dev/null
+++ b/vipPage/home/food/food.vue
@@ -0,0 +1,339 @@
+<template>
+  <view class="template-food 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 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">
+          <view class="tn-icon-search-list tn-text-bold" style="font-size: 50rpx;"></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">
+            <text class="tn-text-bold tn-text-xxl">吃货北北</text>
+          </view>
+        </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">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          已打卡（5）
+        </view>
+        <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-write"></text>
+        </view>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper tn-margin-top-sm" :circular="true"
+      :autoplay="true" duration="500" interval="5000" previous-margin="75rpx" next-margin="75rpx" @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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
+        </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>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/food-home.png'></image>
+        </view>
+        <view class="tn-color-black">小吃</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-watercup tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/food-buy.png'></image>
+        </view>
+        <view class="tn-color-gray">奶茶</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-ticket tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/food-list.png'></image>
+        </view>
+        <view class="tn-color-gray">面包</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/food-my.png'></image>
+        </view>
+        <view class="tn-color-gray">雪糕</view>
+      </view>
+    </view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateFood',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '麻辣香锅',
+          text: '广东人的微微辣',
+          url: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          name: '太二酸菜鱼',
+          text: '当然是酸菜鱼+酸菜罐子啦',
+          url: 'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          name: '蛙小侠',
+          text: '打卡蒜香牛蛙',
+          url: 'https://resource.tuniaokj.com/images/swiper/swiper1.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '九毛九',
+          text: '打卡大酱骨',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          name: '牛小灶',
+          text: '冬天必打卡',
+          url: 'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
+        }],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 70%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 15rpx 0;
+        margin: 0 30rpx;
+        border-radius: 10rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  /* 轮播 start*/
+  .card-swiper {
+    height: 60vh !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 600rpx !important;
+    // left: 75rpx;
+    box-sizing: border-box;
+    padding: 0rpx 20rpx 0rpx 20rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 45vh;
+    border-radius: 20rpx 20rpx 0 0;
+    transform: scale(1);
+    transition: all 0.3s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: scale(1);
+    transition: all 0.3s ease-in 0s;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text {
+    padding: 20rpx;
+    width: 100%;
+    display: block;
+    height: 140rpx;
+    border-radius: 0 0 20rpx 20rpx;
+    transform: none;
+    transition: all 0.4s ease 0s;
+    overflow: hidden;
+    color: #000000;
+    background-color: rgba(255,255,255,1);
+    box-shadow: 0rpx 30rpx 30rpx 0rpx rgba(0,0,245, 0.08);
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    transition: all 0.4s ease 0s;
+    text-shadow: 0rpx 10rpx 20rpx rgba(0,0,0,0.1);
+  }
+  
+  .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{
+    opacity: 0.8;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 50%;
+    margin: 0 8rpx !important;
+    position: relative;
+    background-color: #3165CC;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 35rpx;
+    height: 35rpx;
+    border: 2rpx solid #3165CC;
+    background-color: #FFFFFF;
+  }
+  
+  
+  /* 底部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;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+</style>
diff --git a/vipPage/home/gravity/page1/page1.vue b/vipPage/home/gravity/page1/page1.vue
new file mode 100644
index 0000000..3d14bf6
--- /dev/null
+++ b/vipPage/home/gravity/page1/page1.vue
@@ -0,0 +1,208 @@
+<template>
+  <view class="vip-template-gyroscope-page">
+    
+    <view style="color: #FFFFFF;position: absolute;top: 0;left: 0;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view>x轴数据:{{acceleronmeterX}}</view>
+      <view>y轴数据:{{acceleronmeterY}}</view>
+      <view>z轴数据:{{acceleronmeterZ}}</view>
+    </view>
+    
+    <view class="background">
+      <image src="https://resource.tuniaokj.com/images/gravity/1/5.png"></image>
+    </view>
+    
+    <view class="item__1 item__animation" :style="{transform: `translateX(${translateInfo[0].x}px)`}">
+      <image src="https://resource.tuniaokj.com/images/gravity/1/1.png" mode="widthFix"></image>
+    </view>
+    
+    <view class="item__2 item__animation" :style="{transform: `translateX(${translateInfo[1].x}px)`}" @longtap.stop="toggleDirection">
+      <image src="https://resource.tuniaokj.com/images/gravity/1/2.png" mode="widthFix"></image>
+    </view>
+    
+    <view class="item__3 item__animation" :style="{transform: `translateX(${translateInfo[2].x}px)`}">
+      <image src="https://resource.tuniaokj.com/images/gravity/1/3.png" mode="widthFix"></image>
+    </view>
+    
+    <view class="item__4 item__animation" :style="{transform: `translateX(${translateInfo[3].x}px)`}">
+      <image src="https://resource.tuniaokj.com/images/gravity/1/4.png" mode="widthFix"></image>
+    </view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  
+  export default {
+    name: 'GravityPage1',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data() {
+      return {
+        acceleronmeterX: 0,
+        acceleronmeterY: 0,
+        acceleronmeterZ: 0,
+        translateInfo: [
+          {max: 60, min: -60, speed: 0.8, x: 0},
+          {max: 45, min: -45, speed: 0.6, x: 0},
+          {max: 33.75, min: -33.75, speed: 0.45, x: 0},
+          {max: 25.31, min: -25.31, speed: 0.3375, x: 0}
+        ],
+        positiveDirection: true
+      }
+    },
+    onLoad() {
+      this.initAccelerometer()
+    },
+    onUnload() {
+      this.stopAccelerometer()
+    },
+    methods: {
+      // 初始化加速度并设置监听函数
+      initAccelerometer() {
+        uni.onAccelerometerChange(this.listenerAccelerometerData)
+      },
+      // 停止监听加速度数据
+      stopAccelerometer() {
+        uni.stopAccelerometer()
+      },
+      listenerAccelerometerData(res) {
+        // console.log(res.x, res.y, res.z);
+        this.acceleronmeterX = res.x.toFixed(2)
+        this.acceleronmeterY = res.y.toFixed(2)
+        this.acceleronmeterZ = res.z.toFixed(2)
+        
+        // let acceleronmeterX = Math.abs(this.acceleronmeterX) > 0.05 ? this.acceleronmeterX < 0 ? -0.05 : 0.05 : this.acceleronmeterX
+        
+        // if (acceleronmeterX < 0) {
+        //   for (let index in this.translateInfo) {
+        //     let item = this.translateInfo[index]
+        //     const x = item.speed * Math.abs(acceleronmeterX)
+        //     item.x = item.x + x > item.max ? item.max : item.x + x
+        //     this.$set(this.translateInfo, index, item)
+        //   }
+        // } else if (acceleronmeterX > 0) {
+        //   for (let index in this.translateInfo) {
+        //     let item = this.translateInfo[index]
+        //     const x = item.speed * acceleronmeterX
+        //     item.x = item.x - x < item.min ? item.min : item.x - x
+        //     this.$set(this.translateInfo, index, item)
+        //   }
+        // }
+        
+        if (this.positiveDirection) {
+          if (this.acceleronmeterX > 0) {
+            // 手机向左倾斜，图像向右移动
+            this.translateRightMove()
+          } else if (this.acceleronmeterX < 0) {
+            // 手机向右倾斜，图像向左移动
+            this.translateLeftMove()
+          }
+        } else {
+          if (this.acceleronmeterX < 0) {
+            // 手机向左倾斜，图像向右移动
+            this.translateRightMove()
+          } else if (this.acceleronmeterX > 0) {
+            // 手机向右倾斜，图像向左移动
+            this.translateLeftMove()
+          }
+        }
+      },
+      // 长按切换移动方向
+      toggleDirection() {
+        this.positiveDirection = !this.positiveDirection
+      },
+      // 向左移动
+      translateLeftMove() {
+        for (let index in this.translateInfo) {
+          let item = this.translateInfo[index]
+          // 计算当前图片位置和允许移动的边距距离
+          const distance = Math.abs(item.min - item.x)
+          const x = item.speed * (distance / 2)
+          item.x = item.x - x < item.min ? item.min : item.x - x
+          this.$set(this.translateInfo, index, item)
+        }
+      },
+      // 向右移动
+      translateRightMove() {
+        for (let index in this.translateInfo) {
+          let item = this.translateInfo[index]
+          // 计算当前图片位置和允许移动的边距距离
+          const distance = Math.abs(item.max - item.x)
+          const x = item.speed * (distance / 2)
+          item.x = item.x + x > item.max ? item.max : item.x + x
+          this.$set(this.translateInfo, index, item)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-template-gyroscope-page {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+  }
+  
+  .background {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+   width: 100%;
+   height: 100%;
+    z-index: -1;
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .item {
+    &__1 {
+      position: absolute;
+      top: 210rpx;
+      left: 84rpx;
+      width: 100%;
+      // height: 100%;
+      z-index: 5;
+    }
+    
+    &__2 {
+      position: absolute;
+      top: 885rpx;
+      left: 84rpx;
+      width: 100%;
+      // height: 100%;
+      z-index: 4;
+    }
+    
+    &__3 {
+      position: absolute;
+      top: 138rpx;
+      left: 88rpx;
+      width: 100%;
+      // height: 100%;
+      z-index: 3;
+    }
+    
+    &__4 {
+      position: absolute;
+      top: 390rpx;
+      left: 84rpx;
+      width: 100%;
+      // height: 100%;
+      z-index: 2;
+    }
+    
+    &__animation {
+      transition: transform 1.6s ease;
+    }
+  }
+</style>
diff --git a/vipPage/home/health/health.vue b/vipPage/home/health/health.vue
new file mode 100644
index 0000000..e03a999
--- /dev/null
+++ b/vipPage/home/health/health.vue
@@ -0,0 +1,1264 @@
+<template>
+  <view class="template-health 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 fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
+      <view id="navbar" 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/logo/logo2.png')">
+            <view class="logo-image">
+            </view>
+          </view> 
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" :style="[navBarStyle]">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230,230,230,0.3);">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">搜索 图鸟UI</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="28000" @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>
+    
+    <!-- 方式15 start-->
+    <view class="tn-flex tn-margin-xs tn-padding-top-sm tn-color-white icon-function" id="page_tips">
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-scan"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">扫一扫</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur ">
+            <view class="tn-icon-qr-code"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">乘车码</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-identity"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">亮行程</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-honor"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">健康码</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式15 end-->
+    
+    <!-- 更多信息-->
+    <view class="health-shadow tn-margin tn-color-black tn-bg-white" style="position: relative;z-index: 1;padding: 20rpx 6rpx;">
+      <!-- 方式9 start-->
+      <view class="tn-flex">
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+              <view class="tn-icon-chemistry"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">核酸结果</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-map"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">核酸地点</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
+              <view class="tn-icon-safe"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">防疫专区</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-footprint"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">日常行程</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
+              <view class="tn-icon-gift"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">粤享福利</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式9 end-->
+      <view class="tn-flex tn-padding-top-sm">
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-edit-form"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">信息登记</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+              <view class="tn-icon-praise"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">健康食谱</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-medical"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">医疗专区</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
+              <view class="tn-icon-caring"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">工会福利</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
+              <view class="tn-icon-menu-circle"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">更多功能</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式9 end-->  
+    </view>
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs" style="margin-top: -30rpx;">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-tnui.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    
+<!--    <view class="tn-margin-top">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-5">
+          <text class="tn-icon-copy tn-padding-right-sm"></text>
+          推 / 荐 / 博 / 主
+          <text class="tn-icon-copy tn-padding-left-sm"></text>
+        </view>
+      </view>
+    </view> -->
+    
+    <view class="tn-flex tn-flex-row-between">
+      <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+        推荐博主
+      </view>
+      <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+        <text class="tn-padding-xs">全部</text>
+        <text class="tn-icon-topics"></text>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper2 tn-margin-top-sm" :circular="true"
+      :autoplay="false" :duration="500" @change="resume"> 
+      <swiper-item v-for="(item,index) in resumeList" :key="index" :class="cardCur2==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+        </view> -->
+        <view class="swiper-item" :style="'background-image:url('+ item.url + ');width: 660rpx;height: 100%;background-size: cover;border-radius: 15rpx;'">
+        </view>
+        <view class="swiper-item2 image-banner tn-shadow-blur" :style="'background-image:url('+ item.avatar +');width: 120rpx;height: 120rpx;background-size: cover;'">
+        </view>
+        <view class="swiper-item-text tn-text-shadow-indigo">
+          <view class="tn-text-bold tn-color-blue--dark" style="font-size: 45rpx;">{{item.title}}</view>
+          <view class="tn-color-blue--dark tn-padding-top-sm">{{item.name}}</view>
+          <view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx;">
+            <view class="tn-flex-1 tn-padding-sm tn-margin-right">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-blue">{{item.hot}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-fire"></text>
+                  <text class="tn-padding-left-xs">人气</text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-flex-1 tn-padding-sm tn-margin-left tn-margin-right">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-orange">{{item.share}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-share-circle"></text>
+                  <text class="tn-padding-left-xs">分享</text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-flex-1 tn-padding-sm tn-margin-left">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-red">{{item.love}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-like"></text>
+                  <text class="tn-padding-left-xs">爱心</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+<!--    <view class="indication">
+        <block v-for="(item,index) in resumeList" :key="index">
+            <view class="spot" :class="cardCur==index?'active':''"></view>
+        </block>
+    </view> -->
+    
+    
+    <view class="">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          热门项目
+        </view>
+        <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view>
+      </view>
+      
+      <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
+        <view class="tn-flex-2">
+          
+          <view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/card.jpg')">
+            <view class="image-tuniao1">
+            </view>
+          </view> 
+          
+        </view>
+        <view class="tn-flex-1">
+          <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </view> 
+          <view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </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-xxl">
+          业务范围
+        </view>
+        <!-- <view class="justify-content-item tn-margin tn-text-xxl tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view> -->
+      </view>
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view> -->
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
+                <view class="tn-info__item__left__content--data tn-padding-top-xs">
+                {{ item.value }}
+                <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+    </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_tnnew.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_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: 'TemplateHealth',
+    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/adno3.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟南南',
+          name: '欢迎加入东东们',
+          text: '如果你也有不错的作品',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno4.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '一起玩转scss',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno5.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟北北',
+          name: '微信号 tnkewo',
+          text: '商业合作请联系作者',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno2.jpg',
+        }],
+        cardCur2: 0,
+        resumeList: [{
+          id: 0,
+          type: 'image',
+          title: '蔡东东',
+          name: '产品总监',
+          hot: '1.29W',
+          share: '216',
+          love: '962',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟北北',
+          name: 'UI设计师',
+          hot: '964',
+          share: '94',
+          love: '186',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '高级前端',
+          hot: '3.26K',
+          share: '146',
+          love: '379',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟南南',
+          name: '项目经理',
+          hot: '6.32K',
+          share: '133',
+          love: '432',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '纯打杂',
+          hot: '8.65K',
+          share: '321',
+          love: '886',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }],
+
+        tuniaoData: [
+          {
+            title: 'UI设计',
+            icon: 'image-text-fill',
+            color: 'red',
+            value: '前往咨询'
+          },
+          {
+            title: '小程序',
+            icon: 'data-fill',
+            color: 'orange',
+            value: '前往咨询'
+          },
+          {
+            title: '网站开发',
+            icon: 'statistics-fill',
+            color: 'purple',
+            value: '前往咨询'
+          },
+          {
+            title: '其他业务',
+            icon: 'bankcard-fill',
+            color: 'blue',
+            value: '前往咨询'
+          }
+        ],
+        navBarRectInfo: {},
+        navBarChangebaseLineHeight: 0,
+        navBarStyle: {
+          color:'#FFFFFF',
+          opacity: 1,
+          display: 'flex'
+        },
+        navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
+        activeBgAnimation: {}
+      }
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.initNavBarRectInfo()
+      })
+    },
+    onPageScroll() {
+      this.updateNavBarRectInfo()
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // resume
+      resume(e) {
+        this.cardCur2 = e.detail.current
+      },
+      // 初始化导航栏信息
+      async initNavBarRectInfo() {
+        const navBarRectInfo = await this._tGetRect('#navbar')
+        const pageTipsRectInfo = await this._tGetRect('#page_tips')
+        // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
+        if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
+          setTimeout(() => {
+            this.initNavBarRectInfo()
+          }, 10)
+          return
+        }
+        this.navBarRectInfo = {
+          top: navBarRectInfo.top
+        }
+        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
+      },
+      // 更新导航栏信息
+      updateNavBarRectInfo() {
+        this._tGetRect('#page_tips').then((res) => {
+          const top = res?.top || 0
+          if (!top) {
+            return
+          }
+          const differHeight = top - this.navBarRectInfo.top
+          const opacity = differHeight / this.navBarChangebaseLineHeight
+          if (opacity < 0) {
+            // this.navBarStyle.opacity = 1
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`
+          } else {
+            // this.navBarStyle.opacity = 1 - opacity
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(255, 255, 255, 1)'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`
+          }
+          
+          // console.log(top, differHeight, opacity);
+        })
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-health {
+    // background-color: #FBFBFB;
+  }
+  
+  .icon-function {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 5rpx;
+      margin-top: -420rpx;
+  }
+
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 600rpx !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;
+    opacity: 0;
+  }
+  
+  .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 */
+  .card-swiper2 {
+    height: 420rpx !important;
+    overflow: hidden;
+  }
+    
+  .card-swiper2 swiper-item {
+    width: 680rpx !important;
+    left: 30rpx;
+    box-sizing: border-box;
+    overflow: initial;
+    padding: 0 0rpx 40rpx 0;
+  }
+    
+  .card-swiper2 swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    // transform: scale(1);
+    // transition: transform 0.2s ease-out 0s;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item {
+    // transform: scale(1);
+  }
+  
+  .card-swiper2 swiper-item .swiper-item2 {
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 50%;
+    transform: translate(480rpx, -300rpx) scale(0.9);
+    transition: transform 0.3s ease-out 0s;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item2 {
+    transform: translate(510rpx, -320rpx) scale(0.9);
+  }
+
+  .card-swiper2 swiper-item .swiper-item-text {
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 10rpx;
+    transform: translate(20rpx, -420rpx) scale(0.8);
+    transition: transform 0.6s ease-out 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item-text {
+    transform: translate(20rpx, -450rpx) scale(0.9);
+  }
+  
+
+  
+  /* 底部tabbar假阴影 start*/
+  .bg-tabbar-shadow{
+    background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
+    position: fixed;
+    bottom: 0;
+    height: 450rpx;
+    width: 100vw;
+    z-index: -1;
+  }
+  
+  /* 图标容器15 start */
+ .icon15 {
+   &__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: 0rpx;
+       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%;
+       }
+     }
+   }
+ }
+  
+    
+  /* 图标容器9 start */
+    .icon9 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          font-size: 50rpx;
+          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_bg6.png);
+          }
+        }
+      }
+    }
+  
+  
+  /* 阴影 start*/
+  .health-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  /* 自定义导航栏内容 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: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+
+  /* 热门图片 start*/
+  .image-tuniao1{
+    padding: 164rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao2{
+    padding: 75rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao3{
+    padding: 90rpx 0rpx;
+    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;
+  }
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  
+  /* 标题 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/title00.png);
+      background-size: cover;
+    }
+  }
+  /* 标题 end */
+  
+  /* 业务展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      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/2.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          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_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 25rpx;          
+          
+          &--data {
+            color: rgba(255,255,255,0.5);
+            margin-top: 5rpx;
+            // font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0rpx;
+          top: 50rpx;
+          font-size: 100rpx;
+          width: 108rpx;
+          height: 108rpx;
+          text-align: center;
+          line-height: 60rpx;
+          opacity: 0.15;  
+        }
+      }
+    }
+  }
+  /* 业务展示 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>
diff --git a/vipPage/home/link/link.vue b/vipPage/home/link/link.vue
new file mode 100644
index 0000000..20725fc
--- /dev/null
+++ b/vipPage/home/link/link.vue
@@ -0,0 +1,837 @@
+<template>
+  <view class="template-link 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="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/index_bg/mbe.png' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="18000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper"  style="margin-top: -280rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
+        </view> -->
+        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </view> -->
+        
+        <view class="tnphone-white-min swiper-item  wow fadeInLeft2">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <!-- <view class="head">
+        			  <text>{{item.name}}</text>
+        		  </view> -->
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+        		  <!-- <view class="area-l">
+        			  <view class="">
+                  <text class="tn-icon-all"></text>
+                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
+        			  </view>
+        		  </view>
+        		  <view class="area-r">
+        			  <view class="">
+                  <text class="tn-icon-light"></text>
+                  <text class="tn-icon-time tn-padding-left-xs"></text>
+                </view>
+        		  </view> -->
+              <!-- <view class="talk"></view> -->
+              
+              <view class="image-banner">
+                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"  style="margin-top: -80rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </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> -->
+    
+    <!-- 方式4 start-->
+    <view class="tn-flex">
+      <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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">活动预约</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius">
+        <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-text-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">博主主页</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius">
+        <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-honor-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">图鸟业务</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius">
+        <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-team-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">简历王者</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式4 end-->
+    
+    <view class="tn-margin-top-lg">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-15">
+          <text class="tn-icon-star tn-padding-right-sm"></text>
+          群 / 友 / 作 / 品
+          <text class="tn-icon-star tn-padding-left-sm"></text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="tn-flex" style="padding: 12rpx;margin-top: 30rpx;">
+      <view class="tn-flex-1">
+        
+        <view class='nav-list'>
+          <block v-for="(item, index) in linkList1" :key="index">
+            <view class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" :class="[getRandomCoolBg(index)]">
+              <view class="nav-link">
+                <view class='title tn-text-bold'>{{ item.nametools }}</view>
+                <view class='title' style="opacity: 0;">{{ item.name }}</view>
+              </view>
+              <view class="icon">
+                <view :class="['tn-icon-' + item.icon]"></view>
+              </view>
+            </view>
+          </block>
+        </view>
+    
+      </view>
+      
+      <view class="tn-flex-1">
+        
+        <view class='nav-list'>
+          <block v-for="(item, index) in linkList2" :key="index">
+            <view class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" :class="[getRandomCoolBg(index)]">
+              <view class="nav-link">
+                <view class='title tn-text-bold'>{{ item.nametools }}</view>
+                <view class='title' style="opacity: 0;">{{ item.name }}</view>
+              </view>
+              <view class="icon">
+                <view :class="['tn-icon-' + item.icon]"></view>
+              </view>
+            </view>
+          </block>
+        </view>
+    
+      </view>
+    </view>
+    
+
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      
+      
+      <view class="action">
+        <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_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </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">
+        <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 tn-cool-bg-color-7">
+                <!-- <view class="tn-icon-logo-tuniao"></view> -->
+                <view class="bar-circle">
+                  <image class="" src='https://resource.tuniaokj.com/images/logo/logo.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">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">资讯</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateLink',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro2.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro4.jpg',
+        },{
+          id: 4,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro5.jpg',
+        },{
+          id: 5,
+          type: 'image',
+          url: 'https://resource.tuniaokj.com/images/index_bg/pro6.jpg',
+        }],
+        
+        linkList1: [{
+            id: 0,
+            icon: 'circle',
+            appid: 'wxec92c15d9e9b6fbe',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '可以提供生日在圆周率的位数',
+            nametools: '全能圆周率'
+          }, {
+            id: 1,
+            icon: 'airplane',
+            appid: 'wxaa8473e0378e72be',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '传承经典',
+            nametools: '峡谷飞机大战'
+          },{
+            id: 2,
+            icon: 'computer',
+            appid: 'wxd76a25d4a4d04162',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '让工作更加井然有序',
+            nametools: 'OA轻办公'
+          }, {
+            id: 3,
+            icon: 'star',
+            appid: 'wx46739fb0aae487e0',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '与可爱的文物一起互动吧',
+            nametools: '博物馆'
+          }, {
+            id: 4,
+            icon: 'money',
+            appid: 'wxc9f4dd46f1c7c080',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '人多的地方谨慎使用',
+            nametools: '吱富宝'
+          } ,{
+            id: 5,
+            icon: 'moon',
+            appid: 'wxf2bc749d99d35ea9',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '',
+            nametools: '夜路使者'
+          }, {
+            id: 6,
+            icon: 'flower',
+            appid: 'wx916556bf29fb7c6a',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '烦心事情的终点',
+            nametools: '轻小轻'
+          },  {
+            id: 7,
+            icon: 'data',
+            appid: 'wx12b3c68c969e9f25',
+            url: 'pages/index/index',
+            hezuo: '可售卖',
+            name: '你的私人健康管家数据看板',
+            nametools: 'DataFuture'
+          }
+        ],
+        linkList2: [{
+          id: 0,
+          icon: 'count',
+          appid: 'wxf030f3e0d92f7967',
+          url: 'packages/root/index/index',
+          hezuo: '可合作',
+          name: '税费交多少',
+          nametools: '税费计算器'
+        }, {
+          id: 1,
+          icon: 'clock',
+          appid: 'wxcf2fe6ac8f7e3970',
+          url: 'pages/index/index',
+          hezuo: '可售卖',
+          name: '',
+          nametools: '全能时钟'
+        }, {
+          id: 2,
+          icon: 'discover',
+          appid: 'wx201efd3f86fa2ba7',
+          url: 'pages/index/tabbar',
+          hezuo: '可合作',
+          name: '学习IT开发技能知识',
+          nametools: '7he·Kevin'
+        }, {
+          id: 3,
+          icon: 'light',
+          appid: 'wx7170364858bba693',
+          url: 'pages/index/index',
+          hezuo: '可售卖',
+          name: '震动按摩身体',
+          nametools: '全能恋人'
+        }, {
+          id: 4,
+          icon: 'video',
+          appid: 'wx7de7a77441d5266c',
+          url: 'pages/index/index',
+          hezuo: '可合作',
+          name: '短视频去水印',
+          nametools: '西科小确幸'
+        }, {
+          id: 5,
+          icon: 'discover-planet',
+          appid: 'wx9f77d65eb4eff65b',
+          url: 'pages/index/index',
+          hezuo: '可合作',
+          name: '带上全景去旅行',
+          nametools: '芊云全景'
+        },{
+          id: 6,
+          icon: 'image',
+          appid: 'wxa67567d479e76c0a',
+          url: 'pages/index/index',
+          hezuo: '可售卖',
+          name: '以图搜图',
+          nametools: '啊叭叭叭'
+        }, {
+          id: 7,
+          icon: 'edit-form',
+          appid: 'wx46b5829489a33bb5',
+          url: 'pages/index/index',
+          hezuo: '可售卖',
+          name: '朋友圈文案大师',
+          nametools: '全能文案'
+        }     
+        ],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+/* .tnphone-white-min 细边框*/
+  .tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
+  .tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
+  .tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
+  .tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
+  .tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+
+  
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 830rpx !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 260rpx !important;
+    // left: 170rpx;
+    // width: 380rpx !important;
+    // left: 185rpx;
+    box-sizing: border-box;
+    padding: 0rpx 15rpx 90rpx 15rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    display: block;
+    transform: scale(0.45);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: scale(0.65);
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 770rpx;
+    // border: 1rpx solid red;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  
+  /* 图标容器4 start */
+    .tn-cool-color-icon4{
+      // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
+      // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-fill-color: transparent;
+    }
+    .icon4 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 110rpx;
+          height: 110rpx;
+          font-size: 55rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
+            0px -8px 40px rgba(255, 255, 255, 1),
+            inset 0px -10px 10px rgba(70,23,129, 0.05),
+            inset 0px 10px 20px rgba(255, 255, 255, 1);
+        }
+      }
+    }
+    
+    /* 标题 start */
+    .nav_title {
+      -webkit-background-clip: text;
+      color: transparent;
+      
+      &--wrap {
+        position: relative;
+        display: flex;
+        height: 120rpx;
+        font-size: 42rpx;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+        background-size: cover;
+      }
+    }
+    /* 标题 end */
+    
+    /* 组件导航列表 start*/
+    .nav-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0rpx 18rpx 0rpx;
+      justify-content: space-between;
+      
+      /* 列表元素 start */
+      .nav-list-item {
+        padding: 95rpx 30rpx 5rpx 30rpx;
+        border-radius: 12rpx;
+        width: 100%;
+        margin: 0 0 40rpx;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+        z-index: 99;
+        
+        /* 元素标题 start */
+        .nav-link {
+          margin: -80rpx 0 110rpx 0;
+          font-size: 32rpx;
+          text-transform: capitalize;
+          padding: 0 0 10rpx 0;
+          position: relative;
+          
+          .title {
+            color: #FFFFFF;
+            margin-top: 30rpx;
+          }
+        }
+        /* 元素标题 end */
+        
+        /* 元素图标 start */
+        .icon {
+          font-variant: small-caps;
+          position: absolute;
+          bottom: 20rpx;
+          right: 50rpx;
+          left: 5%;
+          width: 90rpx;
+          height: 90rpx;
+          line-height: 90rpx;
+          margin: 0;
+          padding: 0;
+          display: inline-flex;
+          text-align: center;
+          justify-content: center;
+          vertical-align: middle;
+          font-size: 50rpx;
+          color: #FFFFFF;
+          white-space: nowrap;
+          opacity: 0.9;
+          background-color: rgba(0, 0, 0, 0.05);
+          background-size: cover;
+          background-position: 50%;
+          border-radius: 5000rpx;
+        }
+        /* 元素图标 end */
+      }
+      /* 列表元素 end */
+    }
+    /* 组件导航列表 end*/
+    
+    /* 底部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/arc2.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>
diff --git a/vipPage/home/mimicry/mimicry.vue b/vipPage/home/mimicry/mimicry.vue
new file mode 100644
index 0000000..a17c696
--- /dev/null
+++ b/vipPage/home/mimicry/mimicry.vue
@@ -0,0 +1,484 @@
+<template>
+  <view class="template-mimicry">
+    <!-- 顶部自定义导航 -->
+    <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>
+        <view class="swiper-item2 image-banner">
+          <image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
+        </view>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
+          <view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
+        </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="keyboard-fixed">
+      <view class="keyboard-box">
+        <view class="keyboard">
+          <view class="key s2 esc">??</view>
+          <view class="key">1</view>
+          <view class="key">2</view>
+          <view class="key">3</view>
+          <view class="key">4</view>
+          <view class="key">5</view>
+          <view class="key">6</view>
+          <view class="key">7</view>
+          <view class="key">8</view>
+          <view class="key">9</view>
+          <view class="key">0</view>
+          <view class="key sub">-</view>
+          <view class="key add">=</view>
+          <view class="key s4 back">??</view>
+          <view class="key s3 tab">??</view>
+          <view class="key">Q</view>
+          <view class="key">W</view>
+          <view class="key">E</view>
+          <view class="key">R</view>
+          <view class="key">T</view>
+          <view class="key">Y</view>
+          <view class="key">U</view>
+          <view class="key">I</view>
+          <view class="key">O</view>
+          <view class="key">P</view>
+          <view class="key openbracket">[</view>
+          <view class="key closebracket">]</view>
+          <view class="key s3 pipe">\</view>
+          <view class="key s4 cap">??</view>
+          <view class="key">A</view>
+          <view class="key">S</view>
+          <view class="key">D</view>
+          <view class="key dotted">F</view>
+          <view class="key">G</view>
+          <view class="key">H</view>
+          <view class="key dotted">J</view>
+          <view class="key">K</view>
+          <view class="key">L</view>
+          <view class="key semi">;</view>
+          <view class="key comma">,</view>
+          <view class="key s4 enter">??</view>
+          <view class="key s5 shift">??</view>
+          <view class="key">Z</view>
+          <view class="key">X</view>
+          <view class="key">C</view>
+          <view class="key">V</view>
+          <view class="key">B</view>
+          <view class="key">N</view>
+          <view class="key">M</view>
+          <view class="key openangular">,</view>
+          <view class="key closeangular">.</view>
+          <view class="key slash">/</view>
+          <view class="key s5 shift up">??</view>
+          <view class="key s3 control">☕</view>
+          <view class="key s3 win">??</view>
+          <view class="key s3 alt">⭐️</view>
+          <view class="key s12 space"></view>
+          <view class="key s3 alt">⭐️</view>
+          <view class="key s2 fn left">??</view>
+          <view class="key s2 fn down">??‍??</view>
+          <view class="key s2 control right">☕</view>
+        </view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateMimicry',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '总有你想不到的创意',
+          text: '海量分享',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }, {
+          id: 1,
+          type: 'image',
+          name: '寻找一起成长的小伙伴',
+          text: '愉快玩耍',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
+        }, {
+          id: 2,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
+        }, {
+          id: 3,
+          type: 'image',
+          name: '商业合作请联系作者',
+          text: '免费开源',
+          url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d6.png'
+        }],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-mimicry{
+    background: #d8dee8;
+    height: 100vh;
+  }
+  
+  .keyboard-fixed{
+    position: fixed;
+    bottom: 0;
+
+  }
+  
+  .keyboard-box{
+     margin: 0 auto;
+     padding: 30rpx 0;
+      overflow: hidden;
+      display: grid;
+      place-items: center;
+      // background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
+  }
+  
+  .keyboard {
+    display: grid;
+    grid-template-columns: repeat(30, 2.3vw);
+    grid-template-rows: repeat(5, 3.25vh);
+    grid-gap: 0.95vw;
+    // background: #c2ccdb;
+    padding: 1.73vh 1.73vw;
+    // border-radius: 1.27vw;
+    // box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
+  }
+  .keyboard .key {
+    border-radius: 0.76vw;
+    grid-column: auto/span 2;
+    width: 100%;
+    height: 100%;
+    padding: 0.475vw;
+    font-size: 1.9vw;
+    display: grid;
+    align-items: center;
+    color: #000;
+    justify-content: center;
+    cursor: pointer;
+    background: #d8dee8;
+    box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
+    transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
+    user-select: none;
+  }
+  .keyboard .key:hover,
+  .keyboard .key.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f6f8fa, inset 0.32vw 0.32vw 0.63vw #c2ccdb;
+    color: #fff;
+    text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
+  }
+  .keyboard .key.dotted {
+    position: relative;
+  }
+  .keyboard .key.dotted::before {
+    content: '_';
+    font-weight: bold;
+    color: #b5c0d2;
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .keyboard .key.esc {
+    background: #ed4c67;
+    color: #fbdbe1;
+  }
+  .keyboard .key.esc:hover,
+  .keyboard .key.esc.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f38e9f, inset 0.32vw 0.32vw 0.63vw #c71432;
+    color: #fff;
+    text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
+  }
+  .keyboard .key.back {
+    background: #d63031;
+    color: #f7d6d6;
+  }
+  .keyboard .key.back:hover,
+  .keyboard .key.back.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #e57c7d, inset 0.32vw 0.32vw 0.63vw #991e1f;
+    color: #fff;
+    text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
+  }
+  .keyboard .key.shift {
+    background: #1e90ff;
+    color: #d2e9ff;
+  }
+  .keyboard .key.shift:hover,
+  .keyboard .key.shift.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #71b9ff, inset 0.32vw 0.32vw 0.63vw #0065c8;
+    color: #fff;
+    text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
+  }
+  .keyboard .key.control {
+    background: #be2edd;
+    color: #f2d5f8;
+  }
+  .keyboard .key.control:hover,
+  .keyboard .key.control.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #d57be9, inset 0.32vw 0.32vw 0.63vw #891aa1;
+    color: #fff;
+    text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
+  }
+  .keyboard .key.win {
+    background: #f7b731;
+    color: #fdf1d6;
+  }
+  .keyboard .key.win:hover,
+  .keyboard .key.win.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fad17d, inset 0.32vw 0.32vw 0.63vw #c78908;
+    color: #fff;
+    text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
+  }
+  .keyboard .key.alt {
+    background: #5352ed;
+    color: #dddcfb;
+  }
+  .keyboard .key.alt:hover,
+  .keyboard .key.alt.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #9291f3, inset 0.32vw 0.32vw 0.63vw #1615ca;
+    color: #fff;
+    text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
+  }
+  .keyboard .key.fn {
+    background: #26de81;
+    color: #d4f8e6;
+  }
+  .keyboard .key.fn:hover,
+  .keyboard .key.fn.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #76eaaf, inset 0.32vw 0.32vw 0.63vw #189e5a;
+    color: #fff;
+    text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
+  }
+  .keyboard .key.cap {
+    background: #ee5a24;
+    color: #fcded3;
+    position: relative;
+  }
+  .keyboard .key.cap:hover,
+  .keyboard .key.cap.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f49675, inset 0.32vw 0.32vw 0.63vw #b23a0e;
+    color: #fff;
+    text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
+  }
+  .keyboard .key.cap::before {
+    content: '';
+    position: absolute;
+    width: 0.5vw;
+    height: 0.5vw;
+    background: #f6ac91;
+    top: 1vw;
+    right: 1vw;
+    border-radius: 50%;
+  }
+  .keyboard .key.cap.on::before {
+    background: #fbded3;
+    box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
+  }
+  .keyboard .key.tab {
+    background: #12cbc4;
+    color: #cafaf8;
+  }
+  .keyboard .key.tab:hover,
+  .keyboard .key.tab.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #5aede7, inset 0.32vw 0.32vw 0.63vw #0d8e89;
+    color: #fff;
+    text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
+  }
+  .keyboard .key.enter {
+    background: #fdcb6e;
+    color: #fff5e2;
+  }
+  .keyboard .key.enter:hover,
+  .keyboard .key.enter.pressed {
+    transform: perspective(300px) scale(0.97);
+    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fddea3, inset 0.32vw 0.32vw 0.63vw #fba403;
+    color: #fff;
+    text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
+  }
+  .keyboard .key.s2 {
+    font-size: 1.73vw;
+    grid-column: auto/span 2;
+  }
+  .keyboard .key.s3 {
+    font-size: 1.73vw;
+    grid-column: auto/span 3;
+  }
+  .keyboard .key.s4 {
+    font-size: 1.73vw;
+    grid-column: auto/span 4;
+  }
+  .keyboard .key.s5 {
+    font-size: 1.73vw;
+    grid-column: auto/span 5;
+  }
+  .keyboard .key.s6 {
+    font-size: 1.73vw;
+    grid-column: auto/span 6;
+  }
+  .keyboard .key.s12 {
+    font-size: 1.73vw;
+    grid-column: auto/span 12;
+  }
+  .keyboard .key[on-shift] {
+    font-size: 1.461538461538461vw;
+    justify-items: center;
+  }
+  .keyboard .key[on-shift]::before {
+    content: attr(on-shift);
+    align-items: end;
+  }
+
+
+
+    /* 轮播视觉差 start */
+    .card-swiper {
+      height: 600rpx !important;
+    }
+  
+    .card-swiper swiper-item {
+      width: 750rpx !important;
+      left: 0rpx;
+      box-sizing: border-box;
+      padding: 0rpx 0rpx 120rpx 0rpx;
+      overflow: initial;
+    }
+  
+    .card-swiper swiper-item .swiper-item {
+      width: 100%;
+      display: block;
+      height: 100%;
+      border-radius: 0rpx;
+      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;
+    }
+  
+    .card-swiper swiper-item .swiper-item2 {
+      margin-top: -340rpx;
+      width: 100%;
+      display: block;
+      height: 100%;
+      border-radius: 0rpx;
+      transform: translate(340rpx, 20rpx) scale(0.5, 0.5);
+      transition: all 0.6s ease 0s;
+      overflow: hidden;
+    }
+  
+    .card-swiper swiper-item.cur .swiper-item2 {
+      margin-top: -340rpx;
+      width: 100%;
+      transform: translate(300rpx, 0rpx) scale(0.8, 0.8);
+      transition: all 0.6s ease 0s;
+    }
+  
+    .card-swiper swiper-item .swiper-item-text {
+      margin-top: -320rpx;
+      width: 100%;
+      display: block;
+      height: 50%;
+      border-radius: 10rpx;
+      transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
+      transition: all 0.6s ease 0s;
+      overflow: hidden;
+    }
+  
+    .card-swiper swiper-item.cur .swiper-item-text {
+      margin-top: -380rpx;
+      width: 100%;
+      transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+      transition: all 0.6s ease 0s;
+    }
+    
+    .image-banner{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .image-banner image{
+      width: 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: #FFF;
+      opacity: 0.4;
+      width: 10rpx;
+      height: 10rpx;
+      border-radius: 20rpx;
+      margin: 0 8rpx !important;
+      left: -270rpx;
+      top: -180rpx;
+      position: relative;
+    }
+    
+    .spot.active{
+      opacity: 1;
+      width: 30rpx;
+      background-color: #FFF;
+    }
+</style>
diff --git a/vipPage/home/moon/moon.vue b/vipPage/home/moon/moon.vue
new file mode 100644
index 0000000..be754fe
--- /dev/null
+++ b/vipPage/home/moon/moon.vue
@@ -0,0 +1,363 @@
+<template>
+  <view class="template-moon 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <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/logo/logo2.png')">
+            <view class="logo-image">
+            </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>
+    </tn-nav-bar>
+    
+ 
+    
+    <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          Hi，北北欢迎你吖
+        </view>
+        <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-menu-more"></text>
+        </view>
+      </view>
+    </view>
+
+    <swiper class="card-swiper tn-margin-top-lg" :circular="true"
+      :autoplay="true" duration="500" interval="5000" previous-margin="60rpx" next-margin="60rpx" @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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
+        </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>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-level">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-signpost tn-color-gray--dark">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
+        </view>
+        <view class="tn-color-gray">导向</view>
+      </view>
+    </view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateMoon',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+          cardCur: 0,
+          swiperList: [{
+            id: 0,
+            type: 'image',
+            name: '图鸟UI 她来了',
+            text: '开启全新的探索之旅',
+            url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+          }, {
+            id: 1,
+            type: 'image',
+            name: '欢迎加入东东们',
+            text: '如果你也有不错的作品',
+            url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+          }, {
+            id: 2,
+            type: 'image',
+            name: '一起玩转scss',
+            text: '用最少的代码做最骚的效果',
+            url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+          }, {
+            id: 3,
+            type: 'image',
+            name: '微信号 tnkewo',
+            text: '商业合作请联系作者',
+            url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+          }, {
+            id: 4,
+            type: 'image',
+            name: '努力成为大佬',
+            text: '一起加油吖',
+            url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+          }],
+        }
+      },
+      methods: {
+        // cardSwiper
+        cardSwiper(e) {
+          this.cardCur = e.detail.current
+        },
+      }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 15rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+  /* 轮播图片入口 start*/
+  .card-swiper {
+      height: 67vh !important;
+    }
+    
+    .card-swiper swiper-item {
+      width: 630rpx !important;
+      // left: 60rpx;
+      box-sizing: border-box;
+      padding: 0rpx 0rpx 90rpx 0rpx;
+      overflow: initial;
+    }
+    
+    .card-swiper swiper-item .swiper-item {
+      width: 100%;
+      display: block;
+      height: 100%;
+      border-radius: 10rpx;
+      transform: scale(0.9);
+      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;
+    }
+    
+    .card-swiper swiper-item .swiper-item-text {
+      margin-top: -180rpx;
+      width: 100%;
+      display: block;
+      height: 50%;
+      border-radius: 10rpx;
+      transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
+      transition: all 0.6s ease 0s;
+      overflow: hidden;
+    }
+      
+    .card-swiper swiper-item.cur .swiper-item-text {
+      margin-top: -150rpx;
+      width: 100%;
+      transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+      transition: all 0.6s ease 0s;
+    }
+    
+    .image-banner{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.08);
+    }
+    .image-banner image{
+      width: 100%;
+      height: 100%;
+    }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 99;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    margin-top: -50rpx;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #3165CC;
+    opacity: 0.4;
+    width: 15rpx;
+    height: 15rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 35rpx;
+    background-color: #3165CC;
+  }
+  
+  /* 底部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;
+  }
+  
+  .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: -30rpx auto 20rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+  	background-color: #01BEFF;
+    width: 90rpx !important;
+    height: 90rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
+  }
+  
+  .tabbar .action .bar-circle image {
+    width: 60rpx;
+  	height: 60rpx;
+  	display: inline-block;
+    margin: 15rpx auto 15rpx;
+  }
+  
+</style>
diff --git a/vipPage/home/movie/movie.vue b/vipPage/home/movie/movie.vue
new file mode 100644
index 0000000..16296ef
--- /dev/null
+++ b/vipPage/home/movie/movie.vue
@@ -0,0 +1,482 @@
+<template>
+  <view class="template-movie 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 fixed :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/logo/logo2.png')">
+            <view class="logo-image">
+            </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">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">搜索 镇魂街</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    
+    
+    <view class="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/index_bg/tuniao3.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    
+    <view class="" style="margin: -250rpx 0 120rpx 0;">
+      <tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
+      <view class="tn-margin-top-sm">
+        <tn-sticky :offsetTop="10" :customNavHeight="vuex_custom_bar_height">
+          <tn-tabs :list="fixedList" :current="current" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
+        </tn-sticky>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="5000" previous-margin="200rpx" next-margin="200rpx" @change="cardSwiper"  style="margin-top: -80rpx;"> 
+      <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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
+        </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>
+    
+    <!-- 方式16 start-->
+    <view class="tn-flex tn-flex-wrap tn-margin-top-xl tn-padding-sm">
+      <block v-for="(item, index) in swiperList" :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-movie">
+                </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-->
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action bar-left">
+        <view class="bar-icon">
+          <view class="tn-icon-discover-fill tn-color-aquablue">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action bar-center">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-vip-fill tn-color-white">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+      <view class="action bar-right">
+        <view class="bar-icon">
+          <view class="tn-icon-eye-fill tn-color-gray--dark">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.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: 'TemplateMovie',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        list: [
+          '电影资源仅提供介绍，请上拥有版权的APP观看',
+          '排行仅为个人喜欢，不喜勿喷',
+          '抓住那只猪科技有限公司出品',
+          '今天想找个人一起去看电影'
+        ],
+        closeNoticeShow: true,
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '铁甲钢拳',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+        }, {
+          id: 1,
+          type: 'image',
+          name: '龙和雀斑公主',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+        }, {
+          id: 2,
+          type: 'image',
+          name: '哈尔的移动城堡',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '机器人总动员',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+        }, {
+          id: 4,
+          type: 'image',
+          name: '功勋·于敏',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
+        }, {
+          id: 5,
+          type: 'image',
+          name: '心欲呐喊',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+        }, {
+          id: 6,
+          type: 'image',
+          name: '白日梦想家',
+          text: '332人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+        }, {
+          id: 7,
+          type: 'image',
+          name: '摔跤吧爸爸',
+          text: '342人想看',
+          url: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+        }],
+        current: 0,
+        fixedList: [
+          {name: '推荐'},
+          {name: '电影'},
+          {name: '综艺'},
+          {name: '动漫'},
+          {name: '电视剧'},
+          {name: '纪录片', count: ''},
+          {name: '其他', count: ''},
+        ],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+        background-color: rgba(255,255,255,0.5);
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #080808;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 560rpx !important;
+    border-radius: 0 0 50% 50%/0 0 10% 10%;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item {
+    width: 350rpx !important;
+    // left: 200rpx;
+    box-sizing: border-box;
+    padding: 0rpx 15rpx 20rpx 15rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 25rpx;
+    transform: scale(0.9) translate(0rpx,60rpx);
+    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;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -120rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(0rpx, 0rpx) scale(0.7, 0.7);
+    transition: all 0.4s ease 0s;
+    overflow: hidden;
+    color: #000000;
+    opacity: 0;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -150rpx;
+    padding-left: 30rpx;
+    width: 100%;
+    transform: translate(-20rpx, 20rpx) scale(0.9, 0.9);
+    transition: all 0.4s ease 0s;
+    color: #FFFFFF;
+    text-shadow: 0rpx 10rpx 30rpx rgba(0,0,0,0.3);
+    opacity: 1;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.06);
+  }
+  .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: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  /* 效果布局 start*/
+  .image-movie{
+    width: 200rpx;
+    height: 300rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    height: 100%;
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 10rpx;
+  }
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   // 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;
+  	padding: 50rpx;
+  	overflow: initial;
+  }
+  
+  .bar-left{
+    background-color: #FFFFFF;
+    border-radius: 0rpx 95% 0rpx 0rpx / 0rpx 94% 0rpx 0rpx;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .bar-center{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+  
+  .bar-right{
+    background-color: #FFFFFF;
+    border-radius: 95% 0rpx 0rpx 0rpx / 94% 0rpx 0rpx 0rpx;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .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: -30rpx auto 20rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+  	background-color: #3646FF;
+    width: 90rpx !important;
+    height: 90rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(54, 70, 255, 0.5);
+  }
+  
+  .tabbar .action .bar-circle image {
+    width: 60rpx;
+  	height: 60rpx;
+  	display: inline-block;
+    margin: 15rpx auto 15rpx;
+  }
+</style>
diff --git a/vipPage/home/panoramic/panoramic.vue b/vipPage/home/panoramic/panoramic.vue
new file mode 100644
index 0000000..2e65a13
--- /dev/null
+++ b/vipPage/home/panoramic/panoramic.vue
@@ -0,0 +1,1446 @@
+<template>
+  <view class="template-panoramic 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 fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
+      <view id="navbar" 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/logo/logo2.png')">
+            <view class="logo-image">
+            </view>
+          </view> 
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" :style="[navBarStyle]">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230,230,230,0.3);">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">搜索 芊云全景</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="28000" @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>
+    
+    <!-- 方式15 start-->
+    <view class="tn-flex tn-margin-xs tn-padding-top-sm tn-color-white icon-function" id="page_tips">
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-rocket"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">约拍</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur ">
+            <view class="tn-icon-honor"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">创作</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-moon"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">云币</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-identity"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">认证</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式15 end-->
+    
+    <!-- 更多信息-->
+    <view class="health-shadow tn-margin tn-color-black tn-bg-white" style="position: relative;z-index: 1;padding: 20rpx 6rpx;">
+      <!-- 方式9 start-->
+      <view class="tn-flex">
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+              <view class="tn-icon-camera"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">拍摄教程</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-chemistry"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">功能实验</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
+              <view class="tn-icon-vip"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">会员权益</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-like-lack"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">萌新求助</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
+              <view class="tn-icon-message"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">问题反馈</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式9 end-->
+      <view class="tn-flex tn-padding-top-sm">
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-cube"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">航拍中国</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+              <view class="tn-icon-copy"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">全景看房</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-fire"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">全景旅游</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
+              <view class="tn-icon-star"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">全景游戏</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
+              <view class="tn-icon-menu-circle"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">更多功能</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式9 end-->  
+    </view>
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs" style="margin-top: -30rpx;">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-tnui.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    
+
+    
+    <!-- <view class="tn-flex tn-flex-row-between">
+      <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+        推荐博主
+      </view>
+      <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+        <text class="tn-padding-xs">全部</text>
+        <text class="tn-icon-topics"></text>
+      </view>
+    </view> -->
+   
+    
+    
+    <view class="">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
+          热门项目
+        </view>
+        <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view>
+      </view>
+      
+      <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
+        <view class="tn-flex-2">
+          
+          <view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/card.jpg')">
+            <view class="image-tuniao1">
+            </view>
+          </view> 
+          
+        </view>
+        <view class="tn-flex-1">
+          <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </view> 
+          <view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </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-xxl tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view> -->
+      </view>
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view> -->
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
+                <view class="tn-info__item__left__content--data tn-padding-top-xs">
+                {{ item.value }}
+                <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+    </view>
+
+
+    <view class="tn-margin-top-sm">
+      <tn-sticky :offsetTop="0" :customNavHeight="vuex_custom_bar_height">
+        <tn-tabs :list="fixedList" :current="current" :isScroll="false" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange" backgroundColor="#FFFFFF" :height="110"></tn-tabs>
+      </tn-sticky>
+    </view>
+    
+    <view class="" style="padding: 30rpx 20rpx;">
+      <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">SVIP</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 class="tn-flex tn-padding-right-sm tn-padding-top-sm tn-padding-bottom-xs">
+                <view class="justify-content-item tn-flex">
+                  <view style="margin-right: 10rpx;">
+                    <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>
+        </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-5">VIP</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 class="tn-flex tn-padding-right-sm tn-padding-top-sm tn-padding-bottom-xs">
+                <view class="justify-content-item tn-flex">
+                  <view style="">
+                    <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>
+        </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_tnnew.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_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: 'TemplatePanoramic',
+    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/adno3.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟南南',
+          name: '欢迎加入东东们',
+          text: '如果你也有不错的作品',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno4.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '一起玩转scss',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno5.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟北北',
+          name: '微信号 tnkewo',
+          text: '商业合作请联系作者',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno2.jpg',
+        }],
+        
+        current: 0,
+        fixedList: [
+          {name: '推荐'},
+          {name: '附近'},
+          {name: '最新'},
+          {name: '精品'},
+          {name: '人气', count: ''},
+        ],
+
+        tuniaoData: [
+          {
+            title: 'UI设计',
+            icon: 'image-text-fill',
+            color: 'red',
+            value: '前往咨询'
+          },
+          {
+            title: '小程序',
+            icon: 'data-fill',
+            color: 'orange',
+            value: '前往咨询'
+          },
+          {
+            title: '网站开发',
+            icon: 'statistics-fill',
+            color: 'purple',
+            value: '前往咨询'
+          },
+          {
+            title: '其他业务',
+            icon: 'bankcard-fill',
+            color: 'blue',
+            value: '前往咨询'
+          }
+        ],
+        navBarRectInfo: {},
+        navBarChangebaseLineHeight: 0,
+        navBarStyle: {
+          color:'#FFFFFF',
+          opacity: 1,
+          display: 'flex'
+        },
+        navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
+        activeBgAnimation: {},
+        
+        /* 瀑布流*/
+        loadStatus: 'loadmore',
+        list: [],
+        data: [
+          {
+            title: '广大军训快闪',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: true, // 是否为新品
+            tags: ['军训汇演','青春校园'],
+            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: 338
+            },
+          },
+          {
+            title: '万科神奇动物主场',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['空间设计'],
+            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: 289
+            },
+          },
+          {
+            title: '北海世博园灯笼走廊',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: true, // 是否为新品
+            tags: [],
+            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: 381
+            },
+          },
+          {
+            title: '浦江航拍夜上海',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: true, // 是否为新品
+            tags: [],
+            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: 526
+            },
+          },
+          {
+            title: '2021建档百年外滩灯光秀',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: [],
+            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: 372
+            },
+          },
+          {
+            title: '广州纳达堡三室两厅',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
+            storeType: 2, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['VR看房'],
+            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: 694
+            },
+          },
+          {
+            title: '冰岛极光航拍',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
+            storeType: 2, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['看世界'],
+            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: 508
+            },
+          },
+          {
+            title: '泰山之巅',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/bag1.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['航拍中国'],
+            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: 923
+            },
+          },
+          {
+            title: '广州分手塔',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/cup2.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: ['热门景点'],
+            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: 989
+            },
+          },
+          {
+            title: '珠海澳门交界',
+            mainImage: 'https://resource.tuniaokj.com/images/shop/pillow.jpg',
+            storeType: 1, // 1 自营 2 第三方店铺
+            newProduct: false, // 是否为新品
+            tags: [],
+            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
+            },
+          }
+        ]
+      }
+    },
+    /* 瀑布流*/
+    onLoad() {
+      this.getRandomData()
+    },
+    onReachBottom() {
+      this.getRandomData()
+    },
+    /* 顶部导航*/
+    onReady() {
+      this.$nextTick(() => {
+        this.initNavBarRectInfo()
+      })
+    },
+    onPageScroll() {
+      this.updateNavBarRectInfo()
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // resume
+      resume(e) {
+        this.cardCur2 = e.detail.current
+      },
+      // 初始化导航栏信息
+      async initNavBarRectInfo() {
+        const navBarRectInfo = await this._tGetRect('#navbar')
+        const pageTipsRectInfo = await this._tGetRect('#page_tips')
+        // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
+        if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
+          setTimeout(() => {
+            this.initNavBarRectInfo()
+          }, 10)
+          return
+        }
+        this.navBarRectInfo = {
+          top: navBarRectInfo.top
+        }
+        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
+      },
+      // 更新导航栏信息
+      updateNavBarRectInfo() {
+        this._tGetRect('#page_tips').then((res) => {
+          const top = res?.top || 0
+          if (!top) {
+            return
+          }
+          const differHeight = top - this.navBarRectInfo.top
+          const opacity = differHeight / this.navBarChangebaseLineHeight
+          if (opacity < 0) {
+            // this.navBarStyle.opacity = 1
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`
+          } else {
+            // this.navBarStyle.opacity = 1 - opacity
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(255, 255, 255, 1)'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`
+          }
+          
+          // console.log(top, differHeight, opacity);
+        })
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+      // 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']
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-panoramic {
+    // background-color: #FBFBFB;
+  }
+  
+  .icon-function {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 5rpx;
+      margin-top: -420rpx;
+  }
+
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 600rpx !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;
+    opacity: 0;
+  }
+  
+  .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;
+  }
+  
+  
+  /* 图标容器15 start */
+ .icon15 {
+   &__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: 0rpx;
+       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%;
+       }
+     }
+   }
+ }
+  
+    
+  /* 图标容器9 start */
+    .icon9 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          font-size: 50rpx;
+          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_bg6.png);
+          }
+        }
+      }
+    }
+  
+  
+  /* 阴影 start*/
+  .health-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  /* 自定义导航栏内容 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: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+
+  /* 热门图片 start*/
+  .image-tuniao1{
+    padding: 164rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao2{
+    padding: 75rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao3{
+    padding: 90rpx 0rpx;
+    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;
+  }
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  
+  
+  /* 业务展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      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/2.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          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_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 25rpx;          
+          
+          &--data {
+            color: rgba(255,255,255,0.5);
+            margin-top: 5rpx;
+            // font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0rpx;
+          top: 50rpx;
+          font-size: 100rpx;
+          width: 108rpx;
+          height: 108rpx;
+          text-align: center;
+          line-height: 60rpx;
+          opacity: 0.15;  
+        }
+      }
+    }
+  }
+  /* 业务展示 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>
diff --git a/vipPage/home/plan/plan.vue b/vipPage/home/plan/plan.vue
new file mode 100644
index 0000000..8675b13
--- /dev/null
+++ b/vipPage/home/plan/plan.vue
@@ -0,0 +1,486 @@
+<template>
+  <view class="template-plan 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 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">
+          <view class="tn-icon-menu-more" style="font-size: 50rpx;"></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">
+            <text class="tn-text-bold tn-text-xxl">北北小目标</text>
+          </view>
+        </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">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          未进行（5）
+        </view>
+        <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-send"></text>
+        </view>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper tn-margin-top-sm" :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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
+        </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="" style="margin-top: -30rpx;">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          今日目标
+        </view>
+        <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-edit-form"></text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
+      <text>这是今日目标，请干巴爹吖</text>
+    </view>
+    
+    <view class="">
+      <view class="tn-plan-content tn-margin tn-text-justify">
+        <view v-for="(item,index) in planList" :key="index" class="tn-plan-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-plan-content__item--prefix">#</text> {{item.name}}
+        </view>
+      </view>
+    </view>
+    
+    <view class="tn-clear-float tn-padding-top-lg">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          历史记录
+        </view>
+        <!-- <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-right"></text>
+        </view> -->
+      </view>
+    </view>
+    
+    <view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
+      <text>完成的目标，当然要记录啦</text>
+    </view>
+    
+    <view class="tn-margin-top-lg" style="margin-bottom: 50rpx">
+      <view class="tn-plan-content2 tn-margin tn-text-justify">
+        <view v-for="(item,index) in planList2" :key="index" class="tn-plan-content2__item tn-margin-right tn-round tn-text-sm tn-text-bold tn-bg-gray--light tn-color-black">
+          <text class="tn-plan-content2__item--prefix">#</text> {{item.name}}
+          <text class="tn-float-right">{{item.time}}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="" style="height: 10rpx;">
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image>
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image>
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image>
+        </view>
+        <view class="tn-color-gray">案例</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.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: 'TemplatePlan',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '看书20分钟',
+          text: '静下心看《读者》',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          name: '创新一个轮播',
+          text: '在图鸟UI新增创意轮播',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          name: '坚持早起',
+          text: '早上9点前起床',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '和群友吹水',
+          text: '技术的友情永不过时',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          name: '散步找创意',
+          text: '每天散步30分钟',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }],
+        planList: [{
+          name: '看书',
+          color: 'red',
+          time: '2021-12-13 06:20',
+        }, {
+          name: '早起',
+          color: 'cyan',
+          time: '8:37',
+        }, {
+          name: '做30个深蹲',
+          color: 'blue',
+        }, {
+          name: '散步',
+          color: 'green',
+        }, {
+          name: '写新的轮播效果',
+          color: 'orange',
+        }, {
+          name: '吃早餐',
+          color: 'purplered',
+        }, {
+          name: '陪猫猫玩',
+          color: 'purple',
+        }, {
+          name: '睡午觉',
+          color: 'brown',
+        }, {
+          name: '干饭饭',
+          color: 'yellowgreen',
+        }, {
+          name: '蔡猪北',
+          color: 'grey',
+        }],
+        planList2: [{
+          name: '陪猫猫玩',
+          time: '2021-12-13 22:45',
+        },{
+          name: '写新的轮播效果',
+          time: '2021-12-13 20:20',
+        }, {
+          name: '散步',
+          time: '2021-12-13 18:11',
+        }, {
+          name: '睡午觉',
+          time: '2021-12-13 13:42',
+        }, {
+          name: '干饭饭',
+          time: '2021-12-13 12:14',
+        }, {
+          name: '看书',
+          time: '2021-12-13 10:21',
+        }, {
+          name: '吃早餐',
+          time: '2021-12-13 08:56',
+        }, {
+          name: '做30个深蹲',
+          time: '2021-12-13 08:40',
+        }, {
+          name: '早起',
+          time: '2021-12-13 08:22',
+        }, {
+          name: '蔡北北测试',
+          time: '2021-12-12 22:06',
+        }],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-plan{
+  }
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 70%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 15rpx 0;
+        margin: 0 30rpx;
+        border-radius: 10rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  /* 轮播 start*/
+  .card-swiper {
+    height: 570rpx !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 450rpx !important;
+    left: 30rpx;
+    box-sizing: border-box;
+    padding: 0rpx 0rpx 80rpx 0rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 10rpx;
+    transform: scale(0.7) translate(0rpx,-104rpx);
+    transition: all 0.3s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: none;
+    transition: all 0.3s ease-in 0s;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -120rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(20rpx, -30rpx) scale(0.7, 0.7);
+    transition: all 0.4s ease 0s;
+    overflow: hidden;
+    color: #000000;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -150rpx;
+    padding-left: 30rpx;
+    width: 100%;
+    transform: translate(-20rpx, 20rpx) scale(0.9, 0.9);
+    transition: all 0.4s ease 0s;
+    color: #FFFFFF;
+    text-shadow: 0rpx 10rpx 20rpx rgba(0,0,0,0.1);
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.15);
+    // border: 1rpx solid red;
+  }
+  .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: #000;
+    opacity: 0.4;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    right: -270rpx;
+    top: -100rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 10rpx;
+    background-color: #000;
+  }
+  
+  /* 计划内容 start*/
+  .tn-plan-content {
+    &__item {
+      display: inline-block;
+      line-height: 45rpx;
+      padding: 10rpx 30rpx;
+      margin: 20rpx 20rpx 5rpx 0rpx;
+      
+      &--prefix {
+        padding-right: 10rpx;
+      }  
+    }
+  }
+  .tn-plan-content2 {
+    &__item {
+      line-height: 45rpx;
+      padding: 15rpx 30rpx;
+      margin: 30rpx 0rpx 10rpx 0rpx;
+      
+      &--prefix {
+        padding-right: 10rpx;
+      }  
+    }
+  }
+  /* 计划内容 end*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+</style>
diff --git a/vipPage/home/read/read.vue b/vipPage/home/read/read.vue
new file mode 100644
index 0000000..75bbd19
--- /dev/null
+++ b/vipPage/home/read/read.vue
@@ -0,0 +1,763 @@
+<template>
+  <view class="template-read 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <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/logo/logo2.png')">
+            <view class="logo-image">
+            </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>
+    </tn-nav-bar>
+    
+     
+    
+    <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          Hi，北北欢迎你吖
+        </view>
+        <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-menu-more"></text>
+        </view>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper tn-margin-top-sm" :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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
+          <view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
+        </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>
+    
+    <!-- 方式7 start-->
+    <view class="tn-flex">
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a004.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">排行</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a002.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">签到</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a006.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">免费</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a007.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">会员</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式7 end-->
+    
+    <!-- 换背景形式-->
+    <!-- <view class="image-div tn-margin">
+      <image src='https://resource.tuniaokj.com/images/swiper/capsule1.png' mode='widthFix' class='image'></image>
+    </view> -->
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-margin-sm">
+      <view class=" " style="width: 100%;">
+        <view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/swiper/capsule1.png')">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    <view class="tn-margin-top">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-5">
+          <text class="tn-icon-copy tn-padding-right-sm"></text>
+          热 / 门 / 书 / 籍
+          <text class="tn-icon-copy tn-padding-left-sm"></text>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 图文 -->
+    <!-- 比例 start-->
+    <view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom">
+      <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 tn-icon-flower"></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-->
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed" style="border-radius: 100rpx;">
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-home-smile">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image> -->
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-discover tn-color-gray">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image> -->
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-image-text tn-color-gray">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image> -->
+        </view>
+        <view class="tn-color-gray">案例</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-my tn-color-gray">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.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: 'TemplateRead',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: '海量分享',
+          name: '总有你想不到的创意',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '愉快玩耍',
+          name: '寻找一起成长的小伙伴',
+          text: '欢迎加入东东们',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '酷炫多彩',
+          name: '更多彩蛋等你探索',
+          text: '开启全新的探索之旅',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '免费开源',
+          name: '商业合作请联系作者',
+          text: '微信号 tnkewo',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }],
+        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: 999,
+            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
+          }
+        ]
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 15rpx 0;
+        margin: 0 30rpx;
+        border-radius: 10rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 500rpx !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%;
+    border-radius: 30rpx;
+    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;
+  }
+    
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -220rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -280rpx;
+    width: 100%;
+    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 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: -130rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 30rpx;
+    background-color: #FFFFFF;
+  }
+  
+  /* 图标容器7 start */
+  .icon7 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 10rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 120rpx;
+        height: 120rpx;
+        font-size: 50rpx;
+        border-radius: 0;
+        margin-bottom: -10rpx;
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }    
+  
+  .image-capsule{
+    padding:120rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+  }
+      
+  /* 胶囊背景图 start */
+  .image-div {
+    height: 450rpx;
+    z-index: -1;
+  
+    .image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+  /* 胶囊背景图 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 */
+  
+  /* 文章内容 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: #82B2FF;
+          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*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   // margin: 20rpx;
+   margin: 40rpx 5%;
+   width: 90%;
+   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;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+</style>
diff --git a/vipPage/home/tea/tea.vue b/vipPage/home/tea/tea.vue
new file mode 100644
index 0000000..fd2f6ee
--- /dev/null
+++ b/vipPage/home/tea/tea.vue
@@ -0,0 +1,528 @@
+<template>
+  <view class="template-course 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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
+          <view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
+          <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
+        </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-flex tn-flex-row-between tn-margin tea-user__wrap">
+      
+      <view class="tn-flex-3 tn-padding tea-radius tn-bg-white tea-shadow" style="margin-right: 30rpx;">
+        <view class="tn-flex">
+          <view class="tn-flex tn-flex-row-center tn-flex-col-center">
+            <view class="user-avatar">
+              <view class="tn-icon-logo-tuniao" style="font-size: 90rpx;color: #01BEFF;"></view>
+            </view>
+            <view class="tn-padding-right tn-text-ellipsis tn-text-left">
+              <view class="tn-padding-right tn-padding-left-sm tn-color-black tn-text-bold">
+                图鸟小伙伴
+              </view>
+              <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray tn-text-sm">有 6 张优惠券未使用</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <view class="tn-flex-1 justify-content-item tn-padding tn-text-center tea-radius tn-bg-white tea-shadow">
+        <view class="">
+          <text class="tn-icon-qr-code tn-text-xl"></text>
+        </view>
+        <view class=" tn-padding-top-xs">
+          会员码
+        </view>
+      </view>
+    </view>
+    
+    
+    <view class="">
+      
+      <!-- 方式12 start-->
+      <view class="tn-flex tn-margin" style="padding-top: 15rpx;">
+        <view class="tn-flex-1 tea-shadow tea-radius tn-bg-white" style="margin-right: 15rpx;padding: 40rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
+              <view class="tn-icon-shop tn-three"></view>
+            </view>  
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-text-xl tn-text-bold">门店自取</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">下单免排队</view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tea-shadow tea-radius tn-bg-white" style="margin-left: 15rpx;padding: 40rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
+              <view class="tn-icon-electromobile tn-three"></view>
+            </view>  
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-text-xl tn-text-bold">外卖配送</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">无接触配送</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin" style="padding-top: 15rpx;">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tea-shadow">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-color-${item.color}--disabled`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-bold tn-text-xl tn-color-black">{{ item.title }}</view>
+                <!-- <view class="tn-info__item__left__content--data tn-padding-top-xs">
+                {{ item.value }}
+                <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view> -->
+              </view>
+            </view>
+            <!-- <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view> -->
+          </view>
+        </block>
+      </view>
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-home.png'></image>
+        </view>
+        <view class="tn-color-black">门店</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-watercup tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-buy.png'></image>
+        </view>
+        <view class="tn-color-gray">点餐</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-shop tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-shop.png'></image>
+        </view>
+        <view class="tn-color-gray">商城</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-ticket tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-list.png'></image>
+        </view>
+        <view class="tn-color-gray">订单</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-my.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: 'BUG再多',
+          name: '也别忘了',
+          text: '我无限续杯',
+          url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟南南',
+          name: '欢迎加入东东们',
+          text: '如果你也有不错的作品',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '一起玩转scss',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟北北',
+          name: '微信号 tnkewo',
+          text: '商业合作请联系作者',
+          url: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '努力成为大佬',
+          text: '一起加油吖',
+          url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
+        }],
+        tuniaoData: [
+          {
+            title: '开通会员',
+            icon: 'vip-fill',
+            color: 'red',
+            value: '我就看看'
+          },
+          {
+            title: '来场约惠',
+            icon: 'tag-fill',
+            color: 'blue',
+            value: '我就看看'
+          },
+          {
+            title: '放肆开玩',
+            icon: 'game-fill',
+            color: 'orange',
+            value: '我就看看'
+          },
+          {
+            title: '加盟开店',
+            icon: 'commissary-fill',
+            color: 'green',
+            value: '我就看看'
+          }
+        ]
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+ 
+  /* 头像 start*/
+  .user-avatar{
+    width: 90rpx;
+    height: 90rpx;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  /* 内容布局 start*/
+  .tea-shadow{
+    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  .tea-user {
+    
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 30rpx;
+      margin-top: -80rpx;
+    }
+  }
+  .tea-radius{
+    border-radius: 15rpx;
+  }
+  
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 800rpx !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;
+  }
+    
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -320rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -380rpx;
+    width: 100%;
+    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 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: -130rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 30rpx;
+    background-color: #FFFFFF;
+  }
+  
+  /* 图标容器12 start */
+  .tn-three{
+      position: absolute;
+      top: 48%;
+      right: 50%;
+      bottom: 50%;
+      left: 52%;
+      transform: translate(-38rpx, -16rpx) rotateX(0deg) rotateY(10deg) rotateZ(-20deg);
+      text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
+  }
+  .icon12 {
+    &__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 */
+  .tn-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      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/6.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 70rpx;
+          margin-right: 20rpx;
+          position: relative;
+          z-index: 1;
+        }
+        
+        &__content {
+          font-size: 30rpx;
+          
+          &--data {
+            margin-top: 5rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0upx;
+          top: 50upx;
+          font-size: 100upx;
+          width: 108upx;
+          height: 108upx;
+          text-align: center;
+          line-height: 60upx;
+          opacity: 0.1;  
+        }
+      }
+    }
+  }
+  /* 业务展示 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;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+  
+</style>
diff --git a/vipPage/home/tuniao/tuniao.vue b/vipPage/home/tuniao/tuniao.vue
new file mode 100644
index 0000000..dd0aa42
--- /dev/null
+++ b/vipPage/home/tuniao/tuniao.vue
@@ -0,0 +1,639 @@
+<template>
+  <view class="template-tuniao 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 fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
+      <view id="navbar" class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" :style="[navBarStyle]">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="logo-pic" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo.jpg')">
+            <view class="logo-image">
+            </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>
+    </tn-nav-bar>
+    
+    <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view id="page_tips" class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          Hi，早午晚都好吖
+        </view>
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          <text class="tn-icon-share-triangle"></text>
+        </view>
+      </view>
+      
+      <view class="tn-margin-left tn-margin-right tn-margin-top-sm">
+        <tn-swiper :list="banner" :height="320" :effect3d="false" mode="round"></tn-swiper>
+      </view>
+      
+      <view class="tn-flex tn-flex-row-between tn-margin-top-xl">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          热门项目
+        </view>
+        <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view>
+      </view>
+      
+      <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
+        <view class="tn-flex-2">
+          
+          <view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/cup2.jpg')">
+            <view class="image-tuniao1">
+            </view>
+          </view> 
+          
+        </view>
+        <view class="tn-flex-1">
+          <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </view> 
+          <view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </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-xxl">
+          业务范围
+        </view>
+        <!-- <view class="justify-content-item tn-margin tn-text-xxl tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view> -->
+      </view>
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view> -->
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
+                <view class="tn-info__item__left__content--data tn-padding-top-xs">
+                {{ item.value }}
+                <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+    </view>
+    
+    
+    <view class="bg-tabbar-shadow"></view>
+    <view class="tabbar__placeholder"></view>
+    
+    <!-- 底部导航栏 -->
+    <view class="tabbar">
+      <view class="tabbar__bg" :style="[wrapStyle]"></view>
+      <view class="tabbar__list">
+        <block v-for="(item, index) in tabbar" :key="index">
+          <view :id="`tabbar_item_${index}`" class="tabbar__item" :class="[{'tabbar__item--active': index === currentTabbarIndex}]" @click="changeTabbar(index)">
+            <view class="tabbar__item__icon" :class="[item.icon]"></view>
+            <view class="tabbar__item__text">{{ item.name }}</view>
+          </view>
+        </block>
+      </view>
+      <!-- <view class="tabbar__select-active-bg" :class="[showActiceBg ? 'tabbar__select-active-bg--show' : 'tabbar__select-active-bg--hide']" :style="[activeBgStyle]"></view> -->
+      <view class="tabbar__select-active-bg" :animation="activeBgAnimation"></view>
+    </view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        banner: [{
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
+        }, {
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
+        }, {
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
+        }, {
+          image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
+        }],
+        tuniaoData: [
+          {
+            title: 'UI设计',
+            icon: 'image-text-fill',
+            color: 'red',
+            value: '前往咨询'
+          },
+          {
+            title: '小程序',
+            icon: 'data-fill',
+            color: 'orange',
+            value: '前往咨询'
+          },
+          {
+            title: '网站开发',
+            icon: 'statistics-fill',
+            color: 'purple',
+            value: '前往咨询'
+          },
+          {
+            title: '其他业务',
+            icon: 'bankcard-fill',
+            color: 'blue',
+            value: '前往咨询'
+          }
+        ],
+        wrapMaskPositionLeft: 0,
+        activeBgPositionLeft: 0,
+        showActiceBg: false,
+        prevTabbarIndex: 0,
+        currentTabbarIndex: 0,
+        tabbarRectInfo: [],
+        tabbar: [
+          { name: '首页', icon: 'tn-icon-home' },
+          { name: '圈子', icon: 'tn-icon-discover' },
+          { name: '数据', icon: 'tn-icon-data' },
+          { name: '我的', icon: 'tn-icon-my' }
+        ],
+        navBarRectInfo: {},
+        navBarChangebaseLineHeight: 0,
+        navBarStyle: {
+          opacity: 1,
+          display: 'flex'
+        },
+        navBarBackgroundColor: 'rgba(255, 255, 255, 1)',
+        activeBgAnimation: {}
+      }
+    },
+    computed: {
+      wrapStyle() {
+        return {
+          '-webkit-mask-position': `${this.wrapMaskPositionLeft}px -1px, 100%`
+        }
+      },
+      activeBgStyle() {
+        return {
+          'left': `${this.activeBgPositionLeft}px`
+        }
+      }
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.getTabbarItemInfo()
+        this.initNavBarRectInfo()
+      })
+    },
+    onPageScroll() {
+      this.updateNavBarRectInfo()
+    },
+    methods: {
+      // 初始化导航栏信息
+      async initNavBarRectInfo() {
+        const navBarRectInfo = await this._tGetRect('#navbar')
+        const pageTipsRectInfo = await this._tGetRect('#page_tips')
+        // console.log(navBarRectInfo, pageTipsRectInfo);
+        if (!(navBarRectInfo?.top) || !(pageTipsRectInfo?.top)) {
+          setTimeout(() => {
+            this.initNavBarRectInfo()
+          }, 10)
+          return
+        }
+        this.navBarRectInfo = {
+          top: navBarRectInfo.top
+        }
+        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
+      },
+      // 更新导航栏信息
+      updateNavBarRectInfo() {
+        this._tGetRect('#page_tips').then((res) => {
+          const top = res?.top || 0
+          if (!top) {
+            return
+          }
+          const differHeight = top - this.navBarRectInfo.top
+          const opacity = differHeight / this.navBarChangebaseLineHeight
+          if (opacity < 0) {
+            this.navBarStyle.opacity = 0
+            this.navBarStyle.display = 'none'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, 0)`
+          } else {
+            this.navBarStyle.opacity = opacity
+            this.navBarStyle.display = 'flex'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, ${opacity})`
+          }
+          
+          // console.log(top, differHeight, opacity);
+        })
+      },
+      // 获取底部元素的位置
+      getTabbarItemInfo() {
+        const view = uni.createSelectorQuery().in(this)
+        for(let i = 0; i < this.tabbar.length; i++) {
+          view.select('#tabbar_item_' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          if (!res.length) {
+            setTimeout(() => {
+              this.getTabbarItemInfo()
+            }, 10)
+            return
+          }
+          
+          // 将信息存入数组中
+          res.map((item) => {
+            this.tabbarRectInfo.push({
+              left: item.left,
+              width: item.width
+            })
+          })
+          this.updateHollowsPosition()
+          this.updateActiveBgPosition(true)
+          // console.log(this.tabbarRectInfo)
+        })
+      },
+      // 更新凹陷位置
+      updateHollowsPosition() {
+        const { width, left } = this.tabbarRectInfo[this.currentTabbarIndex]
+        // 计算掩模图片的宽高比
+        // const imageRatio = 200 / 92
+        // 计算定高的宽比
+        const imageFixedHeightWidthRatioValue = 300 * (uni.upx2px(64) / 92)
+        this.wrapMaskPositionLeft = left - ((imageFixedHeightWidthRatioValue - width) / 2)
+        // console.log(imageFixedHeightWidthRatioValue, this.wrapMaskPositionLeft);
+      },
+      // 更新激活时背景的位置
+      updateActiveBgPosition(init = false) {
+        const { width, left } = this.tabbarRectInfo[this.currentTabbarIndex]
+        const oldActiveBgPositionLeft = this.activeBgPositionLeft
+        this.activeBgPositionLeft = left + ((width - uni.upx2px(100)) / 2)
+        // console.log(oldActiveBgPositionLeft, this.activeBgPositionLeft);
+        // if (!init) {
+        //   this.showActiceBg = false
+        //   setTimeout(() => {
+        //     this.showActiceBg = true
+        //   }, 150)
+        // } else {
+        //   this.showActiceBg = true
+        // }
+        if (!init) {
+          const animation = uni.createAnimation({
+            duration: 200,
+            timingFunction: "ease-out"
+          })
+          animation.top(uni.upx2px(50)).left(oldActiveBgPositionLeft + ((this.activeBgPositionLeft - oldActiveBgPositionLeft) / 2)).scale(0.5).step()
+          animation.left(this.activeBgPositionLeft).top(uni.upx2px(-54)).scale(1).step()
+          this.activeBgAnimation = animation.export()
+        } else {
+          const animation = uni.createAnimation({
+            duration: 100,
+            timingFunction: "ease-out"
+          })
+          animation.left(this.activeBgPositionLeft).top(uni.upx2px(-54)).step()
+          this.activeBgAnimation = animation.export()
+        }
+        
+      },
+      // 修改当前选中的tabbar
+      changeTabbar(index) {
+        if (this.currentTabbarIndex === index) return
+        this.prevTabbarIndex = this.currentTabbarIndex
+        this.currentTabbarIndex = index
+        this.$nextTick(() => {
+          this.updateHollowsPosition()
+          this.updateActiveBgPosition()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-tuniao {
+    // background-color: #FBFBFB;
+  }
+  /* 底部tabbar假阴影 start*/
+  .bg-tabbar-shadow{
+    background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
+    position: fixed;
+    bottom: 0;
+    height: 450rpx;
+    width: 100vw;
+    z-index: -1;
+  }
+  
+  /* 自定义导航栏内容 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: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+
+  /* 热门图片 start*/
+  .image-tuniao1{
+    padding: 164rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao2{
+    padding: 75rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao3{
+    padding: 90rpx 0rpx;
+    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-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      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/3.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          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_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 30rpx;
+          
+          &--data {
+            margin-top: 5rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0rpx;
+          top: 50rpx;
+          font-size: 100rpx;
+          width: 108rpx;
+          height: 108rpx;
+          text-align: center;
+          line-height: 60rpx;
+          opacity: 0.15;  
+        }
+      }
+    }
+  }
+  /* 业务展示 end */
+  
+  /* 底部导航 statr */
+  .tabbar {
+    width: 100%;
+    height: calc(110rpx + env(safe-area-inset-bottom));
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: transparent;
+    z-index: 998;
+    
+    &__bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      bottom: 0;
+      left: 0;
+      background-color: #FFFFFF;
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 61.5'%3E%3Cpath d='M100 0H0c32.9 0 49.3 61.5 100 61.5S167.1 0 200 0H100z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
+      -webkit-mask-size: auto 64rpx, cover;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-composite: xor;   /*只显示不重合的地方， chorem 、safari 支持*/
+      z-index: 998;
+      transition: 0.5s;
+    }
+    
+    &__list {
+      position: absolute;
+      z-index: 999;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    &__item {
+      height: 100%;
+      width: 100%;
+      flex: 1;
+      text-align: center;
+      font-size: 28rpx;
+      position: relative;
+      
+      &--active {
+        .tabbar__item__icon {
+          top: -30rpx;
+        }
+        
+        .tabbar__item__text {
+          opacity: 1;
+        }
+      }
+      
+      &__icon {
+        font-size: 56rpx;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 20rpx;
+        transition: 0.5s;
+      }
+      
+      &__text {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: calc(10rpx + env(safe-area-inset-bottom));
+        transition: 0.5s;
+        opacity: 0;
+      }
+    }
+    
+    &__select-active-bg {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 50%;
+      background-color: #FFFFFF;
+      // transition: 0.5s;
+      z-index: -1;
+      // box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
+      // box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
+      box-shadow: 0rpx 10rpx 30rpx rgba(70,23,129, 0.07),
+        0rpx -8rpx 40rpx rgba(255, 255, 255, 0.07),
+        inset 0rpx -10rpx 10rpx rgba(70,23,129, 0.07),
+        inset 0rpx 10rpx 20rpx rgba(255, 255, 255, 1);
+      // transition: box-shadow .2s ease-out;
+      
+      &--hide {
+        top: calc(110rpx + 50rpx);
+      }
+      
+      &--show {
+        top: -54rpx;
+      }
+    }
+    
+    &__placeholder {
+      height: calc(110rpx + env(safe-area-inset-bottom));
+      // display: initial;
+    }
+  }
+  /* 底部导航 end */
+  
+</style>
diff --git a/vipPage/home/ucharts/ucharts.vue b/vipPage/home/ucharts/ucharts.vue
new file mode 100644
index 0000000..97388d6
--- /dev/null
+++ b/vipPage/home/ucharts/ucharts.vue
@@ -0,0 +1,1335 @@
+<template>
+  <view class="template-ucharts 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 fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
+      <view id="navbar" 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://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646920408332-assets/web-upload/6ea58bb4-cb0d-4034-b9ac-a0155d5c3afb.jpeg')">
+            <view class="logo-image">
+            </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-center tn-color-white">
+            <text class="tn-text-bold tn-text-xxl">北北壁纸库</text>
+          </view>
+        </view> -->
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" :style="[navBarStyle]">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left">
+            <view class="custom-nav__search__text tn-padding-left tn-margin-left tn-text-bold tn-text-xl">uCharts跨全端图表</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="28000" @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>
+    
+    <!-- 方式15 start-->
+    <view class="tn-flex tn-margin-xs tn-padding-top-sm tn-color-white icon-function" id="page_tips">
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur ">
+            <view class="tn-icon-image-text"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">应用手册</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-message"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">问题反馈</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-brand"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">关于应用</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-honor"></view>
+          </view>  
+          <view class="tn-text-center">
+            <text class="tn-text-ellipsis">服务条款</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式15 end-->
+    
+    <!-- 更多信息-->
+    <view class="health-shadow tn-margin tn-color-black tn-bg-white" style="position: relative;z-index: 1;padding: 20rpx 6rpx;">
+      
+      <tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
+      
+      
+      <!-- 方式9 start-->
+      <view class="tn-flex">
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+              <view class="tn-icon-chemistry"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">核酸结果</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-map"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">核酸地点</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
+              <view class="tn-icon-safe"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">防疫专区</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-footprint"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">日常行程</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
+              <view class="tn-icon-gift"></view>
+            </view>  
+            <view class="tn-color-black tn-text-sm tn-text-center">
+              <text class="tn-text-ellipsis">粤享福利</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs" style="margin-top: -30rpx;"  @click="navTuniaoUI">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/png/280373/1645424144815-assets/web-upload/c4c49dcc-adb1-4976-8558-234b88ae98ff.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    <!-- 方式7 start-->
+    <view class="tn-flex tn-flex-wrap tn-margin health-shadow">
+      <block v-for="(item, index) in icons" :key="index">
+        <view class=" " style="width: 25%;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center  tn-padding-xl">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image :src="item.url" mode='aspectFit'></image>
+            </view>
+            <view class="tn-color-black tn-text-df tn-text-center">
+              <text class="tn-text-ellipsis">{{item.title}}</text>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+    <!-- 方式16 end-->
+    
+    <view class="tn-flex tn-flex-row-between">
+      <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+        推荐博主
+      </view>
+      <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+        <text class="tn-padding-xs">全部</text>
+        <text class="tn-icon-topics"></text>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper2 tn-margin-top-sm" :circular="true"
+      :autoplay="false" :duration="500" @change="resume"> 
+      <swiper-item v-for="(item,index) in resumeList" :key="index" :class="cardCur2==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+        </view> -->
+        <view class="swiper-item" :style="'background-image:url('+ item.url + ');width: 660rpx;height: 100%;background-size: cover;border-radius: 15rpx;'">
+        </view>
+        <view class="swiper-item2 image-banner tn-shadow-blur" :style="'background-image:url('+ item.avatar +');width: 120rpx;height: 120rpx;background-size: cover;'">
+        </view>
+        <view class="swiper-item-text tn-text-shadow-indigo">
+          <view class="tn-text-bold tn-color-blue--dark" style="font-size: 45rpx;">{{item.title}}</view>
+          <view class="tn-color-blue--dark tn-padding-top-sm">{{item.name}}</view>
+          <view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx;">
+            <view class="tn-flex-1 tn-padding-sm tn-margin-right">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-blue">{{item.hot}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-fire"></text>
+                  <text class="tn-padding-left-xs">人气</text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-flex-1 tn-padding-sm tn-margin-left tn-margin-right">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-orange">{{item.share}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-share-circle"></text>
+                  <text class="tn-padding-left-xs">分享</text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-flex-1 tn-padding-sm tn-margin-left">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <view class="">
+                  <view class="tn-text-xxl tn-color-red">{{item.love}}</view>
+                </view>
+                <view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
+                  <text class="tn-icon-like"></text>
+                  <text class="tn-padding-left-xs">爱心</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+<!--    <view class="indication">
+        <block v-for="(item,index) in resumeList" :key="index">
+            <view class="spot" :class="cardCur==index?'active':''"></view>
+        </block>
+    </view> -->
+    
+    
+    <view class="">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          热门项目
+        </view>
+        <view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view>
+      </view>
+      
+      <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
+        <view class="tn-flex-2">
+          
+          <view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/card.jpg')">
+            <view class="image-tuniao1">
+            </view>
+          </view> 
+          
+        </view>
+        <view class="tn-flex-1">
+          <view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </view> 
+          <view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
+            <view class="image-tuniao2">
+            </view>
+          </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-xxl">
+          业务范围
+        </view>
+        <!-- <view class="justify-content-item tn-margin tn-text-xxl tn-color-gray--disabled">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-topics"></text>
+        </view> -->
+      </view>
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view> -->
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
+                <view class="tn-info__item__left__content--data tn-padding-top-xs">
+                {{ item.value }}
+                <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view>
+              </view>
+            </view>
+            <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+    </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_tnnew.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_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: 'TemplateUcharts',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        list: [
+          'uCharts跨全端图表，荣获插件大赛一等奖！',
+          '感谢DCloud以及mpvue团队的鼓励和认可！',
+          '感谢各位开发者的问题反馈和慷慨赞赏！'
+        ],
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: '免费开源',
+          name: '商业合作请联系作者',
+          text: '微信：tnkewo',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno3.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟南南',
+          name: '欢迎加入东东们',
+          text: '如果你也有不错的作品',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno4.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '一起玩转scss',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno5.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟北北',
+          name: '微信号 tnkewo',
+          text: '商业合作请联系作者',
+          url: 'https://resource.tuniaokj.com/images/swiper/adno2.jpg',
+        }],
+        cardCur2: 0,
+        resumeList: [{
+          id: 0,
+          type: 'image',
+          title: '蔡东东',
+          name: '产品总监',
+          hot: '1.29W',
+          share: '216',
+          love: '962',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟北北',
+          name: 'UI设计师',
+          hot: '964',
+          share: '94',
+          love: '186',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '高级前端',
+          hot: '3.26K',
+          share: '146',
+          love: '379',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟南南',
+          name: '项目经理',
+          hot: '6.32K',
+          share: '133',
+          love: '432',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '纯打杂',
+          hot: '8.65K',
+          share: '321',
+          love: '886',
+          avatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
+          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
+        }],
+        
+        icons: [
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647138791884-assets/web-upload/dc660938-35df-4ba0-bb93-1dfc2045f2c0.png",
+            title: "柱状图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647139412104-assets/web-upload/0a9b8682-ba75-48c0-93c0-91e7bbd91b55.png",
+            title: "柱状堆叠图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647139725183-assets/web-upload/c6a007e8-e17f-4b4a-a732-defc758f6b08.png",
+            title: "柱状温度计",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647140031206-assets/web-upload/5b89cb4b-7760-4bc5-9c42-321e8be977d2.png",
+            title: "柱状横屏",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647140327438-assets/web-upload/103ea652-be67-44e8-9487-b0c19d309076.png",
+            title: "柱状滚动条",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647140690779-assets/web-upload/45ad31b3-34a6-4c69-afce-b42345211596.png",
+            title: "柱状标记线",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647140787383-assets/web-upload/61e9cc25-3554-4025-9acc-50ee934af53e.png",
+            title: "折线图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647141432488-assets/web-upload/a8aa8760-c795-49ed-85cd-69e2365d5f9c.png",
+            title: "曲线图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647142379943-assets/web-upload/86725be9-5570-470b-9434-6398fb2f16d9.png",
+            title: "折线滚动条",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647142796046-assets/web-upload/d9541d32-3e53-4d3c-8ceb-e4962e532883.png",
+            title: "曲线横滚动",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647142894339-assets/web-upload/5a9dd8d0-fda5-4f1e-a596-a90082abfa42.png",
+            title: "饼状图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647146724667-assets/web-upload/fc2be2b3-eb10-4c99-b12c-c9f6ef1ef648.png",
+            title: "玫瑰图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647142981691-assets/web-upload/831c2d86-2834-4a23-a2ef-e4596051bff5.png",
+            title: "圆环图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647147679340-assets/web-upload/0cbb4c33-80f7-4eff-82d4-c2ac18b166e4.png",
+            title: "圆环进度条",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647150225993-assets/web-upload/994fbc32-a193-454a-90b2-be7a3a702b83.png",
+            title: "圆弧进度条",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647150734710-assets/web-upload/1eeb9fb3-3f5f-4971-8a19-65867217e5bf.png",
+            title: "区域图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647150966872-assets/web-upload/4009704d-e4e7-4df4-992d-e68d99711997.png",
+            title: "混合图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647151102859-assets/web-upload/872a9716-3e60-4406-9597-111b4cccaac1.png",
+            title: "K线图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647153742104-assets/web-upload/770e4a06-481b-489d-ad4f-9c77d4ac04ea.png",
+            title: "漏斗图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647154447211-assets/web-upload/91b029d1-1088-4ffa-8cf6-80e9388a575c.png",
+            title: "时间轴",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647152261598-assets/web-upload/ffde98fa-d122-43b0-a93a-a27c64640ece.png",
+            title: "雷达图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647165288318-assets/web-upload/be2cad27-250b-4bf4-92cb-26c12cb98476.png",
+            title: "词云图",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647152261570-assets/web-upload/1d036592-079a-4aca-8dd5-1369c7c94f83.png",
+            title: "仪表盘",
+          },
+          {
+            url: "https://cdn.nlark.com/yuque/0/2022/png/280373/1647154285224-assets/web-upload/9bf3bdfc-2f65-4ecc-bfdf-4e3bcf9ad9f1.png",
+            title: "地图",
+          }
+        ],
+
+        tuniaoData: [
+          {
+            title: 'UI设计',
+            icon: 'image-text-fill',
+            color: 'red',
+            value: '前往咨询'
+          },
+          {
+            title: '小程序',
+            icon: 'data-fill',
+            color: 'orange',
+            value: '前往咨询'
+          },
+          {
+            title: '网站开发',
+            icon: 'statistics-fill',
+            color: 'purple',
+            value: '前往咨询'
+          },
+          {
+            title: '其他业务',
+            icon: 'bankcard-fill',
+            color: 'blue',
+            value: '前往咨询'
+          }
+        ],
+        navBarRectInfo: {},
+        navBarChangebaseLineHeight: 0,
+        navBarStyle: {
+          color:'#FFFFFF',
+          opacity: 1,
+          display: 'flex'
+        },
+        navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
+        activeBgAnimation: {}
+      }
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.initNavBarRectInfo()
+      })
+    },
+    onPageScroll() {
+      this.updateNavBarRectInfo()
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // resume
+      resume(e) {
+        this.cardCur2 = e.detail.current
+      },
+      // 初始化导航栏信息
+      async initNavBarRectInfo() {
+        const navBarRectInfo = await this._tGetRect('#navbar')
+        const pageTipsRectInfo = await this._tGetRect('#page_tips')
+        // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
+        if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
+          setTimeout(() => {
+            this.initNavBarRectInfo()
+          }, 10)
+          return
+        }
+        this.navBarRectInfo = {
+          top: navBarRectInfo.top
+        }
+        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
+      },
+      // 更新导航栏信息
+      updateNavBarRectInfo() {
+        this._tGetRect('#page_tips').then((res) => {
+          const top = res?.top || 0
+          if (!top) {
+            return
+          }
+          const differHeight = top - this.navBarRectInfo.top
+          const opacity = differHeight / this.navBarChangebaseLineHeight
+          if (opacity < 0) {
+            // this.navBarStyle.opacity = 1
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`
+          } else {
+            // this.navBarStyle.opacity = 1 - opacity
+            // this.navBarStyle.display = 'flex'
+            this.navBarStyle.color = 'rgba(255, 255, 255, 1)'
+            this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`
+          }
+          
+          // console.log(top, differHeight, opacity);
+        })
+      },
+      // 跳转到图鸟UI
+      navTuniaoUI() {
+        uni.navigateToMiniProgram({
+          appId: 'wxf3d81a452b88ff4b'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-ucharts {
+  }
+  
+  .icon-function {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 5rpx;
+      margin-top: -420rpx;
+  }
+
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 600rpx !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;
+    opacity: 0;
+  }
+  
+  .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 */
+  .card-swiper2 {
+    height: 420rpx !important;
+    overflow: hidden;
+  }
+    
+  .card-swiper2 swiper-item {
+    width: 680rpx !important;
+    left: 30rpx;
+    box-sizing: border-box;
+    overflow: initial;
+    padding: 0 0rpx 40rpx 0;
+  }
+    
+  .card-swiper2 swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    // transform: scale(1);
+    // transition: transform 0.2s ease-out 0s;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item {
+    // transform: scale(1);
+  }
+  
+  .card-swiper2 swiper-item .swiper-item2 {
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 50%;
+    transform: translate(480rpx, -300rpx) scale(0.9);
+    transition: transform 0.3s ease-out 0s;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item2 {
+    transform: translate(510rpx, -320rpx) scale(0.9);
+  }
+
+  .card-swiper2 swiper-item .swiper-item-text {
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 10rpx;
+    transform: translate(20rpx, -420rpx) scale(0.8);
+    transition: transform 0.6s ease-out 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper2 swiper-item.cur .swiper-item-text {
+    transform: translate(20rpx, -450rpx) scale(0.9);
+  }
+  
+
+  
+  /* 底部tabbar假阴影 start*/
+  .bg-tabbar-shadow{
+    background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
+    position: fixed;
+    bottom: 0;
+    height: 450rpx;
+    width: 100vw;
+    z-index: -1;
+  }
+  
+  /* 图标容器15 start */
+ .icon15 {
+   &__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: 0rpx;
+       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%;
+       }
+     }
+   }
+ }
+  
+  /* 图标容器7 start */
+      .icon7 {
+        &__item {
+          width: 30%;
+          background-color: #FFFFFF;
+          border-radius: 10rpx;
+          padding: 10rpx;
+          margin: 20rpx 10rpx;
+          transform: scale(1);
+          transition: transform 0.3s linear;
+          transform-origin: center center;
+          
+          &--icon {
+            width: 90rpx;
+            height: 90rpx;
+            font-size: 60rpx;
+            border-radius: 0;
+            margin-bottom: 18rpx;
+            position: relative;
+            z-index: 1;
+          }
+        }
+      }
+    
+  /* 图标容器9 start */
+    .icon9 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          font-size: 50rpx;
+          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_bg6.png);
+          }
+        }
+      }
+    }
+  
+  
+  /* 阴影 start*/
+  .health-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  /* 自定义导航栏内容 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;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+
+  /* 热门图片 start*/
+  .image-tuniao1{
+    padding: 164rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao2{
+    padding: 75rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-tuniao3{
+    padding: 90rpx 0rpx;
+    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;
+  }
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  
+  
+  /* 业务展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      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/2.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          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_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 25rpx;          
+          
+          &--data {
+            color: rgba(255,255,255,0.5);
+            margin-top: 5rpx;
+            // font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0rpx;
+          top: 50rpx;
+          font-size: 100rpx;
+          width: 108rpx;
+          height: 108rpx;
+          text-align: center;
+          line-height: 60rpx;
+          opacity: 0.15;  
+        }
+      }
+    }
+  }
+  /* 业务展示 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>
diff --git a/vipPage/home/year/year.vue b/vipPage/home/year/year.vue
new file mode 100644
index 0000000..e261fda
--- /dev/null
+++ b/vipPage/home/year/year.vue
@@ -0,0 +1,692 @@
+<template>
+  <view class="template-year 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <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/logo/logo2.png')">
+            <view class="logo-image">
+            </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>
+    </tn-nav-bar>
+    
+    <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          小脑虎，新年快乐
+        </view>
+        <view class="justify-content-item tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-zodiac-hu"></text>
+        </view>
+      </view>
+    </view>
+    
+    
+    <swiper class="card-swiper tn-margin tn-shadow-purplered" :current="cardCur" :circular="true" vertical="true"
+      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"  style="margin-top: 30rpx;"> 
+      <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 tn-text-center tn-padding-top-sm tn-shadow-blur" :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
+              <text class="tn-text-bold">{{item.text}}</text>
+            </view>
+        </block>
+    </view>
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs tn-margin-top-xl">
+      <view class=" " style="width: 100%;">
+        <view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-cap.png')">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    
+    <view class="tn-margin-top">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-1">
+          <text class="tn-icon-lucky-money tn-padding-right-sm"></text>
+          新 / 年 / 快 / 乐
+          <text class="tn-icon-lucky-money tn-padding-left-sm"></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-pic" :style="'background-image:url(' + item.mainImage + ')'">
+              <view class="image-year">
+              </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 tn-icon-flower"></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-->
+    
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-home-vertical-fill tn-color-purplered">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">发现</view>
+      </view>
+      <view class="action">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
+        </view>
+        <view class="tn-color-gray">发布</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">灯谜</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </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: 'TemplateYear',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '一起愉快的玩耍叭',
+          text: '恭 · 跨年',
+          url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          name: '如果你也有不错的作品',
+          text: '喜 · 祝福',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          name: '用最少的代码做最骚的效果',
+          text: '发 · 红包',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '商业合作请联系作者',
+          text: '财 · 红庆',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          name: '我们都是好孩子',
+          text: '虎 · 生威',
+          url: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg',
+        }],
+        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: 999,
+            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
+          }
+        ]
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // swiper点击事件
+      handleSwiperClick(index) {
+        this.cardCur = index
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  /* 轮播文案在外 start*/
+  .card-swiper {
+        height: 650rpx !important;
+        width: 500rpx;
+        border-radius: 20rpx;
+        overflow: hidden;
+      }
+    
+      .card-swiper swiper-item {
+        height: 650rpx;
+        width: 500rpx;
+        box-sizing: border-box;
+        padding: 0rpx;
+        border-radius: 20rpx;
+        overflow: hidden;
+      }
+    
+      .card-swiper swiper-item .swiper-item {
+        width: 100%;
+        display: block;
+        height: 100%;
+        border-radius: 0rpx;
+        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:inline-block;
+        flex-direction:row;
+        align-items:center;
+        justify-content:center;
+      }
+      
+      .spot{
+        color: #E83A30;
+        background-color: #FAD5E8;
+        opacity: 1;
+        width: 160rpx;
+        height: 80rpx;
+        border-radius: 20rpx;
+        margin: 20rpx -30rpx !important;
+        left: 590rpx;
+        right: 0;
+        top: -700rpx;
+        position: relative;
+      }
+      
+      .spot.active{
+        color: #FFFFFF;
+        opacity: 1;
+        background-color: #E83A30;
+      }
+      /* 标题 start */
+      .nav_title {
+        -webkit-background-clip: text;
+        color: transparent;
+        
+        &--wrap {
+          position: relative;
+          display: flex;
+          height: 120rpx;
+          font-size: 46rpx;
+          align-items: center;
+          justify-content: center;
+          font-weight: bold;
+          background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+          background-size: cover;
+        }
+      }
+      /* 标题 end */
+      
+      /* 文章内容 start*/
+      .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: #82B2FF;
+              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-year{
+        padding: 150rpx 0rpx;
+        font-size: 16rpx;
+        font-weight: 300;
+        position: relative;
+      }
+      .image-capsule{
+        padding: 100rpx 0rpx;
+        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: 20rpx 20rpx 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;
+      }
+      
+      .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: -60rpx auto 20rpx;
+        text-align: center;
+        font-size: 52rpx;
+        line-height: 90rpx;
+      	background-color: #E72F8C;
+        width: 90rpx !important;
+        height: 90rpx !important;
+        overflow: hidden;
+        border-radius: 50%;
+        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
+      }
+      
+      .tabbar .action .bar-circle image {
+        width: 60rpx;
+      	height: 60rpx;
+      	display: inline-block;
+        margin: 15rpx auto 15rpx;
+      }
+      
+
+</style>
diff --git a/vipPage/life/active/active.vue b/vipPage/life/active/active.vue
new file mode 100644
index 0000000..e6ec060
--- /dev/null
+++ b/vipPage/life/active/active.vue
@@ -0,0 +1,175 @@
+<template>
+  <view class="template-swiper">
+    <!-- 顶部自定义导航 -->
+    <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 time" :current="cardCur" :circular="true" :vertical="false" :autoplay="false" duration="500" interval="5000" @change="cardSwiper" :style="{height: currentImageHeight + 'rpx'}">
+      <swiper-item v-for="(item,index) in swiperList" :key="index">
+        <image :src="item.url" @load="onImageLoad(index, $event)" mode="widthFix"></image>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 为了做内容过渡动画，图鸟加了骚操作在这里 -->
+    <view class="time" style="position: absolute;top:0;width: 100%;" :style="{marginTop: currentImageHeight + 20 + 'rpx'}">
+      <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-padding tn-margin-top">
+        图鸟swiper自适应高度+完美终稿 </br>
+        高÷宽x750=换算后的高度（即宽限制为750，高为）: </br>
+        {{ currentImageHeight }}
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'banner',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        swiperList: [
+          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x1.jpg' },
+          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg' },
+          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x3.jpg' },
+          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x7.jpg' },
+          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x13.jpg' },
+        ],
+        imageHeights: [], // 存储每张图片的高度
+        imageWidths: [], // 存储每张图片的宽度
+        cardCur: 0, // 当前显示的图片索引
+        currentImageHeight: 750 ,// 当前显示的图片高度
+        currentImageWidth: 0 // 当前显示的图片宽度
+      };
+    },
+    methods: {
+      onImageLoad(index, e) {
+        // 获取图片的实际高度并存储
+        const imageHeight = e.detail.height;
+        const imageWidth = e.detail.width;
+        this.$set(this.imageHeights, index, imageHeight);
+        this.$set(this.imageWidths, index, imageWidth);
+        
+        // 如果当前加载的图片是当前显示的图片，则更新 currentImageHeight
+        if (index === this.cardCur) {
+          this.currentImageHeight = imageHeight * 750 / imageWidth;
+        }
+      },
+      cardSwiper(e) {
+        // 获取当前显示的图片索引
+        const newIndex = e.detail.current;
+        this.cardCur = newIndex;
+        
+        // 更新当前显示的图片高度
+        this.currentImageHeight = this.imageHeights[newIndex] * 750 / this.imageWidths[newIndex] || 0;
+      }
+    },
+    mounted() {
+      // 初始化 imageHeights/imageWidths 数组
+      this.swiperList.forEach((_, index) => {
+        this.$set(this.imageHeights, index, 0);
+        this.$set(this.imageWidths, index, 0);
+        
+      });
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .template-swiper{
+  }
+  /* 胶囊*/
+  .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;
+    }
+  }
+  
+  .card-swiper {
+    width: 100%;
+  }
+  
+  image {
+    display: block;
+    width: 100vw;
+    heigh: 750rpx;
+  }
+  
+  /* 轮播指示点 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: #000000;
+    opacity: 0.3;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0.8;
+    width: 20rpx;
+    background-color: #000000;
+  }
+  
+  .time{
+    transition: all 0.6s ease-in-out;
+    overflow: hidden;
+  }
+</style>
diff --git a/vipPage/life/bless/bless.vue b/vipPage/life/bless/bless.vue
new file mode 100644
index 0000000..1268954
--- /dev/null
+++ b/vipPage/life/bless/bless.vue
@@ -0,0 +1,664 @@
+<template>
+  <view class="template-bless 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="login__bg login__bg--top">
+      <image class="bg" src="https://resource.tuniaokj.com/images/bless/bless-top.jpg" mode="widthFix"></image>
+    </view>
+    <view class="login__bg login__bg--top">
+      <image class="rocket rocket-sussuspension" src="https://resource.tuniaokj.com/images/bless/bless-fish.png" mode="widthFix"></image>
+    </view>
+    
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="true" duration="500" interval="18000" previous-margin="185rpx" next-margin="185rpx" @change="cardSwiper"  style="padding-top: 15vh;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
+        </view> -->
+        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </view> -->
+        
+        <view class="tnphone-black-min swiper-item  wow fadeInLeft2">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <!-- <view class="head">
+        			  <text>{{item.name}}</text>
+        		  </view> -->
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+        		  <!-- <view class="area-l">
+        			  <view class="">
+                  <text class="tn-icon-all"></text>
+                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
+        			  </view>
+        		  </view>
+        		  <view class="area-r">
+        			  <view class="">
+                  <text class="tn-icon-light"></text>
+                  <text class="tn-icon-time tn-padding-left-xs"></text>
+                </view>
+        		  </view> -->
+              <!-- <div class="talk"></div> -->
+              
+              <view class="image-banner">
+                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+        
+        <view class="swiper-item-text tn-text-center">
+          <view class="tn-text-xl tn-text-bold tn-padding-top-xs">{{item.name}}</view>
+        </view>
+        
+      </swiper-item>
+    </swiper>
+    
+   <view class="tn-text-center year-text">
+      <view class="tn-text-xxl tn-text-bold">
+        <text class="">虎年好，</text>
+        图鸟小伙伴
+      </view>
+    </view>
+    
+
+    <!-- 底部背景图片-->
+    <view class="login__bg login__bg--bottom">
+      <image src="https://resource.tuniaokj.com/images/bless/bless-bottom.jpg" mode="widthFix"></image>
+    </view>
+    
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      
+      
+      <view class="action" @click="navTuniaoUI">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view> -->
+          <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="navTuniaoUI">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover tn-color-gray--dark">
+          </view>  -->        
+          <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="navTuniaoHome">
+        <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/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="navTuniaoUI">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text tn-color-gray--dark">
+          </view> -->
+          <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="navTuniaoUI">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateBless',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '新年快乐，恭喜发财',
+          url: 'https://resource.tuniaokj.com/images/bless/bless-1.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }, {
+          id: 1,
+          type: 'image',
+          name: '年年有福，开门大红',
+          url: 'https://resource.tuniaokj.com/images/bless/bless-2.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d2.png'
+        }, {
+          id: 2,
+          type: 'image',
+          name: '眼疾手快，票子多多',
+          url: 'https://resource.tuniaokj.com/images/bless/bless-3.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d3.png'
+        }, {
+          id: 3,
+          type: 'image',
+          name: '如虎添亿，其乐融融',
+          url: 'https://resource.tuniaokj.com/images/bless/bless-4.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
+        }],
+      }
+    },
+    onLoad() {
+      this.$tn.mpShare.title = '????????您有一条新年祝福待签收'
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // 跳转到
+      navTuniaoUI(e) {
+        wx.vibrateShort();
+      },
+      // 跳转到
+      navTuniaoHome(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-browser{
+    margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
+  }
+  
+  /* 祝福 start*/
+  .year-text{
+    position: fixed;
+    bottom: 15vh;
+    margin: 0 auto;
+    right:0rpx;
+    left:0rpx;
+  }
+  
+  /* .tnphone-black-min 细边框*/
+  .tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; margin: 70rpx auto; cursor: default; position: relative}
+  .tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
+  .tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
+  .tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
+  .tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+ 
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 90vh !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 380rpx !important;
+    // left: 185rpx;
+    box-sizing: border-box;
+    padding: 0rpx 0rpx 90rpx 0rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    display: block;
+    transform: scale(0.7);
+    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;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: 8vh;
+    width: 100%;
+    display: block;
+    transform: scale(0.7, 0.7);
+    transition: all 0.4s ease 0s;
+    overflow: hidden;
+    opacity: 0;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    transform: scale(1);
+    transition: all 0.4s ease 0s;
+    opacity: 1;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 730rpx;
+    // border: 1rpx solid red;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  
+    /* 轮播堆叠差 start */
+    // .card-swiper {
+    //   height: 500rpx !important;
+    // }
+      
+    // .card-swiper swiper-item {
+    //   width: 250rpx !important;
+    //   left: 250rpx;
+    //   box-sizing: border-box;
+    //   padding: 100rpx 0rpx 100rpx 0rpx;
+    //   overflow: initial;
+    // }
+      
+    // .card-swiper swiper-item .swiper-item {
+    //   width: 100%;
+    //   display: block;
+    //   height: 200rpx;
+    //   border-radius: 0rpx;
+    //   transform: translate(0rpx, 0rpx) scale(1.5);
+    //   transition: all 0.2s ease-in 0s;
+    //   overflow: hidden;
+    //   border: 5rpx solid red;
+    // }
+      
+    // .card-swiper swiper-item.cur .swiper-item {
+    //   transform: translate(0rpx, 0rpx) scale(2);
+    //   transition: all 0.2s ease-in 0s;
+    //   border: 5rpx solid pink;
+    // }
+    
+    // .image-banner{
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    // }
+    // .image-banner image{
+    //   width: 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: #FFF;
+    //   opacity: 0.4;
+    //   width: 10rpx;
+    //   height: 10rpx;
+    //   border-radius: 20rpx;
+    //   margin: 0 8rpx !important;
+    //   left: -270rpx;
+    //   top: -180rpx;
+    //   position: relative;
+    // }
+    
+    // .spot.active{
+    //   opacity: 1;
+    //   width: 30rpx;
+    //   background-color: #FFF;
+    // }
+    
+    // .swiper-item1 {
+    //   z-index: -1;
+      
+    //   &--active {
+    //     z-index: 10;
+    //   }
+    // }
+    
+    
+  /* 悬浮 */
+  .rocket-sussuspension{
+    animation: tiger 3s ease-in-out infinite;
+  }
+  
+  @keyframes tiger {
+    0%, 100% {
+      transform: translate(0 , 0);
+    }
+    50% {
+      transform: translate(-0.8rem , 1rem);
+    }
+  }
+    
+  .login {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+    
+  /* 背景图片 start */
+    &__bg {
+      z-index: -1;
+      position: fixed;
+      
+      &--top {
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        
+        .bg {
+          width: 750rpx;
+          will-change: transform;
+        }
+        .rocket {
+          margin: 50rpx 30%;
+          width: 300rpx;
+          will-change: transform;
+        }
+      }
+      
+      &--bottom {
+        bottom: -10rpx;
+        left: 0;
+        right: 0;
+        width: 100%;
+        // height: 144px;
+        // margin-bottom: env(safe-area-inset-bottom);
+        
+        image {
+          width: 750rpx;
+          will-change: transform;
+        }
+      }
+    }
+  }
+  /* 背景图片 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/arc2.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>
diff --git a/vipPage/life/color/color.vue b/vipPage/life/color/color.vue
new file mode 100644
index 0000000..122704c
--- /dev/null
+++ b/vipPage/life/color/color.vue
@@ -0,0 +1,160 @@
+<template>
+  <view class="template-color 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>
+    <!-- 图鸟_LEE，原创，勿喷，上线于2022年3月，开源于2023年9月，晚了1.5年才开源而已，此最新版本优化了界面 -->
+    <view class="content" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}">
+      <view class="dialog">
+        <view id="colorBg" class="colorBg" @touchstart="startTouch" @touchmove="moveIng"
+          @touchend="endTouch">
+          <view class="roundBuff" :catchtouchmove="true" @c.stop="()=>{}" :style="{transform: `rotate(${degrees}deg)`}"></view>
+          <view class="colorPan">HSL：{{degrees.toFixed(0)}}</view>
+        </view>
+        <!-- 按钮 -->
+        <view class="tn-flex tn-padding-top-xl">
+          <view class="tn-flex-1 justify-content-item tn-margin-left tn-margin-right-xs tn-text-center tn-bg-white" style="border-radius: 100rpx;">
+            <tn-button backgroundColor="#4B98FE " padding="39rpx 0" width="100%" :fontSize="28" :plain="true" fontColor="#4B98FE" shape="round">
+              <text class="">取 消</text>
+            </tn-button>
+          </view>
+          <view class="tn-flex-1 justify-content-item tn-margin-right tn-margin-left-xs tn-text-center">
+            <tn-button backgroundColor="#4B98FE " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round">
+              <text class="">确 认</text>
+            </tn-button>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateColor',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        pointerShow: true,
+				colorPanWidth: 20,
+				colorPanRadius: 0,
+				pointerBox: {},
+				degrees: 0
+      }
+    },
+    mounted() {
+			uni.getSystemInfo({
+				success: (res) => {
+					uni.createSelectorQuery().select('#colorBg').boundingClientRect((rect) => {
+						this.pointerBox = rect
+					}).exec()
+					this.colorPanRadius = res.screenWidth * 0.4
+				}
+			})
+		},
+    methods: {
+      startTouch(e) {
+				const {
+					pageX,
+					pageY
+				} = e.touches[0]
+				this.rotatePointer(pageX, pageY)
+			},
+			endTouch(e) {
+				const {
+					pageX,
+					pageY
+				} = e.changedTouches[0]
+				this.rotatePointer(pageX, pageY)
+			},
+			moveIng(e) {
+				const {
+					pageX,
+					pageY
+				} = e.touches[0]
+				this.rotatePointer(pageX, pageY)
+			},
+			rotatePointer(pageX = 0, pageY = 0) {
+				const {
+					pointerBox,
+					colorPanWidth
+				} = this
+				const mouseX = pageX - colorPanWidth
+				const mouseY = pageY - colorPanWidth
+				var centerY = pointerBox.top + (pointerBox.height / 2) - 0,
+					centerX = pointerBox.left + (pointerBox.height / 2) - 0,
+					radians = Math.atan2(mouseX - centerX, mouseY - centerY)
+				this.degrees = (radians * (180 / Math.PI) * -1) + 180;
+			}
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .dialog {
+  		display: block;
+  		border-radius: 30rpx;
+  		// background-color: #303030;
+  		margin: 20rpx;
+  		padding: 30rpx;
+  	}
+  
+  	.flex {
+  		display: flex;
+  		justify-content: space-between;
+  	}
+  
+  	.colorBg {
+  		width: 80vw;
+  		height: 80vw;
+  		margin: 5vw;
+  		background: conic-gradient(red,
+  				yellow,
+  				lime,
+  				aqua,
+  				blue,
+  				fuchsia,
+  				red);
+  		border-radius: 50%;
+  		position: relative;
+  		display: flex;
+  		justify-content: center;
+  		align-items: center;
+  	}
+  
+  	.roundBuff {
+  		width: 55vw;
+  		height: 55vw;
+  		-webkit-transform-origin: center 50%;
+  		transform-origin: center 50%;
+  		background: #FFFFFF;
+  		border-radius: 50%;
+  	}
+  	.roundBuff::before {
+        content: "";
+        width: 15px;
+        height: 15px;
+  	    background: #FFFFFF;
+        border: solid #FFFFFF;
+        border-width: 10px 10px 0 0;
+        transform: translate(-50%, -50%) rotate(-45deg);
+        position: absolute;
+        left: 50%;
+        top: 2%;
+  }
+  
+  	.colorPan {
+  		position: absolute;
+  		color: #080808;
+      font-size: 42rpx;
+  	}
+</style>
diff --git a/vipPage/life/guide/guide.vue b/vipPage/life/guide/guide.vue
new file mode 100644
index 0000000..dc74501
--- /dev/null
+++ b/vipPage/life/guide/guide.vue
@@ -0,0 +1,180 @@
+<template>
+  <view class="template-guide">
+    <!-- 顶部自定义导航 -->
+    <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="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/swiper/fullbg3.jpg' mode='heightFix' class='backgroud-image'></image>
+    </view>
+    <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="heightFix" v-if="item.type=='image'" ></image>
+        </view>
+        <view class="swiper-item-text tn-text-center">
+          <view class="tn-text-xxl tn-text-bold">{{item.text}}</view>
+          <view class="tn-text-xl tn-text-bold tn-padding-top-xs">{{item.name}}</view>
+        </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>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateGuide',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '总有你想不到的创意',
+          text: '海量分享',
+          url: 'https://resource.tuniaokj.com/images/swiper/c4d1.png',
+        }, {
+          id: 1,
+          type: 'image',
+          name: '寻找一起成长的小伙伴',
+          text: '愉快玩耍',
+          url: 'https://resource.tuniaokj.com/images/swiper/c4d2.png',
+        }, {
+          id: 2,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://resource.tuniaokj.com/images/swiper/c4d3.png',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '商业合作请联系作者',
+          text: '免费开源',
+          url: 'https://resource.tuniaokj.com/images/swiper/c4d4.png',
+        }],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+    /* 顶部背景图 start */
+    .top-backgroup {
+      position: fixed;
+      height: 100vh;
+      z-index: -1;
+    
+      .backgroud-image {
+        width: 100%;
+        height: 100vh;
+        // z-index: -1;
+      }
+    }
+  
+  .card-swiper {
+    height: 100vh !important;
+  }
+    
+  .card-swiper swiper-item {
+    width: 750rpx !important;
+    left: 0rpx;
+    box-sizing: border-box;
+    overflow: initial;
+  }
+    
+  .card-swiper swiper-item .swiper-item {
+    margin-top: 20vh;
+    width: 100%;
+    display: block;
+    height: 100vh;
+    border-radius: 0rpx;
+    transform: translate(180rpx, 0rpx) scale(0.8);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+    opacity: 1;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: translate(180rpx, 0rpx) scale(1, 1);
+    transition: all 0.2s ease-in 0s;
+    opacity: 1;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -50vh;
+    width: 100%;
+    // height: 100%;
+    display: block;
+    border-radius: 10rpx;
+    transform: scale(0.7, 0.7);
+    transition: all 0.4s ease 0s;
+    overflow: hidden;
+    opacity: 1;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    padding-left: 30rpx;
+    transform: scale(1);
+    transition: all 0.4s ease 0s;
+    opacity: 1;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: fixed;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #E6E6E6;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    left: 0rpx;
+    top: -180rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    width: 40rpx;
+    background-color: #FFA726;
+  }
+</style>
diff --git a/vipPage/life/light/light.vue b/vipPage/life/light/light.vue
new file mode 100644
index 0000000..97e9a1a
--- /dev/null
+++ b/vipPage/life/light/light.vue
@@ -0,0 +1,878 @@
+<template>
+  <view class="template-home">
+    <!-- 顶部自定义导航 -->
+    <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-flex tn-flex-row-center dd-camera" @click="open">
+      <camera device-position="front" flash="off" @error="error" style="width: 330rpx; height: 440rpx;border-radius: 1000px;overflow: hidden;background-color: #FFFFFF00;border: 20rpx solid #FFFFFF1A;">
+      </camera>
+    </view>
+    
+    <!-- 套娃式轮播 -->
+    <swiper class="card-swiper" :current="cardCur" :circular="false" :vertical="true" :autoplay="false" duration="500" interval="5000"
+      @change="cardSwiper">
+      
+      <!-- 纵向滚动的轮播-单色补光灯 -->
+      <swiper-item>
+        <view class="" style="height: 100vh;width: 100vw;">
+          <!-- 横向滚动的轮播-套娃 -->
+          <swiper class="img-swiper" :current="imgCur" :circular="true" :autoplay="false" duration="500" interval="12000" @change="imgSwiper">
+            <swiper-item v-for="(item,index) in swiperList2" :key="index" :class="imgCur==index?'cur':''">
+              <view class="swiper-item" :style="'background-color: '+ item.color +''">
+              </view>
+            </swiper-item>
+          </swiper>
+          
+          <view class="" style="position: absolute;top: 380rpx;width:100vw;z-index: 9999 !important;opacity: 0.3;">
+            <view class="tn-flex tn-flex-row-between tn-color-white tn-text-xl">
+              <view class="tn-icon-left-double" @click="prevSlide" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
+              <view class="tn-icon-right-double" @click="nextSlide" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
+            </view>
+          </view>
+          
+        </view>
+      </swiper-item>
+      
+      <!-- 纵向滚动的轮播-渐变补光灯 -->
+      <swiper-item>
+        <view class="" style="height: 100vh;width: 100vw;">
+          <!-- 横向滚动的轮播-套娃 -->
+          <swiper class="img-swiper" :current="linearCur" :circular="true" :autoplay="false" duration="500" interval="12000" @change="linearSwiper">
+            <swiper-item v-for="(item,index) in swiperList3" :key="index" :class="linearCur==index?'cur':''">
+              <view class="swiper-item" :style="'background:linear-gradient( 0deg,' + item.color + ',' + item.color2 + ')'">
+              </view>
+            </swiper-item>
+          </swiper>
+          
+          <view class="" style="position: absolute;top: 380rpx;width:100vw;z-index: 9999 !important;opacity: 0.3;">
+            <view class="tn-flex tn-flex-row-between tn-color-white tn-text-xl">
+              <view class="tn-icon-left-double" @click="prevSlideLinear" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
+              <view class="tn-icon-right-double" @click="nextSlideLinear" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
+            </view>
+          </view>
+          
+        </view>
+      </swiper-item>
+      
+      <!-- 纵向滚动的轮播-随机单色补光灯 -->
+      <swiper-item>
+        <view class="swiper-item random-color">
+        </view>
+      </swiper-item>
+      
+      <!-- 纵向滚动的轮播-渐变补光灯 -->
+      <swiper-item>
+        <view class="swiper-item gradient-color">
+        </view>
+      </swiper-item>
+    
+      <!-- 纵向滚动的轮播-循环输出 -->
+      <!-- <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <view class="swiper-item gradient-color">
+        </view>
+        
+        <view class="swiper-item-text">
+          <view class="tn-color-white tn-text-xxl tn-text-bold tn-text-center">
+            <text class="tn-padding-right-xs" :class="['tn-icon-' + item.icon]"></text>
+            <text class="">{{item.user}}</text>
+          </view>
+          <view class="tn-color-white tn-padding-top-xs tn-text-df clamp-text-2 tn-text-center tn-margin-top-sm"
+            style="opacity: 0.8;">
+            {{item.title}}
+          </view>
+        </view>
+      </swiper-item> -->
+    
+      
+    
+    </swiper>
+    
+    <!-- 功能按钮 -->
+    <view class="" style="position: fixed;bottom: 0;z-index: 999 !important;width: 100vw;">
+      <view class="tn-flex tn-flex-row-around tn-flex-col-center">
+        
+        <!-- 权限-->
+        <!-- <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <view class="tn-icon-camera-fill">
+              </view>
+            </view>  
+          </view>
+        </view> -->
+        
+        <!-- 最新图片，这里可以加一个预览最新图片-->
+        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="previewNewImage">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="light-pic" :style="'background-image:url(' + src + ')'">
+              <view class="light-image">
+              </view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- <view class="" v-if="showContentTips===true" style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF00;" @click="tn('/minePages/help')">
+          <view class="" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="margin: 10rpx">
+              <view class="tn-icon-help-fill">
+              </view>
+            </view>  
+          </view>
+        </view>
+        <view class="" v-else style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF40;" @click="takePhoto">
+          <view class="tn-bg-white" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
+          </view>
+        </view> -->
+        
+        <view class="" style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF40;" @click="takePhoto">
+          <view class="tn-bg-white" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
+          </view>
+        </view>
+        
+        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tipsClick">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <view class="tn-icon-menu-circle-fill time" :class="[showContentTips ? 'dd-rotate' : '']">
+              </view>
+            </view>  
+          </view>
+        </view>
+        
+      </view>
+      
+      <view class="tn-tabbar-height"></view>
+      
+    </view>
+    
+    <!-- 弹窗内容 -->
+    <view class="dd-glass" style="position: absolute;bottom: 0;border-radius: 40rpx 40rpx 0 0;">
+      <!-- :style="{'height': showContentTips ? `calc( 0 - 116px - ${vuex_custom_bar_height}px)`: `calc( 100vh - 340px - ${vuex_custom_bar_height}px)`}" -->
+      <view class="time" :class="[showContentTips ? 'box-cur' : 'box']">
+        <view class="" style="position: absolute;top: -40rpx;width: 100vw;">
+          <view class="tn-flex tn-flex-row-center" @click="tipsClick" style="background-color: #FF565600;">
+            <view class="tn-icon-down tn-color-white" style="padding-top: 60rpx;">
+            </view>
+          </view>
+        </view>
+      
+        <view class="tn-flex" style="padding-top: 40rpx;">
+          <block v-for="(item,index) in swiperList" :key="index">
+            <view class="tn-text-center tn-margin tn-padding-sm"
+              :class="cardCur==index?'active-bg':''" @tap.stop="handleSwiperClick(index)">
+              <view class="tn-text-xxl tn-color-white" :class="'tn-icon-'+ item.icon + ';' "></view>
+            </view>
+          </block>
+        </view>
+        
+          
+        <!-- 套娃式轮播-菜单 -->
+        <swiper class="" :current="cardCur" :circular="false" :vertical="false" :autoplay="false" duration="500" interval="5000"
+          @change="cardSwiper" style="height: 320rpx;width: 750rpx;">
+          
+          <swiper-item>
+            <view class="tn-flex tn-flex-wrap">
+              <block v-for="(item,index) in swiperList2" :key="index">
+                <view class="tn-text-center tn-padding" @tap.stop="handleSwiperClick2(index)">
+                  <view :class="imgCur==index?'active':''" :style="'background-color: '+ item.color +''" style="width: 90rpx;height: 56rpx;border-radius: 10rpx;"></view>
+                  <view class="tn-text-center tn-text-sm tn-padding-top-xs tn-color-white">
+                    {{ item.name }}
+                  </view>
+                </view>
+                
+              </block>
+            </view>
+          </swiper-item>
+          
+          <swiper-item>
+            <view class="tn-flex tn-flex-wrap">
+              <block v-for="(item,index) in swiperList3" :key="index">
+                <view class="tn-text-center tn-padding" @tap.stop="handleSwiperClick3(index)">
+                  <view :class="linearCur==index?'active':''" :style="'background:linear-gradient( 0deg,' + item.color + ',' + item.color2 + ')'" style="width: 90rpx;height: 56rpx;border-radius: 10rpx;"></view>
+                  <view class="tn-text-center tn-text-sm tn-padding-top-xs tn-color-white">
+                    {{ item.name }}
+                  </view>
+                </view>
+                
+              </block>
+            </view>
+          </swiper-item>
+          
+          <swiper-item>
+            <view class="tn-color-white tn-padding tn-text-center tn-margin-top">
+              随机单色补光灯
+            </view>
+            <view class="tn-color-white tn-text-center">
+              正在随机变化
+            </view>
+          </swiper-item>
+          <swiper-item>
+            <view class="tn-color-white tn-padding tn-text-center tn-margin-top">
+              随机渐变补光灯
+            </view>
+            <view class="tn-color-white tn-text-center">
+              正在随机变化
+            </view>
+          </swiper-item>
+        
+        </swiper>
+          
+        <!-- 安全 -->
+        <view class="tn-tabbar-bottom"></view>
+      
+      </view>
+    
+    </view>
+    
+    
+    <!-- 温馨提醒，这个需要放最外层，也就是放这里-->
+    <tn-toast ref="toast"></tn-toast>
+
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'Light',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        src:"https://resource.tuniaokj.com/images/flower/guye1.jpg",
+        
+        // 显示组件相关提示信息
+        showContentTips: false,
+        
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          icon: 'con-pisces',
+        }, {
+          id: 1,
+          type: 'image',
+          icon: 'con-cancer',
+        }, {
+          id: 2,
+          type: 'image',
+          icon: 'con-leo',
+        }, {
+          id: 3,
+          type: 'image',
+          icon: 'con-gemini',
+        }],
+
+
+        imgCur: 0,
+        swiperList2: [{
+          id: 0,
+          type: 'image',
+          name: "罗兰紫",
+          color: '#9736ff',
+        }, {
+          id: 1,
+          type: 'image',
+          name: "高冷蓝",
+          color: '#b3f0f9',
+        }, {
+          id: 2,
+          type: 'image',
+          name: "可爱粉",
+          color: '#fdb4bf',
+        }, {
+          id: 3,
+          type: 'image',
+          name: "茉莉黄",
+          color: '#fff364',
+        }, {
+          id: 4,
+          type: 'image',
+          name: "清新蓝",
+          color: '#598eff',
+        }, {
+          id: 5,
+          type: 'image',
+          name: "氛围紫",
+          color: '#701bf9',
+        }, {
+          id: 6,
+          type: 'image',
+          name: "热情红",
+          color: '#ff6e3a',
+        }, {
+          id: 7,
+          type: 'image',
+          name: "庄严蓝",
+          color: '#785aff',
+        }, {
+          id: 8,
+          type: 'image',
+          name: "日照黄",
+          color: '#FFAC00',
+        }, {
+          id: 9,
+          type: 'image',
+          name: "月影白",
+          color: '#ecf0ef',
+        }],
+        
+        linearCur: 0,
+        swiperList3: [{
+          id: 0,
+          type: 'image',
+          name: "渐变1",
+          color: '#7300ff',
+          color2: '#ff00fb',
+        }, {
+          id: 1,
+          type: 'image',
+          name: "渐变2",
+          color: '#0037ff',
+          color2: '#fe00a5',
+        }, {
+          id: 2,
+          type: 'image',
+          name: "渐变3",
+          color: '#ff0004',
+          color2: '#9500ff',
+        }, {
+          id: 3,
+          type: 'image',
+          name: "渐变4",
+          color: '#00fef6',
+          color2: '#ff0073',
+        }, {
+          id: 4,
+          type: 'image',
+          name: "渐变5",
+          color: '#1500ff',
+          color2: '#ff6a00',
+        }, {
+          id: 5,
+          type: 'image',
+          name: "渐变6",
+          color: '#fe00dc',
+          color2: '#00fbff',
+        }, {
+          id: 6,
+          type: 'image',
+          name: "渐变7",
+          color: '#fb9b00',
+          color2: '#ff0004',
+        }, {
+          id: 7,
+          type: 'image',
+          name: "渐变8",
+          color: '#007bff',
+          color2: '#00e5fe',
+        }, {
+          id: 8,
+          type: 'image',
+          name: "渐变9",
+          color: '#00b3ff',
+          color2: '#ff00c4',
+        }, {
+          id: 9,
+          type: 'image',
+          name: "渐变10",
+          color: '#f00000',
+          color2: '#ffcc00',
+        }],
+
+
+      }
+    },
+    
+    // 内页用法，亮度最大
+    onLoad() {
+      uni.setScreenBrightness({
+      	value: 1,
+      	success: function () {
+      		console.log('success');
+      	}
+      });
+    },
+    
+    methods: {
+      // 短震动跳转
+      tn(e) {
+        wx.vibrateShort();
+        uni.navigateTo({
+          url: e,
+        });
+      },
+      
+      // 拍摄并预览最新图片
+      takePhoto() {
+        wx.vibrateShort();
+        const ctx = uni.createCameraContext();
+        ctx.takePhoto({
+          quality: 'high',
+          success: (res) => {
+            
+            this.src = res.tempImagePath
+            
+            uni.saveImageToPhotosAlbum({
+            	filePath: res.tempImagePath,
+            	success() {
+            		uni.showToast({
+            			position: "center",
+            			icon: "none",
+            			title: "图片保存成功吖。不会泄露你的任何隐私嗷嗷"
+            		})
+            	},
+            	fail(e) {
+            		uni.showModal({
+            			content: "嘤嘤嘤，保存相册失败。不会泄露你的任何隐私",
+            			showCancel: false
+            		});
+            	}
+            })
+            
+          }
+        });
+        
+      },
+      
+      // 拍摄并预览最新图片
+      previewNewImage() {
+        wx.vibrateShort();
+        const ctx = uni.createCameraContext();
+        ctx.takePhoto({
+          quality: 'high',
+          success: (res) => {
+            
+            this.src = res.tempImagePath
+            
+            uni.previewImage({
+              urls: [res.tempImagePath]
+            })
+            
+          }
+        });
+        
+      },
+      
+      
+      error(e) {
+        console.log(e.detail);
+      },
+    
+      
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // cardSwiper点击事件
+      handleSwiperClick(index) {
+        this.cardCur = index
+      },
+      
+      
+      // imgSwiper
+      imgSwiper(e) {
+        this.imgCur = e.detail.current
+      },
+      // imgSwiper点击事件
+      handleSwiperClick2(index) {
+        this.imgCur = index
+      },
+      
+      // linearSwiper
+      linearSwiper(e) {
+        this.linearCur = e.detail.current
+      },
+      // linearSwiper点击事件
+      handleSwiperClick3(index) {
+        this.linearCur = index
+      },
+      
+      prevSlide() {
+        // 点击按钮切换到上一个
+        this.imgCur = (this.imgCur - 1 + 10) % 10; // 有10个
+      },
+      nextSlide() {
+        // 点击按钮切换到下一个
+        this.imgCur = (this.imgCur + 1) % 10; // 有10个
+      },
+      
+      prevSlideLinear() {
+        // 点击按钮切换到上一个
+        this.linearCur = (this.linearCur - 1 + 10) % 10; // 有10个
+      },
+      nextSlideLinear() {
+        // 点击按钮切换到下一个
+        this.linearCur = (this.linearCur + 1) % 10; // 有10个
+      },
+      
+      
+      // 提示
+      open() {
+        wx.vibrateShort();
+        this.$refs.toast.show({
+          title: '',
+          content: '图鸟补光灯为纯前端模板，没有后台功能，不会泄露你的任何隐私',
+          icon: '',
+          image: '',
+          duration: 1200
+        })
+      },
+      
+      // 点击内容提示信息
+      tipsClick() {
+        wx.vibrateShort();
+        this.showContentTips = !this.showContentTips
+      },
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .template-home {
+    max-height: 100vh;
+  }
+
+  /* 胶囊*/
+  .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;
+    }
+  }
+  
+  // css不写多一些，页面的玩法就很难炫起来，所以别吐槽css多了，下方分类的很清晰了的，且尽量不用那种看不懂的scss写法了的
+
+  .dd-camera{
+    position: fixed;
+    top: 160rpx;
+    left: calc(50vw - 175rpx);
+    z-index: 99999 !important;
+  }
+  
+  .dd-rotate{
+    -webkit-transform: rotate(135deg);
+    -ms-transform: rotate(135deg);
+    transform: rotate(135deg);
+  }
+  
+  .time{
+    transition: all 0.3s ease-in-out;
+  }
+
+  /* 全屏轮播  start*/
+  .card-swiper {
+    height: 100vh !important;
+  }
+
+  .card-swiper swiper-item {
+    width: 750rpx !important;
+    left: 0rpx;
+    box-sizing: border-box;
+    overflow: initial;
+  }
+
+  .card-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100vh;
+    border-radius: 0rpx;
+    transform: scale(1);
+    transition: all 0.2s ease-in 0s;
+    will-change: transform;
+    overflow: hidden;
+  }
+
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: none;
+    transition: all 0.2s ease-in 0s;
+    will-change: transform;
+  }
+
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -68vh;
+    // margin-top: calc(-380rpx + env(safe-area-inset-bottom) / 2);
+    // margin-top: calc(-380rpx + constant(safe-area-inset-bottom));
+    background: none;
+    width: 100%;
+    display: block;
+    height: 80vh;
+    // border-radius: 10rpx;
+    transform: translate(0rpx, 0rpx) scale(1);
+    transition: all 0.6s ease 0s;
+    will-change: transform;
+    overflow: hidden;
+  }
+
+  .card-swiper swiper-item.cur .swiper-item-text {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+    margin-top: -68vh;
+    // margin-top: calc(-380rpx - env(safe-area-inset-bottom) / 2);
+    // margin-top: calc(-380rpx - constant(safe-area-inset-bottom));
+    width: 100%;
+    height: 80vh;
+    padding: 30rpx 10rpx 180rpx 30rpx;
+    transform: translate(0rpx, 0rpx) scale(1);
+    transition: all 0.6s ease 0s;
+    will-change: transform;
+  }
+  
+  .active {
+    border: 2rpx solid #FFFFFF;
+  }
+  
+  .active-bg {
+    background-color: #FFFFFF33;
+    border-radius: 100rpx;
+  }
+
+  /* 轮播图片入口 start*/
+  .img-swiper {
+    height: 100vh !important;
+  }
+
+  .img-swiper swiper-item {
+    width: 750rpx !important;
+    left: 0rpx;
+    box-sizing: border-box;
+    overflow: initial;
+  }
+
+  .img-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100vh;
+    border-radius: 0rpx;
+    transform: scale(0.9);
+    transition: all 0.2s ease-in 0s;
+    will-change: transform;
+    overflow: hidden;
+  }
+
+  .img-swiper swiper-item.cur .swiper-item {
+    transform: scale(1);
+    transition: all 0.2s ease-in 0s;
+    will-change: transform;
+  }
+  
+  
+  
+  .random-color {
+    margin: 0;
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    overflow: hidden;
+    animation: color-loop 18s infinite;
+  }
+  
+  @keyframes color-loop {
+    0% {
+      background: #ff00a6;
+    }
+  
+    20% {
+      background: #aa00ff;
+    }
+  
+    40% {
+      background: #0099ff;
+    }
+  
+    60% {
+      background: #00ffe2;
+    }
+  
+    80% {
+      background: #f1b500;
+    }
+    
+    100% {
+      background: #f10000;
+    }
+    
+  }
+  
+  
+  .gradient-color {
+    margin: 0;
+    width: 100%;
+    height: 100vh;
+    // background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
+    // background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);
+    // background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423);
+    background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a, #c471f5, #ec008c, #ff4e50);
+    background-size: 500% 500%;
+    animation: gradientBG 15s ease infinite;
+  }
+  
+  @keyframes gradientBG {
+    0% {
+      background-position: 0% 50%;
+    }
+  
+    50% {
+      background-position: 100% 50%;
+    }
+  
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  
+  
+  /* 图标容器1 start */
+  .icon1 {
+    &__item {
+      width: 30%;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        background-color: #FFFFFF33;
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 50rpx;
+        color: #FFFFFF;
+        border-radius: 1000rpx;
+        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_bg5.png);
+        }
+      }
+    }
+  }
+  
+  /* 补光照片 start */
+  .light-image {
+    border-radius: 1000rpx;
+    width: 100rpx;
+    height: 100rpx;
+    position: relative;
+  }
+  
+  .light-pic {
+    background-color: #FFFFFF33;
+    width: 100rpx;
+    height: 100rpx;
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: center;
+    // border: 1rpx solid rgba(255,255,255,0.05);
+    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    overflow: hidden;
+    // background-color: #FFFFFF;
+  }
+  
+  .time{
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
+  }
+  
+  .box-cur {
+    height: 50vh;
+  }
+  
+  .box {
+    height: 0;
+  }
+  
+  /* 毛玻璃*/
+  .dd-glass {
+    width: 100%;
+    backdrop-filter: blur(8rpx);
+    -webkit-backdrop-filter: blur(8rpx);
+    background-color: #000000CC;
+    // background: linear-gradient(0deg, #000000CC, #0000005C);
+  }
+  
+  
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 60rpx;
+  	height: calc(80rpx + env(safe-area-inset-bottom) / 2);
+    height: calc(80rpx + constant(safe-area-inset-bottom));
+  }
+  
+  /* 安全 start*/
+  .tn-tabbar-bottom {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom));
+    height: calc(120rpx + constant(safe-area-inset-bottom) * 2);
+  }
+  
+</style>
diff --git a/vipPage/life/power/power.vue b/vipPage/life/power/power.vue
new file mode 100644
index 0000000..d902175
--- /dev/null
+++ b/vipPage/life/power/power.vue
@@ -0,0 +1,424 @@
+<template>
+  <view class="template-power 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="18000" @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>
+        <view class="swiper-item2 image-banner">
+          <image class="png-sussuspension" :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
+        </view>
+        <view class="swiper-item-text">
+          <view class="text-sussuspension">
+            <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
+            <view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
+            <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
+          </view>
+        </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="power-round tn-bg-white">
+    </view>
+    
+    
+    <view class="power-radius" >
+      
+      <!-- 方式17 start-->
+      <view class="tn-flex tn-margin" style="padding: 15rpx 0 170rpx 0;">
+        <view class="tn-flex-1 power-shadow power-radius tn-bg-white" style="margin-right: 15rpx;padding: 40rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon17__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-cyan tn-color-white tn-shadow-blur">
+              <!-- <view class="tn-icon-shop"></view> -->
+              <view class="tn-text-bold">
+                借
+              </view>
+            </view>  
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-text-xl tn-text-bold tn-padding-top-sm tn-color-cyan">免押金借</view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 power-shadow power-radius tn-bg-white" style="margin-left: 15rpx;padding: 40rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon17__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orangeyellow tn-color-white tn-shadow-blur">
+              <!-- <view class="tn-icon-electromobile"></view> -->
+              <view class="tn-text-bold">
+                还
+              </view>
+            </view>  
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-text-xl tn-text-bold tn-padding-top-sm tn-color-orangeyellow">快速归还</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-company">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-black">附近门店</view>
+      </view>
+      <view class="action">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-scan tn-color-white">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
+        </view>
+        <view class="tn-color-gray">扫码租借</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">个人中心</view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePower',
+    mixins: [template_page_mixin],
+    data(){
+    return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: '一飞充天',
+          name: '图鸟充电电',
+          text: '充电就是快',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate3.png',
+          pngurl: 'https://resource.tuniaokj.com/images/login/1/login_top3.png'
+        }, {
+          id: 1,
+          type: 'image',
+          title: '图鸟南南',
+          name: '欢迎加入东东们',
+          text: '如果你也有不错的作品',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate2.png',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }, {
+          id: 2,
+          type: 'image',
+          title: '图鸟西西',
+          name: '一起玩转scss',
+          text: '用最少的代码做最骚的效果',
+          url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }, {
+          id: 3,
+          type: 'image',
+          title: '图鸟北北',
+          name: '微信号 tnkewo',
+          text: '商业合作请联系作者',
+          url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }, {
+          id: 4,
+          type: 'image',
+          title: '图鸟猪猪',
+          name: '努力成为大佬',
+          text: '一起加油吖',
+          url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
+        }]
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 内容布局 start*/
+  .power-shadow{
+    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  .power-radius{
+    border-radius: 15%;
+  }
+  
+  /* 圆角 start*/
+  .power-round {
+    position: relative;
+    z-index: 1;
+    margin-top: -40rpx;  
+    height: 42rpx;
+    border-radius: 80rpx 80rpx 0 0;
+  }
+  
+  /* 悬浮 */
+  .png-sussuspension{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  @keyframes suspension {
+    0%, 100% {
+      transform: translate(0 , 0);
+    }
+    50% {
+      transform: translate(-0.8rem , 1rem);
+    }
+  }
+  .text-sussuspension{
+    animation: suspension2 4s ease-in-out infinite;
+  }
+  
+  @keyframes suspension2 {
+    0%, 100% {
+      transform: translate(0 , 0);
+    }
+    50% {
+      transform: translate(0rem , 1rem);
+    }
+  }
+
+  
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 800rpx !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;
+  }
+  
+  .card-swiper swiper-item .swiper-item2 {
+    margin-top: -540rpx;
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 0rpx;
+    transform: translate(140rpx, 20rpx) scale(0.3, 0.3);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item2 {
+    margin-top: -620rpx;
+    width: 100%;
+    transform: translate(180rpx, 0rpx) scale(0.5, 0.5);
+    transition: all 0.6s ease 0s;
+  }
+    
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -520rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -580rpx;
+    width: 100%;
+    transform: translate(0rpx, 60rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 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: -130rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 30rpx;
+    background-color: #FFFFFF;
+  }
+  
+  /* 图标容器17 start */
+  .icon17 {
+    &__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: 200rpx;
+        height: 200rpx;
+        font-size: 60rpx;
+        border-radius: 30%;
+        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_bg5.png);
+  
+            
+        }
+      }
+    }
+  }
+  
+  /* 底部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;
+  }
+  
+  .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: -60rpx auto 20rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+    background-color: #01BEFF;
+    width: 90rpx !important;
+    height: 90rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
+  }
+  
+  .tabbar .action .bar-circle image {
+    width: 60rpx;
+  	height: 60rpx;
+  	display: inline-block;
+    margin: 15rpx auto 15rpx;
+  }
+</style>
diff --git a/vipPage/life/start/start.vue b/vipPage/life/start/start.vue
new file mode 100644
index 0000000..4a4b40b
--- /dev/null
+++ b/vipPage/life/start/start.vue
@@ -0,0 +1,208 @@
+<template>
+  <view class="template-start">
+    <!-- 顶部自定义导航 -->
+    <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="false" 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" :style="'background-color: '+ item.color +''">
+          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
+        </view>
+        <view class="swiper-item-png image-banner">
+          <image :src="item.pngurl" mode="widthFix" v-if="item.type=='image'"></image>
+        </view>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
+          <view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
+        </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="go">
+      <tn-button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="40vw" height="70rpx">立即体验</tn-button>
+    </view>
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateStart',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '总有你想不到的创意',
+          text: '海量分享',
+          color: '#00C3E3',
+          url: 'https://resource.tuniaokj.com/images/swiper/guide-bg1.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d7.png'
+        }, {
+          id: 1,
+          type: 'image',
+          name: '寻找一起成长的小伙伴',
+          text: '愉快玩耍',
+          color: '#FE5141',
+          url: 'https://resource.tuniaokj.com/images/swiper/guide-bg2.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d8.png'
+        }, {
+          id: 2,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          color: '#EF9A01',
+          url: 'https://resource.tuniaokj.com/images/swiper/guide-bg3.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d9.png'
+        }, {
+          id: 3,
+          type: 'image',
+          name: '商业合作请联系作者',
+          text: '免费开源',
+          color: '#D960C7',
+          url: 'https://resource.tuniaokj.com/images/swiper/guide-bg4.jpg',
+          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d10.png'
+        }],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+    /* 轮播视觉差 start */
+    .card-swiper {
+      height: 100vh !important;
+    }
+  
+    .card-swiper swiper-item {
+      width: 750rpx !important;
+      left: 0rpx;
+      box-sizing: border-box;
+      overflow: initial;
+    }
+  
+    .card-swiper swiper-item .swiper-item {
+      width: 100%;
+      display: block;
+      height: 100%;
+      border-radius: 0rpx;
+      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;
+    }
+  
+    .card-swiper swiper-item .swiper-item-png {
+      margin-top: -85vh;
+      display: block;
+      border-radius: 0rpx;
+      transform: translate(40rpx, 20rpx) scale(0.8, 0.8);
+      transition: all 0.6s ease 0s;
+      overflow: hidden;
+    }
+  
+    .card-swiper swiper-item.cur .swiper-item-png {
+      margin-top: -85vh;
+      transform: translate(0rpx, 0rpx) scale(1, 1);
+      transition: all 0.6s ease 0s;
+      
+    }
+  
+    .card-swiper swiper-item .swiper-item-text {
+      margin-top: 0rpx;
+      width: 100%;
+      display: block;
+      height: 50%;
+      border-radius: 10rpx;
+      transform: translate(30rpx, -40rpx) scale(0.7, 0.7);
+      transition: all 0.6s ease 0s;
+      overflow: hidden;
+    }
+  
+    .card-swiper swiper-item.cur .swiper-item-text {
+      margin-top: -60rpx;
+      width: 100%;
+      transform: translate(30rpx, 0rpx) scale(0.9, 0.9);
+      transition: all 0.6s ease 0s;
+    }
+    
+    .image-banner{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .image-banner image{
+      width: 100%;
+    }
+    
+    /* 轮播指示点 start*/
+    .indication{
+      z-index: 9999;
+      width: 100%;
+      height: 36rpx;
+      position: fixed;
+      display:flex;
+      flex-direction:row;
+      align-items:center;
+      justify-content:center;
+    }
+    
+    .spot{
+      background-color: #FFF;
+      opacity: 0.4;
+      width: 10rpx;
+      height: 10rpx;
+      border-radius: 20rpx;
+      margin: 0 8rpx !important;
+      right: -270rpx;
+      top: -180rpx;
+      position: relative;
+    }
+    
+    .spot.active{
+      opacity: 1;
+      width: 30rpx;
+      background-color: #FFF;
+    }
+    
+    /* 立即体验 start*/
+    .go{
+      z-index: 9999;
+      width: 100%;
+      position: fixed;
+      display:flex;
+      flex-direction:row;
+      align-items:center;
+      justify-content:center;
+      bottom: 10vh;
+    }
+</style>
diff --git a/vipPage/shop/classify/classify.vue b/vipPage/shop/classify/classify.vue
new file mode 100644
index 0000000..4b04e04
--- /dev/null
+++ b/vipPage/shop/classify/classify.vue
@@ -0,0 +1,414 @@
+<template>
+  <view class="template-classify">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :bottomShadow="false">商品分类</tn-nav-bar>
+    
+    <view class="tn-classify__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <!-- 搜索框 -->
+      <view class="tn-classify__search--wrap tn-flex tn-flex-col-center tn-flex-row-center tn-border-solids-bottom">
+        <view class="tn-classify__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-bg-gray--light tn-color-gray--dark">
+          <view class="tn-classify__search__icon tn-icon-search"></view>
+          <view class="tn-classify__search__text">请输入商品名称</view>
+        </view>
+      </view>
+      
+      <!-- 分类列表和内容 -->
+      <view class="tn-classify__container tn-bg-gray--light">
+        <view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around tn-bg-white">
+          <!-- 左边容器 -->
+          <scroll-view class="tn-classify__left-box tn-flex-basic-sm" :scroll-top="leftScrollViewTop" scroll-y scroll-with-animation :style="{height: scrollViewHeight + 'px'}">
+            <view
+              v-for="(item, index) in tabbar"
+              :key="index"
+              :id="`tabbar_item_${index}`"
+              class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
+              :class="[tabbarItemClass(index)]"
+              @tap.stop="clickClassifyNav(index)">
+              <view class="tn-classify__tabbar__item__title">{{ item }}</view>
+            </view>
+          </scroll-view>
+          
+          <!-- 右边容器 -->
+          <scroll-view class="tn-classify__right-box" scroll-y :scroll-top="rightScrollViewTop" :style="{height: scrollViewHeight + 'px'}">
+            <block v-if="classifyContent.subClassify && classifyContent.subClassify.length > 0">
+              <view class="tn-classify__content">
+                <!-- 推荐商品轮播图 -->
+                <view class="tn-classify__content__recomm">
+                  <tn-swiper v-if="classifyContent.recommendProduct.length > 0" class="tn-classify__content__recomm__swiper" :list="classifyContent.recommendProduct" :height="200" :effect3d="true"></tn-swiper>
+                </view>
+                
+                <!-- 分类内容子栏目 -->
+                <view v-for="(item,index) in classifyContent.subClassify" :key="index" class="tn-classify__content__sub-classify">
+                  <view class="tn-classify__content__sub-classify--title tn-text-lg tn-padding-top-sm">{{ item.title }}</view>
+                  
+                  <view class="tn-classify__content__sub-classify__content tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left">
+                    <view
+                      v-for="(sub_item,sub_index) in item.classify"
+                      :key="sub_index"
+                      class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-wrap tn-flex-row-center"
+                    >
+                      <view class="tn-classify__content__sub-classify__content__image tn-flex tn-flex-col-center tn-flex-row-center">
+                        <image :src="sub_item.image" mode="aspectFill"></image>
+                      </view>
+                      <view class="tn-classify__content__sub-classify__content__title tn-margin-bottom-sm">{{ sub_item.title }}</view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              
+              <view class="tn-padding-bottom"></view>
+            </block>
+          </scroll-view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'templateShopClassify',
+    data() {
+      return {
+        // 侧边栏分类数据
+        tabbar: [
+          '推荐分类',
+          '医疗保健',
+          '运动户外',
+          '电脑办公',
+          '家电',
+          '宠物鲜花',
+          '食品酒饮',
+          '个护清洁',
+          '手机',
+          '数码',
+          '母婴童装',
+          '京东国际',
+          '汽摩生活',
+          '美妆护肤',
+          '箱包',
+          '鞋靴',
+          '钟表珠宝',
+          '玩具乐器',
+          '内衣配饰',
+          '生鲜',
+          '家居厨具',
+          '男装',
+          '二手商品',
+          '女装',
+          '家具家装',
+          '奢侈品',
+          '计生情趣',
+          '医药',
+          '生活旅行',
+          '图鸟服务',
+        ],
+        // 分类里面的内容信息
+        classifyContent: {
+          // 推荐商品
+          recommendProduct: [
+            {image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg', title: '推荐商品1'},
+            {image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg', title: '推荐商品2'},
+            {image: 'https://resource.tuniaokj.com/images/shop/banner3.jpg', title: '推荐商品3'}
+          ],
+          // 子栏目
+          subClassifyTabbar: [],
+          // 显示子栏目分类选项
+          showSubClassifyTabbar: false,
+          // 每个子栏目下的内容
+          subClassify: [
+            {
+              title: '推荐分类',
+              classify: [
+                { image: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg', title: '海报设计'},
+                { image: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg', title: '精美页面'},
+                { image: 'https://resource.tuniaokj.com/images/shop/computer1.jpg', title: '设计师电脑'},
+                { image: 'https://resource.tuniaokj.com/images/shop/computer2.jpg', title: '轻薄本'},
+                { image: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg', title: '5G手机'},
+                { image: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg', title: '游戏手机'},
+                { image: 'https://resource.tuniaokj.com/images/shop/watch1.jpg', title: '智能手表'},
+                { image: 'https://resource.tuniaokj.com/images/shop/watch2.jpg', title: '运动手表'},
+                
+              ]
+            },
+            {
+              title: '专场推荐',
+              classify: [
+                { image: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg', title: '5G手机'},
+                { image: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg', title: '游戏手机'},
+                { image: 'https://resource.tuniaokj.com/images/shop/watch1.jpg', title: '智能手表'},
+                { image: 'https://resource.tuniaokj.com/images/shop/watch2.jpg', title: '运动手表'},
+                { image: 'https://resource.tuniaokj.com/images/shop/card.jpg', title: '图鸟服务'}
+              ]
+            },
+            {
+              title: '专场推荐',
+              classify: [
+                { image: 'https://resource.tuniaokj.com/images/shop/bag1.jpg', title: '环保袋'},
+                { image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg', title: '手提袋'},
+                { image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg', title: '奶茶杯'},
+                { image: 'https://resource.tuniaokj.com/images/shop/cup2.jpg', title: '纸杯'},
+                { image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg', title: '抱枕'},
+                { image: 'https://resource.tuniaokj.com/images/shop/sticker.jpg', title: '贴纸'}
+              ]
+            },
+            {
+              title: '专场推荐',
+              classify: [
+                { image: 'https://resource.tuniaokj.com/images/shop/bag1.jpg', title: '环保袋'},
+                { image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg', title: '手提袋'},
+                { image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg', title: '奶茶杯'},
+                { image: 'https://resource.tuniaokj.com/images/shop/cup2.jpg', title: '纸杯'},
+                { image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg', title: '抱枕'},
+                { image: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg', title: '蓝色抱枕'}
+              ]
+            }
+          ]
+        },
+        // 分类菜单item的信息
+        tabbarItemInfo: [],
+        // scrollView的top值
+        scrollViewBasicTop: 0,
+        // scrollView的高度
+        scrollViewHeight: 0,
+        // 左边scrollView的滚动高度
+        leftScrollViewTop: 0,
+        // 右边scrollView的滚动高度
+        rightScrollViewTop: 0,
+        // 当前选中的tabbar序号
+        currentTabbarIndex: 0
+      }
+    },
+    computed: {
+      tabbarItemClass() {
+        return index => {
+          if (index === this.currentTabbarIndex) {
+            return 'tn-classify__tabbar__item--active tn-bg-white'
+          } else {
+            let clazz = 'tn-bg-gray--light'
+            if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
+              clazz += ' tn-classify__tabbar__item--active--prev'
+            }
+            if (this.currentTabbarIndex < this.tabbar.length && index === this.currentTabbarIndex + 1) {
+              clazz += ' tn-classify__tabbar__item--active--next'
+            }
+            return clazz
+          }
+        }
+      }
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.getScrollViewInfo()
+        this.getTabbarItemRect()
+      })
+    },
+    methods: {
+      // 获取scrollView的高度信息
+      getScrollViewInfo() {
+        // 获取搜索栏的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
+        this._tGetRect('.tn-classify__search--wrap').then((rect) => {
+          // 如果获取失败重新获取
+          if (!rect) {
+            setTimeout(() => {
+              this.getScrollViewInfo()
+            }, 10)
+            return
+          }
+          // 获取当前屏幕的可用高度
+          const systemInfo = uni.getSystemInfoSync()
+          this.scrollViewBasicTop = systemInfo.statusBarHeight + rect.bottom + uni.upx2px(10)
+          this.scrollViewHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - rect.bottom - uni.upx2px(10)
+        })
+      },
+      // 获取分类菜单每个item的信息
+      getTabbarItemRect() {
+        let view = uni.createSelectorQuery().in(this)
+        for (let i = 0; i < this.tabbar.length; i++) {
+          view.select('#tabbar_item_' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          if (!res.length) {
+            setTimeout(() => {
+              this.getTabbarItemRect()
+            }, 10)
+            return
+          }
+          
+          // 将每个分类item的相关信息
+          res.map((item) => {
+            this.tabbarItemInfo.push({
+              top: item.top,
+              height: item.height
+            })
+          })
+        })
+      },
+      // 点击了分类导航
+      clickClassifyNav(index) {
+        if (this.currentTabbarIndex === index) {
+          return
+        }
+        this.currentTabbarIndex = index
+        
+        this.handleLeftScrollView(index)
+        this.switchClassifyContent()
+      },
+      // 点击分类后，处理scrollView滚动到居中位置
+      handleLeftScrollView(index) {
+        const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
+        if (tabbarItemTop > this.scrollViewHeight / 2) {
+          this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index].height
+        } else {
+          this.leftScrollViewTop = 0
+        }
+      },
+      // 切换对应分类的数据
+      switchClassifyContent() {
+        this.rightScrollViewTop = 1
+        this.$nextTick(() => {
+          this.rightScrollViewTop = 0
+        })
+        this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-classify {
+    
+    /* 搜索栏 start */
+    &__search {
+      &--wrap {
+        height: 126rpx;
+      }
+      
+      &__box {
+        flex: 1;
+        text-align: center;
+        padding: 20rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx;
+        font-size: 26rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+      }
+    }
+    /* 搜索栏 end */
+    
+    /* 分类列表和内容 strat */
+    &__container {
+      padding-top: 10rpx;
+    }
+    
+    &__left-box {
+      
+    }
+    
+    &__right-box {
+      background-color: #FFFFFF;
+    }
+    /* 分类列表和内容 end */
+    
+    /* 侧边导航 start */
+    &__tabbar {
+      &__item {
+        height: 90rpx;
+        
+        &:first-child {
+          border-top-right-radius: 0rpx;
+        }
+        
+        &:last-child {
+          border-bottom-right-radius: 0rpx;
+        }
+        
+        &--active {
+          background-color: #FFFFFF;
+          position: relative;
+          font-weight: bold;
+          
+          &::before {
+            content: '';
+            position: absolute;
+            width: 12rpx;
+            height: 40rpx;
+            top: 50%;
+            left: 0;
+            background-color: $tn-main-color;
+            border-radius: 12rpx;
+            transform: translateY(-50%) translateX(-50%);
+          }
+          
+          &--prev {
+            border-bottom-right-radius: 26rpx;
+          }
+          
+          &--next {
+            border-top-right-radius: 26rpx;
+          }
+        }
+      }
+    }
+    /* 侧边导航 end */
+    
+    /* 分类内容 start */
+    &__content {
+      margin: 18rpx;
+      
+      /* 推荐商品 start */
+      &__recomm {
+        margin-bottom: 40rpx;
+        
+        &__swiper {
+          
+        }
+      }
+      /* 推荐商品 end */
+      
+      /* 子栏目 start */
+      &__sub-classify {
+        margin-bottom: 20rpx;
+        
+        &--title {
+          font-weight: bold;
+          margin-bottom: 18rpx;
+        }
+        
+        &__content {
+          
+          &__item {
+            width: 33%;
+          }
+          
+          &__image {
+            background-color: rgba(188, 188, 188, 0.1);
+            border-radius: 12rpx;
+            margin: 10rpx;
+            margin-left: 0;
+            width: 100%;
+            height: 160rpx;
+            overflow: hidden;
+            border: 1rpx solid rgba(0,0,0,0.02);
+            
+            image {
+              width: 100%;
+              height: 160rpx;
+            }
+          }
+          
+          &__title {
+            margin-right: 10rpx;
+          }
+        }
+      }
+      /* 子栏目 end */
+    }
+    /* 分类内容 end */
+  }
+</style>
diff --git a/vipPage/shop/money/money.vue b/vipPage/shop/money/money.vue
new file mode 100644
index 0000000..bacd850
--- /dev/null
+++ b/vipPage/shop/money/money.vue
@@ -0,0 +1,805 @@
+<template>
+  <view class="template-money 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="top-backgroup">
+      <image src='https://resource.tuniaokj.com/images/money/money-bg.jpg' mode='heightFix' class='backgroud-image'></image>
+    </view>
+    <swiper class="card-swiper" :current="cardCur" :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="heightFix" v-if="item.type=='image'" ></image>
+        </view>
+        <view class="swiper-item-text tn-text-center">
+          <view class="tn-text-bold tn-padding-top-xs tn-color-brown">
+            <text class="tn-icon-copy tn-padding-right-xs"></text>
+            {{item.name}}
+            <text class="tn-icon-copy tn-padding-left-xs"></text>
+          </view>
+        </view>
+    
+      </swiper-item>
+    </swiper>
+    
+    <view class="indication">
+        <block v-for="(item,index) in swiperList" :key="index">
+            <view class="spot tn-text-center tn-padding-top-sm tn-shadow-blur tn-color-red" :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
+              <view class="tn-icon-lucky-money-fill tn-text-xxl icon-text"></view>
+              <view class="">{{item.text}}</view>
+              <view class="tn-text-sm">{{item.get}}</view>
+            </view>
+        </block>
+        <view class="" style="background-image:url('https://resource.tuniaokj.com/images/money/bgpng.png');
+        background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  top: -58vh;
+  left: 0;
+  z-index: -1;
+  width:100%;
+  height:270rpx">
+          
+        </view>
+    </view>
+    
+    
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs tn-margin-top-xl">
+      <view class=" " style="width: 100%;">
+        <view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-coinbag.png')">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    <view class="tn-margin-top">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-15">
+          <text class="tn-icon-gift tn-padding-right-sm"></text>
+          礼 / 品 / 兑 / 换
+          <text class="tn-icon-gift tn-padding-left-sm"></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" style="background-color: rgba(255,255,255,0.6);">
+            <view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+              <view class="image-year">
+              </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 tn-icon-flower"></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-->
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      
+      
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-home tn-color-gray--dark">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </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">
+        <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/tabbar/money-share.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">
+        <view class="bar-icon">
+          <view class="tn-icon-video tn-color-gray--dark">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image> -->
+        </view>
+        <view class="tn-color-gray">视频</view>
+      </view>
+      <view class="action">
+        <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> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateMoney',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          name: '春节期间累计获得64839金币',
+          text: '0.56元',
+          get: '已领取',
+          url: 'https://resource.tuniaokj.com/images/money/money-test.png',
+        }, {
+          id: 1,
+          type: 'image',
+          name: '春节期间累计获得231345金币',
+          text: '1.29元',
+          get: '已领取',
+          url: 'https://resource.tuniaokj.com/images/money/money-test2.png',
+        }, {
+          id: 2,
+          type: 'image',
+          name: '春节期间累计获得342432金币',
+          text: '5.??元',
+          get: '未领取',
+          url: 'https://resource.tuniaokj.com/images/money/money-test.png',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '春节期间累计获得643498金币',
+          text: '8.??元',
+          get: '未领取',
+          url: 'https://resource.tuniaokj.com/images/money/money-test2.png',
+        }, {
+          id: 3,
+          type: 'image',
+          name: '春节期间累计获得975521金币',
+          text: '99元',
+          get: '未领取',
+          url: 'https://resource.tuniaokj.com/images/money/money-test.png',
+        }],
+        content: [
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['99金币'],
+            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: 999,
+            commentCount: 999,
+            likeCount: 999
+          },
+          {
+            userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['66金币'],
+            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: ['1266金币'],
+            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: ['9999金币'],
+            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: ['6666金币'],
+            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: ['888金币'],
+            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: ['299金币'],
+            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: ['899金币'],
+            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
+          }
+        ]
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      // swiper点击事件
+      handleSwiperClick(index) {
+        this.cardCur = index
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+    /* 顶部背景图 start */
+    .top-backgroup {
+      position: fixed;
+      height: 100vh;
+      z-index: -1;
+    
+      .backgroud-image {
+        width: 100%;
+        height: 100vh;
+        // z-index: -1;
+      }
+    }
+  
+  .card-swiper {
+    height: 70vh !important;
+  }
+    
+  .card-swiper swiper-item {
+    width: 750rpx !important;
+    left: 0rpx;
+    box-sizing: border-box;
+    overflow: initial;
+  }
+    
+  .card-swiper swiper-item .swiper-item {
+    margin-top: 30vh;
+    width: 100%;
+    display: block;
+    height: 100vh;
+    border-radius: 0rpx;
+    transform: translate(30rpx, 0rpx) scale(0.8);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+    opacity: 1;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: translate(30rpx, 0rpx) scale(1, 1);
+    transition: all 0.2s ease-in 0s;
+    opacity: 1;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -65vh;
+    width: 100%;
+    // height: 100%;
+    display: block;
+    border-radius: 10rpx;
+    transform: scale(0.7, 0.7);
+    transition: all 0.4s ease 0s;
+    overflow: hidden;
+    opacity: 1;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    padding-left: 30rpx;
+    transform: scale(1);
+    transition: all 0.4s ease 0s;
+    opacity: 1;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    opacity: 1;
+    width: 100rpx;
+    height: 80rpx;
+    border-radius: 20rpx;
+    margin: 20rpx 15rpx !important;
+    left: 0rpx;
+    right: 0;
+    top: -53vh;
+    position: relative;
+  }
+  
+  .spot.active .icon-text{
+    transform: scale(1.6);
+    margin-bottom: 20rpx;
+    opacity: 1;
+  }
+  
+  /* 标题 start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题 end */
+  
+  /* 文章内容 start*/
+  .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: #82B2FF;
+          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-year{
+    padding: 150rpx 0rpx;
+    font-size: 16rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    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: 20rpx 20rpx 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: 130rpx !important;
+    height: 130rpx !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: 130rpx;
+  	height: 130rpx;
+  	display: inline-block;
+    margin: 0rpx auto 0rpx;
+  }
+  
+  /* 流星+悬浮 */
+  .nav-index-button {
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+    
+    
+    &__content {
+      position: absolute;
+      width: 130rpx;
+      height: 130rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      
+      &--icon {
+        width: 130rpx;
+        height: 130rpx;
+        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/arc2.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>
diff --git a/vipPage/shop/order/order.vue b/vipPage/shop/order/order.vue
new file mode 100644
index 0000000..965e74e
--- /dev/null
+++ b/vipPage/shop/order/order.vue
@@ -0,0 +1,533 @@
+<template>
+  <view class="template-order">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#F7F7F7CC">
+      <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-left tn-color-gray--dark">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text">搜索我的订单</view>
+          </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" @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">完成</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="order__item__operaation__left--text">更多</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="order__item__operaation__left--text">更多</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="order__item__operaation__left--text">更多</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="order__item__operaation__left--text">更多</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/pillow.jpg" mode="scaleToFill"></image>
+                  </view>
+                  <view class="order__item__content__image">
+                    <image src="https://resource.tuniaokj.com/images/shop/bag1.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">5000</text>
+                    <text class="order__item__content__info__price__value--decimal">.00</text>
+                  </view>
+                  <view class="order__item__content__info__count">
+                    <text>共5件</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="order__item__operaation__left--text">更多</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: 'TemplateOrder',
+    mixins: [templatePageMixin],
+    data() {
+      return {
+        list: [
+          {name: '全部'},
+          {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>
+  
+  .template-order {
+    background-color: #F7F7F7CC;
+  }
+  
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 65%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 60%;
+        padding: 28rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx;
+        font-size: 24rpx;
+        background-color: #FFFFFF;
+        border: 1rpx solid #E6E6E6;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  /* 自定义导航栏内容 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;
+      
+      &: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: 22rpx;
+          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>
diff --git a/vipPage/shop/store/store.vue b/vipPage/shop/store/store.vue
new file mode 100644
index 0000000..e6b087f
--- /dev/null
+++ b/vipPage/shop/store/store.vue
@@ -0,0 +1,796 @@
+<template>
+  <view class="template-store 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <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/logo/logo2.png')">
+            <view class="logo-image">
+            </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>
+    </tn-nav-bar>
+    
+     
+    
+    <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-flex tn-flex-row-between">
+        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
+          新年庆典，狂欢来袭
+        </view>
+        <view class="tn-margin" style="font-size: 50rpx;">
+          <text class="tn-icon-menu-more"></text>
+        </view>
+      </view>
+    </view>
+    
+    <swiper class="card-swiper tn-margin-top-sm" :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>
+        <view class="swiper-item-text">
+          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
+          <view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 40rpx;">{{item.name}}</view>
+          <view class=" tn-text-bold tn-color-red tn-padding-top-sm tn-padding-bottom-sm">
+            <text class="tn-text-lg">￥</text>
+            <text class="tn-text-sm">{{item.text}}</text>
+          </view>
+        </view>
+        <view class="swiper-item-text2">
+          <view class="tn-text-xxl tn-text-bold">
+            <text class="tn-color-white tn-float-right tn-bg-red" style="border-radius: 10rpx;padding: 10rpx 20rpx;">马上抢</text>
+          </view>
+        </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>
+    
+    <!-- 方式7 start-->
+    <view class="tn-flex">
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a004.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">排行</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a002.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">签到</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a006.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">免费</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-radius">
+        <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://resource.tuniaokj.com/images/icon/a007.png' mode='aspectFit'></image>
+          </view>
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">会员</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式7 end-->
+    
+    <!-- 换背景形式-->
+    <!-- <view class="image-div tn-margin">
+      <image src='https://resource.tuniaokj.com/images/swiper/capsule1.png' mode='widthFix' class='image'></image>
+    </view> -->
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-margin-sm">
+      <view class=" " style="width: 100%;">
+        <view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/swiper/capsule1.png')">
+           <view class="image-store">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+    
+    <view class="tn-margin-top">
+      <view class="nav_title--wrap">
+        <view class="nav_title tn-cool-bg-color-16">
+          <text class="tn-icon-star tn-padding-right-sm"></text>
+          热 / 门 / 美 / 食
+          <text class="tn-icon-star tn-padding-left-sm"></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 tn-icon-flower"></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-->
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed" style="border-radius: 60rpx 60rpx 0 0;">
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-home-smile">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image> -->
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-menu-list tn-color-gray">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image> -->
+        </view>
+        <view class="tn-color-gray">分类</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-cart tn-color-gray">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image> -->
+        </view>
+        <view class="tn-color-gray">购物车</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-my tn-color-gray">
+          </view>
+          <!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.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: 'TemplateStore',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          title: '巴西烤肉-午餐券12元',
+          name: '祈福新村2号街',
+          text: '59.00',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          title: '巴西烤肉-午餐券12元',
+          name: '祈福新村2号街',
+          text: '59.00',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          title: '巴西烤肉-午餐券12元',
+          name: '祈福新村2号街',
+          text: '59.00',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          title: '巴西烤肉-午餐券12元',
+          name: '祈福新村2号街',
+          text: '59.00',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }, {
+          id: 4,
+          type: 'image',
+          title: '巴西烤肉-午餐券12元',
+          name: '祈福新村2号街',
+          text: '59.00',
+          url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
+        }],
+        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: 999,
+            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
+          }
+        ]
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 15rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 0 60rpx 60rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+  /* 轮播视觉差 start */
+  .card-swiper {
+    height: 400rpx !important;
+  }
+    
+  .card-swiper swiper-item {
+    width: 620rpx !important;
+    left: 30rpx;
+    box-sizing: border-box;
+    padding: 0rpx 0rpx 90rpx 0rpx;
+    overflow: initial;
+  }
+    
+  .card-swiper swiper-item .swiper-item {
+    width: 100%;
+    display: block;
+    height: 100%;
+    border-radius: 30rpx;
+    transform: scale(0.9);
+    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;
+  }
+    
+  .card-swiper swiper-item .swiper-item-text {
+    margin-top: -140rpx;
+    width: 100%;
+    display: block;
+    height: 70%;
+    border-radius: 10rpx;
+    transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+    overflow: hidden;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text {
+    margin-top: -200rpx;
+    width: 100%;
+    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.6s ease 0s;
+  }
+  
+  .card-swiper swiper-item .swiper-item-text2 {
+    margin-top: -160rpx;
+    width: 100%;
+    display: block;
+    height: 50%;
+    border-radius: 10rpx;
+    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.3s ease 0s;
+    overflow: hidden;
+    opacity: 0;
+  }
+    
+  .card-swiper swiper-item.cur .swiper-item-text2 {
+    margin-top: -120rpx;
+    width: 100%;
+    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
+    transition: all 0.3s ease 0s;
+    opacity: 1;
+  }
+  
+  .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: #000000;
+    opacity: 0.2;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 40rpx;
+    top: -60rpx;
+    margin: 0 8rpx !important;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 1;
+    width: 30rpx;
+    background-color: #E83A30;
+  }
+  
+  /* 图标容器7 start */
+  .icon7 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 10rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 120rpx;
+        height: 120rpx;
+        font-size: 50rpx;
+        border-radius: 0;
+        margin-bottom: -10rpx;
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }    
+  
+  .image-store{
+    padding:120rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+  }
+      
+  /* 胶囊背景图 start */
+  .image-div {
+    height: 450rpx;
+    z-index: -1;
+  
+    .image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+  /* 胶囊背景图 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 */
+  
+  /* 文章内容 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*/
+  
+  /* 底部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;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+</style>
diff --git a/vipPage/static/images/tree_view/file_css.png b/vipPage/static/images/tree_view/file_css.png
new file mode 100644
index 0000000..a3ae90a
Binary files /dev/null and b/vipPage/static/images/tree_view/file_css.png differ
diff --git a/vipPage/static/images/tree_view/file_html.png b/vipPage/static/images/tree_view/file_html.png
new file mode 100644
index 0000000..15f253c
Binary files /dev/null and b/vipPage/static/images/tree_view/file_html.png differ
diff --git a/vipPage/static/images/tree_view/file_js.png b/vipPage/static/images/tree_view/file_js.png
new file mode 100644
index 0000000..2af8b91
Binary files /dev/null and b/vipPage/static/images/tree_view/file_js.png differ
diff --git a/vipPage/static/images/tree_view/file_vue.png b/vipPage/static/images/tree_view/file_vue.png
new file mode 100644
index 0000000..aa64d3f
Binary files /dev/null and b/vipPage/static/images/tree_view/file_vue.png differ
diff --git a/vipPage/static/images/tree_view/folder.png b/vipPage/static/images/tree_view/folder.png
new file mode 100644
index 0000000..10b498f
Binary files /dev/null and b/vipPage/static/images/tree_view/folder.png differ
diff --git a/vipPage/static/images/tree_view/folder_open.png b/vipPage/static/images/tree_view/folder_open.png
new file mode 100644
index 0000000..2e2af8d
Binary files /dev/null and b/vipPage/static/images/tree_view/folder_open.png differ
diff --git a/vipPage/static/mock/cascade-city.js b/vipPage/static/mock/cascade-city.js
new file mode 100644
index 0000000..8c7c8f1
--- /dev/null
+++ b/vipPage/static/mock/cascade-city.js
@@ -0,0 +1,68 @@
+export default [
+  {
+    text: '广东省',
+    value: '440000',
+    children: [
+      {
+        text:'广州市',
+        value:'440100',
+        children: [
+          {text:'荔湾区',value:'440103'},
+          {text:'越秀区',value:'440104'},
+          {text:'海珠区',value:'440105'},
+          {text:'天河区',value:'440106'},
+          {text:'白云区',value:'440111'},
+          {text:'黄埔区',value:'440112'},
+          {text:'番禺区',value:'440113'},
+          {text:'花都区',value:'440114'},
+          {text:'南沙区',value:'440115'},
+          {text:'从化区',value:'440117'},
+          {text:'增城区',value:'440118'}
+        ]
+      },
+      {text:'韶关市',value:'440200'},
+      {
+        text:'深圳市',
+        value:'440300',
+        children: [
+          {text:'罗湖区',value:'440303'},
+          {text:'福田区',value:'440304'},
+          {text:'南山区',value:'440305'},
+          {text:'宝安区',value:'440306'},
+          {text:'龙岗区',value:'440307'},
+          {text:'盐田区',value:'440308'},
+          {text:'龙华区',value:'440309'},
+          {text:'坪山区',value:'440310'}
+        ]
+      },
+      {text:'珠海市',value:'440400'},
+      {text:'汕头市',value:'440500'},
+      {
+        text:'佛山市',
+        value:'440600',
+        children: [
+          {text:'禅城区',value:'440604'},
+          {text:'南海区',value:'440605'},
+          {text:'顺德区',value:'440606'},
+          {text:'三水区',value:'440607'},
+          {text:'高明区',value:'440608'}
+        ]
+      },
+      {text:'江门市',value:'440700'},
+      {text:'湛江市',value:'440800'},
+      {text:'茂名市',value:'440900'},
+      {text:'肇庆市',value:'441200'},
+      {text:'惠州市',value:'441300'},
+      {text:'梅州市',value:'441400'},
+      {text:'汕尾市',value:'441500'},
+      {text:'河源市',value:'441600'},
+      {text:'阳江市',value:'441700'},
+      {text:'清远市',value:'441800'},
+      {text:'东莞市',value:'441900'},
+      {text:'中山市',value:'442000'},
+      {text:'潮州市',value:'445100'},
+      {text:'揭阳市',value:'445200'},
+      {text:'云浮市',value:'445300'},
+    ]
+  }
+]
\ No newline at end of file