health.applet/miniprogram/module/health/components/report-health-index/report-health-index.scss

@import "../../../../themes//t.cell.scss";
@import "../../report-common.scss";
@import "../../../../themes/card.scss";
/* module/health/components/report-health-index/report-health-index.wxss */

.health-index {
  $size: 10px;
  $gap: 12px;
  background-color: transparent;


  &__title {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &__slider {
    position: relative;
    height: $size * 6;
    font-size: 12px;
    padding: 8px 0;

    .value {
      position: absolute;
      top: $size - 4px;
      display: flex;

      &.normal {
        color: #38FF6E;
        transform: translateX(-50%);
      }

      &.big {
        flex-direction: row-reverse;
        color: #FF611B;
        transform: translateX(-98%);

        .description {
          margin-right: 4px;
        }
      }

      &.small {
        flex-direction: row;
        color: #FF611B;
        transform: translateX(-2%);

        .description {
          margin-left: 4px;
        }
      }
    }

    .track {
      position: absolute;
      top: $size * 3;
      height: $size;
      border-radius: $size;

      &__bg {
        left: 0;
        right: 0;
        background-color: #143731;
      }

      &__value {
        background-color: #FF611B;
      }

      &__scope {
        background-color: #38FF6E;
      }

      &__point {
        width: $size;
        height: $size;
        border: 1px solid #38FF6E;
        border-radius: 50%;
        box-sizing: content-box;
        transform: translate(-50%, -1px);
        background-color: #fff;

        &.small,
        &.big {
          border-color: #FF611B;
        }
      }
    }

    .point {
      position: absolute;
      top: $size * 4 + 4px;

      &__left {
        transform: translateX(-50%);
      }

      &__right {
        transform: translateX(50%);
      }
    }
  }
}