增加other分包页面

我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）

tuniao-ui/components/tn-line-progress/tn-line-progress.vue

@@ -0,0 +1,143 @@
+<template>
+  <view
+    class="tn-line-progress-class tn-line-progress"
+    :style="[progressStyle]"
+  >
+    <view
+      class="tn-line-progress--active"
+      :class="[
+        $t.color.getBackgroundColorInternalClass(activeColor),
+        striped ? stripedAnimation ? 'tn-line-progress__striped tn-line-progress__striped--active' : 'tn-line-progress__striped' : '',
+      ]"
+      :style="[progressActiveStyle]"
+    >
+      <slot v-if="$slots.default || $slots.$default"></slot>
+      <block v-else-if="showPercent">{{ percent + '%' }}</block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-line-progress',
+    props: {
+      // 进度（百分比）
+      percent: {
+        type: Number,
+        default: 0,
+        validator: val => {
+          return val >= 0 && val <= 100
+        }
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示为圆角
+      round: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示条纹
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      // 条纹是否运动
+      stripedAnimation: {
+        type: Boolean,
+        default: true
+      },
+      // 激活部分颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 非激活部分颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 是否显示进度条内部百分比值
+      showPercent: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      progressStyle() {
+        let style = {}
+        style.borderRadius = this.round ? '100rpx' : 0
+        if (this.height) {
+          style.height = this.$t.string.getLengthUnitValue(this.height)
+        }
+        if (this.inactiveColor) {
+          style.backgroundColor = this.inactiveColor
+        }
+        return style
+      },
+      progressActiveStyle() {
+        let style = {}
+        style.width = this.percent + '%'
+        if (this.$t.color.getBackgroundColorStyle(this.activeColor)) {
+          style.backgroundColor = this.$t.color.getBackgroundColorStyle(this.activeColor)
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-line-progress {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    width: 100%;
+    height: 28rpx;
+    overflow: hidden;
+    border-radius: 100rpx;
+    background-color: $tn-progress-bg-color;
+    
+    &--active {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-items: flex-end;
+      justify-content: space-around;
+      width: 0;
+      height: 100%;
+      font-size: 20rpx;
+      color: #FFFFFF;
+      background-color: $tn-main-color;
+      transition: all 0.3s ease;
+    }
+    
+    &__striped {
+      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+      background-size: 80rpx 80rpx;
+      
+      &--active {
+        animation: progress-striped 2s linear infinite;
+      }
+    }
+  }
+  
+  @keyframes progress-striped {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 80rpx 0;
+    }
+  }
+</style>