@import "../../res.less";
.taskpop {
  width: 750px;
  height: 1071px;
  left: 0px;
  position: absolute;
  bottom: 0px;
  // animation: frombottom 600ms forwards;
  .bg {
    width: 750px;
    height: 1071px;
    left: 0px;
    bottom: 0;
    position: absolute;
    .sparkBg("TaskPop/bg.png");
  }
  .icon2 {
    width: 573px;
    height: 491px;
    left: 94px;
    top: -170px;
    position: absolute;
    .sparkBg("TaskPop/icon.png");
  }
  .close {
    width: 64px;
    height: 64px;
    left: 648px;
    top: -10px;
    position: absolute;
    .sparkBg("TaskPop/close.png");
  }
  .bg_list {
    width: 687px;
    height: 685px;
    left: 31px;
    top: 99px;
    position: absolute;
    // .sparkBg("TaskPop/bg_list.png");
  }
  .list {
    width: 730px;
    height: 873px;
    left: 50px;
    top: 190px;
    position: absolute;
    overflow-y: scroll;
    .item {
      width: 636px;
      height: 141px;
      left: 0px;
      top: 0px;
      position: relative;
      margin-bottom: 20px;
      .bg_item {
        width: 636px;
        height: 141px;
        left: 0px;
        top: 0px;
        position: absolute;
        .sparkBg("TaskPop/itembg.png");
      }
      .center_info {
        width: 340px;
        height: 120px;
        left: 145px;
        top: 20px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .title {
          width: 90%;
          // height: 30px;
          font-size: 32px;
          // line-height: 30px;
          color: #fff;
          .lineClamp1();
          font-weight: 700;
          margin-bottom: 10px;
          letter-spacing: 2px;
          // -webkit-text-stroke: 1px #df852d; /* width | color */
          text-shadow:
            -2px -2px 0 #df852d, /* 左上角 */
            2px -2px 0 #df852d, /* 右上角 */
            -2px 2px 0 #df852d,  /* 左下角 */
            2px 2px 0 #df852d;  /* 右下角 */
        }
        .subtitle {
          width: 100%;
          // max-height: 50px;
          font-size: 22px;
          color: #94590d;
          // line-height: 25px;
          .lineClampN(2);
        }
      }
      .icon {
        width: 94px;
        height: 94px;
        left: 27px;
        top: 28px;
        position: absolute;
        border-radius: 50%;
      }
      .btns {
        width: 219px;
        height: 112px;
        left: 456px;
        top: 26px;
        position: absolute;
        .receive_btn {
          width: 131px;
          height: 46px;
          left: 32px;
          top: 18px;
          position: absolute;
          .sparkBg("TaskPop/receive_btn.png");
        }
        .complete_btn {
          width: 145px;
          height: 57px;
          left: 22px;
          top: 18px;
          position: absolute;
          .sparkBg("TaskPop/complete_btn.png");
        }
        .already_btn {
          width: 145px;
          height: 57px;
          left: 22px;
          top: 18px;
          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;
    }
  }
}
