css手写遮罩层

<div class="messge" v-show="isShow">
    <div class="messge-con">
        <div class="card">确认投入<span>{{number*10}}</span>个钻石</div>
        <div class="messge-but">
            <div class="qu que" @click="cancelClick">取消</div>
            <div class="que" @click="actionClick">确定</div>
        </div>
    </div>
</div>


.messge{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
     -webkit-fill-available;
    height: -webkit-fill-available;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .2s;
    transition: .2s;
    background-color: rgba(36, 36, 36, 0.5);
    z-index: 999;
}
.messge-con{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
     87%;
    background-color: #FFFFFF;
    border-radius: 30px;
}