yihuo/pages/red_envelope_rain/result.vue

<template>
    <view class="cu-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width:100%">
            <view v-if="data" class="relative wrapper flex-column-align-center">
                <image :src="resource.in_lottery" style="width: 414rpx; height: 36rpx" />
                <view class="paddingT38 paddingB20 text-center font10 bold color-white">{{data.name}}</view>
                <image :src="data.cover" style="width: 220rpx; height: 252rpx" class="radius4"/>
                <view class="paddingT40 font4" style="color: #FFFAAF">
                    奖品已发放～
                </view>
            </view>
            <view class="paddingT30 flex-align-center">
                <image :src="resource.close" class="x" @click="close" />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            visible: false,
            data: null
        }
    },
    methods: {
        show(spu) {
            this.data = spu
            this.visible = true
        },
        close() {
            this.visible = false
            this.data = false
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    padding: 63rpx 40rpx 82rpx;
    z-index: 1001;
    width: 604rpx;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(315deg, #ff345a 0%, #ffa25e 100%);
    box-shadow: 0px 0px 10rpx 0px rgba(255, 129, 0, 0.5);
    border-radius: 16rpx;
    border: 1rpx solid rgba(255, 211, 155, 0.4);
}
.x {
    width: 60rpx;
    height: 60rpx;
}
</style>