Vuejs 2.5 hour view

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="main">
   <div class="cont">
    <div class="horas">
      <div class="hora"  v-for="item  in items"   
      v-bind:style="{ background: item.state,      width:100*(item.lapse[1] - item.lapse[0])/totalHoras +'%' ,      float:'left' }"
      v-bind:title="'estado: '+item.state">
      </div>   
   </div>
     <div class="tiempos">
      <div class="tiempos"  v-for="tiempo  in tiempos"
      v-bind:style="{position:'absolute', left:100*tiempo/totalHoras +'%', width:'20px'}">
      {{tiempo}}
      </div>     
     </div>
    </div>
</div>

CSS

html, body ,#main
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.horas{ display:block;height:20px;
       background:gray; width:50%;}
.hora{ display:block;height:100%;}

.tiempos { background:tan;height:30px; width:50%;
          position:relative;}

JavaScript

var vv=new Vue({
  el: '#main',
  data: {
    totalHoras:12,
    startTime:3,
  	items:[
    {state:"red", lapse:[0,1]},
  	{state:"blue", lapse:[1,3]},
  	{state:"orange", lapse:[3,6]},
  	{state:"pink", lapse:[6,7]},
  	{state:"green", lapse:[7,10]},
    ],
    tiempos:[6,8,11]
  },
  computed:{
  },
  methods: {
 }
})