：style的动态写法 根据返回参数节点显示显示节点位置高亮，以及节点占比距离

  <!-- 根据比例显示页面位置 -->
        <!-- <span style="list-style-type:none;"
          :style="{ position: 'absolute', left: `${(positionLength / 10000) * 100}%`, fontSize: '12px', color: '#fff', width: '120px', background: '#15a7d8', top: '70%', textAlign: 'left', borderRadius: '5px', }">
          <li> 节点名称： {{ nodeName }} </li>
          <li>节点类型：{{ nodeType }}</li>
        </span> -->





        <div class="main-lenght-height">
          <span class="main-lenght-span">
            <span class="beltSize" v-for="(item, index) in infoList" :key="index"
              :class="item.id === activeItemId ? 'active1' : 'active2'">
              <li> 节点名称： {{ item.nodeName }} </li>
              <li>节点类型：{{ item.type == '0' ? '空气传导' : '骨传导' }}</li>
            </span>
          </span>
        </div>
      </div>

css中样式

 .active1 {
    color: #0abaeb;
    font-weight: 600;
  }

  .active2 {
    color: #fff;
  }