antissoft / NetworkInformation

Blame view

src/views/homePage/components/Menu.vue 2.79 KB
Edit Raw Normal View History
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
  <template>
    <div class="Navs">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        :collapse="true"
        router
      >
        <el-menu-item index="/homePage">
          <i class="el-icon-menu"></i>
          <span>首页</span>
          <!-- <span slot="title">首页</span> -->
        </el-menu-item>
        <div v-for="v in navList" :key="v.id">
          <template v-if="v.children && v.children.length">
            <el-submenu :index="v.path">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{ v.fullName }}</span>
              </template>
              <el-menu-item-group>
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
                <el-menu-item
                  :index="item.path"
                  v-for="item in v.children"
                  :key="item.id"
                  >{{ item.fullName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="v.path">
              <i class="el-icon-menu"></i>
              <span>{{ v.fullName }}</span>
            </el-menu-item>
          </template>
        </div>
      </el-menu>
    </div>
  </template>
  
  <script>
  export default {
    name: "Navs",
  
    data() {
      return {
        navList: "",
      };
    },
    mounted() {
5330d757   monkeyhouyi   公司信息管理完成 
52
53
54
 
      // 显示"内部系统PC权限"下的页面
      let meun = this.$store.state.user.menuList.find(v => v.id == '582459649622541573').children;
      this.navList = meun;
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
55
56
57
58
 
    },
    computed: {
      // 默认激活的菜单
      activeMenu() {
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
        return this.$route.path;
      },
    },
  };
  </script>
  <style scoped lang="scss">
  .Navs {
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    :deep(.el-menu--collapse) {
      width: 100%;
    }
    .el-menu-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 30px;
      color: #fff;
ecc43230   monkeyhouyi   优化首页，应用管理 
80
 
      padding: 40px 0px !important;
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
81
 
      &.is-active {
4424f41c   monkeyhouyi   网信执法、清单管理静态页面 
82
 
        color: #02efff;
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
        background-color: #dfdada34;
      }
      span {
        height: 30px;
        width: 100%;
        overflow: unset;
        visibility: unset;
      }
      &:hover {
        background-color: #dfdada56;
      }
    }
    :deep(.el-menu) {
      background-color: transparent;
      border-right: unset;
      .el-submenu__title {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 30px;
        justify-content: center;
        color: #fff;
ecc43230   monkeyhouyi   优化首页，应用管理 
105
 
        padding: 40px 0px !important;
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
106
107
108
109
110
111
 
        &:hover {
          background-color: #dfdada56;
        }
      }
      i {
        color: #fff;
ecc43230   monkeyhouyi   优化首页，应用管理 
112
113
114
 
        font-size: 30px;
        width: 30px;
        margin: 0;
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
115
116
117
118
119
120
 
      }
      .el-submenu__icon-arrow.el-icon-arrow-right {
        display: none;
      }
    }
  }
ecc43230   monkeyhouyi   优化首页，应用管理 
121
122
123
124
125
 
  .el-menu-item-group {
    :deep(.el-menu-item-group__title) {
      display: none;
    }
  }
4f6550f1   monkeyhouyi   消息提醒弹框页面样式 
126
 
  </style>