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

基于 PixUI 的 Press 组件库

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

.pmg-history-item{
  display: flex;
  flex-direction: column;
  margin-right: .36rem;
  margin-bottom: .1rem;
  width: 45%;
  &:nth-child(2n){
    margin-right: 0;
  }
}
// 结果头部
.pmg-history-status-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  // width: 5.96rem;
  width: 100%;
  height: 1.62rem;
  padding-top: .22rem;
  .bgUrl('comp/history-item-purple.png');
  background-size: 100% 1.39rem;
  background-repeat: no-repeat;
  background-position: bottom center;
  &.pmg-status-up{
    .bgUrl('comp/history-item-gold.png');
     background-size: 100% 1.39rem;
     background-position: bottom center;
  }
  &.pmg-status-down{
    .bgUrl('comp/history-item-gray.png');
     background-size: 100% 1.39rem;
     background-position: bottom center;
  }
}
.pmg-status-img{
  position: absolute;
  top: 0;
  left: .2rem;
  width: 2.22rem;
  height: 1.62rem;
  background-repeat: no-repeat;
  background-size: 100%;
  &.pmg-status-champion{
    .bgUrl('comp/history-item-champion.png');
  }
  &.pmg-status-people{
    .bgUrl('comp/history-item-people.png');
  }
}

.pmg-history-status{
  margin-left: 2.64rem;
  margin-bottom: .08rem;
  line-height: .66rem;
  font-weight: bold;
  font-size: .44rem;
  color: #fff;
  display: flex;
  flex-direction: row;
}
.pmg-match-name{
  padding-right: .2rem;
  margin-left: 2.64rem;
  line-height: .32rem;
  font-weight: bold;
  font-size: .22rem;
  color: #fff;
  display: flex;
  flex-direction: row;
}

// 队伍信息
.pmg-team-info-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 1.76rem;
  padding: .2rem .16rem 0;
  .bgUrl('comp/history-item-bg.png');
  background-size: 100%;
}
.pmg-team-info{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pmg-team-name{
  display: flex;
  align-items: center;
  width: 2.68rem;
  height: .3rem;
  padding-left: .16rem;
  .bgUrl('comp/team-name-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.pmg-team-name-text-box{
  line-height: .3rem;
  font-size: .2rem;
  color: #fff;
  max-width: 2rem;
}
.pmg-icon-back{
  width: .3rem;
  height: .3rem;
  margin-left: .04rem;
  .bgUrl('comp/icon-back.png');
  background-size: 100%;
}
.pmg-match-time{
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  line-height: .3rem;
  font-size: .2rem;
  color: rgba(255, 255, 255, .7);
}
.pmg-icon-time{
  width: .3rem;
  height: .3rem;
  margin-right: .04rem;
  .bgUrl('comp/icon-time.png');
  background-size: 100%;
}
// 队员列表
.pmg-team-list{
  display: flex;
  flex-direction: row;
  margin-top: .16rem;
  overflow: scroll;
}
.pmg-team-item{
  width: .72rem;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-right: .16rem;
  flex-shrink: 0;
}
.pmg-team-member{
  width: .72rem;
  height: .72rem;
  border: .01rem solid rgba(255, 255, 255, .5);
}
.pmg-member-avatar{
  width: 100%;
  height: 100%;
}
.pmg-member-rank{
  position: absolute;
  top: .58rem;
  right: -.12rem;
  width: .24rem;
  height: .24rem;
}
.pmg-member-name{
  margin-top: .08rem;
  line-height: .24rem;
  font-size: .16rem;
  color: rgba(255, 255, 255, .7);
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.pmg-match-time-text,
.pmg-match-name-text,
.pmg-history-status-text,
.pmg-team-name-text,
.pmg-member-name-text
{
  line-clamp: 1;
  text-align: left;
}