Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
b57829e9 by 任超
Options

style:菜单样式

1 parent 34327f7f
Inline Side-by-side
Showing 2 changed files with 26 additions and 14 deletions
...@@ -64,14 +64,15 @@ ...@@ -64,14 +64,15 @@
64 64
65 // 有子级 65 // 有子级
66 .el-submenu__title { 66 .el-submenu__title {
67 margin-left: 13px; 67 // margin-left: 13px;
68 padding-left: 10px !important; 68 // padding-left: 10px !important;
69 color: $menuText; 69 color: $menuText;
70 background-color: transparent !important; 70 background-color: transparent !important;
71 border-bottom: 1px solid $sliderBorderColor;
71 72
72 &:hover { 73 &:hover {
73 color: $subMenuActiveText !important; 74 color: $subMenuActiveText !important;
74 background-color: $subMenuHover !important; 75 background-color: $menuHover !important;
75 76
76 .svg-icon, 77 .svg-icon,
77 i, 78 i,
...@@ -84,10 +85,11 @@ ...@@ -84,10 +85,11 @@
84 // 没有子级 85 // 没有子级
85 .submenu-title-noDropdown { 86 .submenu-title-noDropdown {
86 color: $menuText; 87 color: $menuText;
87 border-radius: 6px; 88 border-bottom: 1px solid $sliderBorderColor;
88 padding-left: 10px !important;
89 89
90 &:hover { 90 // border-radius: 6px;
91 // padding-left: 10px !important;
92 b &:hover {
91 color: $menuActiveText !important; 93 color: $menuActiveText !important;
92 background-color: $subMenuHover !important; 94 background-color: $subMenuHover !important;
93 95
...@@ -119,8 +121,8 @@ ...@@ -119,8 +121,8 @@
119 .el-submenu__title { 121 .el-submenu__title {
120 font-weight: 600; 122 font-weight: 600;
121 font-size: $sideBarFontSize; 123 font-size: $sideBarFontSize;
122 margin: 0 10px; 124 // margin: 0 10px;
123 border-radius: 6px; 125 // border-radius: 6px;
124 126
125 >i { 127 >i {
126 color: $subMenuActiveText !important; 128 color: $subMenuActiveText !important;
...@@ -151,22 +153,30 @@ ...@@ -151,22 +153,30 @@
151 153
152 & .nest-menu .el-submenu>.el-submenu__title, 154 & .nest-menu .el-submenu>.el-submenu__title,
153 & .el-submenu .el-menu-item { 155 & .el-submenu .el-menu-item {
156
157
154 &.is-active { 158 &.is-active {
155 background-color: $subMenuHover !important; 159 background-color: $subMenuHover !important;
156 color: $menuActiveText !important; 160 color: $menuActiveText !important;
161 border-bottom: 1px solid $sliderBorderColor;
157 } 162 }
158 163
159 &:hover { 164 &:hover {
160 background-color: $subMenuHover !important; 165 background-color: $subMenuHover !important;
161 color: $menuActiveText !important; 166 color: $menuActiveText !important;
167 border-bottom: 1px solid $sliderBorderColor;
162 } 168 }
163 169
164 min-width: 130px !important; 170 min-width: 130px !important;
165 background-color: transparent !important; 171 background-color: transparent !important;
166 font-weight: 600; 172 font-weight: 600;
167 font-size: $sideBarFontSize; 173 font-size: $sideBarFontSize;
168 margin: 0 10px; 174
169 border-radius: 6px; 175 // margin: 0 10px;
176 // border-radius: 6px;
177 span {
178 margin-left: 10px;
179 }
170 } 180 }
171 } 181 }
172 182
...@@ -279,9 +289,9 @@ ...@@ -279,9 +289,9 @@
279 289
280 .nest-menu .el-submenu>.el-submenu__title, 290 .nest-menu .el-submenu>.el-submenu__title,
281 .el-menu-item { 291 .el-menu-item {
282 width: calc(100% - 12px); 292 // width: calc(100% - 12px);
283 border-top-right-radius: 8px; 293 // border-top-right-radius: 8px;
284 border-bottom-right-radius: 8px; 294 // border-bottom-right-radius: 8px;
285 font-weight: 600 !important; 295 font-weight: 600 !important;
286 font-size: 15px !important; 296 font-size: 15px !important;
287 background-color: $menuHover !important; 297 background-color: $menuHover !important;
......
...@@ -17,7 +17,7 @@ $menuActiveText:#ffffff; ...@@ -17,7 +17,7 @@ $menuActiveText:#ffffff;
17 $subMenuActiveText:#ffffff; 17 $subMenuActiveText:#ffffff;
18 18
19 $menuBg:#202B3D; 19 $menuBg:#202B3D;
20 $menuHover:#0794FF; 20 $menuHover:#226ca5;
21 21
22 $subMenuBg:#202B3D; 22 $subMenuBg:#202B3D;
23 $subMenuHover:#0794FF; 23 $subMenuHover:#0794FF;
...@@ -27,6 +27,8 @@ $sideBarFontSize:15px; ...@@ -27,6 +27,8 @@ $sideBarFontSize:15px;
27 27
28 // border颜色 28 // border颜色
29 $borderColor: #EBEEF5; 29 $borderColor: #EBEEF5;
30 $sliderBorderColor: #909399;
31
30 32
31 // the :export directive is the magic sauce for webpack 33 // the :export directive is the magic sauce for webpack
32 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass 34 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......