yihuo/pages/red_envelope_rain/rain.vue

<template>
    <view>
        <view class="rain-bg"></view>
        <image :src="resource.red_envelope_rain_bg2" class="red-bg" mode="widthFix" />
        <view class="flex-column-align-center paddingT22">
            <view class="color-white font8 bold">剩余时间</view>
            <view class="color-white font17 bold paddingT11">{{leftSecond}}S</view>
        </view>
        <rain-item v-for="item in 80" :key="item" :delay="item * 700" @lottery="lottery"/>
        <rain-line v-for="item in 40" :key="item" :delay="item * 1200" />
    </view>
</template>

<script>
import resource from '@/utils/resource'
import rainItem from './rain_item.vue'
import rainLine from './rain_line.vue'
import { throttle } from '@/utils'

export default {
    components: { rainItem, rainLine },
    props: {
        leftSecond: Number
    },
    data() {
        return {
            resource
        }
    },
    mounted() {
    },
    methods: {
        lottery() {
            throttle.call(this.realLottery)
        },
        realLottery() {
            this.$emit('lottery')
        }
    }
}
</script>

<style lang="scss" scoped>
.rain-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #321675 0%, #8f055f 100%);
    z-index: -1;
}
.red-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 170rpx;
    width: 100%;
    height: 0;
}

</style>