pc端支付蒙版样式 html+css

先上样式

html部分

     <!--充值蒙版-->
     <div class="main11" v-if="main10true"></div>
     <div class="main11son" v-if="main10true">
           <div class="top">
                <div class="topleft">&#8194;&#8194;充值方式</div>
                <div class="topright" @click="close">×</div>
           </div><br/>
           <div class="bom">
               <div class="wechat wx" @click="wechatpay">
                   <div class="kong"></div>&#8194;
                   <div class="w1 wtu1" style="width:40px;height:30px;"></div>
                   <div class="w2">&#8194;微信付款</div>
               </div>
               <div class="wechat alp" @click="alipay">
                   <div class="kong"></div>
                   <div class="w1 wtu2"></div>
                   <div class="w2">&#8194;&#8194;支付宝付款</div>
               </div>
           </div>  
     </div> 

css部分

.main11{
    
    
    width: 100vw;
    height: 130vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(88, 87, 86);
    opacity: 0.9;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

}
.main11son{
    
    
    position: absolute;
    top: 420px;
    left: 800px;
    z-index: 1100;
    width: 300px;
    height:200px;
    background-color: #fff;
    .top{
    
    
        width: 100%;
        height: 40px;
        color: #fff;
        background-color: #B82E2D;
        display: flex;
        align-items: center;
        justify-content: center;
        .topleft{
    
    
           flex:6;
           height: 100%;
           font-size: 14px;
           display: flex;
           align-items: center;
           justify-content: flex-start;
        }
        .topright{
    
    
            flex:1;
            height: 100%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        .topright:hover{
    
    
            background-color:#f20c00;
            color: #fff;
        }
    }
    .bom{
    
    
        width: 100%;
        height: 150px;
        .wechat{
    
    
            width: 70%;
            margin: 0 auto;
            margin-top: 10px;
            height: 50px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            cursor: pointer;
            font-weight: 600;
            .kong{
    
    
                width: 30px;
            }
            .w1{
    
    
               width: 40px;
               height: 40px;
               background-repeat: no-repeat;
               background-size: contain;
            }
            .w2{
    
    
               flex:1;
               display: flex;
               align-items: center;
               justify-content: flex-start;
            }
        }
        .wx{
    
    background-color: #2EC100;}
        .alp{
    
    background-color: #1678FF;}
    }
}

        //   .btn{
    
    
        //         height: 50px;
        //         width: 100%;
        //         margin-top: 50px;
        //     }

.wtu1{
    
    
   background-image: url(../../assets/微信.png);
}
.wtu2{
    
    
  background-image: url(../../assets/支付宝.png);
}
@media screen and (max-width: 1680px) {
    
    
    .main11son{
    
    
        left: 700px;
    }
}
@media screen and (max-width: 1480px) {
    
    
    .main11son{
    
    
        left: 600px;
    }
}
@media screen and (max-width: 1300px) {
    
    
    .main11son{
    
    
        left: 520px;
    }
}
@media screen and (max-width: 1280px) {
    
    
    .main11son{
    
    
        left: 450px;
    }
}