page {
  background-color: #f7fafc;
}

.page-title {
  font-size: 36rpx;
  color: rgba(51, 51, 51, 1);
}

.page {
  padding-bottom: 260rpx;
  .form {
    margin: 30rpx;
    padding: 32rpx;
    border-radius: 32rpx;
    border: 2rpx solid #fff;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8rpx 64rpx 0 rgba(0, 99, 132, 0.08);
    backdrop-filter: blur(10rpx);
    box-sizing: border-box;
    .rate {
      padding: 32rpx;
      border-radius: 24rpx;
      background-color: #fff;
      .r-title {
        font-size: 32rpx;
        color: rgba(71, 85, 105, 1);
        text-align: center;
      }
      .wrap {
        margin-top: 14rpx;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8rpx;
        .input {
          width: 200rpx;
          font-size: 100rpx;
          font-weight: bold;
          height: 120rpx;
          line-height: 120rpx;
          text-align: right;
          color: rgba(30, 41, 59, 1);
        }
        .input-place {
          color: rgba(148, 163, 184, 0.37);
        }
        .unit {
          width: 200rpx;
          flex-shrink: 0;
          font-size: 40rpx;
          color: rgba(148, 163, 184, 1);
          line-height: 48rpx;
        }
      }
    }
    .form-item {
      margin-bottom: 56rpx;
      &:last-of-type {
        margin-bottom: 0;
      }
      .form-label {
        padding-bottom: 24rpx;
        color: #1e293b;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 48rpx;
        .sub {
          margin-left: 10rpx;
          display: inline;
          font-size: 28rpx;
          color: rgba(159, 172, 182, 1);
          font-weight: normal;
        }
      }
      .date {
        padding: 28rpx 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f9fafb;
        border: 1px solid #f1f5f9;
        border-radius: 24rpx;
        .content {
          font-size: 32rpx;
          color: rgba(30, 41, 59, 1);
          &:empty::after {
            content: attr(data-place);
            color: rgba(71, 85, 105, 1);
          }
        }
        .icon {
          color: rgba(71, 85, 105, 1);
        }
      }
      .remark {
        padding: 32rpx;
        width: 100%;
        font-size: 28rpx;
        color: rgba(30, 41, 59, 1);
        box-sizing: border-box;
        background: #f9fafb;
        border: 2rpx solid #f1f5f9;
        border-radius: 24rpx;
      }
    }
    .check {
      margin-top: 48rpx;
      display: flex;
      align-items: cneter;
      line-height: 45rpx;
      font-size: 32rpx;
      color: rgba(100, 116, 139, 1);
      .wx-checkbox-input {
        width: 32rpx;
        height: 32rpx;
        border-radius: 8rpx;
        &.wx-checkbox-input-checked {
          background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%);
          border-color: transparent;
          &::before {
            color: #fff;
          }
        }
      }
    }
  }
  .page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 -4rpx 32rpx 0 rgba(47, 130, 169, 0.08);
    display: flex;
    align-items: center;
    gap: 26rpx;
    margin-top: 32rpx;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 30rpx);
    background-color: #fff;
    box-sizing: border-box;
    .cancel,
    .send {
      flex: 1;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 24rpx;
      border: 1px solid #e5e7eb;
      box-sizing: border-box;
      font-size: 32rpx;
      color: rgba(100, 116, 139, 1);
    }
    .send {
      background: var(--, linear-gradient(270deg, #439fc7 0%, #2f82a9 100%));
      color: #fff;
      border-color: transparent;
    }
  }
}