caimei-applets-hehe/components/cm-module/cm-active-popup/cm-active-popup.vue

<template>
    <view class="active-popup" v-if="visible">
        <view class="content">
            <image :src="image" @click="$emit('click')" mode="aspectFit"></image> <text class="close-btn" @click="handleClose"></text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-active-popup',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        image: {
            type: String,
            default: ''
        }
    },
    methods: {
        handleClose() {
            this.$emit('closed')
        }
    }
}
</script>

<style lang="scss" scoped>
.active-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    .content {
        position: relative;
        image {
            width: 640rpx;
        }
        .close-btn {
            display: block;
            position: absolute;
            right: 0;
            top: -48rpx;
            width: 48rpx;
            height: 48rpx;
            background: url(../../../static/icon-close.png) no-repeat center;
            background-size: 48rpx 48rpx;
        }
    }
}
</style>