Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1894abee by 任超
Options

style;权限

1 parent 0c7b3e5e
Inline Side-by-side
Showing 20 changed files with 286 additions and 363 deletions
...@@ -5,4 +5,4 @@ NODE_ENV=development ...@@ -5,4 +5,4 @@ NODE_ENV=development
5 VUE_APP_BASE_API = '/api' 5 VUE_APP_BASE_API = '/api'
6 6
7 # 开发环境 7 # 开发环境
8 VUE_APP_API_BASE_URL = 'http://192.168.2.38:8027' 8 VUE_APP_API_BASE_URL = 'http://192.168.2.38:8008'
......
...@@ -16,12 +16,14 @@ export default { ...@@ -16,12 +16,14 @@ export default {
16 } 16 }
17 </script> 17 </script>
18 <style lang="scss" scoped> 18 <style lang="scss" scoped>
19 .app-main { 19 .hasTagsView {
20 height: calc(100vh - 84px); 20 .app-main {
21 overflow-x: hidden; 21 overflow-x: auto;
22 box-sizing: border-box; 22 padding: 5px;
23 flex: 1; 23 box-sizing: border-box;
24 width: 100%; 24 background-color: #EDF1F7;
25 margin-right: 15px; 25 box-sizing: border-box;
26
27 }
26 } 28 }
27 </style> 29 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="navbar-con"> 2 <div class="navbar-con">
3 <div class="navbar"> 3 <div class="navbar">
4 <div class="logo"> 4 <div class="sidebarLeft">
5 <img :src="require('@/image/logo.png')" alt="" /> 5 <sidebarLeft />
6 </div> 6 </div>
7 <div class="backdrop"> 7 <div class="sidebarRight d-center">
8 <Breadcrumb /> 8 <sidebarRight />
9 </div> 9 <div class="right-menu">
10 <div class="right-menu"> 10 <div class="dataView pointer" @click="handleDataView">大屏展示</div>
11 <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> 11 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
12 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> 12 <div class="avatar-wrapper">
13 <div class="avatar-wrapper"> 13 <span style="padding-right:10px">{{ name }}</span>
14 <span style="padding-right:10px">{{ name }}</span> 14 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
15 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> 15 </div>
16 </div> 16 <el-dropdown-menu slot="dropdown">
17 <el-dropdown-menu slot="dropdown"> 17 <el-dropdown-item command="a">个人中心</el-dropdown-item>
18 <el-dropdown-item command="a">个人中心</el-dropdown-item> 18 <el-dropdown-item command="b">退出</el-dropdown-item>
19 <el-dropdown-item command="b">退出</el-dropdown-item> 19 </el-dropdown-menu>
20 </el-dropdown-menu> 20 </el-dropdown>
21 </el-dropdown> 21 </div>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 </template> 25 </template>
26 <script> 26 <script>
27 import { mapGetters } from 'vuex'
28 import Breadcrumb from './Breadcrumb'
29 import defaultSettings from '@/settings' 27 import defaultSettings from '@/settings'
28 import sidebarLeft from './Sidebar/sidebarLeft'
29 import sidebarRight from './Sidebar/sidebarRight'
30 import { mapGetters } from 'vuex'
30 export default { 31 export default {
31 components: { 32 components: {
32 Breadcrumb 33 sidebarLeft,
34 sidebarRight
33 }, 35 },
34 computed: { 36 computed: {
35 ...mapGetters(['sidebar', 'avatar', 'name']) 37 ...mapGetters(['sidebar', 'avatar', 'name'])
...@@ -49,115 +51,70 @@ export default { ...@@ -49,115 +51,70 @@ export default {
49 }, 51 },
50 handleCommand (command) { 52 handleCommand (command) {
51 if (command == 'a') { 53 if (command == 'a') {
52 } else {
53
54 } 54 }
55 } 55 }
56 } 56 }
57 } 57 }
58 </script> 58 </script>
59 <style lang="scss" scoped> 59 <style lang="scss" scoped>
60 .navbar-con { 60 /deep/.el-menu--horizontal {
61 position: relative; 61 display: flex;
62 align-items: center;
63 }
62 64
63 .logo { 65 .menubg {
64 color: #fff; 66 line-height: 30px;
65 font-size: 26px; 67 color: #FFFFFF;
66 font-weight: 700; 68 margin-right: 5px;
67 } 69 background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%);
68 } 70 }
69 71
70 .dataView { 72 /deep/.el-menu-item {
71 color: #fff; 73 @extend .menubg;
72 width: 120px;
73 height: 32px;
74 background: url('../../image/dp.png');
75 background-size: cover;
76 margin-right: 20px;
77 } 74 }
78 75
79 .NoticeBar { 76 /deep/.el-submenu {
80 position: absolute; 77 @extend .menubg;
81 bottom: 0;
82 } 78 }
83 79
84 .el-dropdown-menu { 80 /deep/.el-submenu__title {
85 padding: 0 !important; 81 line-height: 30px !important;
86 border: 1px solid #EBEEF5; 82 height: 42px !important;
87 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); 83 }
88 border-radius: 4px 0 0 4px 4px;
89
90 .el-dropdown-menu__item {
91 text-align: center;
92 margin-top: 0 !important;
93 font-size: 14px;
94 font-family: PingFangSC-Regular, PingFang SC;
95 font-weight: 400;
96 color: #4A4A4A;
97 width: 140px;
98 height: 36px;
99 line-height: 36px;
100 }
101 84
102 .el-dropdown-menu__item:nth-child(6) { 85 /deep/.el-submenu__title span {
103 border-top: 1px solid #EBEEF5; 86 font-size: 14px;
104 } 87 }
105 88
106 .popper__arrow { 89 // 导航选中背景色
107 top: -11px !important; 90 .xuanzhong {
108 left: 110px !important; 91 background: linear-gradient(180deg, #73551D 0%, #C09C43 100%);
109 transform: rotate(0deg) scale(2); 92 font-weight: 700;
110 } 93 color: #FFFFFF !important;
94 }
111 95
112 .el-dropdown-menu__item:not(.is-disabled):hover, 96 /deep/.el-menu-item:hover {
113 .el-dropdown-menu__item:focus { 97 @extend .xuanzhong;
114 background: #F6F7F9; 98 }
115 color: #4A4A4A; 99
116 } 100 /deep/.el-submenu__title:hover {
101 @extend .xuanzhong;
117 } 102 }
118 103
104 /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
105 @extend .xuanzhong;
106 }
107
108
119 .navbar { 109 .navbar {
120 height: $headerHeight; 110 height: $headerHeight;
121 overflow: hidden; 111 overflow: hidden;
122 position: relative; 112 position: relative;
123 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 113 background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%);
124 // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
125 background: #0D1230;
126 display: flex; 114 display: flex;
127 align-items: center; 115 align-items: center;
128 padding-right: 20px; 116 padding: 0 20px;
129 justify-content: space-between; 117 justify-content: space-between;
130 margin-bottom: 10px;
131
132 .header-logo {
133 width: 300px;
134 }
135
136 .backdrop {
137 flex: 1;
138 width: 60%;
139 background-size: 100% 100%;
140 height: $headerHeight;
141 display: flex;
142 align-items: center;
143 }
144
145 .hamburger-container {
146 line-height: 43px;
147 height: 100%;
148 float: left;
149 cursor: pointer;
150 transition: background 0.3s;
151 -webkit-tap-highlight-color: transparent;
152
153 &:hover {
154 background: rgba(0, 0, 0, 0.025);
155 }
156 }
157
158 .breadcrumb-container {
159 float: left;
160 }
161 118
162 .right-menu { 119 .right-menu {
163 float: right; 120 float: right;
...@@ -166,11 +123,6 @@ export default { ...@@ -166,11 +123,6 @@ export default {
166 display: flex; 123 display: flex;
167 align-items: center; 124 align-items: center;
168 125
169 .function {
170 margin: 0 15px;
171 cursor: pointer;
172 }
173
174 .shutdown { 126 .shutdown {
175 font-size: 20px; 127 font-size: 20px;
176 margin-left: 15px; 128 margin-left: 15px;
......
...@@ -13,17 +13,8 @@ export default { ...@@ -13,17 +13,8 @@ export default {
13 } 13 }
14 }, 14 },
15 render (h, context) { 15 render (h, context) {
16 const { icon, title } = context.props 16 const { title } = context.props
17 const vnodes = [] 17 const vnodes = []
18
19 if (icon) {
20 if (icon.includes('el-icon')) {
21 vnodes.push(<i class={[icon, 'sub-el-icon']} />)
22 } else {
23 vnodes.push(<svg-icon icon-class={icon} />)
24 }
25 }
26
27 if (title) { 18 if (title) {
28 vnodes.push(<span slot='title'>{(title)}</span>) 19 vnodes.push(<span slot='title'>{(title)}</span>)
29 } 20 }
...@@ -31,11 +22,3 @@ export default { ...@@ -31,11 +22,3 @@ export default {
31 } 22 }
32 } 23 }
33 </script> 24 </script>
34
35 <style scoped>
36 .sub-el-icon {
37 color: currentColor;
38 width: 1em;
39 height: 1em;
40 }
41 </style>
......
...@@ -88,4 +88,4 @@ export default { ...@@ -88,4 +88,4 @@ export default {
88 } 88 }
89 } 89 }
90 } 90 }
91 </script> 91 </script>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal"> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 --> 3 <!-- 权限菜单 -->
4 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> --> 4 <sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route"
5 :base-path="route.path" />
5 <!-- 菜单全部展示 --> 6 <!-- 菜单全部展示 -->
6 <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> 7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
7 </el-menu> 8 </el-menu>
8 </template> 9 </template>
9 10
...@@ -12,7 +13,7 @@ import { mapGetters } from 'vuex' ...@@ -12,7 +13,7 @@ import { mapGetters } from 'vuex'
12 import Logo from './Logo' 13 import Logo from './Logo'
13 import SidebarItem from './SidebarItem' 14 import SidebarItem from './SidebarItem'
14 import variables from '@/styles/variables.scss' 15 import variables from '@/styles/variables.scss'
15 import { asyncRoutes1 } from '@/router' 16 import { asyncRoutes } from '@/router'
16 export default { 17 export default {
17 components: { SidebarItem, Logo }, 18 components: { SidebarItem, Logo },
18 computed: { 19 computed: {
...@@ -29,7 +30,7 @@ export default { ...@@ -29,7 +30,7 @@ export default {
29 return variables 30 return variables
30 }, 31 },
31 asyncRoutes () { 32 asyncRoutes () {
32 return asyncRoutes1.slice(0, 3) 33 return asyncRoutes.slice(0, 3)
33 } 34 }
34 } 35 }
35 } 36 }
......
1 <template> 1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal"> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 --> 3 <!-- 权限菜单 -->
4 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> --> 4 <sidebar-item v-for="route in permission_routes.slice(5, 7)" :key="route.path" :item="route"
5 :base-path="route.path" />
5 <!-- 菜单全部展示 --> 6 <!-- 菜单全部展示 -->
6 <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> 7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
7 </el-menu> 8 </el-menu>
8 </template> 9 </template>
9 10
...@@ -12,7 +13,7 @@ import { mapGetters } from 'vuex' ...@@ -12,7 +13,7 @@ import { mapGetters } from 'vuex'
12 import Logo from './Logo' 13 import Logo from './Logo'
13 import SidebarItem from './SidebarItem' 14 import SidebarItem from './SidebarItem'
14 import variables from '@/styles/variables.scss' 15 import variables from '@/styles/variables.scss'
15 import { asyncRoutes1 } from '@/router' 16 import { asyncRoutes } from '@/router'
16 export default { 17 export default {
17 components: { SidebarItem, Logo }, 18 components: { SidebarItem, Logo },
18 computed: { 19 computed: {
...@@ -29,7 +30,7 @@ export default { ...@@ -29,7 +30,7 @@ export default {
29 return variables 30 return variables
30 }, 31 },
31 asyncRoutes () { 32 asyncRoutes () {
32 return asyncRoutes1.slice(3, asyncRoutes1.length) 33 return asyncRoutes.slice(3, 6)
33 } 34 }
34 } 35 }
35 } 36 }
......
1 export { default as AppMain } from './AppMain' 1 export { default as AppMain } from './AppMain'
2 export { default as Navbar } from './Navbar' 2 export { default as Navbar } from './Navbar'
3 export { default as Sidebar } from './Sidebar/index.vue' 3 export { default as Sidebar } from './Sidebar/sidebarRight.vue'
4 export { default as TagsView } from './TagsView/index.vue' 4 export { default as TagsView } from './TagsView/index.vue'
......
1 <template> 1 <template>
2 <div class="app-wrapper"> 2 <div class="app-wrapper">
3 <!-- <sidebar class="sidebar-container" />
4 <div class="main-container">
5 <navbar />
6 <app-main />
7 </div> -->
8 <navbar /> 3 <navbar />
9 <div class="main-container"> 4 <div class="appMain">
10 <sidebar class="sidebar-container" />
11 <app-main /> 5 <app-main />
12 </div> 6 </div>
13 </div> 7 </div>
...@@ -42,7 +36,7 @@ export default { ...@@ -42,7 +36,7 @@ export default {
42 position: relative; 36 position: relative;
43 height: 100%; 37 height: 100%;
44 width: 100%; 38 width: 100%;
45 background-color: $containerbg; 39
46 40
47 &.mobile.openSidebar { 41 &.mobile.openSidebar {
48 position: fixed; 42 position: fixed;
...@@ -50,23 +44,14 @@ export default { ...@@ -50,23 +44,14 @@ export default {
50 } 44 }
51 } 45 }
52 46
53 .drawer-bg { 47 .appMain {
54 background: #000; 48 height: calc(100vh - 65px);
55 opacity: 0.3; 49 background-color: $containerbg;
56 width: 100%;
57 top: 0;
58 height: 100%;
59 position: absolute;
60 z-index: 999;
61 }
62
63 .fixed-header {
64 width: 100%;
65 transition: width 0.28s;
66 }
67 50
68 .el-dropdown-menu--small { 51 .app-main {
69 padding: 0; 52 height: 100%;
70 width: 5px; 53 padding: 10px;
54 box-sizing: border-box;
55 }
71 } 56 }
72 </style> 57 </style>
......
...@@ -16,14 +16,12 @@ export default { ...@@ -16,14 +16,12 @@ export default {
16 } 16 }
17 </script> 17 </script>
18 <style lang="scss" scoped> 18 <style lang="scss" scoped>
19 .hasTagsView { 19 .app-main {
20 .app-main { 20 height: calc(100vh - 84px);
21 overflow-x: auto; 21 overflow-x: hidden;
22 padding: 5px; 22 box-sizing: border-box;
23 box-sizing: border-box; 23 flex: 1;
24 background-color: #EDF1F7; 24 width: 100%;
25 box-sizing: border-box; 25 margin-right: 15px;
26
27 }
28 } 26 }
29 </style> 27 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="navbar-con"> 2 <div class="navbar-con">
3 <div class="navbar"> 3 <div class="navbar">
4 <div class="sidebarLeft"> 4 <div class="logo">
5 <sidebarLeft /> 5 <img :src="require('@/image/logo.png')" alt="" />
6 </div> 6 </div>
7 <div class="sidebarRight d-center"> 7 <div class="backdrop">
8 <sidebarRight /> 8 <Breadcrumb />
9 <div class="right-menu"> 9 </div>
10 <div class="dataView pointer" @click="handleDataView">大屏展示</div> 10 <div class="right-menu">
11 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> 11 <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
12 <div class="avatar-wrapper"> 12 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
13 <span style="padding-right:10px">{{ name }}</span> 13 <div class="avatar-wrapper">
14 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> 14 <span style="padding-right:10px">{{ name }}</span>
15 </div> 15 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
16 <el-dropdown-menu slot="dropdown"> 16 </div>
17 <el-dropdown-item command="a">个人中心</el-dropdown-item> 17 <el-dropdown-menu slot="dropdown">
18 <el-dropdown-item command="b">退出</el-dropdown-item> 18 <el-dropdown-item command="a">个人中心</el-dropdown-item>
19 </el-dropdown-menu> 19 <el-dropdown-item command="b">退出</el-dropdown-item>
20 </el-dropdown> 20 </el-dropdown-menu>
21 </div> 21 </el-dropdown>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 </template> 25 </template>
26 <script> 26 <script>
27 import defaultSettings from '@/settings'
28 import sidebarLeft from './Sidebar/sidebarLeft'
29 import sidebarRight from './Sidebar/sidebarRight'
30 import { mapGetters } from 'vuex' 27 import { mapGetters } from 'vuex'
28 import Breadcrumb from './Breadcrumb'
29 import defaultSettings from '@/settings'
31 export default { 30 export default {
32 components: { 31 components: {
33 sidebarLeft, 32 Breadcrumb
34 sidebarRight
35 }, 33 },
36 computed: { 34 computed: {
37 ...mapGetters(['sidebar', 'avatar', 'name']) 35 ...mapGetters(['sidebar', 'avatar', 'name'])
...@@ -51,70 +49,115 @@ export default { ...@@ -51,70 +49,115 @@ export default {
51 }, 49 },
52 handleCommand (command) { 50 handleCommand (command) {
53 if (command == 'a') { 51 if (command == 'a') {
52 } else {
53
54 } 54 }
55 } 55 }
56 } 56 }
57 } 57 }
58 </script> 58 </script>
59 <style lang="scss" scoped> 59 <style lang="scss" scoped>
60 /deep/.el-menu--horizontal { 60 .navbar-con {
61 display: flex; 61 position: relative;
62 align-items: center;
63 }
64
65 .menubg {
66 line-height: 30px;
67 color: #FFFFFF;
68 margin-right: 5px;
69 background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%);
70 }
71
72 /deep/.el-menu-item {
73 @extend .menubg;
74 }
75 62
76 /deep/.el-submenu { 63 .logo {
77 @extend .menubg; 64 color: #fff;
65 font-size: 26px;
66 font-weight: 700;
67 }
78 } 68 }
79 69
80 /deep/.el-submenu__title { 70 .dataView {
81 line-height: 30px !important; 71 color: #fff;
82 height: 42px !important; 72 width: 120px;
73 height: 32px;
74 background: url('../../image/dp.png');
75 background-size: cover;
76 margin-right: 20px;
83 } 77 }
84 78
85 /deep/.el-submenu__title span { 79 .NoticeBar {
86 font-size: 14px; 80 position: absolute;
81 bottom: 0;
87 } 82 }
88 83
89 // 导航选中背景色 84 .el-dropdown-menu {
90 .xuanzhong { 85 padding: 0 !important;
91 background: linear-gradient(180deg, #73551D 0%, #C09C43 100%); 86 border: 1px solid #EBEEF5;
92 font-weight: 700; 87 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
93 color: #FFFFFF !important; 88 border-radius: 4px 0 0 4px 4px;
94 } 89
90 .el-dropdown-menu__item {
91 text-align: center;
92 margin-top: 0 !important;
93 font-size: 14px;
94 font-family: PingFangSC-Regular, PingFang SC;
95 font-weight: 400;
96 color: #4A4A4A;
97 width: 140px;
98 height: 36px;
99 line-height: 36px;
100 }
95 101
96 /deep/.el-menu-item:hover { 102 .el-dropdown-menu__item:nth-child(6) {
97 @extend .xuanzhong; 103 border-top: 1px solid #EBEEF5;
98 } 104 }
99 105
100 /deep/.el-submenu__title:hover { 106 .popper__arrow {
101 @extend .xuanzhong; 107 top: -11px !important;
102 } 108 left: 110px !important;
109 transform: rotate(0deg) scale(2);
110 }
103 111
104 /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus { 112 .el-dropdown-menu__item:not(.is-disabled):hover,
105 @extend .xuanzhong; 113 .el-dropdown-menu__item:focus {
114 background: #F6F7F9;
115 color: #4A4A4A;
116 }
106 } 117 }
107 118
108
109 .navbar { 119 .navbar {
110 height: $headerHeight; 120 height: $headerHeight;
111 overflow: hidden; 121 overflow: hidden;
112 position: relative; 122 position: relative;
113 background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%); 123 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
124 // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
125 background: #0D1230;
114 display: flex; 126 display: flex;
115 align-items: center; 127 align-items: center;
116 padding: 0 20px; 128 padding-right: 20px;
117 justify-content: space-between; 129 justify-content: space-between;
130 margin-bottom: 10px;
131
132 .header-logo {
133 width: 300px;
134 }
135
136 .backdrop {
137 flex: 1;
138 width: 60%;
139 background-size: 100% 100%;
140 height: $headerHeight;
141 display: flex;
142 align-items: center;
143 }
144
145 .hamburger-container {
146 line-height: 43px;
147 height: 100%;
148 float: left;
149 cursor: pointer;
150 transition: background 0.3s;
151 -webkit-tap-highlight-color: transparent;
152
153 &:hover {
154 background: rgba(0, 0, 0, 0.025);
155 }
156 }
157
158 .breadcrumb-container {
159 float: left;
160 }
118 161
119 .right-menu { 162 .right-menu {
120 float: right; 163 float: right;
...@@ -123,6 +166,11 @@ export default { ...@@ -123,6 +166,11 @@ export default {
123 display: flex; 166 display: flex;
124 align-items: center; 167 align-items: center;
125 168
169 .function {
170 margin: 0 15px;
171 cursor: pointer;
172 }
173
126 .shutdown { 174 .shutdown {
127 font-size: 20px; 175 font-size: 20px;
128 margin-left: 15px; 176 margin-left: 15px;
......
...@@ -13,8 +13,17 @@ export default { ...@@ -13,8 +13,17 @@ export default {
13 } 13 }
14 }, 14 },
15 render (h, context) { 15 render (h, context) {
16 const { title } = context.props 16 const { icon, title } = context.props
17 const vnodes = [] 17 const vnodes = []
18
19 if (icon) {
20 if (icon.includes('el-icon')) {
21 vnodes.push(<i class={[icon, 'sub-el-icon']} />)
22 } else {
23 vnodes.push(<svg-icon icon-class={icon} />)
24 }
25 }
26
18 if (title) { 27 if (title) {
19 vnodes.push(<span slot='title'>{(title)}</span>) 28 vnodes.push(<span slot='title'>{(title)}</span>)
20 } 29 }
...@@ -22,3 +31,11 @@ export default { ...@@ -22,3 +31,11 @@ export default {
22 } 31 }
23 } 32 }
24 </script> 33 </script>
34
35 <style scoped>
36 .sub-el-icon {
37 color: currentColor;
38 width: 1em;
39 height: 1em;
40 }
41 </style>
......
...@@ -88,4 +88,4 @@ export default { ...@@ -88,4 +88,4 @@ export default {
88 } 88 }
89 } 89 }
90 } 90 }
91 </script>
...\ No newline at end of file ...\ No newline at end of file
91 </script>
......
1 export { default as AppMain } from './AppMain' 1 export { default as AppMain } from './AppMain'
2 export { default as Navbar } from './Navbar' 2 export { default as Navbar } from './Navbar'
3 export { default as Sidebar } from './Sidebar/sidebarRight.vue' 3 export { default as Sidebar } from './Sidebar/index.vue'
4 export { default as TagsView } from './TagsView/index.vue' 4 export { default as TagsView } from './TagsView/index.vue'
......
1 <template> 1 <template>
2 <div class="app-wrapper"> 2 <div class="app-wrapper">
3 <navbar /> 3 <navbar />
4 <div class="appMain"> 4 <div class="main-container">
5 <sidebar class="sidebar-container" />
5 <app-main /> 6 <app-main />
6 </div> 7 </div>
7 </div> 8 </div>
...@@ -36,7 +37,7 @@ export default { ...@@ -36,7 +37,7 @@ export default {
36 position: relative; 37 position: relative;
37 height: 100%; 38 height: 100%;
38 width: 100%; 39 width: 100%;
39 40 background-color: $containerbg;
40 41
41 &.mobile.openSidebar { 42 &.mobile.openSidebar {
42 position: fixed; 43 position: fixed;
...@@ -44,14 +45,23 @@ export default { ...@@ -44,14 +45,23 @@ export default {
44 } 45 }
45 } 46 }
46 47
47 .appMain { 48 .drawer-bg {
48 height: calc(100vh - 65px); 49 background: #000;
49 background-color: $containerbg; 50 opacity: 0.3;
51 width: 100%;
52 top: 0;
53 height: 100%;
54 position: absolute;
55 z-index: 999;
56 }
50 57
51 .app-main { 58 .fixed-header {
52 height: 100%; 59 width: 100%;
53 padding: 10px; 60 transition: width 0.28s;
54 box-sizing: border-box; 61 }
55 } 62
63 .el-dropdown-menu--small {
64 padding: 0;
65 width: 5px;
56 } 66 }
57 </style> 67 </style>
......
...@@ -17,21 +17,19 @@ router.beforeEach(async (to, from, next) => { ...@@ -17,21 +17,19 @@ router.beforeEach(async (to, from, next) => {
17 } 17 }
18 if (hasAddRoute) { 18 if (hasAddRoute) {
19 next() 19 next()
20 } else {
21 const { result: getMenuData } = await getMenuInfo()
22 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
23 // 获取用户信息
24 await store.dispatch('user/getUserInfo')
25 router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
26 const routeTo = Cookies.get('routerTo')
27 if (routeTo && routeTo !== '/') {
28 next({ ...to, replace: true })
29 } else {
30 next('/jgHome')
31 }
20 } 32 }
21 // else {
22 // const { result: getMenuData } = await getMenuInfo()
23 // const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
24 // // 获取用户信息
25 // await store.dispatch('user/getUserInfo')
26 // router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
27 // const routeTo = Cookies.get('routerTo')
28 // if (routeTo && routeTo !== '/') {
29 // next({ ...to, replace: true })
30 // } else {
31 // next('/home')
32 // }
33 // }
34 next()
35 NProgress.done() 33 NProgress.done()
36 }) 34 })
37 router.afterEach(to => { 35 router.afterEach(to => {
......
...@@ -3,8 +3,6 @@ import Router from 'vue-router' ...@@ -3,8 +3,6 @@ import Router from 'vue-router'
3 Vue.use(Router) 3 Vue.use(Router)
4 /* Layout */ 4 /* Layout */
5 import Layout from '@/layout' 5 import Layout from '@/layout'
6 import Layout1 from '@/layout1'
7
8 /* Router Modules */ 6 /* Router Modules */
9 // import componentsRouter from './modules/components' 7 // import componentsRouter from './modules/components'
10 export const constantRoutes = [ 8 export const constantRoutes = [
...@@ -26,6 +24,21 @@ export const constantRoutes = [ ...@@ -26,6 +24,21 @@ export const constantRoutes = [
26 path: '/dataView', 24 path: '/dataView',
27 name: 'dataView', 25 name: 'dataView',
28 component: () => import('@/views/dataView/index') 26 component: () => import('@/views/dataView/index')
27 },
28 // 监管首页
29 {
30 path: '/',
31 component: Layout,
32 redirect: '/jgHome',
33 meta: { title: '首页' },
34 children: [
35 {
36 path: 'jgHome',
37 component: () => import('@/views/home/index'),
38 name: 'jgHome',
39 meta: { title: '首页', icon: 'workbench', affix: true }
40 }
41 ]
29 } 42 }
30 ] 43 ]
31 /** 44 /**
...@@ -33,17 +46,18 @@ export const constantRoutes = [ ...@@ -33,17 +46,18 @@ export const constantRoutes = [
33 * the routes that need to be dynamically loaded based on user roles 46 * the routes that need to be dynamically loaded based on user roles
34 */ 47 */
35 export const asyncRoutes = [ 48 export const asyncRoutes = [
36 // 系统首页 49 // 监管首页
37 { 50 {
38 path: '/', 51 path: '/',
39 component: Layout, 52 component: Layout,
40 redirect: '/home', 53 redirect: '/jgHome',
54 meta: { title: '首页' },
41 children: [ 55 children: [
42 { 56 {
43 path: 'home', 57 path: 'jgHome',
44 component: () => import('@/views/home/index'), 58 component: () => import('@/views/home/index'),
45 name: 'home', 59 name: 'jgHome',
46 meta: { title: '工作台', icon: 'workbench', affix: true } 60 meta: { title: '首页', icon: 'workbench', affix: true }
47 } 61 }
48 ] 62 ]
49 }, 63 },
...@@ -54,7 +68,7 @@ export const asyncRoutes = [ ...@@ -54,7 +68,7 @@ export const asyncRoutes = [
54 children: [ 68 children: [
55 { 69 {
56 path: 'index', 70 path: 'index',
57 component: () => import('@/views/jsbwcx/index'), 71 component: () => import('@/views/jsbwcx/index.vue'),
58 name: 'jsbwcx', 72 name: 'jsbwcx',
59 meta: { title: '接收报文查询', icon: 'zsgl' } 73 meta: { title: '接收报文查询', icon: 'zsgl' }
60 } 74 }
...@@ -296,96 +310,10 @@ export const asyncRoutes = [ ...@@ -296,96 +310,10 @@ export const asyncRoutes = [
296 } 310 }
297 ] 311 ]
298 312
299 export const asyncRoutes1 = [
300 // 监管首页
301 {
302 path: '/',
303 component: Layout1,
304 redirect: '/jgHome',
305 meta: { title: '首页' },
306 children: [
307 {
308 path: 'jgHome',
309 component: () => import('@/views/home/index'),
310 name: 'jgHome',
311 meta: { title: '首页', icon: 'workbench', affix: true }
312 }
313 ]
314 },
315 // 接收报文查询
316 {
317 path: '/jsbwcx1',
318 component: Layout1,
319 children: [
320 {
321 path: 'index',
322 component: () => import('@/views/jsbwcx/index'),
323 name: 'jsbwcx',
324 meta: { title: '接收报文查询1', icon: 'zsgl' }
325 }
326 ]
327 },
328 // 上报报文查询
329 {
330 path: '/sbbwcx1',
331 component: Layout1,
332 children: [
333 {
334 path: 'index',
335 component: () => import('@/views/sbbwcx/index'),
336 name: 'sbbwcx',
337 meta: { title: '上报报文查询', icon: 'zsgl' }
338 }
339 ]
340 },
341 // 登簿日志
342 {
343 path: '/dbrzcx1',
344 component: Layout1,
345 children: [
346 {
347 path: 'index',
348 component: () => import('@/views/dbrzcx/index'),
349 name: 'dbrzcx',
350 meta: { title: '登簿日志查询', icon: 'zhcx' }
351 }
352 ]
353 },
354 // 系统管理
355 {
356 path: '/system1',
357 component: Layout1,
358 meta: { title: '系统管理', icon: 'sqcx', breadcrumb: false },
359 redirect: '/system/dictionaries',
360 alwaysShow: true,
361 name: 'system',
362 children: [
363 {
364 path: 'dictionaries',
365 component: () => import('@/views/system/dictionaries/dictionaries.vue'),
366 name: 'dictionaries',
367 meta: { title: '字典管理' }
368 },
369 {
370 path: 'validationRule',
371 component: () => import('@/views/system/validationRule'),
372 name: 'validationRule',
373 meta: { title: '上报效验规则配置' }
374 },
375 {
376 path: 'timedTask',
377 component: () => import('@/views/system/timedTask'),
378 name: 'timedTask',
379 meta: { title: '定时任务' }
380 }
381 ]
382 }
383 ]
384
385 const createRouter = () => 313 const createRouter = () =>
386 new Router({ 314 new Router({
387 scrollBehavior: () => ({ y: 0 }), 315 scrollBehavior: () => ({ y: 0 }),
388 routes: [...constantRoutes, ...asyncRoutes, ...asyncRoutes1] 316 routes: [...constantRoutes, ...asyncRoutes]
389 }) 317 })
390 318
391 const router = createRouter() 319 const router = createRouter()
......
1 import { asyncRoutes, constantRoutes, resetRouter } from '@/router' 1 import { constantRoutes } from '@/router'
2 import asyncRouter from '@/utils/asyncRouter.js' 2 import asyncRouter from '@/utils/asyncRouter.js'
3 const state = { 3 const state = {
4 routes: [], 4 routes: [],
......