yihuo/pages/weal/catch_rule.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="rule-mask" @click="close"></view>
        <view class="cu-dialog relative" style="background-color: transparent; width: 100%">
            <view class="relative wrapper">
                <image :src="ossurl.welfare.toys.ruleImg" class="rule" mode="widthFix" />
            </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 {
        props: {
            luckKing: Object
        },
        data() {
            return {
              ossurl,
                visible: false
            }
        },
        methods: {
            show() {
                this.visible = true
                this.$parent.$parent.$parent.lock = true
            },
            close() {
                this.visible = false
                this.$parent.$parent.$parent.lock = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .rule-mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        z-index: 1001;
        width: 594rpx;
        height: 720rpx;
        margin: 0 auto;
        position: relative;
        .rule {
            width: 594rpx;
            height: 0
        }
    }
    .close {
            width: 64rpx;
            height: 64rpx;
            background: #d8d8d8;
            font-size: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: #444;
            border-radius: 50%;
        }

</style>