press-pix/match-page/css/index.less

基于 PixUI 的 Press 组件库

// 基础样式
.index-page {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/bg-new.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;

  .index-page-left-lottie {
    width: 7.8rem;
    height: 7.2rem;
    position: absolute;
    top: 0;
    left: -1rem;
    z-index: 1;
  }
  .index-page-right-lottie {
    width: 6rem;
    height: 7.2rem;
    position: absolute;
    bottom: 0;
    right: -1rem;
    z-index: 1;
  }
  .btn-back {
    position: absolute;
    top: 0;
    left: -.56rem;
    width: 1rem;
    height: .6rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/icon-back.png);
    background-size: .62rem .3rem;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 10;
    &.fixed-back {
      position: fixed;
      top: .23rem;
      left: .75rem;
    }
  }

  .right-btn-box {
    position: absolute;
    top: .26rem;
    right: -.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .btn-rule {
    width: .36rem;
    height: .36rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/homepage-rules.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: .45rem;
    margin-right: .36rem;
  }

  .btn-play {
    width: .34rem;
    height: .34rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/icon-play.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: .45rem;
  }

  .btn-share {
    width: .34rem;
    height: .34rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/homepage-share.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: .45rem;
  }

  .btn-group {
    padding: 0 .14rem;
    height: .39rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/homepage-wechat.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: .45rem;
    font-size: .18rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;

    .wx-icon{
      width: .32rem;
      height: .27rem;
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/wx-white.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: .06rem;
    }
  }

  .btn-location{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: .06rem;
    font-size: .18rem;
    color: #547FE6;

    .location-icon{
      width: .15rem;
      height: .22rem;
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/icon-location.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: .08rem;
    }
  }

  .btn-group-popup{
    width: .38rem;
    height: .33rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/icon-group.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: .3rem;
  }

  .btn-achievement{
    position: relative;
    width: .37rem;
    height: .31rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/icon-achievement.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: .36rem;
  }

  .btn-my-award{
    position: relative;
    top: -.04rem;
    width: .34rem;
    height: .37rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/my-award-icon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: .06rem;
  }

  .red-dot{
    position: absolute;
    top: -.1rem;
    right: -.1rem;
    width: .12rem;
    height: .12rem;
    transform: rotate(45deg);
    background-color: #f1527f;
  }

  .index-page-content {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    width: 13rem;
    height: 7.2rem;
    z-index: 10;
  }

  // 左边部分
  .page-left {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 9.2rem;
    flex-shrink: 0;
    padding-top: 1.78rem;
  }

  .match-name {
    margin-bottom: .14rem;
    font-family: GameFont;
    font-size: .96rem;
    font-weight: 700;
    color: #060b19;
    max-width: 12rem;
    line-clamp: 1;
    overflow: hidden;
    height: .96rem;
  }

  .match-info {
    display: flex;
    flex-direction: row;
    margin-bottom: .44rem;
  }

  .award-box {
    display: flex;
    flex-direction: row;
    margin-bottom: 1.02rem;
  }

  .task-award {
    margin-left: .92rem;
    &.reduce-spacing{
      margin-left: .4rem;
    }
  }

  .my-info {
    display: flex;
    flex-direction: row;
    margin-bottom: .24rem;
  }

  .match-tips {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: .18rem;
    color: #547fe6;
    font-family: gamefontyahei;

    &-info {
      margin-right: .61rem;
    }
  }

  .btn-rank {
    margin-left: .2rem;
    font-family: gamefontyahei;
  }

  // 右边部分
  .page-right {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 1.8rem;
    left: .36rem;
  }

  // 暂时保留侧边头图样式
  .bg-head-box {
    position: relative;
    height: 3rem;
    width: 3.63rem;
    pointer-events: none;

    .bg-head {
      position: absolute;
      top: -2.2rem;
      right: -1.5rem;
      width: 8.1rem;
      height: 8.36rem;
      pointer-events: none;
    }
  }

  .btn-box {
    height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .btn-to-match {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: .56rem;
    padding-right: .16rem;
    width: 3.63rem;
    height: 2.04rem;
    font-family: 'Fonteditor';
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn-main.png);
    background-size: 100%;
    z-index: 2;

    .btn-to-match-text {
      font-size: .32rem;
      color: #2f140d;
    }
    .skill-part-box{
      position: absolute;
      top: 0;
    }
  }

  .btn-matching {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: .56rem;
    padding-right: .16rem;
    width: 3.63rem;
    height: 2.04rem;
    font-family: 'Fonteditor';
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn-main-gray.png);
    background-size: 100%;
    z-index: 2;
    position: relative;

    .btn-matching-text {
      font-size: .32rem;
      color: #6D5049;
    }

    .skill-part-box{
      position: absolute;
      top: 0;
    }
  }
 .btn-matching-lottie {
    width: 5rem;
    height: 3.2rem;
    position: absolute;
    top: -.32rem;
  }
  .btn-num {
    margin-top: -.1rem;
    width: 3.63rem;
    padding-right: .16rem;
    text-align: center;
    font-size: .18rem;
    color: #0c32a5;
    font-family: gamefontyahei;
  }

  .btn-to-bsjs {
    font-weight: 400;
    width: 4rem;
    height: 0.6rem;
    font-size: 0.32rem;
    color: #fff;
    font-family: 'Fonteditor';
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-ts.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: .6rem;
  }

  .btn-position {
    position: absolute;
    bottom: 1.8rem;
    left: -0.25rem;
    z-index: 10;
  }
}
// 冰雪节的样式覆盖
.index-page-ice {

  .match-name {
    font-size: 0;
    margin-bottom: .21rem;
    width: 7.67rem;
    height: .96rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/snow-activity-title.png);
    background-size: 100%;
  }
}

