nuxtProject/components/qgNav/H5Nav.vue

<template>
  <div class="h5-menu-container">
    <nuxt-link to="/"> 首页 </nuxt-link>
    <el-collapse>
      <el-collapse-item title="产品与服务">
        <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>
      </el-collapse-item>
      <el-collapse-item title="解决方案">
          <div>
            <h3>场景解决方案</h3>
            <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
              {{item.title}}
            </nuxt-link>
          </div>
        <div>
          <h3>行业解决方案</h3>
          <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
            {{item.title}}
          </nuxt-link>
        </div>


      </el-collapse-item>
    </el-collapse>
    <nuxt-link to="/news"> 新闻资讯 </nuxt-link>
    <nuxt-link to="/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'
        }
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.h5-menu-container {
  position: absolute;
  top: 60px;
  background: #fff;
  width: 90%;
  height: auto;
}
</style>