一、如下图所示效果：

运行后入下图所示效果：

实现原理是用div画图并动态改变进度，

二、div源码

<div style="width: 100%;">
    <div class="sdg_title" style="height: 35px;">
      <!--对话组[{
  { dialogGroup.index }}]编辑-->
      <div class="sdg_title_btns">
        <a-button size="mini" @click="deleteCurrentBlock">删除</a-button>
        <div class="sdg_split"></div>
        <a-button size="mini" @click="play" v-if="isPlay != '播放中'">运行</a-button>
        <a-button size="mini" @click="pause" v-if="isPlay == '播放中'">暂停</a-button>
        <a-button size="mini" @click="stop" v-if="isPlay != '未播放'">停止</a-button>
        <div class="sdg_split"></div>
        <div style="box-sizing: border-box; display: flex; justify-content: center; align-items: center;">
          <span>最小刻度单位：</span>
          <a-radio-group v-model:value="scaleUnit" @change="init">
            <a-radio-button value="秒">1秒</a-radio-button>
            <a-radio-button value="5秒">5秒</a-radio-button>
            <a-radio-button value="10秒">10秒</a-radio-button>
          </a-radio-group>
        </div>
        <div style="padding-left: 10px;">
          <span>刻度总时长：</span>
          <a-input-number v-model:value="initData.period" placeholder="请输入任务想定名称"
                   style="width: 80px" @change="maxPeriodChange"></a-input-number>
        </div>
      </div>
    </div>
    <div style="position: relative; width: 100%; display: flex; flex-direction: row;">
      <!--title-->
      <div style="width: 150px; height: 250px;" class="scroll">
        <div class="blockTitle">
          刻度(总时长)
        </div>
        <div class="blockTitle2">
          A项
        </div>
        <div class="blockTitle2">
          B项
        </div>
      </div>
      <div style="width: calc(100% - 150px); height: 250px;" class="scroll">
        <!--刻度表-->
        <div class="timeScaleBlock" :style="{ width: maxWidth + 'px' }">
          <div v-for="val in maxWidth / 100" :key="val" class="oneScaleUnit">
            <!--刻度主线-->
            <div class="mainLine"></div>
            <!--长刻度线-->
            <div class="longLine" style="left: -1px"></div>
            <div class="longLine" style="left: 48px">
              <div class="middleScaleValue" v-if="scaleUnit == '5秒'">{
  { formatSecond((val * 10 - 5) * 5) }}</div>
              <div class="middleScaleValue" v-else-if="scaleUnit == '10秒'">{
  { formatSecond((val * 10 - 5) * 10) }}</div>
              <div class="middleScaleValue" v-else>{
  { formatSecond((val * 10 - 5)) }}</div>
            </div>
            <!--短刻度线-->
            <div class="shortLine" style="left: 9px"></div>
            <div class="shortLine" style="left: 19px"></div>
            <div class="shortLine" style="left: 28px"></div>
            <div class="shortLine" style="left: 38px"></div>

            <div class="shortLine" style="left: 58px"></div>
            <div class="shortLine" style="left: 68px"></div>
            <div class="shortLine" style="left: 78px"></div>
            <div class="shortLine" style="left: 88px"></div>
          </div>
          <div class="leftBorder" v-if="clickBlock" :style="{ left: leftBo