press-pix/pmg-rules-dialog/components/brief-rules/css/index.less

基于 PixUI 的 Press 组件库

@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