page {
  background-color: #f8f8f8;
}

.work_contents {
  padding: 0 0 30rpx 0;
  .work_item {
    background-color: #fff;
    border-radius: 10rpx;
    margin: 30rpx 30rpx 0 30rpx;
    border-radius: 15rpx;
    padding: 0 30rpx 30rpx 30rpx;
    .work_item_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx 0;
      .group_btn {
        display: flex;
        align-items: center;
      }
      .btn_type {
        border: 1rpx solid #eee;
        font-size: 28rpx;
        padding: 7rpx 19rpx;
        border-radius: 100rpx;
        margin-right: 10rpx;
      }
      .btn_status {
        border-radius: 100rpx;
        font-size: 28rpx;
        padding: 7rpx 19rpx;
      }
      .status_Pending {
        color: #f97316;
        background-color: #fff7ed;
      }
      .status_Processing,
      .status_PendingAcceptance {
        color: #0082fa;
        background-color: #edf4ff;
      }
      .status_PendingPayment {
        color: #cf1322;
        background-color: #ffeded;
      }
      .status_Completed {
        color: #22c55e;
        background-color: #f0fdf4;
      }
      .status_Closed {
        color: #909399;
        background-color: #f3f3f4;
      }
    }
    .full_name {
      font-size: 28rpx;
    }
    .work_item_cell {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #666;
      padding-top: 20rpx;
      text {
        color: #333;
      }
    }
    .work_item_images {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        background-color: #f8f8f8;
        margin-top: 25rpx;
        margin-right: 25rpx;
        &:nth-child(4n) {
          margin-right: 0;
        }
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .work_code {
      font-size: 25rpx;
    }
  }
}
.work_item_time_footer {
  margin-top: 30rpx;
  .todo_done_card_footer {
    color: #666666;
    font-size: 28rpx;
    padding: 12rpx 20rpx;
    border-radius: 10rpx;
    color: #24bc21;
    background: linear-gradient(90deg, #edffed 0%, rgba(232, 255, 231, 0) 103%);
    display: flex;
    align-items: center;
    margin: 25rpx 0 0 0;
  }
  .status_1 {
    color: #24bc21;
    background: linear-gradient(90deg, #edffed 0%, rgba(232, 255, 231, 0) 103%);
  }
  .status_2 {
    color: #0082fa;
    background: linear-gradient(90deg, #eff7ff 0%, rgba(231, 241, 255, 0) 103%);
  }
  .status_3 {
    color: #f97316;
    background: linear-gradient(90deg, #fff4ef 0%, rgba(255, 237, 231, 0) 103%);
  }
  .status_4 {
    color: #ea0000;
    background: linear-gradient(90deg, #ffe5e5 0%, rgba(255, 255, 255, 0) 103%);
  }
  .expected_time {
    padding: 20rpx 0 0 0;
    color: #333;
    font-size: 28rpx;
  }
}
.work_item_btn_group_footer {
  border-top: 1rpx solid #eee;
  margin-top: 25rpx;
  padding-top: 25rpx;
  font-size: 28rpx;
  color: #666;
}
.card_status_4 {
  border-top: 6px solid #ef4444;
}
