page {
  background-color: #f8f8f8;
}

.work_contents {
  padding: 220rpx 0 0 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;
      font-size: 24rpx;
      color: #3d3d3d;
      .btn_type {
        border: 1rpx solid #eee;
        padding: 7rpx 19rpx;
        border-radius: 100rpx;
      }
      .btn_status {
        border-radius: 100rpx;
        padding: 7rpx 19rpx;
      }
      .btn_status_Pending {
        color: #f97316;
        background-color: #fff7ed;
      }
      .btn_status_Processing,
      .btn_status_PendingAcceptance {
        color: #0082fa;
        background-color: #edf4ff;
      }
      .btn_status_PendingPayment {
        color: #cf1322;
        background-color: #ffeded;
      }
      .btn_status_Completed {
        color: #22c55e;
        background-color: #f0fdf4;
      }
      .btn_status_Closed {
        color: #909399;
        background-color: #f3f3f4;
      }
      .work_item_header_left {
        display: flex;
        align-items: center;
        .btn_type {
          margin-right: 30rpx;
        }
      }
    }
    .work_item_houses {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      .item {
        height: 30rpx;
        line-height: 30rpx;
        &:last-child {
          border-left: 1rpx solid #eee;
          padding-left: 15rpx;
          margin-left: 15rpx;
        }
      }
    }
    .work_item_des {
      color: #444444;
      font-size: 28rpx;
      padding: 12rpx 0 10rpx 0;
    }
    .work_item_cell {
      color: #666666;
      font-size: 26rpx;
      padding-top: 15rpx;
      display: flex;
      align-items: center;
    }
    .work_item_footer {
      border-top: 1rpx solid #eee;
      padding: 25rpx 0 0 0;
      margin-top: 25rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .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%;
        }
      }
    }
  }
}
