page {
  background-color: #f6f8f9;
}

.page {
  padding-bottom: 200rpx;
  .page-header {
    background-color: #fff;
    .tab-class {
      font-size: 32rpx;
    }
    .form {
      padding: 0 18rpx;
      display: flex;
      justify-content: flex-end;
      .date {
        display: flex;
        align-items: center;
        gap: 10rpx;
        font-size: 32rpx;
        color: #69686e;
        .icon {
          transform: rotate(90deg);
          font-size: 20rpx;
          color: #adacb2;
        }
        .start,
        .end {
          padding: 18rpx 0;
        }
      }
    }
  }
  .chart-list {
    padding: 32rpx 40rpx 0;
    .chart-card {
      margin-bottom: 24rpx;
      padding: 32rpx;
      background-color: #fff;
      border-radius: 24rpx;
      &.chart-card-legend {
        .chart {
          padding-top: 40rpx;
        }
      }
      .title {
        font-size: 32rpx;
        color: #211d2e;
        font-weight: bold;
      }
      .chart {
        position: relative;
        height: 420rpx;
        .legend {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          gap: 12rpx;
          justify-content: flex-end;
          .dot {
            width: 18rpx;
            height: 18rpx;
            border-radius: 50%;
            &.dot4 {
              background-color: #1ec580;
            }
            &.dot5 {
              background-color: #b982ff;
            }
            &.dot6 {
              background-color: #ffa300;
            }
          }
        }
      }
    }
  }
  .list {
    margin: 28rpx 40rpx 0;
    .list-title {
      font-size: 36rpx;
      color: #211d2e;
      font-weight: bold;
    }
    .list-container {
      .row {
        display: flex;
        gap: 16rpx;
        .aside {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .line-top {
            height: 58rpx;
            border-right: 1px dashed rgba(185, 130, 255, 0.29);
          }
          .side {
            position: relative;
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            background-color: rgba(185, 130, 255, 0.3);
            &::after {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: block;
              content: '';
              width: 18rpx;
              height: 18rpx;
              background-color: #b982ff;
              border-radius: 50%;
            }
          }
          .line {
            flex: 1;
            border-right: 1px dashed rgba(185, 130, 255, 0.29);
          }
        }
        .r-container {
          padding-top: 48rpx;
          flex: 1;
          .date {
            font-size: 32rpx;
            color: #211d2e;
            font-weight: bold;
          }
          .r-card {
            margin-top: 16rpx;
            padding: 24rpx 32rpx;
            border-radius: 24rpx;
            background-color: #fff;
            .wrap {
              padding-bottom: 32rpx;
              display: flex;
              align-items: center;
              gap: 22rpx;
              border-bottom: 1px dashed rgba(33, 29, 46, 0.05);
              .num {
                font-size: 76rpx;
                color: var(--color);
                font-weight: bold;
                line-height: 1;
              }
              .inner {
                .label {
                  padding: 4rpx 16rpx;
                  border-radius: 50rpx 50rpx 50rpx 0;
                  display: inline-block;
                  font-size: 28rpx;
                  color: #ffffff;
                  line-height: 36rpx;
                  background: var(--label-background);
                }
                .name {
                  margin-top: 12rpx;
                  font-size: 28rpx;
                  color: #211d2e;
                }
              }
            }
            .stat {
              padding-top: 24rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .s-item {
                font-size: 32rpx;
                color: #211d2e;
                display: flex;
                align-items: center;
                gap: 24rpx;
                .score {
                  color: #b982ff;
                }
              }
            }
          }
          .r-card-hormones {
            margin-top: 16rpx;
            padding: 26rpx 32rpx;
            background: linear-gradient(11deg, #ffffff 0%, #ffffff 49%, #f6efff 100%);
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            border: 2rpx solid #ffffff;
            .rch-title {
              font-size: 32rpx;
              color: #211d2e;
            }
            .rch-content {
              margin-top: 6rpx;
              display: flex;
              align-items: baseline;
              gap: 48rpx;
              .num {
                font-size: 76rpx;
                color: #b982ff;
                font-weight: bold;
                display: flex;
                align-items: baseline;
                .sub {
                  font-size: 28rpx;
                  font-weight: normal;
                }
              }
              .tip {
                font-size: 28rpx;
                color: #b982ff;
              }
            }
            .rch-footer {
              margin-top: 22rpx;
              border-top: 1px solid rgba(33, 29, 46, 0.05);
              padding-top: 22rpx;
              font-size: 32rpx;
              color: #211d2e;
              .range {
                color: #b982ff;
              }
            }
          }
        }
      }
    }
  }

  .back-home {
    position: fixed;
    z-index: 10;
    right: 26rpx;
    bottom: 280rpx;
    width: 84rpx;
    height: 84rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(20, 0, 44, 0.11);
    border-radius: 50%;
  }
  .page-footer {
    padding: 0 40rpx;
    position: fixed;
    z-index: 10;
    bottom: 80rpx;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    gap: 22rpx;
    .pf-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 88rpx;
      background: linear-gradient(180deg, #ffbcf9 0%, #b982ff 100%);
      border-radius: 104rpx;
      font-size: 34rpx;
      color: #ffffff;
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

.status1 {
  --color: #ef3939;
  --background: #ffdddd;
  --label-background: linear-gradient(177deg, #ff9090 0%, #ef3939 100%);
}
.status2 {
  --color: #ffa300;
  --background: #fff4e0;
  --label-background: linear-gradient(153deg, #ffd48b 0%, #ffa300 100%);
}
.status3 {
  --color: #1ec580;
  --background: #dafdee;
  --label-background: linear-gradient(330deg, #1ec580 0%, #4feaaa 100%);
}