// 情人节的样式覆盖
.index-page-velentine {

  .btn-rule {
    width: .29rem;
    height: .33rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-gz.png);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .match-name {
    font-size: 0;
    margin-bottom: .21rem;
    width: 6.97rem;
    height: .96rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-acticity-title.png);
    background-size: 100%;
  }
}

// 节点赛1v1的样式覆盖
.index-page-solo {
  .btn-course {
    width: .3rem;
    height: .34rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/icon-course.png);
    background-size: contain;
    margin-left: .45rem;
  }

  .btn-rule {
    width: .34rem;
    height: .34rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/icon-rule-ballte.png);
    background-size: contain;
  }

  .match-name {
    font-size: 0;
    margin-bottom: .21rem;
    width: 6.35rem;
    height: .97rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/solo-acticity-title.png);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .match-info {
    z-index: 1;
  }

  .btn-to-promoted {
    font-family: GameFont;
    width: 4rem;
    height: 0.6rem;
    font-size: 0.32rem;
    color: #fff;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/node1v1/btn-orange-bg.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 无限乱斗比配赛的样式
.index-page-brawl {
  .match-name {
    font-size: 0;
    margin-bottom: .21rem;
    width: 6.85rem;
    height: .96rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/brawl/brawl-title.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
}

// 随机乱斗比配赛的样式
.index-page-random {
  .match-name {
    font-size: 0;
    width: 6.8rem;
    height: .96rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/random/random-title.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
}

// 商户赛样式
.index-page-merchant {
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/merchant-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .bg-head-box {
    display: none;
  }
  // 商户赛的logo
  .bg-logo-box {
    position: relative;
    height: 3.06rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    flex-shrink: 0;
   
    .bg-logo-shadow {
      width: 3.62rem;
      height: 3.62rem;
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/merchant/shadow-bg.png);
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
    }

    .bg-logo {
      width: 3.06rem;
      height: 3.06rem;
      pointer-events: none;
      border-radius: 50%;
      overflow: hidden;
    }
  }
}

// 单挑赛的样式
.index-page-solo {
  .match-name {
    margin-bottom: .1rem;
    font-size: 0;
    width: 4.87rem;
    height: .97rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/solo-title.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .bg-head-box {
    .bg-head {
      top: -1.9rem;
      right: -1.6rem;
    }
  }
}