health-front/pages_order/report/detail/cardHeader.vue

<template>
  <view class="header">
    <view class="flex info">
      <view class="flex label">
        <text>BMI 指数</text>
        <text class="highlight">{{ BMI || '-' }}</text>
      </view>
      <view class="progress" v-if="BMI">
        <progressBar :progress="BMI" :total="30"></progressBar>
      </view>
    </view>
    <view class="desc">
      * 你的身体质量指数BMI=19.8 kg/m2，属于正常范围，请继续均衡饮食＋合理运动。
    </view>
  </view>
</template>

<script>
  import progressBar from '@/pages_order/components/progressBar.vue';

  export default {
		components: {
      progressBar,
    },
    props: {
      BMI: {
        type: Number,
        default: null,
      }
    }
  }
</script>

<style scoped lang="scss">
.info {
  column-gap: 32rpx;
  justify-content: flex-start;
}

.label {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 36rpx;
  line-height: 1.2;
  color: #252545CC;

  .highlight {
    margin-left: 8rpx;
    font-size: 64rpx;
    font-weight: 600;
    line-height: 1.4;
    font-family: PingFang SC;
    color: transparent;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
    background-clip: text;
    display: inline-block;
  }
}

.progress {
  width: 222rpx;
}

.desc {
  margin-top: 4rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  line-height: 1.5;
  color: #989898;
}
</style>