yl-gzh/pages/loading/loading.vue

<template>
  <view>
    <view class="count-wrap">
      <view class="count-down">
        {{countDown}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        countDown: 3,
      }
    },
    onLoad(options) {
      const { id } = options
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
        } else {
          clearInterval(this.timer)
          uni.reLaunch({
            url: '/pages/lr/list?id=' + id,
          })
        }
      }, 1000)
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .count-wrap {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
  }

  .count-down {

    height: 150rpx;
    line-height: 150rpx;
    width: 150rpx;
    border: 2px dashed #01c362;
    border-radius: 50%;
    text-align: center;
    font-size: 100rpx;
    font-weight: bold;
    color: #01c362;
    animation: zoom 1s linear infinite;
  }

  @keyframes zoom {
    0% {
      transform: scale(1.4);
    }

    50% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }
</style>