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

.homePage {
  width: 750px;
  min-height: 100vh;
  left: 0px;
  top: 0px;
  position: relative;
  background-color: #e86a3c;
  // padding-top: 700px;
  padding-top: 576px;
  padding-bottom: 85px;
  box-sizing: border-box;

  .bg {
    width: 750px;
    height: 1624px;
    left: 0px;
    top: 0px;
    position: absolute;
    .sparkBg("homePage/bg.png");
    background-size: 750px 779px;
  }

  .title {
    width: 705px;
    height: 316px;
    left: 45px;
    top: 0px;
    position: absolute;
    // .sparkBg("homePage/title.png");
  }

  .virtual_assets {
    width: 712px;
    height: 513px;
    left: 19px;

    position: relative;
    margin-top: 18px;
    .sparkBg("homePage/virtual_assets_bg_new.png");

    &.short_height {
      height: 412px;
      .sparkBg("homePage/virtual_assets_bg_short.png");
    }

    .time_box {
      width: 100%;
      height: 40px;
      position: absolute;
      top: 20px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: rgb(153, 108, 0);
      padding-right: 32px;
      box-sizing: border-box;
      font-size: 22px;
      line-height: 40px;

      .time_item {
        width: 40px;
        height: 40px;
        border: 1px solid rgb(255, 255, 255);
        box-sizing: border-box;
        border-radius: 10px;
        background-image: linear-gradient(0deg, rgb(237, 88, 29) 0%, rgb(255, 144, 65) 100%);
        .flex_center();
        color: rgb(255, 255, 255);
        margin: 0 4px;
      }
    }
    .time_box_over {
      position: absolute;
      right: 29px;
      top: 26px;
      width: 223px;
      height: 40px;
      .sparkBg("homePage/time_box_over_bg.png");
      font-size: 22px;
      color: rgb(255, 255, 255);
      letter-spacing: 2px;
      .flex_center();
    }

    .yesterday_label {
      width: 153px;
      height: 27px;
      left: 30px;
      top: 116px;
      position: absolute;
      opacity: 0.6;
      font-size: 26px;
      line-height: 27px;
      padding-left: 20px;
      color: rgba(0, 0, 0, 1);
    }

    .yesterday_amount {
      width: 228px;
      height: 56px;
      left: 29px;
      top: 171px;
      position: absolute;
      font-size: 66px;
      line-height: 56px;
      padding-left: 20px;
      color: rgb(237, 10, 10);
      font-weight: bold;
    }

    .record_btn {
      width: 176px;
      height: 24px;
      left: 490px;
      top: 116px;
      position: absolute;
      .sparkBg("homePage/record_list_btn.png");
      // .record_btn_text {
      //   width: 162px;
      //   height: 24px;
      //   left: 0px;
      //   top: 0px;
      //   position: absolute;
      //   opacity: 0.6;
      //   font-size: 26px;
      //   line-height: 24px;
      //   color: rgba(24, 24, 24, 1);
      // }

      // .arrow_right {
      //   width: 13px;
      //   height: 24px;
      //   left: 163px;
      //   top: 0px;
      //   position: absolute;
      //   opacity: 0.6;
      //   .sparkBg("homePage/arrow_right.png");
      // }
    }

    .other_assets {
      width: 666px;
      height: 70px;
      left: 23px;
      top: 268px;
      position: absolute;

      .other_assets1 {
        width: 195px;
        height: 70px;
        left: 0px;
        top: 0px;
        position: absolute;
      }

      .other_assets2 {
        width: 195px;
        height: 70px;
        left: 236px;
        top: 0px;
        position: absolute;
      }

      .other_assets3 {
        width: 195px;
        height: 69px;
        left: 471px;
        top: 1px;
        position: absolute;
      }

      .other_assets_label {
        width: 100%;
        height: 25px;
        left: 0px;
        top: 0px;
        position: absolute;
        opacity: 0.6;
        font-size: 26px;
        line-height: 25px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
      }

      .other_assets_value {
        width: 100%;
        height: 26px;
        left: 0;
        top: 44px;
        position: absolute;
        font-size: 30px;
        line-height: 26px;
        color: rgb(28, 28, 28);
        text-align: center;
        font-weight: bold;
      }
    }

    .canuse_popover {
      width: 157px;
      height: 39px;
      left: 360px;
      top: 221px;
      position: absolute;

      .canuse_popover_bg {
        width: 157px;
        height: 39px;
        left: 0px;
        top: 0px;
        position: absolute;
        opacity: 0.5;
        // .sparkBg("homePage/canuse_popover_bg.png");
        .sparkBg("homePage/canuse_popover_bg_left.png");
      }

      .canuse_popover_text {
        width: 100%;
        height: 21px;
        left: 0px;
        top: 9px;
        position: absolute;
        font-size: 22px;
        line-height: 22px;
        color: rgba(135, 76, 8, 1);
        text-align: center;
      }
    }

    .realbuy_btn {
      width: 327px;
      height: 83px;
      left: 193px;
      top: 380px;
      position: absolute;
      font-size: 35px;
      line-height: 34px;
      color: rgba(255, 255, 255, 1);
      .sparkBg("homePage/realbuy_btn_bg.png");
      .flex_center();
    }
  }
  .ranking_list{
    width: 732px;
    height: 1071px;
    // height: auto;
    position: relative;
    left: 18px;
    // margin-top: 596px;
    .sparkBg("homePage/ranking-bg.png");
    .ranking_list_title{
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 12px;
      span{
        width: 488px;
        height: 77px;
        .sparkBg("homePage/ranking-title-bg.png");
      }
    }
    .ranking_list_tab{
      margin-left: 89.78px;
      width: 543px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
      box-sizing: border-box;
      .sparkBg("homePage/ranking-tab.png");
        span{
          width: 50%;
          // height: 60px;
          line-height: 51px;
          text-align: center;
          font-size: 29px;
          color: #8c8c8c;
          
        }
        .rankingActive{
          color: #fff;
          width: 295px;
          height: 51px;
          .sparkBg("homePage/ranking-tab-bg.png");
        }
       
    }
    .ranking_list_prize{
      margin-left: 47.94px;
      margin-top: 21px;
      width: 620px;
      height: auto;
      overflow-y: hidden;
      overflow-x: auto;
      display: flex;
      /* 隐藏滚动条 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
      }
      .ranking_list_prize_item{
        width: 132px;
        margin-right: 8px;
        .item_img{
          width: 132px;
          height: 132px;
          border-radius: 19px;
          overflow: hidden;
          position: relative;
          .sparkBg("homePage/ranking-prize-bg.png");
          .img{
            width: 100%;
            height: 100%;
          }
          .item_img_rank{
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fd7d20;
            width: 100%;
            height: 36px;
            font-size: 20.68px;
            color: #fff;
          }
        }
        .item_name{
          width: 100%;
          text-align: center;
          margin-top: 6px;
          font-size: 20.3px;
          color: #b37513;
          font-weight: bold;
        }
      }
    }
    .ranking_list_prizeT{
      margin-left: 47.94px;
      margin-top: 21px;
      width: 620px;
      height: auto;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      /* 隐藏滚动条 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
      }
      .ranking_list_prize_item{
        width: 132px;
        .item_img{
          width: 132px;
          height: 132px;
          border-radius: 19px;
          overflow: hidden;
          position: relative;
          .sparkBg("homePage/ranking-prize-bg.png");
          .img{
            width: 100%;
            height: 100%;
          }
          .item_img_rank{
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fd7d20;
            width: 100%;
            height: 36px;
            font-size: 20.68px;
            color: #fff;
          }
        }
        .item_name{
          width: 100%;
          text-align: center;
          margin-top: 6px;
          font-size: 20.3px;
          color: #b37513;
          font-weight: bold;
        }
      }
    }
    .ranking_list_topThree{
      margin-top: 15px;
      margin-left: 68.47px;
      position: relative;
      display: flex;
      height: 318px;
        .topThree-2{
          position: absolute;
          left: 0;
          bottom: 0;
          width: 193px;
          height: 279px;
           .sparkBg("homePage/top-2-bg.png");
           .userName{
              position: absolute;
              left: 0;
              width: 100%;
              text-align: center;
              top: 85px;
           }
           .score{
              position: absolute;
              left: 0;
              width: 100%;
              text-align: center;
              top: 115px;
           }
        }
        .topThree-1{
          position: absolute;
          left: 182px;
          bottom: 0;
          width: 224px;
          height: 318px;
           .sparkBg("homePage/top-1-bg.png");
            .userName{
              position: absolute;
              left: 0;
              width: 100%;
              text-align: center;
              top: 95px;
           }
           .score{
              position: absolute;
              left: 0;
              width: 100%;
              text-align: center;
              top: 130px;
           }
        }
        .topThree-3{
          position: absolute;
          left: 390px;
          bottom: 0;
          width: 193px;
          height: 245px;
           .sparkBg("homePage/top-3-bg.png");
            .userName{
              position: absolute;
              left: 0;
              width: 100%;
              text-align: center;
              top: 75px;
           }
           .score{
              position: absolute;
              left: 0;
              width: 100%;
              text-align: center;
              top: 102px;
           }
        }
        .btn-bg1{
          width: 166px;
          height: 56px;
           .sparkBg("homePage/top-btn1.png");
        }
        .btn-bg2{
          width: 136px;
          height: 47px;
           .sparkBg("homePage/top-btn2.png");
        }
        .topThree-2_btn{
          position: absolute;
          left: 32px;
          top: 186px;
        }
        .topThree-3_btn{
          position: absolute;
          left: 32px;
          top: 160px;
        }
        .topThree-1_btn{
          position: absolute;
          left: 31px;
          top: 215px;
        }
        .userName{
          font-size: 20.85px;
          color: #fff;
          font-weight: bold;
        }
        .score{
          font-size: 25.45px;
          color: #fff602;
          font-weight: bold;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加字体投影，增强立体感 */
        }
    }
    .ranking_list_postRanking{
      position: absolute;
      top: 630px;
      left: 31.5px;
      width: 655px;
      height: 400px;
      border-radius: 19px;
      overflow: hidden;
      padding: 1px 1px 0 1px;
      // padding: 10px 15px 15px 15px;
      box-sizing: border-box;
      background: #fff;
      // .sparkBg("homePage/top-list-bg.png");
      .postRanking_title{
        width: 100%;
        display: flex;
        // margin-left: 15px;
        padding: 0 12px;
        // align-items: center;
        // padding-top: 10px;
        box-sizing: border-box;
        height: 89px;
        border-radius: 19px 19px 0 0;
        overflow: hidden;
        justify-content: space-evenly;
         .sparkBg("homePage/top-info2-bg.png");
        span{
          display: inline-block;
          height: 89px;
          line-height: 89px;
          font-size: 27px;
          color: #b37513;
          font-weight: bold;
          text-align: center;
        }
        .span-1{
          width: 15%;
        }
        .span-2{
          width: 25%;
        }
        .span-3{
          width: 25%;
        }
        .span-4{
          width: 25%;
        }
      }
      .postRanking_item_box{
        margin-top: 0.1rem;
        margin-left: 14px;
        height: 160px;
        overflow: hidden;
        .postRanking_item{
          width: 629px;
          height: 76px;
          border-radius: 9px;
          margin-bottom: 15px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
           .sparkBg("homePage/top-info-bg.png");
           span{
            text-align: center;
           }
           .span-1{
            font-size: 31px;
            color: #b37513;
              width: 15%;
           }
          .span-2{
            font-size: 18px;
             color: #b37513;
              width: 25%;
           }
          .span-3{
            font-size: 26px;
            color: #fd2b1b;
             width: 25%;
           }
          .span-4{
            width: 136px;
            height: 47px;
             width: 25%;
            .sparkBg("homePage/top-btn2.png");
           }
        }
      }
      .postRanking_myRanking{
        width: 629px;
        height: 77px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-left: 14px;
        margin-top: 10px;
        color: #fff;
          .sparkBg("homePage/top-my-bg.png");
        span{
          text-align: center;
          }
        .span-1{
          font-size: 31px;
          width: 15%;
        }
        .span-2{
          font-size: 18px;
          width: 25%;
        }
        .span-3{
          font-size: 26px;
          width: 25%;
        }
        .span-4{
           width: 136px;
           height: 47px;
           width: 25%;
           .sparkBg("homePage/top-btn2.png");
        }
      }
    }
    .postRanking_expand{
      margin-top: 15px;
      display: flex;
      align-content: center;
      justify-content: center;
      span{
        width: 76px;
        height: 24px;
        .sparkBg("homePage/top-expand.png");
      }
    }
  }
  .expandSty1{
     height: 1580px;
  }
  .expandSty2{
    height: 890px !important;
  }
  .expandSty3{
    height: 640px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .actual_assets {
    width: 732px;
    height: 459px;
    left: 15px;
    position: relative;
    margin-top: 25px;
    padding-top: 147px;
    box-sizing: border-box;
    .sparkBg("homePage/actaul_assets_bg_new.png");

    .rate_wrap {
      display: flex;
      align-items: center;
      justify-content: center;

      .yield_rate {
        padding-right: 40px;
      }

      .yesterday_amount {
        padding-left: 40px;
      }

      .yield_rate_label, .yesterday_amount_label {
        font-size: 22px;
        line-height: 22px;
        color: #8d8d8d;
        margin-bottom: 19px;
        text-align: center;
      }

      .yield_rate_value {
        font-size: 59px;
        font-weight: bold;
        color: #e92836;
        text-align: center;
      }

      .yesterday_amount_value {
        font-size: 59px;
        font-weight: bold;
        color: #292929;
        text-align: center;
      }
    }

    .other_assets {
      width: 666px;
      height: 70px;
      left: 23px;
      top: 296px;
      position: absolute;

      .other_assets1 {
        width: 195px;
        height: 70px;
        left: 0px;
        top: 0px;
        position: absolute;
      }

      .other_assets2 {
        width: 195px;
        height: 70px;
        left: 236px;
        top: 0px;
        position: absolute;
      }

      .other_assets3 {
        width: 195px;
        height: 69px;
        left: 471px;
        top: 1px;
        position: absolute;
      }

      .other_line1 {
        width: 2px;
        height: 51px;
        left: 228px;
        top: 8px;
        position: absolute;
        .sparkBg("homePage/line.png");
      }

      .other_line2 {
        width: 2px;
        height: 51px;
        left: 458px;
        top: 8px;
        position: absolute;
        .sparkBg("homePage/line.png");
      }

      .other_assets_label {
        width: 100%;
        height: 25px;
        left: 0px;
        top: 0px;
        position: absolute;
        opacity: 0.6;
        font-size: 26px;
        line-height: 25px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
      }

      .other_assets_value {
        width: 100%;
        height: 26px;
        left: 0;
        top: 44px;
        position: absolute;
        font-size: 30px;
        line-height: 26px;
        color: rgb(28, 28, 28);
        text-align: center;
        font-weight: bold;
      }
    }

    .canuse_popover {
      width: 157px;
      height: 39px;
      left: 360px;
      top: 253px;
      position: absolute;

      .canuse_popover_bg {
        width: 166px;
        height: 38px;
        left: 0px;
        top: 0px;
        position: absolute;
        .sparkBg("homePage/canuse_popover_bg_left.png");
      }
    }

    .realbuy_btn {
      width: 327px;
      height: 83px;
      left: 193px;
      top: 380px;
      position: absolute;
      font-size: 35px;
      line-height: 34px;
      color: rgba(255, 255, 255, 1);
      .sparkBg("homePage/realbuy_btn_bg.png");
      .flex_center();
    }
  }

  // .prize_banner {
  //   width: 713px;
  //   height: 322px;
  //   left: 19px;
  //   // top: 1060px;
  //   position: relative;
  //   .sparkBg("homePage/prize_banner.png");

  //   .prize_btn {
  //     width: 270px;
  //     height: 98px;
  //     left: 218px;
  //     top: 210px;
  //     position: absolute;
  //     .sparkBg("homePage/prize_btn.png");
  //   }
  // }

  .recommend_products {
    width: 750px;
    height: 354px;
    left: 0px;
    // top: 1878px;
    position: relative;
    margin-top: 28px;

    .recommend_products_bg {
      display: inline-block;
      left: 18px;
      width: 714px;
      height: 1327px;
      position: absolute;
      .sparkBg("homePage/products_tuijian_bg.png");

      .r_products_list {
        width: 694px;
        height: 257px;
        left: 10px;
        top: 115px;
        position: absolute;
        // padding-left: 18px;
        box-sizing: border-box;
        display: flex;
        overflow-x: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .r_products_item {
          flex-shrink: 0;
          width: 569px;
          height: 238px;
          position: relative;
          margin-right: 10px;

          .r_product_bg {
            width: 569px;
            height: 238px;
            left: 0px;
            top: 0px;
            position: absolute;
            .sparkBg("homePage/r_product_bg.png");
          }

          .r_product_name {
            width: 520px;
            height: 32px;
            left: 32px;
            top: 26px;
            position: absolute;
            font-size: 28px;
            line-height: 32px;
            color: rgba(1, 1, 1, 1);
            font-weight: bold;
            .lineClamp1();
          }

          .r_product_risk {
            width: 360px;
            height: 32px;
            left: 31px;
            top: 77px;
            position: absolute;
            font-size: 32px;
            line-height: 32px;
            color: rgba(211, 26, 25, 1);
            font-weight: bold;
            .lineClamp1();
          }

          .r_product_rate {
            width: 520px;
            height: 22px;
            left: 30px;
            top: 128px;
            position: absolute;
            opacity: 0.6;
            font-size: 20px;
            line-height: 22px;
            color: rgba(1, 1, 1, 1);
            .lineClamp1();
          }

          .detail_btn {
            width: 140px;
            height: 48px;
            left: 398px;
            top: 70px;
            position: absolute;
            .sparkBg("homePage/detail_btn.png");
          }

          .r_product_like {
            width: 507px;
            height: 46px;
            left: 31px;
            top: 167px;
            position: absolute;
            .sparkBg("homePage/r_product_like_bg.png");

            .r_product_like_text {
              width: 450px;
              height: 20px;
              left: 49px;
              top: 13px;
              position: absolute;
              opacity: 0.6;
              font-size: 20px;
              line-height: 20px;
              color: rgba(1, 1, 1, 1);
              .lineClamp1();
            }
          }
        }
      }
    }

    // .r_products_title {
    //   width: 141px;
    //   height: 34px;
    //   left: 17px;
    //   top: 0px;
    //   position: absolute;
    //   .sparkBg("homePage/r_products_title.png");
    // }


  }

  .bottom_products {
    width: 714px;
    height: auto;
    min-height: 990px;
    background-color: #fce398;
    left: 18px;
    // top: 2192px;
    position: relative;
    margin-top: 20px;
    padding-top: 152px;
    padding-bottom: 19px;
    box-sizing: border-box;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 0 0 38px 38px;

    &::before {
      content: "";
      position: absolute;
      top: 800px;
      left: 15px;
      width: 685px;
      height: calc(100% - 800px - 19px);
      background-color: #fff;
      border-radius: 0 0 20px 20px;
    }

    .tab1_bg {
      width: 685px;
      height: 957px;
      left: 15px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/tab1_bg.png");
    }

    .tab2_bg {
      width: 685px;
      height: 957px;
      left: 15px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/tab2_bg.png");
    }

    .tab1_btn {
      width: 50%;
      height: 80px;
      position: absolute;
      left: 0;
      top: 0;
      // background-color: rgba(0, 0, 0, 0.6);
    }

    .tab2_btn {
      width: 50%;
      height: 80px;
      position: absolute;
      right: 0;
      top: 0;
      // background-color: rgba(0, 0, 0, 0.6);
    }

    .empty {
      width: 653px;
      left: 30px;
      top: 252px;
      position: absolute;
      color: #000;
      text-align: center;
    }

    .products_list {
      width: 653px;
      // height: 696px;
      left: 30px;
      // top: 152px;
      position: relative;

      .b_product_item {
        width: 653px;
        height: 173px;
        position: relative;

        &:not(:last-child) {
          margin-bottom: 50px;
        }

        .b_product_name {
          width: 650px;
          height: 30px;
          left: 0px;
          top: 0px;
          position: absolute;
          font-size: 28px;
          line-height: 30px;
          color: rgba(1, 1, 1, 1);
          font-weight: bold;
        }

        .b_product_rate {
          width: 200px;
          height: 63px;
          left: 0px;
          top: 57px;
          position: absolute;

          .b_product_rate_label {
            width: 100%;
            height: 22px;
            left: 0px;
            top: 46px;
            position: absolute;
            opacity: 0.6;
            font-size: 20px;
            line-height: 22px;
            color: rgba(1, 1, 1, 1);
            .lineClamp1();
          }

          .b_product_rate_value {
            width: 100%;
            height: 32px;
            left: 2px;
            top: 0px;
            position: absolute;
            font-size: 32px;
            line-height: 32px;
            color: rgba(211, 26, 25, 1);
            font-weight: bold;
            .lineClamp1();
          }
        }

        .b_product_shu {
          width: 280px;
          height: 63px;
          left: 222px;
          top: 57px;
          position: absolute;

          .b_product_shu_label {
            width: 100%;
            height: 22px;
            left: 1px;
            top: 45px;
            position: absolute;
            opacity: 0.6;
            font-size: 20px;
            line-height: 22px;
            color: rgba(1, 1, 1, 1);
            .lineClamp1();
          }

          .b_product_shu_value {
            width: 100%;
            height: 32px;
            left: 0px;
            top: -2px;
            position: absolute;
            font-size: 28px;
            line-height: 32px;
            color: rgba(0, 0, 0, 1);
            font-weight: bold;
            .lineClamp1();
          }
        }

        .detail_btn_1 {
          width: 140px;
          height: 49px;
          left: 513px;
          top: 65px;
          position: absolute;
          .sparkBg("homePage/detail_btn.png");
        }

        .b_product_line {
          width: 652px;
          height: 2px;
          left: 1px;
          top: 171px;
          position: absolute;
          opacity: 0.1;
          .sparkBg("homePage/b_product_line.png");
        }
      }
    }
  }

  .rule_btn {
    width: 45px;
    height: 85px;
    left: 707px;
    top: 130px;
    position: absolute;
    .sparkBg("homePage/rule_btn.png");
  }

  .prize_btn {
    width: 45px;
    height: 85px;
    left: 707px;
    top: 229px;
    position: absolute;
    .sparkBg("homePage/我的奖品按钮.png");
  }

  .new-user-gift-icon {
    width: 118px;
    height: 111px;
    left: 611px;
    top: 417px;
    position: absolute;
    .sparkBg("homePage/newUserGift.png");
  }

  .finance-achievement-icon {
    width: 118px;
    height: 111px;
    left: 611px;
    top: 557px;
    position: absolute;
    .sparkBg("homePage/financeAchievement.png");
  }

  .newUser_btn {
    width: 102px;
    height: 98px;
    right: 10px;
    top: 59px;
    position: absolute;
    .sparkBg("homePage/newUserIcon.png");
  }
}