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

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

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


  .red-pack-con {
    width: 750px;
    position: absolute;
    top: 330px;

    .left-right {
      width: 600px;
      margin-left: 75px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;


      .left,
      .right {
        width: 257px;
        height: 313px;
        position: relative;

        .red-pack-item {
          position: absolute;

          img {
            width: 257px;
            height: 313px;
          }
        }

        .hide-red-pack-item {
          display: none;
        }

        .frontAniItem {
          animation: frontAni 1000ms linear forwards;
          z-index: 2;
        }

        .backAniItem {
          animation: backAni 1000ms linear forwards;
          z-index: 0;
        }

        .redpackAni {
          width: 450px;
          height: 492px;
          position: absolute;
          left: -96px;
          top: -89px
        }
      }
    }

    .one-middle {
      .red-pack-item {
        position: absolute;
        left: 250px;

        img {
          width: 257px;
          height: 313px;
        }
      }
    }
  }

  @keyframes frontAni {
    0% {}

    33% {
      opacity: 1;
      transform: scale(1);
      top: 0px;
    }

    45% {
      opacity: 1;
    }

    58% {
      transform: scale(1.06);
      opacity: 0;
      top: 70px,
    }

    100% {
      opacity: 0;
    }

  }

  @keyframes backAni {
    0% {}

    33% {
      transform: scale(0.8);
      top: -100px;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    72% {
      top: 20px;
      transform: scale(1);
    }

    100% {
      top: 0px;
    }
  }

  .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: 116px;
      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: rgb(237, 10, 10);
      font-weight: bold;
    }

    .record_btn {
      width: 176px;
      height: 24px;
      left: 500px;
      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: 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();
    }
  }

  .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");
    }
  }

  .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: 957px;
    background-color: #ffe6c5;
    left: 18px;
    // top: 2192px;
    position: relative;
    margin-top: 20px;
    padding-top: 152px;
    box-sizing: border-box;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;

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

    .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: 40px;
    height: 113px;
    left: 0px;
    top: 59px;
    position: absolute;
    .sparkBg("homePage/rule_btn.png");
  }

  .prize_btn {
    width: 40px;
    height: 113px;
    left: 0px;
    top: 189px;
    position: absolute;
    .sparkBg("homePage/我的奖品按钮.png");
  }

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

  .redpack_btn {
    width: 120px;
    height: 114px;
    right: 10px;
    top: 189px;
    position: absolute;
    .sparkBg("homePage/redPackIcon.png");

    .redpack_time_box {
      width: 120px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      bottom: 0px;
      font-size: 20px;
      color: #fff;
      position: absolute;
    }
  }
}