vue上下标示时间线

效果

时间线.png

上下标示时间线（sb需求），保证时间线的标识，根据数据的长度定义宽度，超出为横向滚动条

<div class="zdy">
  <div :style="{width: forwidth +'px'}" class="secondbox">
    <div class="line firstline">无效</div>
    <div class="dib" style="margin-left: 100px">
      <div class="dib" v-for="(val,ind) in dayRuleData" :key="ind">
        <div class="dian"></div>
        <div class="line normalline">正常</div>
        <div class="dian"></div>
        <div class="line">
          <span v-if="(dayRuleData.length-1)!==ind">迟到</span>
          <span v-else>无效</span>
        </div>
        <div class="time-all">
          <span class="start-time">{{val.dayStartTime}}</span>
          <span class="end-time">{{val.dayEndTime}}</span>
          <div class="time-name">{{val.dayRuleName}}</div>
        </div>
      </div>
    </div>
  </div>
</div>

data(){
  return{
    forwidth:850,//默认宽度
    dayRuleData:[],
  }
}，
methors：{
//获取后台数据
  getDayRuleList(){
        requestServices.dayRuleList({groupId:this.$route.query.groupId}).then((res) => {
          this.dayRuleData=res.resultData.datas;
          this.forwidth=this.dayRuleData.length*184+100;//根据数据的长度定义宽度
        })
      },
}

<style>
  .zdy{
    height: 66px;
    width: 95%;
    font-size: 11px;
    color: #C0C4CC;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y:hidden ;
  }
  .dian{
    width: 12px;
    height: 12px;
    background-color: #409EFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 10px;
  }
  .line{
    width: 100px;
    border-bottom: 2px solid #C0C4CC;
    color: #C0C4CC;
    font-size: 11px;
    text-align: center;
    display: inline-block;
  }
  .normalline{
    width: 50px;
    border-bottom: 2px solid #409EFF;
  }
  .time-all{
    margin-top: 10px;
  }
  .start-time{
    /*margin-left: 100px;*/
  }
  .end-time{
    margin-left: 30px;
  }
  .time-name{
    margin:8px 0 0 8px;
  }
  .firstline{
    position: absolute;
  }
  .secondbox{
    margin: auto;
  }
</style>