page {
  background-color: rgba(247, 247, 250, 1);
}

.page {
  padding: 40rpx 30rpx calc(42rpx + env(safe-area-inset-bottom));
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .progress {
    flex-shrink: 0;
    padding: 0 50rpx 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rpx;
    .p-item {
      position: relative;
      flex-shrink: 0;
      .circle {
        background: #fff;
        padding: 12rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border: 6rpx solid rgba(231, 231, 236, 1);
        border-radius: 50%;
        .icon {
          display: block;
          width: 48rpx;
          height: 48rpx;
        }
      }
      .name {
        position: absolute;
        bottom: -50rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32rpx;
        color: rgba(161, 164, 172, 1);
        white-space: nowrap;
      }
      &.active {
        .circle {
          background-color: rgba(246, 74, 58, 1);
          border-color: #fff;
          box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.13);
        }
        .name {
          color: rgba(1, 1, 5, 1);
        }
      }
    }
    .line {
      flex: 1;
      border-top: 2px dashed rgba(231, 231, 236, 1);
      &.active {
        border-color: rgba(246, 74, 58, 1);
      }
    }
  }
  .tip-card {
    flex-shrink: 0;
    padding: 12rpx 24rpx;
    margin-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 28rpx;
    color: rgba(250, 118, 45, 1);
    line-height: 36rpx;
    min-height: 82rpx;
    box-sizing: border-box;
    text-align: center;
    background: #fff1e2;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    .blod {
      font-weight: bold;
    }
  }
  .swiper {
    margin-top: 32rpx;
    flex: 1;
    .swiper-item {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .scroll-view0 {
        flex: 1;
        height: 40vh;
        .card {
          margin-bottom: 24rpx;
          padding: 0 32rpx;
          background: #ffffff;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          .row {
            display: flex;
            border-bottom: 1px solid rgba(247, 247, 250, 1);
            &:last-of-type {
              border: none;
            }
            .label {
              width: 6em;
              flex-shrink: 0;
              padding: 32rpx 0;
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
            }
            .container {
              flex: 1;
              .date {
                .date-content {
                  padding: 32rpx 0;
                  font-size: 32rpx;
                  color: rgba(1, 1, 5, 1);
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  &::before {
                    display: inline;
                    content: attr(data-place);
                    color: rgba(161, 164, 172, 0.5);
                  }
                  &::after {
                    content: '';
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 10rpx 10rpx 0 10rpx;
                    border-color: rgba(207, 209, 213, 1) transparent transparent transparent;
                  }
                }
              }
              .input-wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .input {
                  flex: 1;
                  padding: 32rpx 0;
                  color: rgba(1, 1, 5, 1);
                }
                .place-input {
                  color: rgba(161, 164, 172, 0.5);
                }
                .unit {
                  flex-shrink: 0;
                }
              }
              .select {
                padding: 20rpx 0;
                display: grid;
                gap: 14rpx;
                &.select3 {
                  grid-template-columns: repeat(3, 1fr);
                }
                &.select2 {
                  grid-template-columns: repeat(2, 1fr);
                }
                .s-item {
                  padding: 12rpx;
                  font-size: 32rpx;
                  color: rgba(137, 141, 151, 1);
                  line-height: 40rpx;
                  background-color: rgba(247, 247, 250, 1);
                  text-align: center;
                  border-radius: 12rpx;
                  &.active {
                    color: #fff;
                    background-color: rgba(246, 74, 58, 1);
                  }
                }
              }
              .tip {
                padding-bottom: 32rpx;
                font-size: 24rpx;
                color: rgba(161, 164, 172, 0.5);
              }
            }
          }
        }
      }
      .scroll-view1 {
        flex: 1;
        height: 40vh;
        .card {
          margin-bottom: 24rpx;
          padding: 0 32rpx;
          background: #ffffff;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          .row {
            display: flex;
            border-bottom: 1px solid rgba(247, 247, 250, 1);
            flex-wrap: wrap;
            &:last-of-type {
              border: none;
            }
            .label {
              width: 9em;
              flex-shrink: 0;
              padding: 32rpx 0;
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
            }
            .container {
              flex: 1;
              .select {
                padding: 20rpx 0;
                display: grid;
                gap: 14rpx;
                &.select4 {
                  grid-template-columns: repeat(4, 1fr);
                }
                &.select3 {
                  grid-template-columns: repeat(3, 1fr);
                }
                &.select2 {
                  grid-template-columns: repeat(2, 1fr);
                }
                .s-item {
                  padding: 12rpx;
                  font-size: 32rpx;
                  color: rgba(137, 141, 151, 1);
                  line-height: 40rpx;
                  background-color: rgba(247, 247, 250, 1);
                  text-align: center;
                  border-radius: 12rpx;
                  &.active {
                    color: #fff;
                    background-color: rgba(246, 74, 58, 1);
                  }
                }
              }
              .tip {
                padding-bottom: 32rpx;
                font-size: 24rpx;
                color: rgba(161, 164, 172, 0.5);
              }
            }
          }
          .row1 {
            border-bottom: 1px solid rgba(247, 247, 250, 1);
            flex-wrap: wrap;
            &:last-of-type {
              border: none;
            }
            .label {
              width: 9em;
              flex-shrink: 0;
              padding: 32rpx 0;
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
            }
            .container {
              flex: 1;
              .select {
                padding: 0 0 32rpx;
                display: grid;
                gap: 14rpx;
                &.select4 {
                  grid-template-columns: repeat(4, 1fr);
                }
                .s-item {
                  padding: 12rpx;
                  font-size: 32rpx;
                  color: rgba(137, 141, 151, 1);
                  line-height: 40rpx;
                  background-color: rgba(247, 247, 250, 1);
                  text-align: center;
                  border-radius: 12rpx;
                  &.active {
                    color: #fff;
                    background-color: rgba(246, 74, 58, 1);
                  }
                }
              }
              .tip {
                padding-bottom: 32rpx;
                font-size: 24rpx;
                color: rgba(161, 164, 172, 0.5);
              }
            }
          }
          .auto-input {
            padding-bottom: 32rpx;
            .input {
              padding: 22rpx 32rpx;
              background: #f7f7fa;
              border-radius: 12rpx;
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
            }
            .place-input {
              color: rgba(161, 164, 172, 0.5);
            }
          }
        }
      }
      .scroll-view2 {
        flex: 1;
        height: 40vh;
        .card {
          margin-bottom: 24rpx;
          padding: 0 32rpx;
          background: #ffffff;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          .title {
            padding: 32rpx 0 24rpx;
            font-size: 36rpx;
            color: rgba(1, 1, 5, 1);
            font-weight: bold;
          }
          .body {
            position: relative;
            margin: 112rpx auto 0;
            padding-bottom: 24rpx;
            width: 345rpx;
            height: 417rpx;
          }
          .auto-area {
            padding-bottom: 32rpx;
            .textarea {
              width: 100%;
              padding: 22rpx 32rpx;
              background: #f7f7fa;
              border-radius: 12rpx;
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
              height: 150rpx;
              box-sizing: border-box;
            }
            .place-textarea {
              color: rgba(161, 164, 172, 0.5);
            }
          }
        }
      }
      .footer {
        margin-top: 32rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 22rpx;
        .cancel {
          flex: 1;
          padding: 18rpx;
          font-size: 32rpx;
          color: rgba(246, 74, 58, 1);
          line-height: 44rpx;
          border-radius: 112rpx;
          border: 2px solid #f64a3a;
          text-align: center;
        }
        .submit {
          flex: 1;
          padding: 18rpx;
          font-size: 32rpx;
          color: rgba(255, 255, 255, 1);
          line-height: 44rpx;
          border-radius: 112rpx;
          border: 2px solid #f64a3a;
          background-color: #f64a3a;
          text-align: center;
        }
      }
    }
  }
}