page {
  background-color: #f6f8f9;
}

.page {
  padding-bottom: 200rpx;
  .page-header {
    background-color: #fff;
    .form {
      display: flex;
      justify-content: flex-end;
      .date {
        padding: 18rpx;
        display: flex;
        align-items: center;
        gap: 10rpx;
        font-size: 32rpx;
        color: #69686e;
        .icon {
          transform: rotate(90deg);
          font-size: 20rpx;
          color: #adacb2;
        }
      }
    }
  }
  .chart-list {
    padding: 32rpx 40rpx 0;
    .chart-card {
      margin-bottom: 24rpx;
      padding: 32rpx;
      background-color: #fff;
      border-radius: 24rpx;
      .title {
        font-size: 32rpx;
        color: #211d2e;
        font-weight: bold;
      }
      .chart {
        height: 420rpx;
      }
    }
  }
  .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: 104rpx;
                color: #1ec580;
                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: linear-gradient(330deg, #1ec580 0%, #4feaaa 100%);
                }
                .name {
                  margin-top: 12rpx;
                  font-size: 28rpx;
                  color: #adacb2;
                }
              }
            }
            .stat {
              padding-top: 24rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .s-item {
                font-size: 32rpx;
                color: #adacb2;
                display: flex;
                align-items: center;
                gap: 24rpx;
                .score {
                  color: #211d2e;
                }
              }
            }
          }
        }
      }
    }
  }
  .page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
    background-color: #fff;
    box-shadow: 0 8rpx 32rpx rgba(25, 0, 57, 0.07);
    .btn {
      height: 88rpx;
      font-size: 32rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}