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

.homePage {
  width: 750px;
  min-height: 100vh;
  left: 0px;
  top: 0px;
  position: relative;
  background-color: #e86a3c;
  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;
  }

  .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;
          .lineClamp1()
        }
      }
    }
    .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;
          .lineClamp1()
        }
      }
    }
    .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: 170px; // 调整为能容纳两行数据的高度
        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: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            .span-4-1{
               width: 136px;
               height: 47px;
               .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: 25%;
           display: flex;
           align-items: center;
           justify-content: center;
           .span-4-1{
             width: 136px;
             height: 47px;
             .sparkBg("homePage/top-btn2.png");
           }
        }
      }
    }
    .postRanking_expand{
      margin-top: 15px;
      display: flex;
      align-content: center;
      justify-content: center;
      .expandSty-2{
        width: 76px;
        height: 24px;
        .sparkBg("homePage/top-expand.png");
      }
       .expandSty-1{
        width: 76px;
        height: 24px;
        .sparkBg("homePage/top-foldUp.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;
    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: 656px;
      height: 70px;
      left: 33px;
      top: 296px;
      position: absolute;

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

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

      .other_assets3 {
        width: 335px;
        height: 69px;
        left: 331px;
        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: 328px;
        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();
    }
  }

  .recommend_products {
    width: 750px;
    height: 198px;
    left: 0px;
    position: relative;
    margin-top: 4px;
    margin-bottom: 22px;

    .recommend_products_bg {
      display: inline-block;
      left: 18px;
      width: 714px;
      height: 198px;
      position: absolute;

      .r_products_list {
        width: 694px;
        height: 198px;
        left: 10px;
        top: 0;
        position: absolute;
        box-sizing: border-box;
        display: flex;
        overflow-x: auto;

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

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

          .r_product_bg {
            width: 450px;
            height: 198px;
            left: 0px;
            top: 0px;
            position: absolute;
            border-radius: 30px;
          }
        }
      }
    }
  }

  .bottom_products {
    width: 701px;
    height: auto;
    min-height: 1017px;
    background-color: #ffffff;
    left: 28px;
    position: relative;
    padding-top: 152px;
    padding-bottom: 19px;
    box-sizing: border-box;
    border-radius: 24px;

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

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

    .tab1_btn {
      width: 50%;
      height: 80px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .tab2_btn {
      width: 50%;
      height: 80px;
      position: absolute;
      right: 0;
      top: 0;
    }

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

    .products_list {
      width: 653px;
      left: 30px;
      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: 26px;
            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: 26px;
            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");
  }
}