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

.prizepage_wrap {
  width: 750px;
  height: 1624px;
  left: 0px;
  top: 0px;
  position: absolute;
  background-color: #fff5d3;

  .prizepage {
    width: 750px;
    height: 1624px;
    left: 0px;
    // top: -200px;
    position: absolute;
    background-color: #fff5d3;

    // transform: translateY(-50%);

    .bg {
      width: 750px;
      height: 1624px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("prizepage/bg.jpg");
    }

    .title {
      position: absolute;
      left: 277px;
      top: 235px;
      width: 193px;
      height: 61px;
      .sparkBg("prizepage/title.png");
    }

    .all_tab {
      width: 665px;
      height: 80px;
      position: absolute;
      left: 40px;
      top: 310px;
      overflow-x: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      .hideScrollbar();

      .tab_item {
        max-width: 172px;
        height: 80px;
        text-align: center;
        left: 0;
        top: 0;
        position: relative;
        margin-right: 40px;
        flex-shrink: 0;
        font-size: 32px;
        color: rgb(117, 30, 38);
        font-weight: 700;
        line-height: 80px;
        .lineClamp1();

        .stick {
          position: absolute;
          left: 50%;
          top: 70px;
          width: 82px;
          height: 7px;
          transform: translateX(-50%);
          .sparkBg("prizepage/stick.png");
        }

      }

      .opacity {
        background-image:none !important;
        opacity: 0.6;
      }
    }

    .list {
      width: 697px;
      height: calc(100vh - 438px);
      left: 27px;
      top: 406px;
      position: absolute;
      overflow-y: scroll;

      .item {
        width: 697px;
        height: 158px;
        left: 0px;
        top: 0px;
        position: relative;
        margin-bottom: 30px;

        .bg_item {
          width: 697px;
          height: 158px;
          border: 2px solid rgb(224, 199, 149);
          border-radius: 17px;
          background-color: rgb(249, 253, 252);
          left: 0px;
          top: 0px;
          position: absolute;
          box-sizing: border-box;
        }

        .img {
          width: 119px;
          height: 119px;
          left: 19px;
          top: 17px;
          position: absolute;
          // border: 1px solid #e5c362;
          border-radius: 11px;
        }

        .name {
          width: 340px;
          // height: 28px;
          left: 163px;
          top: 32px;   
          position: absolute;
          font-size: 30px;
          // line-height: 28px;  
          color: rgb(41, 13, 16);
          .lineClamp1();
          font-weight: bold;
        }

        .prize_time {
          width: 340px;
          height: 28px;
          left: 163px;
          top: 75px;
          position: absolute;
          font-size: 18px;
          // line-height: 28px;
          color: #afafaf;
          .lineClamp1();
        }

        .expire_time {
          width: 340px;
          height: 28px;
          left: 163px;
          top: 105px;
          position: absolute;
          font-size: 18px;
          // line-height: 28px;
          color: #afafaf;
          .lineClamp1();
        }

        .gobtn {
          width: 154px;
          height: 67px;
          left: 506px;    
          top: 42px; 
          position: absolute;
          .sparkBg("prizepage/qulingqu.png");
        }

        .gray_btn {
          width: 154px;
          height: 67px;
          left: 506px;    
          top: 42px; 
          position: absolute;
          .sparkBg("prizepage/yiguoqi.png");
        }
      }

      .empty {
        width: 100%;
        height: 30px;
        line-height: 30px;
        top: 300px;
        position: absolute;
        left: 0;
        text-align: center;
        font-size: 30px;
        color: rgb(41, 13, 16);
      }
    }

    .back {
      left: 39px;
      top: 234px;
      width: 62px;
      height: 62px;
      transform-origin: left center;
      position: absolute;
      .sparkBg("common/back.png");
    }
  }
}