NavigationPage.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div class="left-dashboard">
  3. <template v-for="menu in menuList">
  4. <div class="menu" v-if="menu.name !== '智能看板'" :key="menu.name">
  5. <div class="menu-title">
  6. <span class="anticon" style="vertical-align: middle;margin-right: 5px">
  7. <a-avatar shape="square" :size="22" :src="requireImg('function/color2/' + menu.icon)"
  8. /></span>
  9. {{ menu.name }}
  10. </div>
  11. <ul class="menu-content">
  12. <li class="menu-content-item" v-for="item in menu.children" :key="item.name" @click="toRoute(item, menu)">
  13. <span class="anticon" style="vertical-align: middle;margin: 1px 2px">
  14. <a-avatar shape="square" :size="20" :src="requireImg('functionColor/small2/' + item.icon)"
  15. /></span>
  16. {{ item.name }}
  17. </li>
  18. </ul>
  19. </div>
  20. </template>
  21. <div style="width: 90%;margin: 0 auto"><a-divider></a-divider></div>
  22. <div class="menu sso">
  23. <div class="menu-title">单点登录</div>
  24. <div class="menu-content sso-item" v-for="item in ssoList" :key="item.name">
  25. <span class="anticon" style="vertical-align: middle;margin: 1px 2px">
  26. <a-avatar shape="square" :size="20" :src="requireImg('functionColor/单点登录.png')"
  27. /></span>
  28. {{ item.name }}
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import menuList from "@/data/json/menuList.json";
  35. import ssoList from "@/data/json/ssoList.json";
  36. import { requireImg } from "@/utils/requireImg";
  37. export default {
  38. data() {
  39. return {
  40. menuList,
  41. ssoList
  42. };
  43. },
  44. props: {
  45. toRoute: Function
  46. },
  47. created() {},
  48. mounted() {},
  49. methods: {
  50. requireImg
  51. }
  52. };
  53. </script>
  54. <style lang="less" scoped>
  55. .left-dashboard {
  56. width: 100%;
  57. height: 100%;
  58. background-color: #fff;
  59. .menu {
  60. display: inline-block;
  61. vertical-align: top;
  62. width: 150px;
  63. height: 200px;
  64. margin: 30px 15px 30px 3%;
  65. .menu-title {
  66. margin-left: 20px;
  67. margin-top: 10px;
  68. font-size: 20px;
  69. letter-spacing: 3px;
  70. color: #4d4d4d;
  71. }
  72. .menu-content {
  73. list-style: none;
  74. font-size: 16px;
  75. margin: 5px 0 0 20px;
  76. padding: 5px;
  77. background-color: #fafafa;
  78. .menu-content-item {
  79. margin-bottom: 6px;
  80. line-height: 30px;
  81. letter-spacing: 1px;
  82. color: #333333;
  83. cursor: pointer;
  84. }
  85. }
  86. }
  87. .sso {
  88. display: block;
  89. width: 80%;
  90. .sso-item {
  91. width: 200px;
  92. display: inline-block;
  93. }
  94. }
  95. }
  96. </style>