@import "../../../../themes//t.cell.scss";
@import "../../report-common.scss";
@import "../../../../themes/card.scss";
/* module/health/components/report-health-index/report-health-index.wxss */
.constitution-container {
  border-radius: 20rpx 20rpx 0 0;
  background: linear-gradient(180deg, #D6E4F5 0%, #F3F4F6 100%);
  margin: 0  !important;
  // padding: 0px 10px 10px 10px;
}
.constitution-box{
  background-image: url('https://wx.hzliuzhi.com:4433/manager/file/statics/2025/08/21/WechatIMG731_20250821155626A830.jpg');
  background-size: cover;
  background-position: center;
}
.table-box{
  padding: 0px 10px 10px 10px;
}
.text-title{
  font-size: 16px;
  color: black;
  font-weight: 500;
}
.card-title{
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.icon-title{
  width: 20px;
  height: 20px;
  margin-right: 10rpx;
}
.health-index {
  $size: 20px;
  $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: #1D6FF6;
        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;
        background-color: #D6D6D6;
      }

      &__value {
        background-color: #FF611B;
      }

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

      &__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%);
      }
    }
  }
}
.nodata-box{
  width: 94%;
  margin: auto;
  border-top: 1px solid #E7E7E7;
  padding: 10px 0 10px 0;
}