press-pix/act-goods-item/css/index.less

基于 PixUI 的 Press 组件库

.record-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 1.12rem;
  flex-shrink: 0;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/rank-item-bg.png);
  background-size: 100% 100%;
  margin-bottom: .06rem;
  font-size: .2rem;
  text-align: left;
  color: #294391;
  flex-shrink: 0;
}

.record-col-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: center;
  line-height: .2rem;
  font-family: gamefontyahei;
  &:nth-child(1) {
    width: 3.6rem;
    justify-content: flex-start;
    padding-left: .26rem;
  }
  &:nth-child(2) {
    width: 2.4rem;
  }
  &:nth-child(3) {
    width: 2.4rem;
  }
  &:nth-child(4) {
    width: 3rem;
  }
  &:nth-child(5) {
    width: 2.2rem;
  }

  .record-img-box {
    width: .8rem;
    height: .8rem;
    background: #c7d1e9;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;

    .record-img {
      object-fit: contain;
      width: .66rem;
      height: .66rem;
    }
    .record-img-text {
      font-size: .2rem;
      color: #060B19;
      font-family: GameFont;
      position: absolute;
      bottom: .02rem;
      right: .06rem;
    }
  }
  .record-img-text {
    margin-left: .15rem;
  }
  .record-status-text {
    width: 1.38rem;
    height: .56rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .22rem;
    position: relative;
    top: .02rem;
    color: #2F140D;
    font-family: GameFont;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn/third-yellow-btn.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    line-clamp: 2;
    &.record-status-text-disabled {
      background-image: unset;
      font-size: .2rem;
      color: #888888;
    }
    &.record-status-text-delivered {
      background-image: unset;
      font-size: .2rem;
      color: #6883C8;
    }
    &.record-status-text-progress {
      background-image: unset;
      font-size: .2rem;
      color: #E7692B;
    }
    &.record-status-text-failure {  
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn/third-blue-btn-disabled.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;
      color: #4A609A;
    }
  }
}