@import "../../res.less";
.taskpop {
  width: 750px;
  height: 983px;
  left: 0px;
  position: absolute;
  bottom: 0px;
  // animation: frombottom 600ms forwards;
  .bg {
    width: 750px;
    height: 983px;
    left: 0px;
    bottom: 0;
    position: absolute;
    .sparkBg("TaskPop/bg.png");
  }
  .close {
    width: 62px;
    height: 62px;
    left: 659px;
    top: 93px;
    position: absolute;
    .sparkBg("TaskPop/close.png");
  }
  .list {
    width: 711px;
    height: 690px;
    left: 24px;
    top: 292px;
    position: absolute;
    overflow-y: scroll;
    .item {
      margin-bottom: 3px;
      width: 711px;
      height: 155px;
      left: 0px;
      top: 0px;
      position: relative;
      margin-bottom: 13px;
      .bg_item {
        width: 711px;
        height: 155px;
        left: 0px;
        top: 0px;
        position: absolute;
        .sparkBg("TaskPop/bg_item.png");
      }
      .center_info {
        width: 315px;
        height: 162px;
        left: 196px;
        // top: 37px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .title {
          width: 90%;
          // height: 30px;
          font-size: 34px;
          // line-height: 30px;
          color: rgb(47, 83, 28);
          .lineClamp1();
          font-weight: 700;
          margin-bottom: 10px;
        }
        .subtitle {
          width: 100%;
          // max-height: 50px;
          font-size: 24px;
          color: rgb(80, 157, 42);
          // line-height: 25px;
          // .lineClampN(2);
        }
      }
      .icon {
        width: 104px;
        height: 105px;
        left: 58px;
        top: 25px;
        position: absolute;
        border-radius: 50%;
      }
      .btns {
        // display: flex;
        // align-items: center;
        // justify-content: center;
        width: 161px;
        height: 63px;
        left: 501px;
        top: 45px;
        position: absolute;
        .receive_btn {
          width: 161px;
          height: 63px;
          left: 0;
          top: 0;
          position: absolute;
          .sparkBg("TaskPop/receive_btn.png");
        }
        .complete_btn {
          width: 161px;
          height: 63px;
          left: 0;
          top: 0;
          position: absolute;
          .sparkBg("TaskPop/complete_btn.png");
        }
        .already_btn {
          width: 161px;
          height: 63px;
          left: 0;
          top: 0;
          position: absolute;
          .sparkBg("TaskPop/already_btn.png");
        }
        .share_btn {
          width: 157px;
          height: 77px;
          left: 0px;
          top: 0px;
          position: absolute;
          .sparkBg("TaskPop/toShare_btn.png");
        }
      }
    }
  }

  @keyframes frombottom {
    0% {
      bottom: -1708px;
    }

    100% {
      bottom: 0px;
    }
  }
}
