nuxtProject/components/qgNav/H5Nav.vue

<template>
  <div class="phone-popper-box">
    <nuxt-link to="/" :class="{'menu-active': curActive === 'shouye'}">首页</nuxt-link>
    <el-collapse>
      <el-collapse-item title="产品与服务" :class="{'menu-active': curActive === 'chanpinyufuwu'}">
        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :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-item title="解决方案" :class="{'menu-active': curActive === 'jiejuefangan'}">
          <div class="jjfa-popper-content">
            <h3>场景解决方案</h3>
            <div class="jjfa-link-box">
              <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
                <span class="jjfa-popper-title">{{item.title}}</span>
              </nuxt-link>
            </div>
          </div>
        <div class="jjfa-popper-content">
          <h3>行业解决方案</h3>
          <div class="jjfa-link-box">
            <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
              <span class="jjfa-popper-title">{{item.title}}</span>
            </nuxt-link>
          </div>
        </div>


      </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: "H5Nav",
  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 === '/' || routerPath === '/index') {
        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'
      }
    }
  },
  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-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: #00b96b;
    div.el-collapse-item__header {
      color: #00b96b;
    }
  }

}
</style>