page {
  background-color: rgba(246, 246, 246, 1);
}
.page {
  padding: 40rpx 40rpx 200rpx;
  .user {
    padding-top: 34rpx;
    display: flex;
    .avatar {
      flex-shrink: 0;
      width: 108rpx;
      height: 108rpx;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
      .a-img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
    .wrap {
      padding-left: 20rpx;
      flex: 1;
      .w-header {
        .name {
          margin-right: 16rpx;
          display: inline;
          font-size: 36rpx;
          color: rgba(1, 1, 5, 1);
          font-weight: bold;
        }
        .age {
          margin-right: 16rpx;
          padding: 0 14rpx;
          border-radius: 20rpx;
          background-color: rgba(32, 196, 255, 1);
          display: inline-flex;
          align-items: center;
          gap: 6rpx;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 1);
          line-height: 32rpx;
          .icon {
            width: 28rpx;
            height: 28rpx;
          }
        }
        .site {
          padding: 0 14rpx;
          border-radius: 20rpx;
          background-color: rgba(248, 166, 133, 1);
          display: inline-flex;
          align-items: center;
          gap: 6rpx;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 1);
          line-height: 32rpx;
          .icon {
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
      .w-footer {
        margin-top: 18rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info {
          font-size: 28rpx;
          color: rgba(161, 164, 172, 1);
        }
        .more {
          font-size: 28rpx;
          color: rgba(28, 107, 255, 1);
        }
      }
    }
  }
  .navbar {
    margin-top: 28rpx;
    padding: 8rpx;
    border-radius: 112rpx;
    background-color: #fff;
    border: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .nav {
      flex: 1;
      text-align: center;
      line-height: 68rpx;
      font-size: 28rpx;
      color: rgba(137, 141, 151, 1);
      &.active {
        background-color: rgba(28, 107, 255, 1);
        color: #fff;
        border-radius: 112rpx;
      }
    }
  }

  .container0 {
    padding: 8rpx 0 0;
    .none {
      display: block;
      margin: 30rpx auto;
      width: 80%;
    }
    .card1 {
      margin-top: 24rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      background: linear-gradient(346deg, #ffffff 0%, #ffffff 85%, #e6efff 100%);
      padding-bottom: 32rpx;
      .c-header {
        padding: 32rpx 16rpx 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16rpx;
          .title {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 22rpx;
            &::before {
              content: '';
              width: 8rpx;
              height: 32rpx;
              border-radius: 0 32rpx 32rpx 0;
              background: rgba(28, 107, 255, 1);
            }
          }
          .fold-icon {
            width: 60rpx;
            height: 60rpx;
            transition: all 0.3s ease;
            transform: rotate(0);
            &.trun {
              transform: rotate(-180deg);
            }
          }
        }
        .btn {
          padding: 8rpx 32rpx;
          font-size: 32rpx;
          line-height: 40rpx;
          color: #fff;
          text-align: center;
          background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
          border-radius: 96rpx;
        }
      }
      .fold {
        transition: height 0.3s ease;
        max-height: 0;
        overflow: hidden;
      }
      .c-body {
        margin: 24rpx 32rpx 0;
        padding: 16rpx 32rpx;
        background: #f6f6f6;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        position: relative;

        .status {
          position: absolute;
          width: 80rpx;
          height: 80rpx;
          top: 12rpx;
          right: 22rpx;
        }
        .row {
          padding: 16rpx 0;
          display: flex;
          gap: 32rpx;
          line-height: 56rpx;
          .label {
            flex-shrink: 0;
            width: 4em;
            font-size: 32rpx;
            color: rgba(161, 164, 172, 1);
          }
          .content {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
          }
        }
        .detail {
          padding: 16rpx;
          font-size: 32rpx;
          text-align: center;
          color: rgba(161, 164, 172, 1);
        }
      }
      .more {
        margin-top: 32rpx;
        font-size: 32rpx;
        color: rgba(28, 107, 255, 1);
        text-align: center;
      }
    }
    .card2 {
      margin-top: 24rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      background: linear-gradient(346deg, #ffffff 0%, #ffffff 85%, #e6efff 100%);
      padding-bottom: 32rpx;
      .c-header {
        padding: 32rpx 16rpx 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16rpx;
          .title {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 22rpx;
            &::before {
              content: '';
              width: 8rpx;
              height: 32rpx;
              border-radius: 0 32rpx 32rpx 0;
              background: rgba(28, 107, 255, 1);
            }
          }
          .fold-icon {
            width: 60rpx;
            height: 60rpx;
            transition: all 0.3s ease;
            transform: rotate(0);
            &.trun {
              transform: rotate(-180deg);
            }
          }
        }
      }
      .fold {
        transition: height 0.3s ease;
        max-height: 0;
        overflow: hidden;
      }
      .c-body {
        margin: 24rpx 32rpx 0;
        padding: 16rpx 0 0;
        background: #f6f6f6;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        position: relative;

        .row {
          padding: 16rpx 32rpx;
          display: flex;
          gap: 32rpx;
          line-height: 56rpx;
          .label {
            flex-shrink: 0;
            width: 6em;
            font-size: 32rpx;
            color: rgba(161, 164, 172, 1);
          }
          .content {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
          }
        }
        .options {
          display: flex;
          align-items: center;
          border-top: 1px solid rgba(232, 233, 237, 1);
          .item {
            flex: 1;
            padding: 22rpx 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            color: rgba(28, 107, 255, 1);
            text-align: center;
            &:first-of-type {
              border-right: 1px solid rgba(232, 233, 237, 1);
            }
          }
        }
      }
    }
    .card3,
    .card4 {
      margin-top: 24rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      background: linear-gradient(346deg, #ffffff 0%, #ffffff 85%, #e6efff 100%);
      padding-bottom: 32rpx;
      .c-header {
        padding: 32rpx 16rpx 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16rpx;
          .title {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 22rpx;
            &::before {
              content: '';
              width: 8rpx;
              height: 32rpx;
              border-radius: 0 32rpx 32rpx 0;
              background: rgba(28, 107, 255, 1);
            }
          }
          .fold-icon {
            width: 60rpx;
            height: 60rpx;
            transition: all 0.3s ease;
            transform: rotate(0);
            &.trun {
              transform: rotate(-180deg);
            }
          }
        }
      }
      .fold {
        transition: height 0.3s ease;
        max-height: 0;
        overflow: hidden;
      }
      .c-body {
        margin: 24rpx 32rpx 0;
        padding: 16rpx 0 0;
        background: #f6f6f6;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        position: relative;

        .row {
          padding: 16rpx 32rpx;
          display: flex;
          gap: 32rpx;
          line-height: 56rpx;
          .label {
            flex-shrink: 0;
            width: 4em;
            font-size: 32rpx;
            color: rgba(161, 164, 172, 1);
          }
          .content {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
          }
        }
        .options {
          display: flex;
          align-items: center;
          border-top: 1px solid rgba(232, 233, 237, 1);
          .item {
            flex: 1;
            padding: 22rpx 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            color: rgba(28, 107, 255, 1);
            text-align: center;
            &:first-of-type {
              border-right: 1px solid rgba(232, 233, 237, 1);
            }
          }
        }
      }
    }
  }
  .container1 {
    padding: 8rpx 0 0;
    .c1_card1 {
      margin-top: 24rpx;
      padding: 16rpx 32rpx;
      background: linear-gradient(180deg, #fffaf9 0%, #ffffff 14%, #ffffff 100%);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      .row {
        padding: 16rpx 0;
        display: flex;
        gap: 32rpx;
        .label {
          width: 6em;
          font-size: 32rpx;
          color: rgba(161, 164, 172, 1);
        }
        .content {
          font-size: 32rpx;
          color: rgba(1, 1, 5, 1);
        }
      }
    }
    .c1_card2 {
      margin-top: 24rpx;
      padding: 0 32rpx;
      background: linear-gradient(180deg, #fffaf9 0%, #ffffff 14%, #ffffff 100%);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #ffffff;
      .row {
        padding: 32rpx 0;
        border-bottom: 1px solid rgba(247, 247, 250, 1);
        .wrap {
          display: flex;
          gap: 32rpx;
          .label {
            flex-shrink: 0;
            width: 9em;
            font-size: 32rpx;
            color: rgba(161, 164, 172, 1);
          }
          .content {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
            display: flex;
            gap: 10rpx;
            flex-wrap: wrap;
          }
        }
        .remark {
          margin-top: 24rpx;
          padding: 22rpx 32rpx;
          font-size: 32rpx;
          color: rgba(1, 1, 5, 1);
          border-radius: 12rpx;
          background-color: rgba(247, 247, 250, 1);
        }
      }
      .row1 {
        padding: 32rpx 0;
        border-bottom: 1px solid rgba(247, 247, 250, 1);
        .wrap {
          display: flex;
          align-items: center;
          gap: 32rpx;
          .label {
            flex-shrink: 0;
            width: 11em;
            font-size: 32rpx;
            color: rgba(161, 164, 172, 1);
          }
          .line {
            width: 1px;
            height: 88rpx;
            background-color: rgba(247, 247, 250, 1);
          }
          .content {
            font-size: 32rpx;
            color: rgba(1, 1, 5, 1);
          }
        }
        .remark {
          margin-top: 24rpx;
          padding: 22rpx 32rpx;
          font-size: 32rpx;
          color: rgba(1, 1, 5, 1);
          border-radius: 12rpx;
          background-color: rgba(247, 247, 250, 1);
        }
      }
    }
  }
  .container2 {
    .date-card {
      margin-top: 32rpx;
      padding: 18rpx 32rpx;
      background: linear-gradient(355deg, #ffffff 0%, #e6efff 100%);
      box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.08);
      border-radius: 84rpx 84rpx 84rpx 84rpx;
      border: 2px solid #ffffff;
      display: flex;
      align-items: center;
      .icon {
        width: 48rpx;
        height: 48rpx;
      }
      .content {
        padding-left: 16rpx;
        font-size: 32rpx;
        color: rgba(1, 1, 5, 1);
      }
    }
    .notic {
      position: relative;
      margin-top: 32rpx;
      height: 168rpx;
      box-sizing: border-box;
      padding: 24rpx 32rpx;
      .title {
        font-size: 32rpx;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
      }
      .content {
        margin-top: 6rpx;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 1);
      }
      .sub-content {
        margin-top: 6rpx;
        padding: 0 10rpx;
        height: 36rpx;
        display: inline-block;
        font-size: 28rpx;
        border-radius: 6rpx;
        color: rgba(28, 107, 255, 1);
        background-color: #fff;
      }
      .badge {
        position: absolute;
        right: 6rpx;
        top: -14rpx;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(255, 255, 255, 0.25);
      }
    }
    .card {
      position: relative;
      margin-top: 32rpx;
      border-radius: 24rpx;
      border: 1px solid #ffffff;
      background: rgba(255, 244, 243, 1);
      .c-calendar {
        position: relative;
        z-index: 1;
        padding: 40rpx 32rpx 0;
        min-height: 400rpx;
        background-color: #fff;
        border-radius: 24rpx;
        .lengend {
          padding: 32rpx 0;
          display: flex;
          align-items: center;
          gap: 32rpx;
          border-top: 1px solid rgba(247, 247, 250, 1);
          .l-item {
            display: flex;
            align-items: center;
            gap: 12rpx;
            font-size: 28rpx;
            color: rgba(161, 164, 172, 1);
            .dot {
              width: 12rpx;
              height: 12rpx;
              border-radius: 50%;
              &.dot1 {
                background-color: rgba(28, 107, 255, 1);
              }
              &.dot2 {
                background-color: rgba(255, 163, 112, 1);
              }
              &.dot3 {
                background-color: rgba(255, 207, 135, 1);
              }
            }
          }
        }
      }
      .c-sub-card {
        position: absolute;
        bottom: -24rpx;
        left: 40rpx;
        width: 590rpx;
        height: 636rpx;
        background: #e2e3e6;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
      }
    }
    .btn {
      margin: 52rpx 0 0;
      padding: 20rpx;
      font-size: 32rpx;
      line-height: 48rpx;
      color: #fff;
      text-align: center;
      background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
      border-radius: 96rpx;
    }
  }
}