press-pix/sche-champoin/css/index.less

基于 PixUI 的 Press 组件库

.champoin-schedule {
  width: 100%;
  flex-grow: 1;
  margin-left: -.46rem;
  background:url(https://image-1251917893.file.myqcloud.com/Esports/schedule/sche-champoin-bg.png) no-repeat;
  background-position: 0 0;
  background-size: 11.6rem 4.96rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  .champoin-schedule-title {
    width: 100%;
    height: .6rem;
    background:url(https://image-1251917893.file.myqcloud.com/Esports/schedule/champion-match-title.png) no-repeat;
    background-position: center center;
    background-size: 9.24rem .6rem;
    margin-bottom: .38rem;
  }
  .champoin-schedule-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    .champoin-schedule-item {
      flex-grow: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .champoin-schedule-item-header {
        width: 1.56rem;
        height: 1.56rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/champion-header-bg.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: .1rem;
        position: relative;
        .champoin-schedule-mine-tag {
          position: absolute;
          bottom: 0;
          width: .5rem;
          height: .24rem;
          border-radius: .1rem 0 .1rem 0;
          background: #fa9301;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;
          .champoin-schedule-tag-text {
            font-size: .16rem;
            color: #ffffff;
            font-family: GameFont;
            position: relative;
            top: .02rem;
          }
        }
        .champoin-schedule-status-tag {
          position: absolute;
          top: 0;
          right: 0;
          width: .6rem;
          height: .24rem;
          z-index: 1;
        }
        .champoin-schedule-qi-tag {
          position: absolute;
          top: 0;
          right: 0;
          width: .5rem;
          height: .24rem;
          background: #7988b7;
          border-radius: .1rem 0 .1rem 0;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;
          .champoin-schedule-tag-text {
            font-size: .16rem;
            color: #ffffff;
            font-family: GameFont;
            position: relative;
            top: .02rem;
          }
        }
      }
      .champoin-schedule-item-img-wrapper {
        width: 1.46rem;
        height: 1.46rem;
        border-radius: 50%;
        overflow: hidden;
        background: #b1c1ee;
      }
      .champoin-schedule-item-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
      }
      .champoin-schedule-item-name {
        width: 2.8rem;
        height: .52rem;
        font-size: .24rem;
        color: #060B19;
        font-family: GameFont;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/team-bg-left.png) no-repeat;
        background-size: 100% 100%;
        padding: 0 .3rem .08rem .6rem;
        .champoin-schedule-item-name-text {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          line-clamp:1;
          text-align: center;
        }
      }
    }
    .champoin-schedule-item-center {
      width: 3.96rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .champoin-schedule-item-vs {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .champoin-schedule-item-score, .champoin-schedule-item-vs-text {
          font-size: 1.2rem;
          color: #000000;
          font-family: GameFont;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
        }
        .champoin-schedule-item-vs-icon {
          width: .2rem;
          height: .72rem;
          margin: 0 .32rem;
        }
      }
      .champoin-schedule-item-tips {
        height: .3rem;
        font-size: .18rem;
        color: #547FE6;
        font-family: GameFont;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin-bottom: .2rem;
        &.champoin-schedule-item-tips-waiting {
          color: #DE6707;
        }
        &.champoin-schedule-item-tips-ing {
          color: #000000;
        }
        .champoin-schedule-tips-live {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #3DC1C9;
          margin-left: .08rem;
          .champoin-schedule-tips-icon {
            width: .28rem;
            height: .2rem;
            margin-left: .08rem;
          }
        }
      }
      .champoin-schedule-item-btn {
        width: 1.16rem;
        height: .4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #457EF1;
        font-size: .2rem;
        color: #0C32A6;
        font-family: GameFont;
        .champoin-schedule-item-btn-text {
          font-size: .2rem;
        color: #0C32A6;
        font-family: GameFont;
        position: relative;
        top: .02rem;
          &.champoin-schedule-item-btn-text-subscribed {
            color: #547FE6;
          }
        }
      }
    }
  }
}