4dkankan_back/src/page/layout/slide.vue

<template>
  <div class="slide-layout nav-menu">
    <div class="navigator_menu">
      <span>导航面板</span>
    </div>
    <el-menu text-color="#999" active-text-color="#333" class="el-menu-vertical-demo" @select='handleSelect'>
      <template v-for="(nav, i) in navs">

        <router-link tag="div" :to="nav.link" :key="i" v-if="!nav.children">
          <el-menu-item :index="i+''" style="padding-left: 49px;">
            <i class="iconfonts i-fix" :style="{backgroundPosition: '0px -'+(Number(actice_idx)===i?nav.top + 14:nav.top)+'px'}"></i>
            <span slot="title">{{nav.text}}</span>
          </el-menu-item>
        </router-link>

        <el-submenu v-else :key="i" :index="i+''">
          <template slot="title">
            <i class="iconfonts i-fix" :style="{backgroundPosition: '0px -'+nav.top+'px'}"></i>
            <span style="padding-left:30px">{{nav.text}}</span>
          </template>

          <router-link tag="div" :to="nav.link" v-for="(nav, j) in nav.children" :key="j">
            <el-menu-item :index="i+'-'+j">{{nav.text}}</el-menu-item>
          </router-link>

        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'm-aside',
  component: {},

  data () {
    let navs = [
      { text: '首页', link: {name: 'Home'}, top: 14 },
      { text: '订单管理', link: {name: 'Order'}, top: 42 },
      // { text: '增值服务', link: {name: 'Added'}, top: 70 },
      // {
      //   text: '代理平台',
      //   link: {name: 'home'},
      //   children: [
      //     { text: '代理管理', link: {name: 'hone'} },
      //     { text: '代理查询', link: {name: 'hone'} },
      //     { text: '公告设置', link: {name: 'hone'} }
      //   ],
      //   top: 98
      // },
      { text: '设备管理', link: {name: 'device'}, top: 126 },
      { text: '发票管理', link: {name: 'invoice'}, top: 126 },
      {
        text: '更多设置',
        link: {name: 'home'},
        children: [
          { text: '场景管理', link: {name: 'scene'} },
          { text: '反馈消息', link: {name: 'feedback'} },
          { text: '设备管理', link: {name: 'device'} },
          { text: '客户管理', link: {name: 'client'} }
        ],
        top: 154
      },
      { text: '经销商申请', link: {name: 'distributor-list'}, top: 98 },
      { text: '留言管理', link: {name: 'leaving'}, top: 182 },
      {
        text: '版本管理',
        link: {name: 'edition'},
        children: [
          { text: '八目相机', link: {name: 'edition'}, top: 182 },
          { text: '转台相机', link: {name: 'turntableCamera'}, top: 182 }
          // { text: '反馈消息', link: {name: 'feedback'} },
          // { text: '设备管理', link: {name: 'device'} },
          // { text: '客户管理', link: {name: 'client'} }
        ],
        top: 154
      },
      // { text: '版本管理', link: {name: 'edition'}, top: 182 },
      { text: '数据统计', link: {name: 'Statistics'}, top: 210 }
    //   { text: '数据下载', link: {name: 'Down'}, top: 210 }
      // ,
      // {
      //   text: 'BBS',
      //   link: {name: 'home'},
      //   children: [
      //     { text: '文章列表', link: {name: 'home'} },
      //     { text: '评论管理', link: {name: 'home'} },
      //     { text: '用户管理', link: {name: 'home'} }
      //   ],
      //   top: 182
      // }
    ]

    return {
      actice_idx: 1,
      navs: navs
    }
  },
  methods: {
    handleSelect (key) {
      console.log(key)
      this.actice_idx = key
    },
    openNotice () {
      this.$store.commit('SET_OPENNOTICE', true)
    }
  }
}
</script>

<style scoped>
.slide-layout {
  border: 1px solid #ebeef5;
  background: #ffffff;
  z-index: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.nav-menu {
  padding-left: 5px;
  user-select: none;
  font-size: 20px;
}

.nav-menu-item {
  margin: 20px 0;
}

.menu-title {
  font-size: 18px;
  margin-left: 15px;
}

.jiantou {
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(135deg);
  display: inline-block;
  margin-left: 64px;
}

.flex-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.flex-item-list {
  margin-left: 32px;
  margin-top: 20px;
}

.flex-item-list li {
  cursor: pointer;
  margin-top: 20px;
  color: #999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

{
  opacity: 0;
}

.iconfont {
  margin-right: 10px;
}

.navigator_menu {
  line-height: 56px;
  height: 56px;
}

.navigator_menu>span {
  padding-left: 20px;
  font-size: 12px;
  color: #999;
}
</style>

<style type="text/css">
.el-menu-item.is-active {
  background: #f2f2f2;
  /*color: #333;*/
}

.i-fix {
  display: inline-block;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  background-image: url('~@/assets/images/icon/sys_icon.png')
}

.iconfonts {
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -9px;
}

</style>