page {
  background-color: rgba(247, 247, 250, 1);
}
.page-title {
  width: 319rpx;
  height: 92rpx;
}

.page {
  padding: 0 40rpx 180rpx;
  .user {
    margin-top: 42rpx;
    display: flex;
    align-items: center;
    .avatar {
      flex-shrink: 0;
      border: 2px solid #fff;
      border-radius: 50%;
      width: 98rpx;
      height: 98rpx;
      background-color: #fff;
      .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
    .wrap {
      padding-left: 24rpx;
      .name {
        font-size: 32rpx;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
      }
      .content {
        margin-top: 8rpx;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.6);
        .num {
          font-weight: bold;
          font-size: 40rpx;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
  .doctor {
    margin-top: 30rpx;
    .none-doctor {
      padding: 26rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.56);
      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(40, 0, 0, 0.06);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      .content {
        font-size: 26rpx;
        color: rgba(161, 164, 172, 1);
        line-height: 46rpx;
      }
      .btn {
        flex-shrink: 0;
        width: 204rpx;
        height: 56rpx;
        font-size: 28rpx;
        color: rgba(242, 58, 47, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 162, 165, 0.13);
        border-radius: 86rpx;
        border: 2rpx solid rgba(242, 58, 47, 1);
      }
    }
    .container {
      margin-top: 76rpx;
      padding: 26rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.56);
      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(40, 0, 0, 0.06);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      .wrap {
        .bind-list {
          margin-top: -68rpx;
          display: flex;
          gap: 32rpx;
          .item {
            .avatar-img {
              display: block;
              margin: 0 auto;
              width: 92rpx;
              height: 92rpx;
              border-radius: 50%;
            }
            .name {
              margin: -20rpx auto 0;
              padding: 4rpx 20rpx;
              font-size: 20rpx;
              color: #fff;
              line-height: 24rpx;
              background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
              border-radius: 28rpx 28rpx 28rpx 28rpx;
            }
          }
          .add {
            .icon {
              display: block;
              margin: 0 auto;
              width: 92rpx;
              height: 92rpx;
              border-radius: 50%;
            }
            .name {
              margin: -20rpx auto 0;
              padding: 4rpx 20rpx;
              font-size: 20rpx;
              color: rgba(161, 164, 172, 1);
              line-height: 24rpx;
            }
          }
        }
        .content {
          margin-top: 18rpx;
          font-size: 26rpx;
          color: rgba(161, 164, 172, 1);
        }
      }
      .btn {
        flex-shrink: 0;
        width: 160rpx;
        height: 56rpx;
        font-size: 28rpx;
        color: rgba(242, 58, 47, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 162, 165, 0.13);
        border-radius: 86rpx;
        border: 2rpx solid rgba(242, 58, 47, 1);
      }
    }
  }
  .process {
    margin-top: 32rpx;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 2rpx solid #ffffff;
    .header {
      padding: 28rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 32rpx;
        color: rgba(242, 58, 47, 1);
        font-weight: bold;
      }
      .dots {
        display: flex;
        align-items: center;
        gap: 12rpx;
        .item {
          width: 40rpx;
          height: 40rpx;
          font-size: 24rpx;
          color: rgba(225, 36, 42, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          &.active {
            background-color: rgba(242, 58, 47, 1);
            color: #fff;
          }
        }
      }
    }
    .container {
      padding: 40rpx 58rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(40, 0, 0, 0.06);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      .c-header {
        display: flex;
        .num {
          flex-shrink: 0;
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f23a2f;
          border-radius: 50%;
          font-size: 35rpx;
          color: #fff;
        }
        .wrap {
          padding-left: 16rpx;
          .title {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
            font-weight: bold;
          }
          .content {
            margin-top: 10rpx;
            font-size: 28rpx;
            color: rgba(161, 164, 172, 1);
          }
        }
      }
      .btn {
        margin-top: 22rpx;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 1);
        width: 556rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
        border-radius: 84rpx 84rpx 84rpx 84rpx;
      }
    }
  }
  .module1 {
    margin-top: 48rpx;
    .m-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 36rpx;
        color: rgba(1, 1, 5, 1);
        font-weight: bold;
      }
      .more {
        font-size: 24rpx;
        color: rgba(1, 1, 5, 0.36);
      }
    }
  }

  .module2 {
    margin-top: 48rpx;
    .m-header {
      .title {
        font-size: 36rpx;
        color: rgba(1, 1, 5, 1);
        font-weight: bold;
      }
    }
    .m-container {
      margin-top: 24rpx;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22rpx;
      .item {
        padding: 28rpx 22rpx 36rpx 30rpx;
        background: linear-gradient(32deg, #ffffff 0%, #fffcfc 55%, #fff0f0 100%);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        border: 2rpx solid #ffffff;
        .num {
          font-size: 44rpx;
          font-weight: bold;
          color: rgba(242, 58, 47, 1);
          .sub {
            font-size: 24rpx;
            color: rgba(161, 164, 172, 1);
            font-weight: normal;
          }
        }
        .content {
          margin-top: 18rpx;
          font-size: 24rpx;
          color: rgba(1, 1, 5, 1);
        }
        .footer {
          margin-top: 8rpx;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .date {
            font-size: 24rpx;
            color: rgba(161, 164, 172, 1);
          }
          .add {
            width: 44rpx;
            height: 44rpx;
          }
        }
      }
    }
  }
}