<template>
  <ul class="tab-content">
    <li
      v-for="(item, index) in items"
      :key="index"
      :class="activeIndex === index && 'active'"
      @click="tabChange(index)"
      >
      {{ item }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [this.$t('bg.tabBtn1'), this.$t('bg.tabBtn2'), this.$t('bg.tabBtn3')],
      activeIndex: 0
    }
  },
  methods: {
    tabChange(n) {
      this.activeIndex = n
      this.$emit('tabChange', n)
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-content{
  padding-top: .2rem;
  display: flex;
  justify-content: space-between;
  li{
    width: 1.1rem;
    height: 0.75rem;
    line-height: .75rem;
    background: #FFFFFF;
    text-align: center;
    font-size: 0.13rem;
    font-weight: bold;
    color: #333333;
    position: relative;
    &.active{
      color: #AA1941;
      &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.04rem;
        background: #AA1941
      }
    }
  }
}
</style>
