nuxtProject/components/qgNav/index.vue

<template>
  <div class="header-nav">
    <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>

    <el-popover
      placement="bottom-start"
      width="200"
      trigger="hover"
    >
      <div>
        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index">
          <div class="popover-left">
            <img :src="item.img">
          </div>
          <div class="popover-left">
            <span class="popover-left-title">{{ item.title }}</span>
            <span class="popover-left-des">{{ item.des }}</span>
          </div>
        </nuxt-link>
      </div>
      <span class="nav-btn" slot="reference" :class="{active: curActive === 'chanpinyufuwu'}">产品与服务<i class="el-icon-arrow-down el-icon--right"></i></span>
    </el-popover>

    <el-popover
      placement="bottom-start"
      width="200"
      trigger="hover"
    >
      <div class="menu-container">
        <div class="menu-item">
          <h3>场景解决方案</h3>
          <div class="menu-item-container">
            <nuxt-link :to="item.url" v-for="(item,index) in changjing" :key="index">
              <div class="popover-left">
                <img src="#">
              </div>
              <div class="popover-left">
                <span class="popover-left-title">{{ item.title }}</span>
                <span class="popover-left-des">{{ item.des }}</span>
              </div>
            </nuxt-link>
          </div>
        </div>
        <div class="menu-item">
          <h3>行业解决方案</h3>
          <div class="menu-item-container">
            <nuxt-link :to="item.url" v-for="(item,index) in hangye" :key="index">
              <div class="popover-left">
                <img :src="item.img">
              </div>
              <div class="popover-left">
                <span class="popover-left-title">{{ item.title }}</span>
                <span class="popover-left-des">{{ item.des }}</span>
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
      <span class="nav-btn" slot="reference" :class="{active: curActive === 'jiejuefangan'}">解决方案<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: "qg-nav",
  data() {
    return {
      chanpinfuwu: [
        {
          img: '#',
          title: '考试系统',
          des: '一款简单、好用的考试系统',
          url: '/product/exam'
        },
        {
          img: '#',
          title: '培训系统',
          des: '企业一站式在线培训系统',
          url: '/product/peixun'
        },
        {
          img: '#',
          title: '课程定制',
          des: '为企业量身定做专属课程',
          url: '/product/courseCustom'
        },
        {
          img: '#',
          title: '课程资源',
          des: '企业优质通用课程资源',
          url: '/product/courseResource'
        }
      ],
      changjing: [
        {
          img: '#',
          title: '严肃考试',
          des: '智能防作弊解决方案',
          url: '/solution/exam',
        },
        {
          img: '#',
          title: '企业培训',
          des: '企业在线培训解决方案',
          url: '/solution/peixun'
        },
        {
          img: '#',
          title: '万人高并发',
          des: '系统高并发解决方案',
          url: '/solution/erupt'
        },
        {
          img: '#',
          title: '私有化部署',
          des: '企业私有化解决方案',
          url: '/solution/privatization'
        }
      ],
      hangye: [
        {
          img: '#',
          title: '政府机构',
          des: '政府机构培训解决方案',
          url: '/solution/government'
        },
        {
          img: '#',
          title: '教育机构',
          des: '教育培行业解决方案',
          url: '/solution/education'
        },
        {
          img: '#',
          title: '能源化工',
          des: '能源化工行业解决方案',
          url: '/solution/energy'
        },
        {
          img: '#',
          title: '金融保险',
          des: '金融保险行业解决方案',
          url: '/solution/financial'
        },
        {
          img: '#',
          title: '食品餐饮',
          des: '食品餐饮行业解决方案',
          url: '/solution/biteAndSup'
        },
        {
          img: '#',
          title: '交通运输',
          des: '交通运输行业解决方案',
          url: '/solution/transportation'
        },
        {
          img: '#',
          title: '医疗行业',
          des: '医疗行业解决方案',
          url: '/solution/medical'
        }
      ],
    }
  },
  computed: {
    curActive() {
      const chanpinyufuwu = this.chanpinfuwu.map(item => item.url);
      const jiejuefangan = this.changjing.map(item => item.url);
      const jiejuefangan2 = this.hangye.map(item => item.url);
      const routerPath = this.$route.path
      // 首页
      if (routerPath === '/') {
        return 'shouye'
      } else if (routerPath === '/news') {
        return 'news'
      } else if (routerPath === '/introduction') {
        return 'introduction'
      } else if (chanpinyufuwu.some(path => path === routerPath)) {
        return 'chanpinyufuwu'
      } else if (jiejuefangan.some(path => path === routerPath)) {
        return 'jiejuefangan'
      } else if (jiejuefangan2.some(path => path === routerPath)) {
        return 'jiejuefangan'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: #f0bd16;
}

.nav-btn {
  cursor: pointer;
}
</style>