nuxtProject/components/mtaNav/pcNav.vue

<template>
  <div class="header-nav">
    <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>
    <nuxt-link to="/examsystem" class="xwzx-row" :class="{'active': curActive === 'examsystem'}">考试系统</nuxt-link>
    <nuxt-link to="/trainsystem" class="xwzx-row" :class="{'active': curActive === 'trainsystem'}">培训系统</nuxt-link>
    <el-popover
      placement="bottom"
      trigger="hover"
      popper-class="head-popper-box cp-popper-box"
    >
        <nuxt-link :to="item.url" v-for="(item,index) in kckfList" :key="index" class="head-popper-item">
          <i></i>
          <span class="head-popper-title">{{ item.title }}</span>
          <!--<span class="head-popper-des">{{ item.des }}</span>-->
        </nuxt-link>
      <span class="head-nav-btn" slot="reference" :class="{active: curActive === 'courseware'}" @click="kckfBtn">课程开发<i class="el-icon-arrow-down el-icon--right"></i></span>
    </el-popover>
    <nuxt-link to="/news" :class="{active: curActive === 'news'}">新闻资讯</nuxt-link>
    <nuxt-link to="/introduction" :class="{active: curActive === 'introduction'}">关于我们</nuxt-link>
  </div>
</template>

<script>
export default {
  name: "pcNav",
  data() {
    return {
      kckfList: [
        {
          img: '#',
          title: '课程开发',
          // des: '为企业量身定做专属课程',
          url: '/courseware/synopsis'
        },
        {
          img: '#',
          title: '微课制作',
          // des: '海量精品课程专业定制',
          url: '/courseware/custom'
        },
        {
          img: '#',
          title: '高端动画',
          // des: '完善的平台运营体系',
          url: '/courseware/animation'
        },
        {
          img: '#',
          title: '课件PPT',
          // des: '助力企业推动培训学习进程',
          url: '/courseware/ppt'
        }
      ],
    }
  },
  methods:{
    headNavClick(){
      this.$emit('headNavClick')
    },
    kckfBtn(){
      this.$router.push({ path: '/courseware/synopsis' });
    },
  },
  computed: {
    curActive() {
      const courseware = this.kckfList.map(item => item.url);
      const routerPath = this.$route.path
      // 首页
      if (routerPath === '/' || routerPath === '/index') {
        return 'shouye'
      }  else if (routerPath === '/examsystem') {
        return 'examsystem'
      }else if (routerPath === '/trainsystem') {
        return 'trainsystem'
      } else if (routerPath === '/news') {
        return 'news'
      } else if (routerPath === '/introduction') {
        return 'introduction'
      } else if (courseware.some(path => path === routerPath)) {
        return 'courseware'
      }
    }
  },
  watch: {
    '$route.path': {
      handler(newVal) {
        console.log(newVal)
        this.$emit('navChange',newVal)
      },
      immediate: true,
    }
  }
}
</script>
<style lang="scss">
  //头部导航
  .header-nav {
    > span, > a {
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      margin: 0 42px;
      color: #333333;
      cursor: pointer;
    }

    > a:last-child {
      margin-right: 0;
    }

    > a:visited {
      color: #333333;
    }

    > a.active {
      color: #0066cc;
      position: relative;
    }

    .active:before {
      content: '';
      width: 100%;
      bottom: -10px;
      left: 0;
      height: 2px;
      background-color: #0066cc;
      display: block;
      position: absolute;
    }

    // 导航按钮
    .head-nav-btn.active {
      position: relative;
    }

    .head-nav-btn.active:before {
      width: 70%;
      bottom: -10px;
      left: 4%;
    }
  }
  /* 导航二级菜单 */
  .head-popper-box {
    width: 620px;
    display: flex;
    align-items: center;
    top:104px!important;
    // 箭头
    .popper__arrow::after {
      content: ' ';
      width: 0;
      height: 0;
      overflow: hidden;
      position: absolute;
      border-width: 6px;
      border-style: dashed dashed solid;
      border-color: transparent transparent #0066cc !important;
      top: -12px;
    }

    // 列表
    .head-popper-item {
      width: 23%;
      display: flex;
      margin: 16px 1%;
      align-items: center;
      justify-content: center;

      i {
        width: 30px;
        height: 30px;
        background-size: contain;
        display: inline-block;
        margin-right: 12px;
        background-repeat: no-repeat;
        background-position: center;
      }

      .head-popper-title {
        font-size: 16px;
        line-height: 16px;
        color: #333;
        /*margin-bottom: 4px;*/
        display: inline-block;
      }

      .head-popper-des {
        display: block;
        font-size: 12px;
        color: #9c9c9c;
      }
    }
    // 列表
    .head-popper-item:nth-child(1) {
      i {
        background-image:url("~static/images/client/component/head-cp-icon1.png");
      }
    }

    .head-popper-item:nth-child(2) {
      i {
        background-image:url("~static/images/client/component/head-cp-icon2.png");
      }
    }

    .head-popper-item:nth-child(3) {
      i {
        background-image:url("~static/images/client/component/head-cp-icon3.png");
      }
    }

    .head-popper-item:nth-child(4) {
      i {
        background-image:url("~static/images/client/component/head-cp-icon4.png");
      }
    }
  }

  .head-popper-box:before {
    content: ' ';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #0066cc;
    border-radius: 4px 4px 0 0;
  }
</style>