press-pix
Version:
289 lines (288 loc) • 6.7 kB
text/less
// 弹窗盒子
.popup-game-play{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/popup-mask.png);
background-size: cover;
background-repeat: no-repeat;
}
// 弹窗标题
.popup-title{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 5.69rem;
height: 1.16rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/guide-title.png);
background-size: 100%;
background-repeat: no-repeat;
.popup-text{
width: 1.43rem;
height: .35rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/title-select-stage.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
//阶段列表
.stage-list{
display: flex;
flex-direction: row;
margin-top: -.2rem;
}
.stage-item{
position: relative;
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
&:nth-child(2){
.stage-des{
&::before{
left: -.14rem;
width: 1.18rem;
}
}
}
&:nth-child(3){
.stage-des{
&::before{
left: -.14rem;
width: 1.18rem;
background: #3f8ecb;
}
}
}
&:nth-child(4){
.stage-des{
&::before{
left: -.14rem;
width: 1.18rem;
background: #8263f9;
}
&::after{
background: #8263f9;
}
.stage-diamond{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/dot-purple.png);
}
}
.stage-card{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/bg-stage-purple.png);
.stage-award-img-box{
border-color: #967ef4;
}
}
}
&:nth-child(5){
.stage-des{
&::before{
left: -.14rem;
width: 1.18rem;
background: #96651e;
}
&::after{
right: .06rem;
width: .94rem;
background: #96651e;
}
.stage-diamond{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/dot-yellow.png);
}
.stage-rank{
position: absolute;
top: .08rem;
right: -.04rem;
width: .14rem;
height: .16rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/arrow-yellow.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
.stage-card{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/bg-stage-yellow.png);
.stage-award-img-box{
border-color: #f6c672;
}
}
&.stage-item-act{
.stage-des{
&::after{
right: .06rem;
width: .92rem;
}
}
}
}
&.stage-item-act{
.stage-des{
&::before{
left: -.14rem;
width: 1.1rem;
}
&::after{
right: -.2rem;
width: 1.18rem;
}
.stage-diamond{
position: relative;
background-image: none;
&::before{
content: '';
position: absolute;
top: -.18rem;
left: -.18rem;
width: .65rem;
height: .65rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/dot-select.png);
background-size: 100%;
}
}
}
}
}
// 阶段描述
.stage-des{
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
width: 2.32rem;
&::before{
content: '';
position: absolute;
top: .13rem;
left: 0;
width: 1rem;
height: .03rem;
background: #3f8ecb;
}
&::after{
content: '';
position: absolute;
top: .13rem;
right: -.14rem;
width: 1.18rem;
height: .03rem;
background: #3f8ecb;
}
.stage-diamond{
width: .31rem;
height: .31rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/dot-blue.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
// 阶段卡片
.stage-card{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 2.6rem;
height: 4.36rem;
padding-top: .3rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/bg-stage-blue.png);
background-size: 100%;
background-repeat: no-repeat;
.stage-select{
position: absolute;
top: -.1rem;
left: -.08rem;
width: 2.76rem;
height: 4.52rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/select-box.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
}
.stage-mask{
position: absolute;
top: 0;
left: 0;
width: 2.6rem;
height: 4.36rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/stage-mask.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
}
.stage-logo{
margin-left: .2rem;
width: 2.18rem;
height: 1.99rem;
}
.stage-status{
position: absolute;
top: 2.8rem;
left: .12rem;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 .12rem 0 .18rem;
height: .3rem;
line-height: .3rem;
font-size: .18rem;
color: #fff;
background: #000;
.time-icon{
margin-right: .06rem;
width: .18rem;
height: .18rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/icon-time.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
.stage-name{
margin-top: .82rem;
margin-left: .3rem;
font-weight: 600;
font-size: .3rem;
color: #060b19;
}
.stage-time{
margin-top: .04rem;
margin-left: .3rem;
font-family: GameFont;
font-weight: 500;
font-size: .2rem;
color: #060b19;
}
}
// 按钮
.popup-btn-group{
display: flex;
flex-direction: row;
justify-content: center;
padding: 0 0.18rem;
margin-top: .1rem;
width: 100%;
}
.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;
}