press-pix/pmg-join-team-apply-dialog/css/index.less

基于 PixUI 的 Press 组件库

@import '../../common/styles/pubgm/mixins.less';

.pmg-join-team-apply-dialog{
  padding: .3rem .4rem 0 .4rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pmg-tip{
 color: rgba(255, 255, 255, .5);
 font-weight: bold;
 font-size: .16rem;
 margin-top: .16rem;
 display: flex;
 flex-direction: row;
 align-items: center;
 &-text{
  line-clamp: 1;
 }
}

.pmg-drop-down-list-wrap{
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 2;
}

.pmg-drop-down-list-item{
  position: relative;
  z-index: 99;
  margin-right: .16rem;
  flex-shrink: 0;
  &:last-child{
    margin-right: 0;
  }
}

.pmg-remind-teammates-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 4rem;
  overflow: scroll;
  margin-top: .12rem;
}

.pmg-teammate-item{
  width: 100%;
  min-height: 1.16rem;
  background-color: rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
  padding: .22rem .24rem;
  margin-bottom: .08rem;
  flex-shrink: 0;
}

.pmg-teammate-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pmg-left-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  .pmg-avatar-img{
  width: .84rem;
  height: .84rem;
  object-fit: contain;
  flex-shrink: 0;
  }

}

  .pmg-info-wrapper{
    display: flex;
    flex-direction: column;
    margin-left: .16rem;
  
  }

  .pmg-level-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: .1rem;
    .pmg-kd-text,
    .pmg-level-text,
    .pmg-divider-text{
      color: rgba(255, 255, 255, .7);
      font-size: .2rem;
      line-clamp: 1;
      flex-shrink: 0;
      margin-left: .08rem;
    }
    .pmg-kd-text,
    .pmg-divider-text{
      font-size: .22rem;
      font-weight: bold;
    }
    .pmg-tag-peak-box {
        margin-left: .08rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 .04rem;
        height: .24rem;
        border: .01rem solid #b68830;
        border-radius: .02rem;
        background-color:rgba(255, 211, 53, 0.1);
        min-width: .88rem;
        flex: 1;
    }
    .pmg-tag-peak-text {
      font-size: .16rem;
      color:#b68830;
      line-clamp: 1;
    }
  }
  .pmg-name-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    .pmg-name-text{
      color: #fff;
      font-size: .24rem;
      font-weight: bold;
      line-clamp: 1;
      width: 3.5rem;
      line-clamp: 1;
      text-align: left;
    }

  }

  .pmg-icon-sex{
    width: .32rem;
    height: .32rem;
    .bgUrl('comp/man-icon.png');
    flex-shrink: 0;
    margin-right: .02rem;
    &.girl{
      .bgUrl('comp/girl-icon.png');
    }
  }

  .pmg-level-wrapper{
    .pmg-level-img{
      width: .3rem;
      height: .3rem;
      object-fit: contain;
      flex-shrink: 0;
    }
  }

.pmg-right-content{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;

  .pmg-apply-time{
    color: rgba(255, 255, 255, .5);
    font-size: .16rem;
    font-weight: bold;
    margin-bottom: .08rem;
    text-align: right;
    &-text{
      margin-left: .04rem;
    }
  }
  .pmg-btn-text{
    color: rgba(255, 255, 255, .3);
    font-size: .22rem;
    font-weight: bold;
    text-align: right;
    margin-top: .1rem;
  }
}
  .pmg-btn-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;

  }

  .pmg-confirm-btn,
  .pmg-cancel-btn{
    font-size: .22rem;
    font-weight: bold;
    color: #fff;
    padding: .08rem .24rem;
    background-color: rgba(53, 53, 53, .6);
    border: 0.02rem solid rgba(255, 255, 255, .5);
  }
  .pmg-confirm-btn{
    background-color: rgba(42, 79, 83, .6);
    border-color: #B7FFF6;
    color: #A1FFF6;
    margin-left: .16rem;
  }

  .pmg-bottom-message{
    padding: .08rem;
    background:rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .5);
    font-weight: bold;
    font-size: .16rem;
    margin-left: 1rem;
    &-text{
      line-clamp: 3;
      text-align: left;
    }
  }