uniapp自定義彈框並顯示mask

<template>
    <view class="module-container">
        <view class="personInfo" :style="{opacity: reportModel.opacity,transform: `scale(${reportModel.scale})`,display:reportModel.display }">
            <view class="personinfo-head">設置點數</view>
            <view class="personinfo-input"><input placeholder="請輸入點數"></view>
            <view class="person-btn">
                <view class="btn1">取消</view>
                <view class="btn2">確認</view>
            </view>
        </view>
        <view v-if="showMask" class="mask" @click="handleCloseMask"></view>
        
        <view class="btn" @click="handleItem">打開彈框</view>
    </view>
</template>

JS

<script>
    export default{
        data() {
            return{
                showMask:false,
                reportModel:{
                    scale:'0.6',
                    opacity:'0',
                    display:'none'
                },
            }
        },
        methods:{
            handleItem() {
                this.showMask = true
                this.reportModel.opacity = '1'
                this.reportModel.scale = '1'
                this.reportModel.display = 'block'
            },
            // 關閉遮罩層
            handleCloseMask() {
                this.showMask = false
                this.reportModel.opacity = '0'
                this.reportModel.scale = '0.9'
                this.reportModel.display = 'none'
            },
        }
    }
</script>

CSS

<style lang="scss" scoped>
    .module-container{
        .personInfo{
            transform-origin:center center;
            width: 600rpx;
            height: 300rpx;
            background-color: #fff;
            border-radius: 25rpx;
            position: fixed;
            top: 40%;
            left: 10%;
            transform: translate(-300rpx, -150rpx);
            z-index: 2000;
            transition: all .3s;
            .personinfo-head{
                width: 100%;
                padding: 20rpx 0;
                color: #333;
                font-size: 30rpx;
                text-align: center;
            }
            .personinfo-input{
                width: 85%;
                height: 80rpx;
                background-color: #f4f1f1;
                border-radius: 10rpx;
                margin: 20rpx auto;
                input{
                    padding: 20rpx;
                }
            }
            .person-btn{
                width: 100%;
                height: 80rpx;
                display: flex;
                align-items: center;
                font-size: 28rpx;
                border-top: 1px solid #f4f1f1;
                position: fixed;
                bottom: 0;
                left: 0;
                .btn1{
                    flex: 1;
                    color: #333;
                    text-align: center;
                }
                .btn2{
                    flex: 1;
                    color: #007AFF;
                    text-align: center;
                    border-left: 1px solid #f4f1f1;
                }
            }
        }
        .mask{
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1999;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.5);
        }
    }
</style>