nuxtProject/components/mtaNav/sjNav.vue

<template>
  <div class="phone-popper-box">
    <nuxt-link to="/" class="xwzx-row" :class="{'menu-active': curActive === 'shouye'}">首页</nuxt-link>
    <nuxt-link to="/examsystem" class="xwzx-row" :class="{'menu-active': curActive === 'examsystem'}">考试系统</nuxt-link>
    <nuxt-link to="/trainsystem" class="xwzx-row" :class="{'menu-active': curActive === 'trainsystem'}">培训系统</nuxt-link>
    <el-collapse accordion>
      <el-collapse-item title="课程定制服务" :class="{'menu-active': curActive === 'courseware'}">
        <nuxt-link :to="item.url" v-for="(item,index) in kckfList" :key="index" class="cpfw-popper-item">
          <i></i>
          <p>
            <span class="phone-popper-title">{{ item.title }}</span>
            <span class="phone-popper-des">{{ item.des }}</span>
          </p>
        </nuxt-link>
      </el-collapse-item>
    </el-collapse>
    <nuxt-link to="/news" class="xwzx-row" :class="{'menu-active': curActive === 'news'}">新闻资讯</nuxt-link>
    <nuxt-link to="/introduction" :class="{'menu-active': curActive === 'introduction'}">关于我们</nuxt-link>
  </div>
</template>

<script>
export default {
  name: "sjNav",
  data() {
    return {
      kckfList: [
        {
          img: '#',
          title: '梗概',
          des: '为企业量身定做专属课程',
          url: '/courseware/synopsis'
        },
        {
          img: '#',
          title: '课程定制',
          des: '海量精品课程专业定制',
          url: '/courseware/custom'
        },
        {
          img: '#',
          title: '平台运营',
          des: '完善的平台运营体系',
          url: '/courseware/platform'
        },
        {
          img: '#',
          title: '课程大赛',
          des: '助力企业推动培训学习进程',
          url: '/courseware/compete'
        }
      ],
    }
  },
  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')
      },
      immediate: true,
    }
  }
}
</script>

<style lang="scss">
.phone-popper-box {
  position: absolute;
  top: 61px;
  background: #fff;
  width: 100%;
  left: 0;
  padding: 0 15px;
  box-sizing: border-box;
  overflow: auto;
  height: calc(100vh - 112px);
  >a,.el-collapse-item__header{
    height: 60px;
    line-height: 60px;
    display: block;
    font-size: 16px;
    color: #101010;
    font-weight: 700;
  }
  .el-collapse{border-top:0;}
  .el-collapse-item__header{ display: flex;}
  // 新闻资讯
  .xwzx-row{border-bottom: 1px solid #EBEEF5;}

  // 产品服务 - 二级菜单
  .cpfw-popper-item{
    width: 100%;height: 80px;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);
    margin-bottom: 10px;display: flex;align-items: center;padding: 20px;box-sizing: border-box;
    i{width: 34px;height: 34px;background-size: contain;display: inline-block;margin-right: 16px;background-repeat:no-repeat;background-position: center;}
    .phone-popper-title{font-size: 14px;color: #333;margin-bottom: 4px;display: inline-block;}
    .phone-popper-des{display:block;font-size: 12px;color: #9c9c9c;}

    // 列表
    &:nth-child(1){i{background-image:url("~static/images/client/component/head-cp-icon1.png");} }
    &:nth-child(2){i{background-image:url("~static/images/client/component/head-cp-icon2.png");} }
    &:nth-child(3){i{background-image:url("~static/images/client/component/head-cp-icon3.png");} }
    &:nth-child(4){i{background-image:url("~static/images/client/component/head-cp-icon4.png");} }
  }

  // 解决方案 - 二级菜单
  .jjfa-popper-content{
    width: 100%;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);margin-bottom: 10px;padding: 10px;box-sizing: border-box;
    h3{font-size: 14px;color: #333;display: block;font-weight: 700;margin-left: 8px;}
    .jjfa-link-box{width: 100%;display: flex;flex-wrap: wrap;}
    a{width: 33.33%;padding: 5px 8px;box-sizing: border-box}
    .jjfa-popper-title{width:100%;height: 24px;line-height: 24px;text-align:center;display:inline-block;
      font-size: 12px;color: rgba(16, 16, 16, 100);border-radius: 5px;border: 1px solid rgba(187, 187, 187, 100);}
  }

  // 菜单选中
  .menu-active {
    color: #2b5cfd;
    div.el-collapse-item__header {
      color: #2b5cfd;
    }
  }

}
</style>