press-pix
Version:
基于 PixUI 的 Press 组件库
300 lines (274 loc) • 5.33 kB
text/less
@import '../../../../common/styles/pubgm/mixins.less';
// 简要规则
.pmg-match-brief-rules-content{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
// align-items: center;
padding-top: .66rem;
padding-bottom: .66rem;
}
.pmg-left-detail-container{
display: flex;
flex-direction: column;
}
.pmg-left-detail-item{
display: flex;
flex-direction: column;
margin-bottom: .46rem;
&:last-of-type{
margin-bottom: 0;
}
}
.pmg-left-detail-title{
font-size: .22rem;
color: rgba(255, 255, 255, 0.70);
margin-bottom: .08rem;
text-align: left;
line-clamp: 1;
}
.pmg-left-detail-text{
font-size: .28rem;
font-weight: bold;
color: #fff;
text-align: left;
line-clamp: 1;
}
.pmg-table-container{
width: 6.7rem;
margin-left: 1.86rem;
display: flex;
flex-direction: column;
}
.pmg-rank-list-table{
height: 3.7rem;
overflow: scroll;
display: flex;
flex-direction: column;
}
.pmg-empty-container{
height: 3.7rem;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.30);
font-size: .28rem;
color: #fff;
}
// tableTitle -- start
.pmg-rank-list-title{
width: 100%;
height: .64rem;
height: .52rem;
.bgUrl('comp/table-header-bg-small.png');
display: flex;
flex-direction: row;
align-items: center;
&.usual{
.pmg-rank-list-title-text{
&:nth-child(1){
width: 12%;
flex-grow: 1;
}
// 战队名
&:nth-child(2){
width: auto;
flex-grow: 1;
justify-content: center;
}
}
}
}
.pmg-rank-list-title-text{
color: rgba(255, 255, 255, .7);
font-size: .22rem;
text-align: center;
flex-grow: 1;
flex-shrink: 0;
width: 8%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&.text-active{
color: #FFBA00;
}
&:nth-child(1){
width: 12%;
text-align: center;
flex-grow: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 战队名
&:nth-child(2){
width: 28%;
text-align: left;
flex-grow: 0;
justify-content: flex-start;
}
}
// tableTitle -- end
// tableItem -- start
.pmg-rank-list-table{
display: flex;
flex-direction: column;
overflow: scroll;
height: 100%;
background-color: rgba(255, 255, 255, .1);
}
.pmg-rank-list-content{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-grow: 1;
}
// 表单数据
.pmg-rank-list-item-container{
display: flex;
flex-direction: column;
width: 100%;
flex-shrink: 0;
background-color: rgba(0, 0, 0, .3);
&.stripe{
border-bottom: .02rem solid rgba(255, 255, 255, .1);
&:nth-child(2n+1){
background-color: rgba(255, 255, 255, .1);
}
}
&.usual{
.pmg-rank-list-item-text{
&:nth-child(1){
width: 12%;
flex-grow: 1;
}
}
}
}
.pmg-rank-list-item{
font-size: .28rem;
color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
min-height: .8rem;
padding: .08rem 0;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, .1);
position: relative;
&:last-child{
border-bottom: 0;
}
}
// 战队名
.pmg-rank-list-item-text-container{
display: flex;
flex-direction: row;
align-items: center;
width: 28%;
.pmg-rank-list-item-text{
color: #fff;
display: block;
text-align: left;
}
}
.pmg-team-logo{
width: .36rem;
height: .36rem;
object-fit: contain;
margin-right: .08rem;
}
.pmg-rank-list-item-text{
flex-grow: 1;
text-align: center;
flex-shrink: 0;
width: 8%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
line-clamp: 1;
&:nth-child(1){
width: 12%;
text-align: center;
flex-grow: 0;
white-space: nowrap;
}
}
.pmg-rank-num-three,
.pmg-rank-num-two,
.pmg-rank-num-one{
width: .64rem;
height: .64rem;
.bgUrl('comp/icon-rank-one.png');
}
.pmg-rank-num-two{
width: .6rem;
.bgUrl('comp/icon-rank-two.png');
}
.pmg-rank-num-three{
.bgUrl('comp/icon-rank-three.png');
}
// 队伍成员列表数据
.pmg-team-detail-list-container{
padding: 0 .52rem;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.pmg-team-detail-title{
width: 100%;
height: .52rem;
flex-shrink: 0;
background-color: #415051;
color: rgba(255, 255, 255, .7);
font-size: .2rem;
display: flex;
flex-direction: row;
align-items: center;
}
.pmg-team-detail-title-text{
flex-grow: 1;
text-align: center;
flex-shrink: 0;
width: 8%;
&:nth-child(1){
width: 28%;
text-align: left;
padding-left: .8rem;
}
}
.pmg-team-detail-table{
display: flex;
flex-direction: column;
align-items: center;
color: #FFF;
font-size: .22rem;
}
.pmg-team-detail-table-item{
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
min-height: .38rem;
padding: .18rem 0;
background-color: rgba(0, 0, 0, .3);
border-bottom: .02rem solid rgba(255, 255, 255, .1);
}
.pmg-team-detail-table-text{
flex-grow: 1;
text-align: center;
flex-shrink: 0;
width: 8%;
text-align: center;
&:nth-child(1){
width: 28%;
text-align: left;
padding-left: .8rem;
}
}
// tableItem -- end