iot-front-ui/src/components/home/NavigationPage.vue

<template>
  <div class="left-dashboard">
    <template v-for="menu in menuList">
      <div class="menu" v-if="menu.name!=='智能看板'" :key="menu.name">
        <div class="menu-title">{{menu.name}}</div>
        <ul class="menu-content" >
          <li class="menu-content-item" v-for="item in menu.children" :key="item.name" @click="toRoute(item, menu)" >{{ item.name }}</li>
        </ul>
      </div>
    </template>
    <div class="menu sso">
      <div class="menu-title">单点登录</div>
      <div class="menu-content sso-item" v-for="item in ssoList" :key="item.name" >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import menuList from "@/data/json/menuList.json"
import ssoList from "@/data/json/ssoList.json"
export default {
  data() {
    return {
      menuList,
      ssoList,
    }
  },
  props: {
    toRoute: Function
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }

}
</script>

<style lang="less" scoped>
.left-dashboard {
  .menu {
    display: inline-block;
    vertical-align: top;
    width: 150px;
    height: 200px;
    margin: 30px;
    .menu-title {
      margin-left: 20px;
      margin-top: 10px;
      font-size: 20px;
      letter-spacing: 3px;
      font-weight: 600;
      color: #101010;
    }
    .menu-content {
      list-style: none;
      font-size: 16px;
      margin: 10px 0 0 30px;
      padding: 0;
      .menu-content-item {
        line-height: 30px;
        letter-spacing: 1px;
        color: #101010;
        cursor: pointer;
      }
    }
  }
  .sso {
    display: block;
    width: 80%;
    .sso-item {
      width: 200px;
      display: inline-block;
    }
  }
}
</style>