<template>
  <ul class="tab-content">
    <li
      v-for="(item, index) in dataNav"
      :class="
        item.pathActive.findIndex(path => {
          return path === $route.path
        }) !== -1 && 'active'
      "
      :key="index"
      @click="goPage(item.goPath)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      dataNav: [
        {
          name: this.$t('menu.alumniChild.alumni'),
          goPath: '/alumnus',
          pathActive: ['/alumnus']
        },
        {
          name: this.$t('menu.alumniChild.alumniZijinghua'),
          goPath: '/alumnus/zijinghua',
          pathActive: ['/alumnus/zijinghua']
        },
        {
          name: this.$t('menu.alumniChild.alumniStory'),
          goPath: '/alumnus/story',
          pathActive: ['/alumnus/story']
        },
        
      ]
    }
  },
  mounted() {},
  methods: {
    goPage(path) {
      this.$router.push({
        path: path
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-content {
  width: 160px;
  height: fit-content;
  background: #fff;
  padding-top: 35px;
  padding-bottom: 43px;
  li {
    position: relative;
    width: 100%;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    color: #777777;
    margin-bottom: 60px;
    cursor: pointer;
    &:last-child {
      margin: 0;
    }
    &.active {
      color: rgba(170, 25, 65, 1);
      &::after {
        content: '';
        width: 8px;
        height: 40px;
        background: rgba(170, 25, 65, 1);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
