<template>
  <div class="container">
    <!-- <div style="display:flex;align-items: center;height:100%">
      <div style="flex:1;display:flex;align-items: center;" v-for="(item,index) in arr" :key="index">
            <div :style="{flex:(index==0 ? 1:'1 1 0%')}" :class="{'item': index>0}"></div>
            <div class="dot">{{item}}</div>
            <div :style="{flex:(index==arr.length-1 ? 1:'1 1 0%')}" :class="{'item': index<arr.length-1}"></div>
        </div>
    </div> -->
    </div>
</template>
<script>
export default {
  name: "InstruManage",
  components:{
  },
  data() {
    return {
      arr:[1,2,3,4]
    };
  },
  mounted() {
  },
  methods: {
   
  }
};
</script>
<style scoped lang="stylus">
.container{
    width: 100%;
    height: 200px;
    // border:1px solid red;
}
.dot{
    border:2px solid #007Aff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    background: white;
    margin: auto;
    margin-bottom: -4px;
}
.item{
    flex:1;
    background: yellow;
    height: 1px;
    // border-bottom:1px solid #D84C29;
}

</style>