data_governance/src/components/TabsList.vue

<template>
  <div class="tabs-list-wrap">
    <div class="tabs-list-bar">
      <div class="tabs-list-bar-item" style="" v-for="(item,index) in arr" :key="index">
            <div :style="{flex:(index==0 ? 1:'1 1 0%')}" :class="{'item': index>0}">
              <Icon type="ios-arrow-forward" style="color:#5F83BE;fontSize:22px;" v-show="index>0"/>
            </div>
            <div class="dot" :class="currentStep==index+1? 'active' : ''">
               <i class="iconfont icon-wancheng" style="cursor:pointer;color:#67C272;fontSize:26px;marginRight:6px" v-if="currentStep==index+1"></i>
               <div class="default-dot" v-else></div>
              {{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: "TabsList",
  props: {
    currentStep: {
      type: Number,
      default: 1
    },
  },
  components:{
  },
  data() {
    return {
      arr:['基础信息','选择数据源','配置规则','完成'],
    };
  },
  mounted() {
  },
  methods: {
   
  }
};
</script>
<style scoped lang="stylus">
.tabs-list-wrap {
  width: 100%;
  height: 64px;
  background: #113A7B;
}
.tabs-list-bar {
  display:flex;
  align-items: center;
  height:100%;
}
.tabs-list-bar-item {
  flex:1;
  display:flex;
  align-items: center;
}
.dot{
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
}
.item{
    flex:1;
}
.active {
 color: #67C272;
}
.default-dot {
  width: 22PX;
  height: 22PX;
  background: #113A7B;
  border: 2PX solid #739EE6;
  border-radius: 50%;
  margin-right: 6PX;
}
</style>