@import "../../res.less";
.rankPage {
  width: 750px;
  height: 100vh;
  left: 0px;
  top: 0px;
  position: absolute;
  overflow:hidden;
  .bg {
    width: 750px;
    height: 1624px;
    left: 0px;
    top: 0px;
    position: absolute;
    .sparkBg("rank/bg.jpg");
  }
  .title {
    width: 204px;
    height: 67px;
    left: calc(50% - 204px/2);
    top: 147px;
    position: absolute;
    .sparkBg("rank/title.png");
  }
  .countTime{
    width:750px;
    height: 80px;
    position: absolute;
    top:300px;
    left:0;
    text-align: center;
    color: #fff;
    font-size: 28px;
    .times{
      span{
        width: 58px;
        height: 58px;
        display: inline-block;
        text-align: center;
        line-height: 58px;
        color:#963800;
        font-weight: 500;
        margin:0 5px;
      .sparkBg("rank/countbg.png");
      }
    }
  }
  .prizeList{
    width:680px;
    height: 275px;
    position: absolute;
    top:374px;
    left: 43px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    .prizeItem{
      width:176px;
      height: 260px;
      display: inline-block;
      .sparkBg("rank/itembg4.png");
      margin-right: 10px;
      position: relative;
      &:nth-child(1){
        .sparkBg("rank/itembg1.png");
      }
      &:nth-child(2){
        .sparkBg("rank/itembg2.png");
      }
      &:nth-child(3){
        .sparkBg("rank/itembg3.png");
      }
      .prizeImg{
        width:150px;
        height: 150px;
        position: absolute;
        left:calc(50% - 150px/2);
        top:10px;
        img{
          width:100%;
          height: 100%;
          border-radius: 10px;
          background-color: #fff;
        }
      }
      .prizeName{
        width: 166px;
        position: absolute;
        top:165px;
        left:5px;
        text-align: center;
        font-size: 24px;
        color: #a16834;
        .lineClamp1();
      }
      .rank{
        width: 166px;
        position: absolute;
        top:200px;
        left:5px;
        text-align: center;
        font-size: 30px;
        color: #a16834;
        .lineClamp1();
        font-weight: 500;
        font-style: italic;
      }
    }
  }
  .rankTitle{
    width:610px;
    display: flex;
    position: absolute;
    left:calc(50% - 610px/2);
    top:700px;
    div{
      flex:1;
      text-align: center;
      font-size: 23px;
      color: #e4a43b;
      &:nth-child(1){
        flex:0.5;
      }
      &:nth-child(2){
        flex:1.5;
      }
    }
  }
  .myRankInfo{
    width:610px;
    display: flex;
    height: 94px;
    position: absolute;
    left:calc(50% - 610px/2);
    top:725px;
    border-bottom:1px solid #f1ebe5;
    div{
      flex:1;
      height: 94px;
      line-height: 94px;
      text-align: center;
      font-size: 23px;
      color: #333334;
      font-weight: 500;
      &:nth-child(1){
        flex:0.5;
        font-size: 29px;
        font-weight: 700;
      }
      &:nth-child(2){
        flex:1.5;
      }
    }
  }
  .noRank{
    width: 610px;
    position: absolute;
    left:calc(50% - 610px/2);
    top:1015px;
    text-align: center;
    font-size: 28px;
    color: #333334;
  }
  .rankList{
    width:610px;
    height: calc(100vh - 820px);
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    left:calc(50% - 610px/2);
    top:815px;
    .rankItem{
      width:610px;
      display: flex;
      height: 94px;
      border-bottom:1px solid #f1ebe5;
      div{
        flex:1;
        height: 94px;
        line-height: 94px;
        text-align: center;
        font-size: 23px;
        color: #333334;
        font-weight: 500;
        position: relative;
        &:nth-child(1){
          flex:0.5;
          
        }
        &:nth-child(2){
          flex:1.5;
          .lineClamp1();
        }
      }
      &:nth-child(1){
        div{
          span{
            width:43px;
            height: 37px;
            position: absolute;
            top:calc(50% - 37px/2);
            left:calc(50% - 43px/2);
            .sparkBg("rank/no1.png");
          }
        }
      }
      &:nth-child(2){
        div{
          span{
            width:43px;
            height: 37px;
            position: absolute;
            top:calc(50% - 37px/2);
            left:calc(50% - 43px/2);
            .sparkBg("rank/no2.png");
          }
        }
      }
      &:nth-child(3){
        div{
          span{
            width:43px;
            height: 37px;
            position: absolute;
            top:calc(50% - 37px/2);
            left:calc(50% - 43px/2);
            .sparkBg("rank/no3.png");
          }
        }
      }
    }
  }
  .back {
    left: 32px;
    top: 151px;
    width: 59px;
    height: 57px;
    position: absolute;
    .webpBg("rank/back.png");
  }
}