Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
355719a5 by 任超
Options

sider样式

1 parent d00c0275
Inline Side-by-side
Showing 13 changed files with 41 additions and 146 deletions
1 <!--控制左侧菜单收缩显示-->
2 <template>
3 <div style="padding: 0 15px;" @click="toggleClick">
4 <svg-icon :class="{'is-active':isActive}" class="hamburg" icon-class="hamburg" />
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: 'Hamburger',
11 props: {
12 isActive: {
13 type: Boolean,
14 default: false
15 }
16 },
17 methods: {
18 toggleClick() {
19 this.$emit('toggleClick')
20 }
21 }
22 }
23 </script>
24
25 <style scoped>
26 .hamburg {
27 display: inline-block;
28 vertical-align: middle;
29 width: 20px;
30 height: 20px;
31 transition: all 0.2s ease-in;
32 }
33
34 .hamburg.is-active {
35 transform: rotate(180deg);
36 }
37 </style>
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1629181827644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5380" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M170.666667 156.444444h682.666666a42.666667 42.666667 0 0 1 0 85.333334H170.666667a42.666667 42.666667 0 1 1 0-85.333334zM448.056889 440.888889H853.333333a42.666667 42.666667 0 0 1 0 85.333333H448.056889a42.666667 42.666667 0 0 1 0-85.333333zM170.666667 725.333333h682.666666a42.666667 42.666667 0 1 1 0 85.333334H170.666667a42.666667 42.666667 0 1 1 0-85.333334z" p-id="5381" fill="#686666"></path><path d="M290.304 493.738667L156.501333 560.64a11.377778 11.377778 0 0 1-16.497777-10.183111V416.654222a11.377778 11.377778 0 0 1 16.497777-10.24l133.802667 66.958222a11.377778 11.377778 0 0 1 0 20.366223z" p-id="5382" fill="#686666"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1628839541389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2080" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z m-8 204a8 8 0 0 0 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56z m504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4 642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" p-id="2081" fill="#686666"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660116174178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13145" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
2 </style></defs><path d="M873.192727 177.105455v504.552727h-721.454545V177.105455zM93.090909 681.658182a59.345455 59.345455 0 0 0 57.716364 60.741818h721.454545a55.854545 55.854545 0 0 0 40.727273-17.92 61.672727 61.672727 0 0 0 17.92-42.821818V177.105455A59.345455 59.345455 0 0 0 873.192727 116.363636h-721.454545a56.087273 56.087273 0 0 0-40.727273 17.687273A62.370909 62.370909 0 0 0 93.090909 177.105455zM781.032727 884.363636a29.556364 29.556364 0 0 0 28.858182-30.254545v-1.396364a31.883636 31.883636 0 0 0-8.378182-21.643636 28.858182 28.858182 0 0 0-20.48-8.843636H242.967273a29.789091 29.789091 0 0 0-28.858182 30.487272v1.396364a29.556364 29.556364 0 0 0 28.858182 30.254545z m-298.589091-61.44h57.716364V742.4h-56.32z m-213.410909-323.956363l144.523637-141.963637 24.669091 27.694546-144.523637 141.963636z m282.996364 0l144.290909-141.963637L721.454545 384.698182l-144.290909 141.963636z m-30.254546 3.723636l-79.592727-93.090909a43.985455 43.985455 0 1 1 29.323637-41.658182 46.545455 46.545455 0 0 1-2.792728 16.058182l80.290909 94.487273a39.563636 39.563636 0 0 1 31.883637 4.189091 43.752727 43.752727 0 0 1 20.712727 37.701818 41.658182 41.658182 0 1 1-83.083636 0 46.545455 46.545455 0 0 1 3.258181-17.687273z m-281.832727 9.309091a41.658182 41.658182 0 1 1 41.658182 43.752727A42.589091 42.589091 0 0 1 239.941818 512z m439.621818-154.996364a41.658182 41.658182 0 1 1 41.890909 43.52 42.589091 42.589091 0 0 1-41.890909-43.52z" p-id="13146" fill="#ffffff"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660115965868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11241" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
2 </style></defs><path d="M650.666667 256h-362.666667a32 32 0 0 0 0 64h362.666667a32 32 0 0 0 0-64zM554.666667 480a32 32 0 0 0-32-32h-234.666667a32 32 0 0 0 0 64h234.666667a32 32 0 0 0 32-32zM288 640a32 32 0 0 0 0 64h106.666667a32 32 0 0 0 0-64z" fill="#ffffff" p-id="11242"></path><path d="M149.333333 906.666667v-789.333334a10.666667 10.666667 0 0 1 10.666667-10.666666h661.333333a10.666667 10.666667 0 0 1 10.666667 10.666666v113.706667a32 32 0 0 0 32 32 32 32 0 0 0 32-32V117.333333A74.666667 74.666667 0 0 0 821.333333 42.666667h-661.333333A74.666667 74.666667 0 0 0 85.333333 117.333333v789.333334A74.666667 74.666667 0 0 0 160 981.333333h478.293333a32 32 0 0 0 32-32 32 32 0 0 0-32-32H160a10.666667 10.666667 0 0 1-10.666667-10.666666z" fill="#ffffff" p-id="11243"></path><path d="M864 352h-85.333333A74.666667 74.666667 0 0 0 704 426.666667v397.866666a53.333333 53.333333 0 0 0 11.733333 33.28l64 80a53.333333 53.333333 0 0 0 83.2 0l64-80a53.333333 53.333333 0 0 0 11.733334-33.28V426.666667a74.666667 74.666667 0 0 0-74.666667-74.666667z m10.666667 469.333333l-53.333334 66.133334-53.333333-66.773334V576h106.666667zM874.666667 512h-106.666667v-85.333333a10.666667 10.666667 0 0 1 10.666667-10.666667h85.333333a10.666667 10.666667 0 0 1 10.666667 10.666667z" fill="#ffffff" p-id="11244"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="navbar"> 2 <div class="navbar">
3 <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
4 @toggleClick="toggleSideBar" />
5 <div class="right-menu"> 3 <div class="right-menu">
6 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand"> 4 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand">
7 <div class="avatar-wrapper"> 5 <div class="avatar-wrapper">
...@@ -18,18 +16,11 @@ ...@@ -18,18 +16,11 @@
18 </template> 16 </template>
19 <script> 17 <script>
20 import { mapGetters } from 'vuex' 18 import { mapGetters } from 'vuex'
21 import Hamburger from '@/components/Hamburger'
22 export default { 19 export default {
23 components: {
24 Hamburger
25 },
26 computed: { 20 computed: {
27 ...mapGetters(['sidebar', 'avatar', 'name']) 21 ...mapGetters(['sidebar', 'avatar', 'name'])
28 }, 22 },
29 methods: { 23 methods: {
30 toggleSideBar () {
31 this.$store.dispatch('app/toggleSideBar')
32 },
33 searchMessageCenter () { 24 searchMessageCenter () {
34 this.$router.push({ name: 'messagecenter' }) 25 this.$router.push({ name: 'messagecenter' })
35 }, 26 },
......
...@@ -69,7 +69,6 @@ export default { ...@@ -69,7 +69,6 @@ export default {
69 } 69 }
70 70
71 & .sidebar-title { 71 & .sidebar-title {
72 // display: inline-block;
73 margin: 0; 72 margin: 0;
74 margin-top: 10px; 73 margin-top: 10px;
75 margin-bottom: 20px; 74 margin-bottom: 20px;
......
1 <template> 1 <template>
2 <div :class="{ 'has-logo': showLogo }"> 2 <div>
3 <logo v-if="showLogo" :collapse="isCollapse" />
4 <el-scrollbar wrap-class="scrollbar-wrapper"> 3 <el-scrollbar wrap-class="scrollbar-wrapper">
5 <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" 4 <el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
6 :text-color="variables.menuText" :unique-opened="true" :active-text-color="variables.menuActiveText" 5 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
7 :collapse-transition="false" mode="vertical"> 6 mode="vertical">
8 <!-- 权限菜单 --> 7 <!-- 权限菜单 -->
9 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> --> 8 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
10 <!-- 菜单全部展示 --> 9 <!-- 菜单全部展示 -->
...@@ -33,15 +32,9 @@ export default { ...@@ -33,15 +32,9 @@ export default {
33 } 32 }
34 return path 33 return path
35 }, 34 },
36 showLogo () {
37 return this.$store.state.settings.sidebarLogo
38 },
39 variables () { 35 variables () {
40 return variables 36 return variables
41 }, 37 },
42 isCollapse () {
43 return !this.sidebar.opened
44 },
45 asyncRoutes () { 38 asyncRoutes () {
46 return asyncRoutes 39 return asyncRoutes
47 }, 40 },
......
1 <template> 1 <template>
2 <div :class="classObj" class="app-wrapper"> 2 <div class="app-wrapper">
3 <sidebar class="sidebar-container" /> 3 <sidebar class="sidebar-container" />
4 <div :class="{ hasTagsView: needTagsView }" class="main-container"> 4 <div :class="{ hasTagsView: needTagsView }" class="main-container">
5 <div :class="{ 'fixed-header': fixedHeader }"> 5 <div :class="{ 'fixed-header': fixedHeader }">
...@@ -28,20 +28,7 @@ export default { ...@@ -28,20 +28,7 @@ export default {
28 sidebar: state => state.app.sidebar, 28 sidebar: state => state.app.sidebar,
29 needTagsView: state => state.settings.tagsView, 29 needTagsView: state => state.settings.tagsView,
30 fixedHeader: state => state.settings.fixedHeader 30 fixedHeader: state => state.settings.fixedHeader
31 }), 31 })
32 classObj () {
33 return {
34 hideSidebar: !this.sidebar.opened,
35 openSidebar: this.sidebar.opened,
36 withoutAnimation: this.sidebar.withoutAnimation,
37 mobile: this.device === 'mobile'
38 }
39 }
40 },
41 methods: {
42 handleClickOutside () {
43 this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
44 }
45 } 32 }
46 } 33 }
47 </script> 34 </script>
......
...@@ -37,13 +37,13 @@ export const asyncRoutes = [ ...@@ -37,13 +37,13 @@ export const asyncRoutes = [
37 path: '/', 37 path: '/',
38 component: Layout, 38 component: Layout,
39 redirect: '/home', 39 redirect: '/home',
40 meta: { title: '首页', icon: 'fykf' }, 40 meta: { title: '首页' },
41 children: [ 41 children: [
42 { 42 {
43 path: 'home', 43 path: 'home',
44 component: () => import('@/views/home/index'), 44 component: () => import('@/views/home/index'),
45 name: 'Dashboard', 45 name: 'Dashboard',
46 meta: { title: '工作台', icon: 'dashboard', affix: true } 46 meta: { title: '工作台', icon: 'workbench', affix: true }
47 } 47 }
48 ] 48 ]
49 }, 49 },
...@@ -52,7 +52,7 @@ export const asyncRoutes = [ ...@@ -52,7 +52,7 @@ export const asyncRoutes = [
52 id: '3', 52 id: '3',
53 parentId: null, 53 parentId: null,
54 component: Layout, 54 component: Layout,
55 meta: { title: '业务办理', icon: 'fykf' }, 55 meta: { title: '业务办理', icon: 'ywbl' },
56 redirect: '/ywbl/ywsq/ywsq', 56 redirect: '/ywbl/ywsq/ywsq',
57 alwaysShow: true, 57 alwaysShow: true,
58 name: 'ywbl', 58 name: 'ywbl',
......
1 import Cookies from 'js-cookie' 1 import Cookies from 'js-cookie'
2 2
3 const state = { 3 const state = {
4 sidebar: {
5 opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
6 withoutAnimation: false
7 },
8 size: 'small' 4 size: 'small'
9 } 5 }
10 6
11 const mutations = { 7 const mutations = {
12 TOGGLE_SIDEBAR: state => {
13 state.sidebar.opened = !state.sidebar.opened
14 state.sidebar.withoutAnimation = false
15 if (state.sidebar.opened) {
16 Cookies.set('sidebarStatus', 1)
17 } else {
18 Cookies.set('sidebarStatus', 0)
19 }
20 },
21 CLOSE_SIDEBAR: (state, withoutAnimation) => {
22 Cookies.set('sidebarStatus', 0)
23 state.sidebar.opened = false
24 state.sidebar.withoutAnimation = withoutAnimation
25 },
26 SET_SIZE: (state, size) => { 8 SET_SIZE: (state, size) => {
27 state.size = size 9 state.size = size
28 Cookies.set('size', size) 10 Cookies.set('size', size)
...@@ -30,15 +12,9 @@ const mutations = { ...@@ -30,15 +12,9 @@ const mutations = {
30 } 12 }
31 13
32 const actions = { 14 const actions = {
33 toggleSideBar ({ commit }) {
34 commit('TOGGLE_SIDEBAR')
35 },
36 closeSideBar ({ commit }, { withoutAnimation }) { 15 closeSideBar ({ commit }, { withoutAnimation }) {
37 commit('CLOSE_SIDEBAR', withoutAnimation) 16 commit('CLOSE_SIDEBAR', withoutAnimation)
38 }, 17 },
39 toggleDevice ({ commit }, device) {
40 commit('TOGGLE_DEVICE', device)
41 },
42 setSize ({ commit }, size) { 18 setSize ({ commit }, size) {
43 commit('SET_SIZE', size) 19 commit('SET_SIZE', size)
44 } 20 }
......
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
8 .sidebar-container { 8 .sidebar-container {
9 transition: width 0.28s; 9 transition: width 0.28s;
10 width: $sideBarWidth !important; 10 width: $sideBarWidth !important;
11 // background-color: $menuBg;
12 height: 100%; 11 height: 100%;
13 position: fixed; 12 position: fixed;
14 font-size: 0px; 13 font-size: 0px;
...@@ -16,14 +15,9 @@ ...@@ -16,14 +15,9 @@
16 bottom: 0; 15 bottom: 0;
17 left: 0; 16 left: 0;
18 z-index: 1001; 17 z-index: 1001;
19 background-image: linear-gradient(180deg, #25A0FE 2%, #43BDFF 100%); 18 background-color: $subMenuBg;
20 border-radius: 0 12px 12px 0;
21 overflow: hidden; 19 overflow: hidden;
22 20
23
24
25
26 // reset element-ui css
27 .horizontal-collapse-transition { 21 .horizontal-collapse-transition {
28 transition: 0s width ease-in-out, 0s padding-left ease-in-out, 22 transition: 0s width ease-in-out, 0s padding-left ease-in-out,
29 0s padding-right ease-in-out; 23 0s padding-right ease-in-out;
...@@ -98,27 +92,26 @@ ...@@ -98,27 +92,26 @@
98 background-color: transparent !important; 92 background-color: transparent !important;
99 93
100 &:hover { 94 &:hover {
101 color: #1ea6f8 !important; 95 color: $subMenuActiveText !important;
102 background-color: #fff !important; 96 background-color: $subMenuHover !important;
103 97
104 .svg-icon, 98 .svg-icon,
105 i, 99 i,
106 span { 100 span {
107 color: #1ea6f8 !important; 101 color: $subMenuActiveText !important;
108 } 102 }
109 } 103 }
110 } 104 }
111 105
112 // 没有子级 106 // 没有子级
113 .submenu-title-noDropdown { 107 .submenu-title-noDropdown {
114 background-color: transparent !important;
115 margin-left: 15px;
116 padding-left: 10px !important;
117 color: $menuText; 108 color: $menuText;
109 border-radius: 6px;
110 padding-left: 10px !important;
118 111
119 &:hover { 112 &:hover {
120 color: #1ea6f8 !important; 113 color: $menuActiveText !important;
121 background-color: #fff !important; 114 background-color: $subMenuHover !important;
122 115
123 .svg-icon { 116 .svg-icon {
124 color: #1ea6f8 !important; 117 color: #1ea6f8 !important;
...@@ -132,8 +125,8 @@ ...@@ -132,8 +125,8 @@
132 125
133 .submenu-title-noDropdown.is-active, 126 .submenu-title-noDropdown.is-active,
134 .el-submenu__title.is-active { 127 .el-submenu__title.is-active {
135 color: #1ea6f8 !important; 128 color: $menuActiveText;
136 background-color: #fff !important; 129 background-color: $menuHover !important;
137 130
138 .svg-icon { 131 .svg-icon {
139 color: #1ea6f8 !important; 132 color: #1ea6f8 !important;
...@@ -148,7 +141,8 @@ ...@@ -148,7 +141,8 @@
148 .el-submenu__title { 141 .el-submenu__title {
149 font-weight: 600; 142 font-weight: 600;
150 font-size: $sideBarFontSize; 143 font-size: $sideBarFontSize;
151 border-radius: 10px 0px 0px 10px; 144 margin: 0 20px;
145 border-radius: 6px;
152 146
153 >i { 147 >i {
154 color: $subMenuActiveText !important; 148 color: $subMenuActiveText !important;
...@@ -180,27 +174,21 @@ ...@@ -180,27 +174,21 @@
180 & .nest-menu .el-submenu>.el-submenu__title, 174 & .nest-menu .el-submenu>.el-submenu__title,
181 & .el-submenu .el-menu-item { 175 & .el-submenu .el-menu-item {
182 &.is-active { 176 &.is-active {
183 background-color: #fff !important; 177 background-color: $subMenuHover !important;
184 color: #1ea6f8 !important; 178 color: $menuActiveText !important;
185 } 179 }
186 180
187 &:hover { 181 &:hover {
188 background-color: #fff !important; 182 background-color: $subMenuHover !important;
189 color: #1ea6f8 !important; 183 color: $menuActiveText !important;
190 } 184 }
191 185
192 // min-width: $sideBarWidth !important; 186 min-width: 130px !important;
193 min-width: 152px !important;
194 background-color: transparent !important; 187 background-color: transparent !important;
195 font-weight: 600; 188 font-weight: 600;
196 font-size: $sideBarFontSize; 189 font-size: $sideBarFontSize;
197 padding: 0 0 0 45px !important; 190 margin: 0 20px;
198 border-radius: 10px 0px 0px 10px; 191 border-radius: 6px;
199 margin-left: 13px;
200
201 &:hover {
202 background-color: #fff !important;
203 }
204 } 192 }
205 } 193 }
206 194
...@@ -318,21 +306,17 @@ ...@@ -318,21 +306,17 @@
318 border-bottom-right-radius: 8px; 306 border-bottom-right-radius: 8px;
319 font-weight: 600 !important; 307 font-weight: 600 !important;
320 font-size: 15px !important; 308 font-size: 15px !important;
321 background-color: #32ACFE !important; 309 background-color: $menuHover !important;
322 color: #fff !important; 310 color: $menuText !important;
323 311
324 &:hover { 312 &:hover {
325 // you can use $subMenuHover 313 background-color: $menuHover !important;
326 // background-color: $menuHover !important; 314 opacity: .9;
327 // opacity: .9;
328 background-color: #fff !important;
329 color: #32ACFE !important;
330 315
331 .svg-icon, 316 .svg-icon,
332 i, 317 i,
333 span { 318 span {
334 color: #32ACFE !important; 319 color: $menuText;
335
336 } 320 }
337 } 321 }
338 } 322 }
......
...@@ -13,11 +13,11 @@ $menuText:#ffffff; ...@@ -13,11 +13,11 @@ $menuText:#ffffff;
13 $menuActiveText:#ffffff; 13 $menuActiveText:#ffffff;
14 $subMenuActiveText:#ffffff; // https://github.com/ElemeFE/element/issues/12951 14 $subMenuActiveText:#ffffff; // https://github.com/ElemeFE/element/issues/12951
15 15
16 $menuBg:#3983fc; 16 $menuBg:#202B3D;
17 $menuHover:#2e69ca; 17 $menuHover:#0794FF;
18 18
19 $subMenuBg:#3983fc; 19 $subMenuBg:#202B3D;
20 $subMenuHover:#2e69ca; 20 $subMenuHover:#0794FF;
21 21
22 $sideBarWidth: 170px; 22 $sideBarWidth: 170px;
23 $sideBarFontSize:15px; 23 $sideBarFontSize:15px;
......