使用van-popup修改样式为自定义弹框

html：

<div class="couponContent">
    <van-popup v-model="show" :close-on-click-overlay="false" 
        closeable close-icon-position="bottom" class="popup">
        <div class="couponBox">
            <img :src="merchantInfo.cdn_static+'statistics/ai_img/coupon_bg.png'" />
            <div class="price">
                <span>¥</span>1
            </div>
            <div class="title">测试</div>
        </div>
    </van-popup>
</div>

js：

data () {
    return {
        弹框显示隐藏
        show：true
    }
},

css:

.couponContent {
    z-index: 10;
    position: relative;

    .popup {
        width: 330px;
        height: 306px;
        overflow: hidden;
        background: transparent;
    
        .couponBox {
            width: 320px;
            height: 260px;
            position: relative;
            
            img {
                width: 100%;
                height: 100%;
            }
            
            .price, .title {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                font-weight: bold;
                color: #F84301;
            }
            
            .price {
                top: 37px;
                font-size: 32px;
                
                span {
                    font-size: 14px;
                }
            }
            
            .title {
                top: 82px;
                font-size: 14px;
            }
        }
        
        /deep/.van-popup__close-icon {
            background: #FFFFFF; 
            border-radius: 50%;            
            bottom: 0;
            left: 50%;
            transform: translateX(-75%);
            padding: 3px;
        }
    }
}

@media screen and (max-width: 750px) {
    .couponContent {
    
        .popup {
            width: 6.6rem;
            height: 6.12rem;
        
            .couponBox {
                width: 6.4rem;
                height: 5.2rem;
                
                .price {
                    top: 0.74rem;
                    font-size: 0.64rem;
                    
                    span {
                        font-size: 0.28rem;
                    }
                }
                
                .title {
                    top: 1.64rem;
                    font-size: 0.28rem;
                }
            }
            
            /deep/.van-popup__close-icon {
                padding: 0.06rem;
            }
        }
    }
}

效果图：