@import "../../res.less";

.HomePage {

  .rankBg {
    border-style: solid;
    //border-width: 3px;
    border-color: rgb(16, 52, 4);
    border-radius: 44px 44px 0 0;

    border-bottom: none;

    position: absolute;
    left: 0;
    top: 1269px;
    width: 750px;
    //height: 1038px;

    background-color: #448628;
    box-sizing: border-box;

    .rankTop {
      position: absolute;
      //left: -3px;
      top: 2px;
      width: 745px;
      height: 47px;
      .sparkBg("userHomePage/rankTop.png");
    }

    .rankBgInner {
      border-radius: 44px 44px 0 0;
      background-color: rgb(255, 255, 255);
      box-shadow: 2px 2px 4px 0 rgba(68, 134, 40, 0.86);
      margin-left: 18px;
      margin-top: 26px;
      width: 709px;
      min-height: 985px;
      box-sizing: border-box;
      position: relative;

      display: flex;
      flex-direction: column;
      align-items: center;

      .rankTitle {
        margin-top: 26px;
        width: 379px;
        height: 55px;
        .sparkBg("userHomePage/rankTitle.png");
      }

      .rankTip {
        width: 100%;
        margin-top: 18px;
        font-size: 23.45px;
        color: rgb(68, 134, 40);
        text-align: center;
      }

      .rankPrize {
        margin-top: 28px;
        width: 654px;
        height: 364px;
        .sparkBg("userHomePage/prizeBg.png");

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .rankTime {
          width: 100%;
          font-size: 25.67px;
          color: white;
          .flex_center();
          margin-top: 25px;

          span {
            color: #963800;
            width: 54px;
            height: 54px;
            .webpBg("userHomePage/timeNumBg.png");
            .flex_center();
            font-weight: bold;
            margin: 0 5px;
          }

        }

        .prizeList {
          margin-top: 17px;
          width: 100%;
          height: 241px;
          text-align: center;

          .adm-swiper-slide {
            display: flex;
            align-items: center;
            justify-content: flex-end;

          }

          .prizeItem {
            width: 158px;
            height: 235px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .webpBg("userHomePage/prizeBg4.png");
            color: #963800;

            img {
              margin-top: 12px;
              width: 140px;
              height: 140px;
              border-radius: 12px;
            }

            .prizeName {
              margin-top: 7px;
              font-size: 22.19px;
              .lineClamp1();
              width: 140px;
            }

            .prizeRank {
              margin-top: 6px;
              font-size: 27.74px;
              font-weight: bold;
            }

          }

          .prizeBg1 {
            width: 164px;
            height: 241px;
            .webpBg("userHomePage/prizeBg1.png");
            color: #a16834;
          }

          .prizeBg2 {
            width: 164px;
            height: 241px;
            .webpBg("userHomePage/prizeBg2.png");
            color: #486584;
          }

          .prizeBg3 {
            width: 164px;
            height: 241px;
            .webpBg("userHomePage/prizeBg3.png");
            color: #a55c22;
          }

        }

      }

      .rankItem {
        margin-top: 26px;
        width: 654px;

        font-size: 23.07px;
        color: #333334;
        line-height: 1.583;
        text-align: center;

        .flex_center();
        position: relative;


        .rank {
          flex: 150;
        }

        .nickName {
          flex: 289;
          .lineClamp1();
        }

        .inviteNum {
          flex: 215;
        }
      }

      .rankListTitle {
        color: rgb(68, 134, 40);
      }

      .rankListItem {
        margin-top: 0;
        height: 95px;

        .border {
          opacity: 0.2;
          position: absolute;
          bottom: 0;
          width: 610px;
          height: 1px;
          background-color: rgb(153, 153, 153);
        }

        .rank {
          font-size: 29px;
          font-weight: bold;
        }

        .rankIcon {
          width: 49px;
          height: 49px;
          background-position: center center !important;
          background-size: contain !important;
        }

        &:nth-child(1) {
          .rankIcon {
            .sparkBg("userHomePage/rank1.png");
          }
        }

        &:nth-child(2) {
          .rankIcon {
            .sparkBg("userHomePage/rank2.png");
          }
        }

        &:nth-child(3) {
          .rankIcon {
            .sparkBg("userHomePage/rank3.png");
          }
        }
      }

    }
  }

}
