<template>
 
    <div class="tabBox">
      <div class="btnItem " :class="tabBoxIndex==0?'this_select':''" @click="tabSwitch('quality')">质量管理</div>
      <div class="btnItem" :class="tabBoxIndex==1?'this_select':''" @click="tabSwitch('secure')">安全管理</div>
    </div>

</template>

<script>
export default {
   name:'tabBox',
   props:{
    tabBoxIndex:{
      type: Number,
      default:0
    },
   },
   data (){
    return {
        
    }
   },
  created(){
    console.log(this.tabBoxIndex,"tabBoxIndex")
  },
   methods:{
      tabSwitch(v){
          this.$router.push({path:v})
      }
   }
}
</script>

<style lang="less" scoped>

.btnItem {
  width: 97px;
  height: 41px;
  background: url('../../../../assets/images/qualityManage/defBtn.png');
  background-size: 100% 100%;
  color: #5ce2f6;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 41px;
  margin-right: 12px;
  margin-left: 12px;
  cursor: pointer;
}
.this_select {
  
  color: #fff !important;
  background: url('../../../../assets/images/qualityManage/btnBg.png') !important;
}
.tabBox {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
}

</style>