superstar-dice/_src/components/popup/vip/style.scss

.vip-wrap{
  width: px2rem(600);
  margin: 0 px2rem(10);
  .vip-hd{
    @include webkitbox(1);
    .level-current, .level-next{
      width: px2rem(57);
      height: px2rem(47);
      padding-top: px2rem(20);
      i{
        width: px2rem(57);
        height: px2rem(47);
        display: block;
      }
    }
    .level-progress{
      @include flex(1);
      margin: 0 px2rem(15);
    }
    .level-comming{
      overflow: hidden;
      p{
        float: left;
        text-align: left;
        color: #ffffff;
        font-size: px2rem(14);
        line-height: px2rem(33);
        margin-right: px2rem(15);
      }
      i{
        float: left;
        width: px2rem(40);
        height: px2rem(33);
      }
    }
    .progress-wrap{
      background: rgba(255, 255, 255, 0.2);
      padding: px2rem(3);
      margin-top: px2rem(3);
    }
    .progress-bar{
      height: px2rem(14);
      background: #ecbc5e;
      transition: all 700ms ease;
    }
  }
  .vip-introtips{
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    font-size: px2rem(14);
    line-height: px2rem(24);
    padding: px2rem(10) 0;
  }
  .vip-level{
    width: 100%;
    color: #ffffff;
    thead{
      border: 1px solid rgba($color: #ffffff, $alpha: 0.2)
    }
    th{
      line-height: px2rem(40);
      text-align: center;
      font-size: px2rem(14);
    }
    td{
      text-align: center;
      line-height: px2rem(46);
      border: 1px solid rgba($color: #ffffff, $alpha: 0.2);
      font-size: 0;
      span{
        display: inline-block;
        font-size: px2rem(14);
        vertical-align: middle;
      }
      i{
        display: inline-block;
        width: px2rem(46);
        height: px2rem(38);
        vertical-align: middle;
      }
    }
    .t2{
      text-align: left;
      padding-left: px2rem(20);
      width: px2rem(100);
    }
    .t4{
      text-align: left;
      padding-left: px2rem(30);
      width: px2rem(80);
    }
    .t3{
      width: px2rem(150);
    }
    .t1{
      font-size: 0;
      width: px2rem(100);
    }
  }
  @for $i from 0 through 10 {
    .icon-level#{$i} {
      background: url('./img/icon-level#{$i}.png') no-repeat;
      background-size: 100%;
    }
  }
}