horzi_rai_wxa/pageMy/transitionPages/transitionPages.vue

<template>
  <view class="container container-transition">
    <text class="moneh-text"> 上传名片并填写简单信息，24小时内我们会为您开通一个月的免费月卡 </text>
    <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/month_card.png" class="month_card" alt="" />
    <view class="btn-cont btn-dl" @click="applyAuth"> 立即上传 </view>
    <view class="btn-cont month-back" @click="backIndex"> 返回</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 跳转上传信息的页面
    applyAuth() {
      uni.navigateTo({
        url: "/pageMy/applyTrial/applyTrial",
      });
    },
    // 返回
    backIndex() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container-transition {
    padding-top: 200rpx;
  .month_card {
    width: 100%;
    height: 565rpx;
    padding-left: -20rpx;
  }
  .btn-cont {
      width: 368rpx;
      height: 80rpx;
      color: #fff;
      font-size: 34rpx;
      margin: 0 auto ;
      text-align: center;
      line-height: 80rpx;
    }
  .btn-dl {
    background: linear-gradient(253deg, #fcf3e9 0%, #eedec8 100%) !important;
    color: #333 !important;
    margin: 30rpx auto !important;
  }
  .month-back {
    background: #f6f6f6 !important;
    color: #999 !important;
  }
  .moneh-text {
    text-align: center;
    width: 632rpx;
    margin: 0 auto 20rpx;
    color: #999999;
  }
}
</style>