page {
  background-color: #f6f8f9;
}

.page {
  .benchmark {
    margin-top: 32rpx;
    padding: 0 40rpx 28rpx;
    .checkbox {
      font-size: 28rpx;
      color: #211d2e;
      .wx-checkbox-input {
        background: rgba(173, 172, 178, 0.36);
        border-color: transparent;
        width: 32rpx;
        height: 32rpx;
      }
      .wx-checkbox-input-checked {
        background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%);
      }
    }
  }
  .form {
    margin: 0 40rpx 24rpx;
    padding: 32rpx;
    background: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    .form-title {
      font-size: 32rpx;
      color: #211d2e;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 16rpx;
      &::before {
        content: '';
        width: 8rpx;
        height: 32rpx;
        background: #b982ff;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
      }
    }
    .form-title-gap {
      margin-top: 48rpx;
    }
    .select {
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      padding: 26rpx 32rpx;
      background: #f6f8f9;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .content {
        font-size: 32rpx;
        color: #211d2e;
        &:empty::after {
          content: attr(data-place);
          color: rgba(173, 172, 178, 0.6);
        }
      }
    }
    .dobule {
      margin-top: 44rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      display: flex;
      gap: 26rpx;
      .item {
        .name {
          font-size: 32rpx;
          color: #211d2e;
        }
        .i-content {
          margin-top: 24rpx;
          padding: 26rpx 14rpx;
          display: flex;
          align-items: center;
          background: #f6f8f9;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          font-size: 32rpx;
          color: #211d2e;
          .num {
            font-size: 32rpx;
            color: #211d2e;
          }
        }
      }
    }
  }
  .container {
    margin-top: 72rpx;
    padding: 32rpx 40rpx 0;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    .c-title {
      font-size: 32rpx;
      color: #211d2e;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 16rpx;
      &::before {
        content: '';
        width: 8rpx;
        height: 32rpx;
        background: #b982ff;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
      }
    }
    .options {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      gap: 22rpx;
      .btn {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 16rpx;
        padding: 26rpx;
        border-radius: 18rpx;
        .icon {
          width: 36rpx;
          height: 36rpx;
        }
        font-size: 32rpx;
        &.btn1 {
          color: #b982ff;
          background: rgba(185, 130, 255, 0.12);
        }
        &.btn2 {
          color: #ffffff;
          background: linear-gradient(180deg, #e98ff8 0%, #b073ff 100%);
        }
      }
    }
    .card {
      margin-top: 32rpx;
      padding: 32rpx;
      background: #f6f8f9;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .card-title {
        display: flex;
        align-items: center;
        gap: 16rpx;
        .order {
          width: 40rpx;
          height: 40rpx;
          font-size: 28rpx;
          color: #b982ff;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(185, 130, 255, 0.1);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }
      .upload-container {
        margin-top: 32rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
        gap: 24rpx;
        .upload-item {
          $degs: (
            1: -45deg,
            2: 0deg,
            3: 45deg,
            4: -90deg,
            5: 90deg,
            6: -135deg,
            7: -180deg,
            8: 135deg,
          );
          @each $index, $deg in $degs {
            &:nth-of-type(#{$index}) {
              .arrow {
                transform: rotate(#{$deg});
              }
            }
          }
          &:nth-of-type(3),
          &:nth-of-type(5),
          &:nth-of-type(8) {
            .name {
              flex-direction: row-reverse;
            }
          }
          .upload-place {
            border: 1px dashed #b982ff;
            border-radius: 16rpx;
            width: 186rpx;
            height: 186rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 24rpx;
            box-sizing: border-box;
            .icon {
              width: 52rpx;
              height: 52rpx;
            }
            .name {
              font-size: 24rpx;
              display: flex;
              align-items: flex-end;
              gap: 8rpx;
              color: #211d2e;
              line-height: 1;
              .arrow {
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
          .upload-preview {
            position: relative;
            width: 186rpx;
            height: 186rpx;
            .photo {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
            }
            .status {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
              background: rgba(9, 9, 9, 0.45);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              .icon {
                margin-top: 32rpx;
                width: 40rpx;
                height: 40rpx;
              }
              .content {
                margin-top: 8rpx;
                font-size: 24rpx;
                color: #ffffff;
              }
              .guide {
                margin-top: 26rpx;
                width: 100%;
                height: 40rpx;
                text-align: center;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #ffffff;
                border-radius: 0 0 16rpx 16rpx;
                background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%);
              }
            }
          }
        }
      }
      &.card3 .upload-container {
        .upload-item:nth-child(1) {
          grid-area: 1 / 1;
        } /* 左上 */
        .upload-item:nth-child(2) {
          grid-area: 1 / 2;
        } /* 上 */
        .upload-item:nth-child(3) {
          grid-area: 1 / 3;
        } /* 右上 */
        .upload-item:nth-child(4) {
          grid-area: 2 / 1;
        } /* 左 */
        .upload-item:nth-child(5) {
          grid-area: 2 / 3;
        } /* 右 */
        .upload-item:nth-child(6) {
          grid-area: 3 / 1;
        } /* 左下 */
        .upload-item:nth-child(7) {
          grid-area: 3 / 2;
        } /* 下 */
        .upload-item:nth-child(8) {
          grid-area: 3 / 3;
        } /* 右下 */
      }
    }
    .c-footer {
      position: sticky;
      bottom: 0;
      left: 0;
      background-color: #fff;
      padding: 32rpx 0 60rpx;
      .btn {
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: #ffffff;
        background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%);
        box-shadow: 0rpx 16rpx 32rpx 0rpx rgba(185, 130, 255, 0.25);
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
    }
  }
}

.place {
  color: rgba(173, 172, 178, 0.6);
}