nuxtProject/components/header.vue

<template>
  <nav class="client-head">
    <div class="client-container head-layout">

      <!--   H5   -->
      <div class="head-container-box mta-hidden-sm">
        <a :href="`${baseUrl}`" class="client-head-img"></a>
        <!-- H5菜单 -->
        <h5Nav :class="navClass" @click="navChange"></h5Nav>
        <!-- 手机按钮 -->
        <div class="phone-nav-btn mta-hidden-sm" :class="{open: isOpen, close: !isOpen}" @click="changeHeadNav"></div>
      </div>

      <!--   PC   -->
      <div class="head-container-box mta-hidden-xs">
        <a :href="`${baseUrl}`" class="client-head-img"></a>
        <!-- PC菜单 -->
        <qgNav></qgNav>
        <div class="head-right">
          <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
          <el-popover
            placement="bottom"
            trigger="hover"
            popper-class="head-popper-box system-popper-box"
          >
            <nuxt-link :to="item.url" v-for="(item,index) in systemList" :key="index" class="head-popper-item">
              <i></i>
              <p>
                <span class="head-popper-title">{{ item.title }}</span>
                <span class="head-popper-des">{{ item.des }}</span>
              </p>
            </nuxt-link>
            <a class="right-tel-btn" slot="reference">免费注册</a>
          </el-popover>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import mtaLink from '~/components/mtaLink/index';
import qgNav from "~/components/qgNav";
import H5Nav from "~/components/qgNav/H5Nav";

import {mapGetters} from 'vuex';

let _ = require('lodash');
export default {
  name: 'mtaHeader',
  components: {
    mtaLink,
    qgNav,
    H5Nav
  },
  computed: {
    activeNav() {
      return this.getActiveNav;
    },
    isOpen() {
      return this.navClass === 'head-nav-up'
    },
    baseUrl() {
      return this.getBaseUrl;
    },
    ...mapGetters(['getActiveNav', 'getBaseUrl'])
  },
  data() {
    return {
      systemList: [
        {
          title: '考试系统',
          des: '简单好用的SaaS考试系统',
          url: 'https://cdnks.mtavip.com/a/register?flug=1'
        },
        {
          title: '培训系统',
          des: '学练考评一站式培训系统',
          url: 'https://cdnks.mtavip.com/a/register?flug=2'
        },
      ],
      navClass: 'head-nav-up',
      headerArr: [
        {
          content: '首页',
          keyPath: '/',
        },
        {
          content: '考试系统',
          keyPath: '/examsystem',
          children: [],
        },
        {
          content: '培训系统',
          keyPath: '/trainsystem',
          children: [],
        },
        /*   {
             content:  '课程资源',
             keyPath:  '/resources',
             children: [],
           },*/
        {
          content: '体验中心',
          keyPath: '/tiyanCenter',
          children: [],
        },
        {
          content: '课程开发',
          keyPath: '/courseware',
          children: [],
        },
        {
          content: '客户案例',
          keyPath: '/news',
          children: [],
        },
        /*      {
                content:  '帮助中心',
                keyPath:  '/helpCenter',
                children: [],
              },*/
        {
          content: '关于我们',
          keyPath: '/introduction',
          children: [],
        },

      ],
    };
  },
  methods: {
    // 点击按钮菜单变化
    changeHeadNav() {
      if (this.navClass === 'head-nav-up') {
        this.navClass = 'head-nav-down'
      } else {
        this.navClass = 'head-nav-up'
      }
    },
    navChange() {
      this.navClass = 'head-nav-up'
    },
  },
};
</script>