press-pix/pmg-my-match/component/matching-item/css/index.less

基于 PixUI 的 Press 组件库

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

.pmg-matching-item{
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 49%;
  height: 2.12rem;
  .bgUrl('comp/matching-item-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: .06rem;
  padding: 0 .32rem;
  margin-bottom: .06rem;
  &:nth-child(2n){
    margin-right: 0;
  }
}
.pmg-label-item{
  position: absolute;
  top: 0;
  left: .04rem;
  display: flex;
  align-items: center;
  height: .26rem;
  padding: 0 .12rem 0 .16rem;
  font-size: .16rem;
  color: #000;
  &::after{
    position: absolute;
    top: 0;
    right: -.12rem;
    content: '';
    width: .12rem;
    height: .26rem;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  &.pmg-label-matching{
    background-color: #5adddd;
    &::after{
      .bgUrl('comp/label-jiao2.png');
    }
  }
  &.pmg-label-sign-up{
    background-color: #ffdd21;
    &::after{
      .bgUrl('comp/label-jiao1.png');
    }
  }
  &.pmg-label-end{
    background-color: #85a7a2;
    &::after{
      .bgUrl('comp/label-jiao3.png');
    }
  }
}
.pmg-match-info{
  display: flex;
  flex-direction: column;
  padding-right: .32rem;
  margin-top: .32rem;
}
.pmg-match-name{
  line-height: .42rem;
  font-size: .28rem;
  color: #fff;
  margin-top: .08rem;
    display: flex;
  align-items: center;
  flex-direction: row;
}
.pmg-match-label{
  display: flex;
  flex-direction: row;
  margin-top: .08rem;
  overflow: scroll;
}
.pmg-match-label-item{
  display: flex;
  align-items: center;
  margin-right: .1rem;
  height: .3rem;
  padding: 0 .08rem;
  font-size: .2rem;
  color: rgba(255, 255, 255, .7);
  background-color: rgba(51, 78, 82, .6);
  flex-shrink: 0;
  &.pmg-line-item{
    color: #5ad28a;
  }
}
.pmg-icon-time{
  width: .3rem;
  height: .3rem;
  .bgUrl('comp/icon-time.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.pmg-match-award-box{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: .28rem;
}
.pmg-match-award{
  max-width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .28rem;
  height: .28rem;
  border: .01rem solid #3770b6;
  background-color: rgba(20, 22, 31, .82);
}
.pmg-match-award-img{
  width: .28rem;
  height: .28rem;
}
.pmg-match-award-name{
  margin-left: .08rem;
  font-size: .16rem;
  line-height: .24rem;
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  flex-direction: row;
}
.pmg-match-logo{
  margin-top: .28rem;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}
.pmg-match-logo-img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

// 卡片文案
.pmg-match-name,
.pmg-match-label,
.pmg-match-award-name{
  max-width: 4.5rem;
  &-text{
    line-clamp: 1;
     text-align: left;
  }
}
.pmg-match-award-name{
  width: 4.3rem;
  &-text{
    line-clamp: 2;
     text-align: left;
  }
}