<template>
  <div>
    <ul class="child-tab">
      <template v-for="(item, index) in menu">
        <li
          :key="index"
          :class="activeIndex == index ? 'active' : ''"
          @click="tab(index)"
        >{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    menu: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    tab(index) {
      this.activeIndex = index
      this.$emit('changeChildTab', this.activeIndex)
    }
  },
  mounted() {
    this.$route.query.type && (this.activeIndex = this.$route.query.type)
  }
}
</script>
<style lang="scss" scoped>
.center97{
  width: 970px;
  margin: 0 auto;
}
.child-tab{
  display: flex;
  justify-content: flex-end;
  // width: 670px;
  border-bottom: 1px solid #979797;
  li{
    cursor: pointer;
    position: relative;
    line-height: 42px;
    padding: 0 22px;
    font-size: 14px;
    color: #222;
    &.active{
      border: 1px solid #979797;
      border-bottom: none;
      border-top: 2px solid rgba(76, 129, 196, 1);
      &::after{
        content: '';
        width: 100%;
        height: 3px;
        background: #fff;
        position: absolute;
        bottom: -1px;
        left: 0;
      }
    }
  }
}
</style>
