page {
  background-color: #f7f7f7;
}
.page-switch {
  color: #ff8a4c;
  text-align: right;
  font-size: 40rpx;
  font-style: normal;
  font-weight: 700;
  line-height: 52rpx;
  .arrow {
    font-size: 28rpx;
    color: #b7b7b7;
  }
}

.page {
  .page-header {
    padding-bottom: 32rpx;
    background: linear-gradient(0, #ffffff 0%, #fff1ea 100%);
    box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(26, 32, 32, 0.04);
    .search {
      margin: 0 32rpx;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      gap: 8rpx;
      border: 1px solid rgba(245, 244, 243, 0.47);
      .icon {
        width: 44rpx;
        height: 44rpx;
      }
      .input {
        height: 80rpx;
        font-size: 32rpx;
        line-height: 40rpx;
        color: #1a2020;
      }
      .place-input {
        color: #b7b7b7;
      }
    }
    .row {
      margin: 24rpx 32rpx 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22rpx;
      .col {
        padding: 10rpx 16rpx 10rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f7f7f7;
        border-radius: 12rpx;
        .label {
          flex-shrink: 0;
          font-size: 32rpx;
          color: #342317;
        }
        .content {
          flex: 1;
          font-size: 32rpx;
          color: #b5b8bb;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .icon {
          flex-shrink: 0;
          width: 44rpx;
          height: 44rpx;
        }
      }
      .total {
        font-size: 32rpx;
        color: #342317;
        text-align: right;
        .num {
          color: #ff8a4c;
        }
      }
    }
    .range {
      margin: 22rpx 32rpx 0;
      padding: 0 16rpx 0 24rpx;
      background-color: #f7f7f7;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        flex-shrink: 0;
        font-size: 32rpx;
        color: #342317;
      }
      .picker {
        flex: 1;
        .date {
          padding: 10rpx 0;
          text-align: center;
          font-size: 32rpx;
          color: #b5b8bb;
          line-height: 44rpx;
        }
      }
      .line {
        margin: 0 10rpx;
        width: 24rpx;
        height: 1px;
        background-color: rgba(181, 184, 187, 0.25);
      }
      .icon {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .card {
    margin: 32rpx;
    padding: 32rpx;
    background: linear-gradient(0deg, #fff6ed 0%, #ffffff 21.63%, #ffffff 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 2rpx solid #ffffff;
    .user {
      display: flex;
      .avatar {
        flex-shrink: 0;
        width: 116rpx;
        height: 116rpx;
        border-radius: 50%;
      }
      .wrap {
        padding-top: 8rpx;
        padding-left: 24rpx;
        .info {
          .name {
            padding-right: 12rpx;
            font-size: 32rpx;
            color: #342317;
          }
          .tel {
            font-size: 28rpx;
            color: #342317;
          }
        }
        .site {
          margin-top: 8rpx;
          font-size: 28rpx;
          color: #342317;
        }
        .date {
          margin-top: 8rpx;
          font-size: 28rpx;
          color: #b7b7b7;
        }
      }
    }
    .container {
      margin-top: 32rpx;
      padding-bottom: 32rpx;
      border-radius: 12rpx;
      background-color: rgba(247, 247, 247, 0.6);
      .c-item {
        display: flex;
        .aside {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .line-top {
            flex-shrink: 0;
            margin-right: 9rpx;
            height: 32rpx;
            border-right: 1px dashed #d9d9d9;
          }
          .step {
            margin: -6rpx 0;
            display: flex;
            align-items: center;
            gap: 12rpx;
            .name {
              padding: 0 0 0 12rpx;
              font-size: 28rpx;
              color: #b7b7b7;
            }
            .order {
              flex-shrink: 0;
              width: 20rpx;
              height: 20rpx;
              background: rgba(217, 217, 217, 0.26);
              border-radius: 50%;
              &::after {
                margin: 4rpx auto;
                content: '';
                display: block;
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                background: #d9d9d9;
              }
            }
          }
          .line-bottom {
            flex: 1;
            margin-right: 9rpx;
            height: 32rpx;
            border-right: 1px dashed #d9d9d9;
          }
        }
        .wrap {
          flex: 1;
          margin: 0 16rpx;
          padding-top: 24rpx;
          padding-bottom: 32rpx;
          border-bottom: 1px solid #efefef;
          .date {
            font-size: 32rpx;
            color: #342317;
          }
          .status {
            margin-top: 28rpx;
            display: flex;
            align-items: center;
            gap: 32rpx;
            font-size: 32rpx;
            .s1 {
              color: #4a8dff;
            }
            .s2 {
              color: #e86854;
            }
            .btn1 {
              color: #ff8a4c;
              text-decoration: underline;
              text-underline-offset: 4rpx;
            }
            .btn2 {
              width: 160rpx;
              height: 48rpx;
              background: #ff8a4c;
              border-radius: 88rpx 88rpx 88rpx 88rpx;
              text-align: center;
              line-height: 48rpx;
              font-size: 28rpx;
              color: #ffffff;
            }
          }
          .remark {
            margin-top: 16rpx;
            font-size: 32rpx;
            color: #e86854;
          }
        }
        &.active {
          .aside {
            .step {
              .name {
                color: #ff8a4c;
                background: linear-gradient(to right, rgba(255, 138, 76, 0.16) 0%, transparent 100%);
              }
              .order {
                background: rgba(255, 138, 76, 0.18);
                &::after {
                  background: #ff8a4c;
                }
              }
            }
          }
        }
        &:first-of-type {
          .line-top {
            border-right: none;
          }
        }
        &:last-of-type {
          .wrap {
            padding-bottom: 0;
            border-bottom: none;
          }
        }
      }
    }
  }
}