press-pix
Version:
基于 PixUI 的 Press 组件库
314 lines (313 loc) • 7.14 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.44rem;
height: .35rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/title-game-play.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
//阶段列表
.stage-list{
display: flex;
flex-direction: row;
margin-top: -.2rem;
}
.stage-item{
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
&.stage-item-gray{
opacity: .6;
}
&:nth-child(1){
.stage-des{
&::after{
right: .44rem;
width: .58rem;
}
}
.stage-card{
.stage-name{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/stage-text1.png);
}
}
}
&:nth-child(2){
.stage-des{
&::before{
left: .44rem;
width: .58rem;
}
}
.stage-card{
.stage-name{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/stage-text2.png);
}
}
}
&:nth-child(3){
.stage-des{
&::before{
left: .36rem;
width: .66rem;
background: #3f8ecb;
}
}
.stage-card{
.stage-name{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/stage-text3.png);
}
}
}
&:nth-child(4){
.stage-des{
&::before{
left: .36rem;
width: .66rem;
background: #8263f9;
}
&::after{
background: #8263f9;
}
.stage-diamond{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/dot-purple.png);
}
.stage-rank{
color: #8263f9;
}
}
.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;
}
.stage-name{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/stage-text4.png);
}
}
}
&:nth-child(5){
.stage-des{
&::before{
left: .36rem;
width: .66rem;
background: #96651e;
}
&::after{
right: .04rem;
width: .98rem;
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: .12rem;
height: .16rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/sharp-corners.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-name{
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/stage-text5.png);
}
}
}
}
// 阶段描述
.stage-des{
position: relative;
display: flex;
justify-content: center;
width: 2.32rem;
&::before{
content: '';
position: absolute;
top: .14rem;
left: 0;
width: 1.02rem;
height: .03rem;
background: #3f8ecb;
}
&::after{
content: '';
position: absolute;
top: .14rem;
right: .36rem;
width: .66rem;
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-rank{
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
top: .06rem;
right: -.68rem;
width: 1.08rem;
white-space: nowrap;
line-height: .2rem;
font-size: .16rem;
color: #3f8ecb;
}
}
// 阶段卡片
.stage-card{
display: flex;
flex-direction: column;
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-logo{
margin-left: .2rem;
width: 2.18rem;
height: 1.99rem;
}
.stage-name{
margin-top: .4rem;
margin-left: .3rem;
font-weight: 500;
font-size: 0;
color: #060b19;
width: .89rem;
height: .3rem;
background-size: 100%;
background-repeat: no-repeat;
}
.stage-time{
margin-top: .04rem;
margin-left: .3rem;
font-family: GameFont;
font-weight: 500;
font-size: .2rem;
color: #060b19;
}
.stage-award{
display: flex;
flex-direction: row;
align-items: center;
margin-left: .3rem;
margin-top: .16rem;
}
.stage-award-text{
margin-right: .06rem;
font-size: .2rem;
color: #060b19;
}
.stage-award-group{
display: flex;
flex-direction: row;
}
.stage-award-img-box{
position: relative;
width: .5rem;
height: .5rem;
border-radius: 50%;
border: .02rem solid #86cde8;
background: #272727;
z-index: 3;
&+.stage-award-img-box{
margin-left: -.06rem;
}
&:nth-child(2){
z-index: 2;
}
&:nth-child(3){
z-index: 1;
}
}
.stage-award-img{
width: .46rem;
height: .46rem;
border-radius: 50%;
}
}
// 按钮
.popup-btn-group{
display: flex;
flex-direction: row;
justify-content: center;
padding: 0 0.18rem;
margin-top: .1rem;
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{
position: relative;
top: .02rem;
font-size: .28rem;
font-weight: 600;
color: #2f140d;
}