psvt-miniprogram/src/pages/health/index.scss

page {
  background-color: #f7fafc;
}

.page-title {
  width: 266rpx;
  height: 58rpx;
}

.page {
  padding-bottom: 230rpx;
  .banner {
    margin: 30rpx 30rpx 0;
    height: 246rpx;
    .b-img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 32rpx;
    }
  }
  .tabs {
    .van-tabs__line {
      width: 32rpx !important;
      height: 6rpx;
      border-radius: 1998rpx;
      background: #2f82a9;
      box-sizing: border-box;
    }
    .tab-active-class {
      font-size: 32rpx;
    }
    .tab-class {
      font-size: 28rpx;
      padding: 26rpx;
      line-height: 44rpx;
    }
    .wrap-class {
      height: 96rpx;
    }
    .nav-calss {
      background-color: transparent;
      height: 96rpx;
      border: none;
    }
  }

  .body2 {
    .body-op {
      margin: 32rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20rpx;
      .date-range {
        padding: 0 32rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        gap: 12rpx;
        font-size: 28rpx;
        color: rgba(71, 85, 105, 1);
        line-height: 36rpx;
        background-color: #fff;
        .date {
          padding: 16rpx 0;
        }
        .icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .stats-grid {
      margin: 32rpx 30rpx 0;
      display: flex;
      justify-content: center;
      gap: 24rpx;
      .stat-card {
        flex: 1;
        padding: 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;
        border-radius: 24rpx;
        background: rgba(255, 255, 255, 0.7);
        border: 2rpx solid #ffffff;
        box-shadow: 0 16rpx 64rpx 0 rgba(0, 99, 132, 0.04);
        backdrop-filter: blur(10rpx);
        .stat-label {
          font-size: 24rpx;
          color: #1e293b;
          line-height: 32rpx;
          text-align: center;
        }
        .stat-value {
          display: flex;
          align-items: baseline;
          gap: 8rpx;
          justify-content: center;
          .stat-number {
            font-size: 48rpx;
            font-weight: 600;
            color: rgba(30, 41, 59, 1);
            line-height: 64rpx;
            text-align: center;
          }
          .stat-unit {
            font-size: 24rpx;
            color: #94a3b8;
            line-height: 32rpx;
            text-align: center;
          }
        }
      }
    }
    .chart {
      margin: 24rpx 30rpx;
      height: 480rpx;
      padding: 48rpx 32rpx;
      border-radius: 32rpx;
      background-color: #fff;
      .legend {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 34rpx;
        .l-item {
          display: flex;
          align-items: center;
          gap: 14rpx;
          font-size: 24rpx;
          color: rgba(100, 116, 139, 1);
          .dot1 {
            width: 16rpx;
            height: 16rpx;
            background-color: #fff;
            border: 1px solid #2dbe8d;
            border-radius: 50%;
            box-sizing: border-box;
          }
          .dot2 {
            width: 16rpx;
            height: 16rpx;
            background-color: rgba(186, 26, 26, 1);
            border: 1px solid #fff;
            border-radius: 50%;
            box-sizing: border-box;
          }
        }
      }
    }
  }

  .body3 {
    .body-op {
      margin: 32rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20rpx;
      .date-range {
        padding: 0 32rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        gap: 12rpx;
        font-size: 28rpx;
        color: rgba(71, 85, 105, 1);
        line-height: 36rpx;
        background-color: #fff;
        .date {
          padding: 16rpx 0;
        }
        .icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .total {
        font-size: 24rpx;
        color: rgba(100, 116, 139, 1);
        .high {
          display: inline;
          color: rgba(47, 130, 169, 1);
          font-weight: bold;
        }
      }
    }
    .list {
      .card {
        margin: 32rpx 30rpx;
        padding: 32rpx;
        border-radius: 32rpx;
        background-color: #fff;
        .c-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .label {
            font-size: 24rpx;
            color: rgba(47, 130, 169, 1);
            line-height: 32rpx;
            padding: 8rpx 16rpx;
            border-radius: 12rpx;
            background: rgba(47, 130, 169, 0.05);
            box-sizing: border-box;
          }
          .date {
            color: #64748b;
            font-size: 28rpx;
            line-height: 32rpx;
          }
        }
        .photo9 {
          margin-top: 24rpx;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16rpx;
          .p-item {
            width: 100%;
            aspect-ratio: 1 / 1;
            .p-img {
              width: 100%;
              height: 100%;
              border-radius: 24rpx;
            }
          }
        }
        .title {
          margin-top: 32rpx;
          font-size: 32rpx;
          color: rgba(30, 41, 59, 1);
          line-height: 40rpx;
          font-weight: bold;
        }
        .content {
          margin-top: 16rpx;
          align-self: stretch;
          color: #64748b;
          font-size: 28rpx;
          font-weight: 400;
          line-height: 40rpx;
        }
      }
    }
  }
}

.fixed-add {
  position: fixed;
  z-index: 1000;
  right: 32rpx;
  bottom: 250rpx;
  width: 128rpx;
  height: 128rpx;
  border-radius: 19998rpx;
  background: var(--, linear-gradient(270deg, #439fc7 0%, #2f82a9 100%));
  box-shadow: 0 40rpx 50rpx -10rpx rgba(47, 130, 169, 0.38);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .icon {
    width: 56rpx;
    height: 56rpx;
  }
}