@import "../../res.less";
.taskpop {
  width: 750px;
  height: 1010px;
  left: 0px;
  position: absolute;
  bottom: 0px;
  // animation: frombottom 600ms forwards;
  .bg {
    width: 750px;
    height: 1010px;
    left: 0px;
    bottom: 0;
    position: absolute;
    .sparkBg("TaskPop/bg.png");
  }
  .close {
    width: 66px;
    height: 66px;
    left: 652px;
    top: -100px;
    position: absolute;
    .sparkBg("common/close.png");
  }
  .list {
    width: 697px;
    height: 873px;
    left: 27px;
    top: 126px;
    position: absolute;
    overflow-y: scroll;
    .item {
      width: 697px;
      height: 158px;
      left: 0px;
      top: 0px;
      position: relative;
      margin-bottom: 20px;
      .bg_item {
        width: 697px;
        height: 158px;
        left: 0px;
        top: 0px;
        position: absolute;
        border: 2px solid rgb(224, 199, 149);
        border-radius: 17px;
        background-color: rgb(249, 253, 252);
        box-sizing: border-box;
      }
      .center_info {
        width: 340px;
        height: 120px;
        left: 164px;
        top: 20px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .title {
          width: 90%;
          height: 32px;
          font-size: 30px;
          line-height: 32px;
          color: rgb(41, 13, 16);
          .lineClamp1();
          font-weight: 700;
          margin-bottom: 10px;
          letter-spacing: 2px;
        }
        .subtitle {
          width: 100%;
          // max-height: 50px;
          font-size: 26px;
          color: rgb(138, 138, 138);
          // line-height: 25px;
          .lineClampN(2);
        }
      }
      .icon {
        width: 119px;
        height: 119px;
        left: 22px;
        top: 20px;
        position: absolute;
        border-radius: 11px;
        // background-color: rgb(236, 236, 236);
      }
      .btns {
        width: 154px;
        height: 67px;
        left: 509px;
        top: 45px;
        position: absolute;
        .receive_btn {
          width: 154px;
          height: 67px;
          left: 0;
          top: 0;
          position: absolute;
          .sparkBg("TaskPop/receive_btn.png");
        }
        .complete_btn {
          width: 154px;
          height: 67px;
          left: 0;
          top: 0;
          position: absolute;
          .sparkBg("TaskPop/complete_btn.png");
        }
        .already_btn {
          width: 154px;
          height: 67px;
          left: 0;
          top: 0;
          position: absolute;
          .sparkBg("TaskPop/already_btn.png");
        }
      }
    }
  }

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

    100% {
      bottom: 0px;
    }
  }
}
