press-pix/match-rank/component/css/index.less

.info-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: .2rem;
  flex-shrink: 0;
  margin-bottom: .26rem;
  position: relative;
  &::after {
    position: absolute;
    display: block;
    content: '';
    left: .5rem;
    width: 4.89rem;
    height: 0.82rem;
    opacity: 0.7;
    // background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-3-bg.png);
    background-size: 100%;
    z-index: -1;
  }
}
.info-left{
  margin-right: .08rem;
}
.info-avatar-box{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  &::after {
    position: absolute;
    top: -.24rem;
    display: block;
    content: '';
    width: 1.7rem;
    height: 1.4rem;
    // background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-3-avatar.png);
    background-size: 100%;
  }
  .info-avatar{
    position: relative;
    width: .88rem;
    height: .88rem;
    border-radius: .88rem;
  
  }
  .avatar-border{
    position: absolute;
    top: 0;
    left: 0;
    width: .88rem;
    height: .88rem;
    border-radius: 50%;
    border: .02rem solid #0c2f9c;
  }
}
.info-num{
  position: relative;
  top: .2rem;
  font-family: GameFont;
  font-size: .8rem;
}
.info-right{
  display: flex;
  flex-direction: column;
  margin-left: .5rem;
  padding-top: .1rem;
}
.info-title{
  font-family: GameFont;
  font-size: .22rem;
  &.info-title-name{
    width: 1.4rem;
    line-clamp: 1;
  }
}
.info-pinyin{
  font-family: gamefontyahei;
  font-size: .12rem;
}
.info-rank-box {
  margin-left: .69rem;
  .info-rank {
    height: .63rem;
    background-size: 100%;
  }
}
.info-rank-text {
  padding-top: .1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-item{
  &-1 {
    &::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-1-bg.png);
    }
    .info-avatar-box {
      &::after {
        background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-1-avatar.png);
      }
    }
    .info-title {
      color: #885206;
    }
    .info-rank-text .info-title,
    .info-pinyin {
      color: #c49518;
    }
    .info-rank {
      width: .27rem;
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-1.png);
    }
    .info-rank-text {
      margin-left: .35rem;
    }
  }
  &-2 {
    &::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-2-bg.png);
    }
    .info-avatar-box {
      &::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-2-avatar.png);
      }
    }
    .info-title { 
      color: #0e42a1;
    }
    .info-rank-text .info-title,
    .info-pinyin {
      color: #397df8;
    }
    .info-rank {
      width: .43rem;
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-2.png);
    }
    .info-rank-text {
      margin-left: .25rem;
    }
  }
  &-3 {
    &::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-3-bg.png);
    }
    .info-avatar-box {
      &::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-3-avatar.png);
      }
    }
    .info-title { 
      color: #995f47;
    }
    .info-rank-text .info-title,
    .info-pinyin {
      color: #bd7c5e;
    }
    .info-rank {
      width: .42rem;
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/rank-3.png);
    }
    .info-rank-text {
      margin-left: .26rem;
    }
  }
}