<template>
  <div class="title-box">
    <div class="title" v-for="(v, i) in tabList" :key="i" :class="{'title1' : active == i}" @click="changeTab(i)">
      {{ v }}
    </div>
  </div>
</template>
<script>
export default {
  name: "Title3",
  props: {
    tabList:{
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  data(){
    return {
      active: 0
    }
  },
  methods: {
    changeTab(index){
      this.active = index
      this.$emit("sectionChangeTab", index);
    },
  },
};
</script>
<style lang="less" scoped>
.title-box {
  line-height: 40px !important;
  text-align: left;
  padding-left: 15px;
  background: url("@/assets/images/index/icon_toubuj.gif");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .title {
    font-size: 18px;
    color: #B2BFCF;
    padding: 0 10px;
    margin-right: 20px;
    &:hover {
      cursor: pointer;
      border-bottom: 2px solid #31ceea;
      color: #FFFFFF;
    }
  }
  .title1 {
    border-bottom: 2px solid #31ceea;
    color: #FFFFFF;
  }
  .right-slot {
    float: right;
  }
}
</style>