導航欄

<template>
  <nav>
    <div
      v-for="(item, index) in navData"
      :key="index"
      class="nav_list">
        <a href="#" :class=" LightIndex == index ? 'nav_item_red' : 'nav_item_black' " @click="Tap(index, item)">{{item.tag}}</a>
        <div :class=" LightIndex == index ? 'nav_list_hr' : '' "></div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Nav',
  data () {
    return {
      LightIndex: 0,
      navData: [
        { tag: '熱銷', id: 1 },
        { tag: '時尚', id: 2 },
        { tag: '美妝', id: 3 },
        { tag: '直播', id: 4 },
        { tag: '母嬰', id: 5 },
        { tag: '美食', id: 5 }
      ]
    }
  },
  methods: {
    Tap (index, e) {
      this.LightIndex = index
      console.log(index, e)
    }
  }
}
</script>

<style lang="less" scoped>
  nav {
    background-color: #fff;
    display: flex;
    height: 0.88rem;
    line-height: 0.88rem;
    position: relative;
    .nav_list {
      flex: 1;
      text-align: center;
      position: relative;
      .nav_item_black {
        display: block;
        color: #343434;
        font-size: 0.373333rem;
      }
      .nav_item_red {
        display: block;
        font-size: 0.373333rem;
        color: #F23A3A;
      }
      .nav_item_black::after, .nav_item_red::after {
        content: '';
        display: block;
        width: 0.026666rem; height: 0.346666rem;
        background-color: #e6e6e6;
        position: absolute;
        top: 50%; right: 0;
        transform: translateY(-50%);
      }
    }
    .nav_list_hr {
      background-color: #F23A3A;
      position: absolute;
      bottom: 0; left: 50%;
      width: 0.746666rem; height: 0.042666rem;
      transform: translateX(-50%);
    }
    .nav_list:last-child {
      a::after { display: none; }
    }
  }
</style>