p age {
  background-color: #f6f8f9;
}

.page {
  padding: 40rpx 40rpx 120rpx;
  .container {
    padding: 32rpx;
    border: 2rpx solid #ffffff;
    background: #fff linear-gradient(180deg, #efe3ff 0%, #ffffff 100%) no-repeat top center/100% 228rpx;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 32rpx rgba(25, 0, 57, 0.07);
    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .wrap {
        .w-header {
          display: flex;
          align-items: flex-end;
          gap: 10rpx;
          line-height: 1;
          .num {
            font-size: 128rpx;
            color: var(--color);
            font-weight: bold;
          }
          .label {
            padding: 4rpx 16rpx;
            margin-bottom: 14rpx;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 36rpx;
            border-radius: 50rpx 50rpx 50rpx 0rpx;
            background: var(--label-background);
          }
        }
        .tip {
          font-size: 28rpx;
          color: #adacb2;
        }
      }
      .status {
        width: 152rpx;
        height: 152rpx;
        flex-shrink: 0;
      }
    }
    .c-line {
      position: relative;
      margin: 32rpx -32rpx;
      border-bottom: 1px dashed #f6f8f9;
      &::before {
        position: absolute;
        top: -13rpx;
        left: -13rpx;
        content: '';
        background-color: #f6f8f9;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
      }
      &::after {
        position: absolute;
        top: -13rpx;
        right: -13rpx;
        content: '';
        background-color: #f6f8f9;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
      }
    }
    .card {
      margin-bottom: 24rpx;
      padding: 36rpx 30rpx 80rpx;
      background: #faf7ff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #efe2fe;
      .c-header {
        display: flex;
        align-items: center;
        gap: 12rpx;
        font-size: 24rpx;
        color: rgba(33, 29, 46, 0.28);
        .skew {
          width: 10rpx;
          height: 22rpx;
          background: #b982ff;
          transform: skew(-15deg);
        }
      }
      .c-content {
        margin-top: 16rpx;
        font-size: 32rpx;
        color: #211d2e;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 10rpx;
        .label {
          padding: 0 12rpx;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 32rpx;
          border-radius: 50rpx 50rpx 50rpx 0rpx;
          background: var(--label-background);
        }
      }
      .progress {
        position: relative;
        margin-top: 38rpx;
        display: grid;
        grid-template-columns: 4fr 4fr 2fr;
        gap: 4rpx;
        .p-item {
          .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            color: #adacb2;
          }
          .line1 {
            margin-top: 8rpx;
            height: 16rpx;
            background: rgba(185, 130, 255, 0.2);
          }
          .line2 {
            margin-top: 8rpx;
            height: 16rpx;
            background: rgba(185, 130, 255, 0.6);
          }
          .line3 {
            margin-top: 8rpx;
            height: 16rpx;
            background: #b982ff;
          }
        }
        .slide {
          position: absolute;
          top: 30rpx;
          transform: translateX(-50%);
          .circle {
            width: 28rpx;
            height: 28rpx;
            background: #b982ff;
            border-radius: 50%;
            border: 2rpx solid #ffffff;
          }
          .num {
            position: absolute;
            bottom: -12rpx;
            left: 50%;
            transform: translate(-50%, 100%);
            padding: 0 10rpx;
            min-width: 52rpx;
            height: 32rpx;
            font-size: 32rpx;
            color: #b982ff;
            text-align: center;
            line-height: 32rpx;
            background: #eae0fa;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
        }
      }
    }
    .effect {
      margin-top: 24rpx;
      font-size: 28rpx;
      color: #adacb2;
      text-align: center;
    }
  }
  .page-effect-wrap {
    margin: 64rpx 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .page-effect {
      font-size: 32rpx;
      color: var(--color);
      line-height: 44rpx;
      padding: 8rpx 42rpx;
      background: var(--background);
      border-radius: 96rpx 96rpx 96rpx 96rpx;
      border: 2rpx solid #ffffff;
    }
  }
  .report {
    margin-top: 88rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: #ffffff;
    background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}

.status1 {
  --color: #ef3939;
  --background: #ffdddd;
  --label-background: linear-gradient(177deg, #ff9090 0%, #ef3939 100%);
}
.status2 {
  --color: #ffa300;
  --background: #fff4e0;
  --label-background: linear-gradient(153deg, #ffd48b 0%, #ffa300 100%);
}
.status3 {
  --color: #1ec580;
  --background: #dafdee;
  --label-background: linear-gradient(330deg, #1ec580 0%, #4feaaa 100%);
}