@import "../../res.less";
.rankpage {
  width: 750px;
  height: 1624px;
  left: 0px;
  top: 0px;
  position: absolute;
  .bg {
    width: 750px;
    height: 1624px;
    left: 0px;
    top: 0px;
    position: absolute;
    .sparkBg("rankPage/bg.png");
  }
  .countdown {
    width: 527px;
    height: 67px;
    left: 121px;
    top: 414px;
    position: absolute;
    .cdbg {
      width: 527px;
      height: 67px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("rankPage/cdbg.png");
    }
    .day {
      width: 54px;
      height: 27px;
      left: 10px;
      top: 15px;
      text-align: center;
      position: absolute;
      font-size: 34px;
      line-height: 34px;
      color: rgba(29, 238, 251, 1);
    }
    .hour {
      width: 54px;
      height: 36px;
      left: 123px;
      top: 15px;
      text-align: center;
      position: absolute;
      font-size: 34px;
      line-height: 34px;
      color: rgba(29, 238, 251, 1);
    }
    .min {
      width: 54px;
      height: 27px;
      left: 206px;
      top: 15px;
      text-align: center;
      position: absolute;
      font-size: 34px;
      line-height: 34px;
      color: rgba(29, 238, 251, 1);
    }
    .sec {
      width: 54px;
      height: 27px;
      left: 289px;
      top: 15px;
      text-align: center;
      position: absolute;
      font-size: 34px;
      line-height: 34px;
      color: rgba(29, 238, 251, 1);
    }
  }
  .ranktitle {
    width: 677px;
    height: 42px;
    left: 42px;
    top: 861px;
    position: absolute;
    .sparkBg("rankPage/ranktitle.png");
  }
  .list {
    width: 716px;
    height: 699px;
    left: 20px;
    top: 925px;
    position: absolute;
    overflow-y: scroll;
    .myinfo {
      width: 716px;
      height: 116px;
      left: 0px;
      top: 0px;
      position: absolute;
      .myrank {
        width: 140px;
        height: 36px;
        left: 5px;
        top: 40px;
        text-align: center;
        position: absolute;
        font-size: 36px;
        line-height: 36px;
        color: rgba(18, 240, 243, 1);
      }
      .myname {
        width: 324px;
        height: 50px;
        left: 204px;
        top: 41px;
        position: absolute;
        font-size: 36px;
        line-height: 36px;
        color: rgba(18, 240, 243, 1);
        .lineClamp1();
      }
      .myscore {
        width: 181px;
        height: 36px;
        left: 522px;
        top: 40px;
        text-align: right;
        position: absolute;
        font-size: 36px;
        line-height: 36px;
        color: rgba(18, 240, 243, 1);
      }
      .mybg {
        width: 716px;
        height: 116px;
        left: 0px;
        top: 0px;
        position: absolute;
        .sparkBg("rankPage/mybg.png");
      }
    }
    .item {
      width: 716px;
      height: 116px;
      left: 0px;
      top: 127px;
      position: relative;
      margin-top: 6px;
      .itemrank {
        width: 100px;
        height: 28px;
        left: 25px;
        top: 40px;
        text-align: center;
        position: absolute;
        font-size: 36px;
        line-height: 36px;
        color: rgba(255, 255, 255, 1);
      }
      .itemname {
        width: 324px;
        height: 50px;
        left: 204px;
        top: 41px;
        position: absolute;
        font-size: 36px;
        line-height: 36px;
        color: rgba(255, 255, 255, 1);
        .lineClamp1()
      }
      .itemscore {
        width: 181px;
        height: 36px;
        left: 522px;
        top: 40px;
        text-align: right;
        position: absolute;
        font-size: 36px;
        line-height: 36px;
        color: rgba(255, 255, 255, 1);
      }
      .itembg {
        width: 716px;
        height: 116px;
        left: 0px;
        top: 0px;
        position: absolute;
        .sparkBg("rankPage/itembg.png");
      }
    }
    .item2 {
      width: 716px;
      height: 446px;
      left: 0px;
      top: 253px;
      position: absolute;
      .sparkBg("rankPage/item2.png");
    }
  }
  .empty {
    width: 750px;
    height: 40px;
    left: 0px;
    top: 1150px;
    position: absolute;
    text-align: center;
    font-size: 38px;
    line-height: 36px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  .prizeitem {
    width: 581px;
    height: 500px;
    left: 169px;
    top: 400px;
    position: absolute;
    .prizebg {
      width: 303px;
      height: 303px;
      left: 54px;
      top: 121px;
      position: absolute;
      .sparkBg("rankPage/prizebg.png");
    }
    .prizelight {
      width: 581px;
      height: 500px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("rankPage/prizelight.png");
    }
    .prizeimg {
      width: 214px;
      height: 214px;
      left: 95px;
      top: 135px;
      position: absolute;
      // .sparkBg("rankPage/prizeImg.png");
      img {
        width: 214px;
        height: 214px;
        left: 0px;
        top: 0px;
        position: absolute;
        object-fit: contain;
      }
    }
  }
  .title {
    width: 414px;
    height: 231px;
    left: 167px;
    top: 125px;
    position: absolute;
    .sparkBg("rankPage/title.png");
  }
  .back {
    width: 73px;
    height: 73px;
    left: 17px;
    top: 206px;
    position: absolute;
    .sparkBg("rankPage/back.png");
  }
}
