1. <template>
    2.     <view class="content-main welcome">
    3.         <view class="count-down" @click="handleClose">
    4.             <view class="num">{{ count }}s</view>
    5.             <view class="text">跳过</view>
    6.         </view>
    7.     </view>
    8. </template>
    10. <script lang='ts'>
    11. import { Component, Vue } from "vue-property-decorator";
    13. @Component({})
    14. export default class extends Vue {
    15.     timer: any = null;
    16.     count: number = 5;
    18.     onLoad() {
    19.         this.handleCountDown();
    20.     }
    21.             // 定时器
    22.     handleCountDown() {
    23.         this.timer = setInterval(() => {
    24.             this.count--;
    25.             if (this.count < 1) {
    26.                 this.handleClose();
    27.                 clearInterval(this.timer);
    28.             }
    29.         }, 1000);
    30.     }
    32.     handleClose() {
    33.         if (this.timer) {
    34.             clearInterval(this.timer);
    35.         }
    36.         this.Foundation.nav("lottery");
    37.     }
    38. }
    39. </script>
    41. <style lang='scss' scoped>
    42. .welcome {
    43.     background-image: url("~@/static/img/welcome.jpg");
    44.     color: #a9adb0;
    45.     text-align: center;
    46.     font-size: 28rpx;
    47.     .count-down {
    48.         position: absolute;
    49.         right: 20rpx;
    50.         top: 20rpx;
    51.         .num {
    52.             width: 68rpx;
    53.             height: 68rpx;
    54.             line-height: 68rpx;
    55.             border-radius: 50%;
    56.             text-align: center;
    57.             color: #ffffff;
    58.             background-color: rgba(0, 0, 0, 0.33);
    59.             margin-bottom: 6rpx;
    60.         }
    61.     }
    62. }
    63. </style>