pageLeft.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div id="pageLeft">
  3. <div class="topContainer">
  4. <div class="logoDiv">
  5. <img :src="logoUrl" class="logoImg" />
  6. </div>
  7. <div class="middDiv">
  8. <i class="el-icon-fa-bars fa fa-bars"></i>
  9. </div>
  10. </div>
  11. <div class="menuDiv">
  12. <el-menu
  13. text-color="#fff"
  14. active-text-color="#ffd04b"
  15. background-color="#364150"
  16. router
  17. >
  18. <el-menu-item-group v-for="menu in menus" :key="menu.id">
  19. <template slot="title">
  20. <span v-text="menu.name"></span>
  21. </template>
  22. <leftMenu
  23. :menu="subMenu"
  24. v-for="subMenu in menu.children"
  25. :key="subMenu.id"
  26. :index="subMenu.id"
  27. ></leftMenu>
  28. </el-menu-item-group>
  29. </el-menu>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import { mapState } from "vuex";
  35. import leftMenu from "./leftMenu";
  36. export default {
  37. props: [],
  38. data() {
  39. return {
  40. logoUrl: require("@/assets/images/logo.png"),
  41. };
  42. },
  43. computed: {
  44. ...mapState(["menus"]),
  45. },
  46. methods: {},
  47. created() {},
  48. mounted() {},
  49. components: {
  50. leftMenu,
  51. },
  52. };
  53. </script>
  54. <style scoped>
  55. #pageLeft {
  56. width: 235px;
  57. height: 100%;
  58. display: flex;
  59. flex-direction: column;
  60. }
  61. .topContainer {
  62. background: #2b3643;
  63. height: 50px;
  64. display: flex;
  65. flex-direction: row;
  66. align-items: center;
  67. }
  68. .menuDiv {
  69. flex: 1;
  70. background: #364150;
  71. overflow: auto;
  72. }
  73. .logoImg {
  74. height: 18px;
  75. margin-left: 20px;
  76. }
  77. .el-icon-fa-bars {
  78. font-family: FontAwesome !important;
  79. font-size: inherit;
  80. font-style: normal;
  81. font-weight: 400;
  82. font-variant: normal;
  83. text-transform: none;
  84. line-height: 1;
  85. vertical-align: baseline;
  86. display: inline-block;
  87. -webkit-font-smoothing: antialiased;
  88. -moz-osx-font-smoothing: grayscale;
  89. color: #ffffff;
  90. margin-left: 88px;
  91. cursor: pointer;
  92. }
  93. .logoDiv {
  94. flex: 1;
  95. }
  96. .middDiv {
  97. flex: 1;
  98. }
  99. .el-menu-item-group__title span {
  100. font-size: 14px !important;
  101. color: #68707b;
  102. font-weight: bold;
  103. }
  104. </style>