基于Vue的标尺插件（刻度尺）

可根据高和宽度自适应，主要传值为宽度和距离零刻度的距离，代码和图片如下。

 <template>
	<div class="demoRule">
		<el-row class=" main">
			<div class="rightBorder" v-if="duiData&&duiData.length>0"></div>
			<div class="ruleF" v-for="(item,indexDui) in duiData" :key="indexDui" :style="{
    'height':(duiData&&duiData.length>0)?(100/duiData.length)+'%':'100%'}">
				<div class="content" :style="{
    'border-top':(indexDui==0?'1.5px solid #9c9c9c':'')}">
					<div class="faRe" v-for="(itemF,indexF) in item.faReData" :key="indexF" :style="{
    'right':itemF.right}"> (发热)</div>
					<div class="boxes" v-for="(itemDuo,indexDuo) in item.duoData" :key="indexDuo" :style="{
    'width':itemDuo.width,'right':itemDuo.right,'background':colorData[itemDuo.color],}">{
  {itemDuo.content}} </div>
				</div>
				<div v-for="(itemNum, indexNum) in 24 " :key="indexNum" class="ruleBody" :style="{
    'margin-right':(indexNum==0?'2%':'')}">
					<div class="num" v-if="indexDui%2==0">{
  {itemNum*50}}</div>
				</div>