yihuo/pages/weal/lackMolib.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 class="relative wrapper">
                <image :src="ossurl.welfare.toys.collectImg" style="width: 588rpx;height: 276rpx;" />

                <view class="confirm">
                    <image :src="ossurl.welfare.toys.collectBtn" class="x" @click="submit" />
                </view>
            </view>
            <view class="paddingT30 flex-align-center">
                <view class="close cuIcon-close" @click="close"></view>
            </view>
        </view>
    </view>
</template>

<script>
    import ossurl from '@/utils/ossurl'
    export default {
        data() {
            return {
                ossurl,
                visible: false
            }
        },
        methods: {
            show() {
                this.visible = true
            },
            close() {
                this.visible = false
            },
            submit() {
                this.visible = false
                this.$router.switchTab('award')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        width: 566rpx;
        height: 500rpx;
        margin: 220rpx 92rpx 0;
    }
    .text {
        font-size: 40rpx;
        color: #fff;
        margin: 58rpx auto 0;
        text-align: center;
    }

    .confirm {
      text-align: center;
      margin-top: 56rpx;
    }
    .x {
      width: 308rpx;
      height: 96rpx;
    }
    .close {
        width: 64rpx;
        height: 64rpx;
        background: #d8d8d8;
        font-size: 32rpx;
        text-align: center;
        line-height: 64rpx;
        color: #444;
        border-radius: 50%;
    }
</style>