更新众多VIP页面模板

2026-06-08 12:33:17 +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,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>