press-pix
Version:
111 lines • 2.39 kB
text/less
.popup-container{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 99;
}
.popup-mask{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(#1d283b, .9);
}
.popup-content{
position: relative;
display: flex;
flex-direction: column;
padding: .4rem .18rem .04rem .18rem;
background-size: 100%;
background-repeat: no-repeat;
&.small{
width: 7.3rem;
height: 4.64rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/popup-s.png);
}
&.big{
width: 10.9rem;
height: 6.32rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/popup-b.png);
}
}
.popup-header{
position: relative;
width: 100%;
height: .8rem;
}
.popup-title{
position: relative;
padding: .24rem 0 0 .64rem;
font-family: GameFont;
color: #060b19;
font-size: .32rem;
}
.popup-close{
position: absolute;
right: 0rem;
top: 0rem;
width: .8rem;
height: .6rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/icon-close.png);
background-size: .34rem .34rem;
background-repeat: no-repeat;
background-position: center;
z-index: 2;
}
.popup-subtitle{
color: #294391;
font-size: .2rem;
margin-left: .17rem;
display: flex;
flex-direction: row;
align-items: center;
padding-top: .14rem;
}
.popup-btn-group{
position: absolute;
bottom: .28rem;
left: 0;
display: flex;
flex-direction: row;
justify-content: center;
padding: 0 0.18rem;
width: 100%;
}
.popup-btn-cancel{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 2.3rem;
height: .9rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn-blue.png);
background-size: 100%;
background-repeat: no-repeat;
&+.popup-btn-confirm{
margin-left: .24rem;
}
}
.popup-btn-confirm{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 2.3rem;
height: .9rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn-yellow.png);
background-size: 100%;
background-repeat: no-repeat;
}
.btn-text{
font-size: .28rem;
font-weight: 600;
color: #2f140d;
}