增加other分包页面

我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
2024-12-20 18:01:37 +08:00
parent 908205200b
commit b2fd3ba347
154 changed files with 43228 additions and 84 deletions
--- a/libs/components/multiple-options-demo.vue
+++ b/libs/components/multiple-options-demo.vue
@@ -0,0 +1,147 @@
+<template>
+  <view class="multiple-options">
+    <view class="list">
+      <block v-for="(item, index) in listData" :key="index">
+        <view
+          class="list__item"
+          :class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
+          @tap="navOptionsPage(item.url)"
+        >
+          <view class="list__content">
+            <view class="list__content__title">{{ item.title }}</view>
+            <view class="list__content__desc">{{ item.desc }}</view>
+          </view>
+          <view class="list__icon">
+            <view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+            <view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'multiple-options-demo',
+    props: {
+      // 显示的列表数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        // 图鸟颜色列表
+        tuniaoColorList: [
+          'red',
+          'purplered',
+          'purple',
+          'bluepurple',
+          'aquablue',
+          'blue',
+          'indigo',
+          'cyan',
+          'teal',
+          'green',
+          'orange',
+          'orangered'
+        ],
+        listData: []
+      }
+    },
+    watch: {
+      list(val) {
+        this.initList()
+      }
+    },
+    created() {
+      this.initList()
+    },
+    methods: {
+      // 初始化列表数据
+      initList() {
+        // 给列表添加背景颜色数据
+        this.listData = this.list.map((item, index) => {
+          item.bgColorIndex = this.getBgNum()
+          item.mainIcon = item?.mainIcon || 'computer-fill'
+          item.subIcon = item?.subIcon || 'share'
+          return item
+        })
+      },
+      // 跳转到对应的选项页面
+      navOptionsPage(url) {
+        uni.navigateTo({
+          url: url
+        })
+      },
+      // 获取酷炫背景随机数
+      getBgNum() {
+        return Math.floor((Math.random() * this.tuniaoColorList.length))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .list {
+    
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 60rpx);
+      margin: 108rpx 30rpx 0rpx 30rpx;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 20rpx;
+    }
+    
+    &__content {
+      flex: 1;
+      // color: $tn-font-color;
+      margin: 34rpx 0rpx 27rpx 37rpx;
+      
+      &__title {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-bottom: 12rpx;
+      }
+      &__desc {
+        font-size: 28rpx;
+      }
+    }
+    
+    &__icon {
+      flex: 1;
+      margin-right: 26rpx;
+      position: relative;
+      
+      &__main, &__sub {
+        -webkit-background-clip: text;
+        color: transparent;
+        position: absolute;
+        transition: transform 0.25s ease;
+      }
+      
+      &__main {
+        font-size: 200rpx;
+        width: 190rpx;
+        line-height: 200rpx;
+        top: 0;
+        right: 0rpx;
+        transform: translateY(-60%);
+      }
+      &__sub {
+        font-size: 70rpx;
+        top: 0;
+        right: 175rpx;
+        transform: translateY(-5rpx);
+      }
+    }
+  }
+</style>