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">
          <span class="anticon" style="vertical-align: middle;margin-right: 5px">
            <a-avatar shape="square" :size="22" :src="requireImg('function/color2/' + menu.icon)"
          /></span>
          {{ 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)">
            <span class="anticon" style="vertical-align: middle;margin: 1px 2px">
              <a-avatar shape="square" :size="20" :src="requireImg('functionColor/small2/' + item.icon)"
            /></span>
            {{ item.name }}
          </li>
        </ul>
      </div>
    </template>
    <div style="width: 90%;margin: 0 auto"><a-divider></a-divider></div>
    <div class="menu sso">
      <div class="menu-title">单点登录</div>
      <div class="menu-content sso-item" v-for="item in ssoList" :key="item.name">
        <span class="anticon" style="vertical-align: middle;margin: 1px 2px">
          <a-avatar shape="square" :size="20" :src="requireImg('functionColor/单点登录.png')"
        /></span>
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

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

<style lang="less" scoped>
.left-dashboard {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .menu {
    display: inline-block;
    vertical-align: top;
    width: 150px;
    height: 200px;
    margin: 30px 15px 30px 3%;
    .menu-title {
      margin-left: 20px;
      margin-top: 10px;
      font-size: 20px;
      letter-spacing: 3px;
      color: #4d4d4d;
    }
    .menu-content {
      list-style: none;
      font-size: 16px;
      margin: 5px 0 0 20px;
      padding: 5px;
      background-color: #fafafa;
      .menu-content-item {
        margin-bottom: 6px;
        line-height: 30px;
        letter-spacing: 1px;
        color: #333333;
        cursor: pointer;
      }
    }
  }
  .sso {
    display: block;
    width: 80%;
    .sso-item {
      width: 200px;
      display: inline-block;
    }
  }
}
</style>