更新众多VIP页面模板

2026-06-07 20:13:16 +08:00 · 2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
@@ -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>