Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
0c7b3e5e by 任超
Options

style:导航样式

1 parent dae4de37
Inline Side-by-side
Showing 7 changed files with 113 additions and 124 deletions
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="backdrop"> 4 <div class="sidebarLeft">
5 <sidebar /> 5 <sidebarLeft />
6 </div> --> 6 </div>
7 <div class="right-menu"> 7 <div class="sidebarRight d-center">
8 <div class="dataView pointer" @click="handleDataView">大屏展示</div> 8 <sidebarRight />
9 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> 9 <div class="right-menu">
10 <div class="avatar-wrapper"> 10 <div class="dataView pointer" @click="handleDataView">大屏展示</div>
11 <span style="padding-right:10px">{{ name }}</span> 11 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
12 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> 12 <div class="avatar-wrapper">
13 </div> 13 <span style="padding-right:10px">{{ name }}</span>
14 <el-dropdown-menu slot="dropdown"> 14 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
15 <el-dropdown-item command="a">个人中心</el-dropdown-item> 15 </div>
16 <el-dropdown-item command="b">退出</el-dropdown-item> 16 <el-dropdown-menu slot="dropdown">
17 </el-dropdown-menu> 17 <el-dropdown-item command="a">个人中心</el-dropdown-item>
18 </el-dropdown> 18 <el-dropdown-item command="b">退出</el-dropdown-item>
19 </el-dropdown-menu>
20 </el-dropdown>
21 </div>
19 </div> 22 </div>
20 </div> 23 </div>
21 </div> 24 </div>
22 </template> 25 </template>
23 <script> 26 <script>
24 import defaultSettings from '@/settings' 27 import defaultSettings from '@/settings'
25 import Sidebar from './Sidebar' 28 import sidebarLeft from './Sidebar/sidebarLeft'
29 import sidebarRight from './Sidebar/sidebarRight'
26 import { mapGetters } from 'vuex' 30 import { mapGetters } from 'vuex'
27 export default { 31 export default {
28 components: { 32 components: {
29 Sidebar, 33 sidebarLeft,
34 sidebarRight
30 }, 35 },
31 computed: { 36 computed: {
32 ...mapGetters(['sidebar', 'avatar', 'name']) 37 ...mapGetters(['sidebar', 'avatar', 'name'])
...@@ -46,58 +51,61 @@ export default { ...@@ -46,58 +51,61 @@ export default {
46 }, 51 },
47 handleCommand (command) { 52 handleCommand (command) {
48 if (command == 'a') { 53 if (command == 'a') {
49 } else {
50
51 } 54 }
52 } 55 }
53 } 56 }
54 } 57 }
55 </script> 58 </script>
56 <style lang="scss" scoped> 59 <style lang="scss" scoped>
57 .dataView { 60 /deep/.el-menu--horizontal {
58 color: #fff; 61 display: flex;
62 align-items: center;
59 } 63 }
60 64
61 .NoticeBar { 65 .menubg {
62 position: absolute; 66 line-height: 30px;
63 bottom: 0; 67 color: #FFFFFF;
68 margin-right: 5px;
69 background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%);
64 } 70 }
65 71
66 .el-dropdown-menu { 72 /deep/.el-menu-item {
67 padding: 0 !important; 73 @extend .menubg;
68 border: 1px solid #EBEEF5; 74 }
69 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
70 border-radius: 4px 0 0 4px 4px;
71
72 .el-dropdown-menu__item {
73 text-align: center;
74 margin-top: 0 !important;
75 font-size: 14px;
76 font-family: PingFangSC-Regular, PingFang SC;
77 font-weight: 400;
78 color: #4A4A4A;
79 width: 140px;
80 height: 36px;
81 line-height: 36px;
82 }
83 75
84 .el-dropdown-menu__item:nth-child(6) { 76 /deep/.el-submenu {
85 border-top: 1px solid #EBEEF5; 77 @extend .menubg;
86 } 78 }
87 79
88 .popper__arrow { 80 /deep/.el-submenu__title {
89 top: -11px !important; 81 line-height: 30px !important;
90 left: 110px !important; 82 height: 42px !important;
91 transform: rotate(0deg) scale(2); 83 }
92 }
93 84
94 .el-dropdown-menu__item:not(.is-disabled):hover, 85 /deep/.el-submenu__title span {
95 .el-dropdown-menu__item:focus { 86 font-size: 14px;
96 background: #F6F7F9; 87 }
97 color: #4A4A4A; 88
98 } 89 // 导航选中背景色
90 .xuanzhong {
91 background: linear-gradient(180deg, #73551D 0%, #C09C43 100%);
92 font-weight: 700;
93 color: #FFFFFF !important;
94 }
95
96 /deep/.el-menu-item:hover {
97 @extend .xuanzhong;
98 }
99
100 /deep/.el-submenu__title:hover {
101 @extend .xuanzhong;
102 }
103
104 /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
105 @extend .xuanzhong;
99 } 106 }
100 107
108
101 .navbar { 109 .navbar {
102 height: $headerHeight; 110 height: $headerHeight;
103 overflow: hidden; 111 overflow: hidden;
...@@ -108,27 +116,6 @@ export default { ...@@ -108,27 +116,6 @@ export default {
108 padding: 0 20px; 116 padding: 0 20px;
109 justify-content: space-between; 117 justify-content: space-between;
110 118
111 .header-logo {
112 width: 300px;
113 }
114
115 .hamburger-container {
116 line-height: 43px;
117 height: 100%;
118 float: left;
119 cursor: pointer;
120 transition: background 0.3s;
121 -webkit-tap-highlight-color: transparent;
122
123 &:hover {
124 background: rgba(0, 0, 0, 0.025);
125 }
126 }
127
128 .breadcrumb-container {
129 float: left;
130 }
131
132 .right-menu { 119 .right-menu {
133 float: right; 120 float: right;
134 height: 100%; 121 height: 100%;
...@@ -136,11 +123,6 @@ export default { ...@@ -136,11 +123,6 @@ export default {
136 display: flex; 123 display: flex;
137 align-items: center; 124 align-items: center;
138 125
139 .function {
140 margin: 0 15px;
141 cursor: pointer;
142 }
143
144 .shutdown { 126 .shutdown {
145 font-size: 20px; 127 font-size: 20px;
146 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>
......
1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 -->
4 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
5 <!-- 菜单全部展示 -->
6 <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
7 </el-menu>
8 </template>
9
10 <script>
11 import { mapGetters } from 'vuex'
12 import Logo from './Logo'
13 import SidebarItem from './SidebarItem'
14 import variables from '@/styles/variables.scss'
15 import { asyncRoutes1 } from '@/router'
16 export default {
17 components: { SidebarItem, Logo },
18 computed: {
19 ...mapGetters(['permission_routes', 'sidebar']),
20 activeMenu () {
21 const route = this.$route
22 const { meta, path } = route
23 if (meta.activeMenu) {
24 return meta.activeMenu
25 }
26 return path
27 },
28 variables () {
29 return variables
30 },
31 asyncRoutes () {
32 return asyncRoutes1.slice(0, 3)
33 }
34 }
35 }
36 </script>
37 <style scoped lang="scss">
38 .el-menu--horizontal {
39 display: flex;
40 background: none !important;
41 }
42 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <el-menu router :default-active="activeMenu" mode="horizontal"> 3 <!-- 权限菜单 -->
4 <!-- 权限菜单 --> 4 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
5 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :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>
9 </div>
10 </template> 8 </template>
11 9
12 <script> 10 <script>
...@@ -31,7 +29,7 @@ export default { ...@@ -31,7 +29,7 @@ export default {
31 return variables 29 return variables
32 }, 30 },
33 asyncRoutes () { 31 asyncRoutes () {
34 return asyncRoutes1 32 return asyncRoutes1.slice(3, asyncRoutes1.length)
35 } 33 }
36 } 34 }
37 } 35 }
......
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'
......
...@@ -298,20 +298,6 @@ export const asyncRoutes = [ ...@@ -298,20 +298,6 @@ export const asyncRoutes = [
298 298
299 export const asyncRoutes1 = [ 299 export const asyncRoutes1 = [
300 // 监管首页 300 // 监管首页
301 // {
302 // path: '/',
303 // component: Layout1,
304 // redirect: '/jgHome',
305 // meta: { title: '首页' },
306 // children: [
307 // {
308 // path: 'jgHome',
309 // component: () => import('@/views/jgHome/index'),
310 // name: 'jgHome',
311 // meta: { title: '首页', icon: 'workbench', affix: true }
312 // }
313 // ]
314 // },
315 { 301 {
316 path: '/', 302 path: '/',
317 component: Layout1, 303 component: Layout1,
......
...@@ -81,9 +81,7 @@ ...@@ -81,9 +81,7 @@
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84
85 </template> 84 </template>
86
87 <script> 85 <script>
88 import drawMixin from "../../utils/drawMixin"; 86 import drawMixin from "../../utils/drawMixin";
89 import { formatTime } from '../../utils/index.js' 87 import { formatTime } from '../../utils/index.js'
......