nuxtProject/components/header.vue

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

      <!--   H5   -->
      <div class="head-left mta-hidden-sm">
        <a :href="`${baseUrl}`" class="client-head-img"></a>
        <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-left mta-hidden-xs">
        <a :href="`${baseUrl}`" class="client-head-img"></a>
        <div>
          <div class="header-left-container">
            <div class="head-right mta-hidden-xs">
              <a class="right-tel-btn">免费注册</a>
              <div class="system-box">
                <div>
                  <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i>
                    <p>考试系统</p></a>
                  <span></span>
                  <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i>
                    <p>培训系统</p></a>
                </div>
              </div>
              <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
            </div>
          </div>
          <div>
            <!--      FIXME 自定义样式      -->
            <div style="margin-top: 20px;">
              <qgNav></qgNav>
            </div>
          </div>
        </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 {
      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>