标签：flex 不同 bmi 指示 height border 小三角 4px

肥胖-超重–正常–偏瘦，四个区间，用渐变色柱体显示，小三角标记位置。
根据接口返回的值，小三角移动到不同的区间不同的位置。
百分比显示；

<template>
  <div class="box">
    <div class="bmi-show">
      <div class="triangle" :style="{ bottom: percentage }"></div>
      <div class="linearShow"></div>
      <div class="range">
        <p>肥胖</p>
        <p>超重</p>
        <p>正常</p>
        <p>偏瘦</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bmi: "",
      percentage: ""
    };
  },
  //  项目中使用的是computed， this.bmi是从接口拿到的数据。
  //  现在单页面，写到watch里面，是因为bmi的值在computed中不能改变，不然发生报错；
  watch: {
    percentage() {
      console.log(this.bmi);
      if (!this.bmi) return "";
      if (this.bmi < 14.5) this.bmi = 14.5;
      if (this.bmi > 33.5) this.bmi = 33.5;
      let diff = this.bmi - 14.5;
      return `calc(${(diff * 100) / 19}% - 4px)`;
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  position: relative;
}
.bmi-show {
  position: absolute;
  right: 40px;
  top: 50px;
  display: flex;
  .triangle {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 4px solid transparent;
    position: absolute;
    left: -10px;
  }
  .linearShow {
    width: 10px;
    height: 170px;
    border-radius: 8px;
    background: linear-gradient(
      360deg,
      #00d5ed 0%,
      #7aec01 28%,
      #ffd500 67%,
      #f74d00
    );
  }
  .range {
    margin-left: 10px;
    font-size: 16px;
    color: #000;
    line-height: 33px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
</style>

标签：flex,不同,bmi,指示,height,border,小三角,4px
来源： https://blog.csdn.net/weixin_44834981/article/details/121035716

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。