@import "../../res.less";
.homePage {
  width: 750px;
  min-height: 100vh;
  left: 0px;
  top: 0px;
  position: relative;
  background-color: #fadfaf;
  padding-top: 700px;
  box-sizing: border-box;
  .bg {
    width: 750px;
    height: 1624px;
    left: 0px;
    top: 0px;
    position: absolute;
    .sparkBg("homePage/bg.png");
    background-size: 750px 3040px;
  }
  .title {
    width: 469px;
    height: 240px;
    left: 135px;
    top: 63px;
    position: absolute;
    .sparkBg("homePage/title.png");
  }
  .lc_bigstar {
    width: 731px;
    height: 342px;
    left: 19px;
    // top: 700px;
    position: relative;
    .lc_bigstar_bg {
      width: 712px;
      height: 342px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/lc_bigstar_bg.png");
    }
    .hongBao {
      width: 694px;
      height: 234px;
      left: 10px;
      top: 60px;
      position: absolute;
      display: flex;
      overflow-x: auto;
      padding-left: 20px;
      box-sizing: border-box;
      .bigstar_item {
        flex-shrink: 0;
        width: 256px;
        height: 234px;
        position: relative;
        margin-right: 10px;
        .redpacket_img {
          width: 225px;
          height: 228px;
          left: 0px;
          top: 6px;
          position: absolute;
          // .sparkBg("homePage/redpacket_img.png");
        }
        .redpacket_tag {
          width: 80px;
          height: 90px;
          left: 176px;
          top: 0px;
          position: absolute;
          // .sparkBg("homePage/redpacket_tag.png");
        }
      }
    }
  }
  .prize_banner {
    width: 707px;
    height: 316px;
    left: 22px;
    // 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");
    }
  }
  .virtual_assets {
    width: 712px;
    height: 513px;
    left: 19px;
    // top: 1060px;
    position: relative;
    margin-top: 18px;
    // .sparkBg("homePage/virtual_assets_bg.png");
    .sparkBg("homePage/virtual_assets_bg_new.png");
    &.short_height {
      height: 330px;
      .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;
      }
    }
    .yesterday_label {
      width: 153px;
      height: 27px;
      left: 30px;
      top: 121px;
      position: absolute;
      opacity: 0.6;
      font-size: 26px;
      line-height: 27px;
      color: rgba(0, 0, 0, 1);
    }
    .yesterday_amount {
      width: 228px;
      height: 56px;
      left: 29px;
      top: 171px;
      position: absolute;
      font-size: 66px;
      line-height: 56px;
      color: rgba(211, 26, 25, 1);
      font-weight: bold;
    }
    .record_btn {
      width: 176px;
      height: 24px;
      left: 507px;
      top: 121px;
      position: absolute;
      .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: rgba(211, 26, 25, 1);
        text-align: center;
        font-weight: bold;
      }
    }
    .canuse_popover {
      width: 227px;
      height: 50px;
      left: 360px;
      top: 211px;
      position: absolute;
      .canuse_popover_bg {
        width: 227px;
        height: 50px;
        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: 302px;
      height: 86px;
      left: 205px;
      top: 380px;
      position: absolute;
      font-size: 35px;
      line-height: 34px;
      color: rgba(255, 255, 255, 1);
      .sparkBg("homePage/realbuy_btn_bg.png");
      .flex_center();
    }
  }
  .sign_section {
    width: 712px;
    height: 329px;
    left: 19px;
    // top: 1521px;
    position: relative;
    margin-top: 21px;
    .sign_section_bg {
      width: 712px;
      height: 329px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/sign_section_bg.png");
    }
    .sign_tips {
      width: 434px;
      height: 24px;
      left: 29px;
      top: 89px;
      position: absolute;
      font-size: 24px;
      line-height: 24px;
      color: rgba(255, 255, 255, 1);
    }
    .sign_btn {
      width: 211px;
      height: 63px;
      left: 470px;
      top: 51px;
      position: absolute;
      .sparkBg("homePage/sign_btn_bg.png");
      font-size: 26px;
      line-height: 25px;
      color: rgba(220, 80, 63, 1);
      font-weight: bold;
      .flex_center();
      .breathAnimation();
    }
    .signed_btn {
      width: 211px;
      height: 63px;
      left: 470px;
      top: 51px;
      position: absolute;
      .sparkBg("homePage/signed_btn_bg.png");
      font-size: 26px;
      line-height: 25px;
      color: rgba(108, 108, 108, 1);
      font-weight: bold;
      .flex_center();
    }
    .sign_progress {
      width: 591px;
      height: 109px;
      left: 60px;
      top: 158px;
      position: absolute;
      .progress_bg {
        width: 576px;
        height: 20px;
        left: 0px;
        top: 35px;
        position: absolute;
        background-color: rgb(248, 206, 198);
        border-radius: 10px;
      }
      .progress_bar_box {
        width: 576px;
        height: 20px;
        left: 0px;
        top: 35px;
        position: absolute;
        .progress_bar {
          width: 0%;
          height: 20px;
          left: 0px;
          top: 0px;
          position: absolute;
          background-image: linear-gradient( 90deg, rgb(253,118,95) 8%, rgb(230,68,48) 100%);
          border-radius: 10px 0 0 10px;
        }
      }
      .step_item {
        width: 71px;
        height: 109px;
        left: 72px;
        top: 0px;
        position: absolute;
        &.step_item2 {
          left: 216px;
        }
        &.step_item3 {
          left: 359px;
        }
        &.step_item4 {
          left: 510px;
        }
        &.locked .prize_bg {
          .sparkBg("homePage/prize_locked.png");
        }
        &.signed .prize_bg {
          .sparkBg("homePage/prize_to_receive.png");
        }
        &.received .prize_bg {
          .sparkBg("homePage/prize_received.png");
        }
        &.locked, &.received {
          .prize_amount {
            opacity: 0.7;
          }
        }
        .prize_bg {
          width: 71px;
          height: 77px;
          left: 0px;
          top: 0px;
          position: absolute;
        }
        .prize_amount {
          width: 100%;
          height: 21px;
          left: 0px;
          top: 12px;
          position: absolute;
          font-size: 28px;
          color: rgba(238, 78, 50, 1);
          font-weight: bold;
          .flex_center();
          .unit {
            height: 30px;
            font-size: 18px;
            line-height: 34px;
          }
        }
        .prize_day {
          width: 91px;
          height: 19px;
          left: -10px;
          top: 90px;
          position: absolute;
          opacity: 0.6;
          font-size: 20px;
          line-height: 19px;
          color: rgba(0, 0, 0, 1);
          text-align: center;
        }
      }
    }
  }
  .recommend_products {
    width: 750px;
    height: 294px;
    left: 0px;
    // top: 1878px;
    position: relative;
    margin-top: 28px;
    .r_products_title {
      width: 141px;
      height: 34px;
      left: 17px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/r_products_title.png");
    }
    .r_products_list {
      width: 750px;
      height: 238px;
      left: 0px;
      top: 56px;
      position: absolute;
      padding-left: 18px;
      box-sizing: border-box;
      display: flex;
      overflow-x: auto;
      .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: 30px;
          left: 32px;
          top: 28px;
          position: absolute;
          font-size: 28px;
          line-height: 30px;
          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();
          }
        }
      }
    }
  }
  .bottom_products {
    width: 713px;
    min-height: 848px;
    left: 19px;
    // top: 2192px;
    position: relative;
    margin-top: 20px;
    padding-top: 152px;
    box-sizing: border-box;
    &::before {
      content: "";
      position: absolute;
      top: 800px;
      left: 0;
      width: 100%;
      height: calc(100% - 800px);
      background-color: #fff;
    }
    .tab1_bg {
      width: 713px;
      height: 848px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/tab1_bg.png");
    }
    .tab2_bg {
      width: 713px;
      height: 848px;
      left: 0px;
      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: 29px;
      top: 252px;
      position: absolute;
      color: #000;
      text-align: center;
    }
    .products_list {
      width: 653px;
      // height: 696px;
      left: 29px;
      // 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: 30px;
            left: 0px;
            top: 0px;
            position: absolute;
            font-size: 28px;
            line-height: 30px;
            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: 40px;
    height: 113px;
    left: 710px;
    top: 59px;
    position: absolute;
    .sparkBg("homePage/rule_btn.png");
  }
}
