朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 fca045122cdd4bea5b7a0cc19a112c75999ba7b4 1 个父辈 d1218103

左侧导航栏和顶部导航栏宽度字体和样式更新

内嵌 并排对比
正在显示 3 个修改的文件 包含 29 行增加 和 28 行删除
1 <template> 1 <template>
2 <div style="width: 100%"> 2 <div style="width: 100%">
3 <Assembly></Assembly> 3 <Assembly></Assembly>
4 -  
5 -  
6 <el-tabs v-model="activeIndex" 4 <el-tabs v-model="activeIndex"
7 v-if="openTab.length" 5 v-if="openTab.length"
8 type="card" 6 type="card"
@@ -47,11 +47,11 @@ @@ -47,11 +47,11 @@
47 <!--导航菜单--> 47 <!--导航菜单-->
48 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" 48 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen"
49 @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed" 49 @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed"
50 - style="width: 380px;height: 100%"> 50 + style="width: 300px;height: 100%">
51 <!-- ;overflow: scroll--> 51 <!-- ;overflow: scroll-->
52 <div align="center" style="background-color: #2b2f3a"> 52 <div align="center" style="background-color: #2b2f3a">
53 <img src="./logo1.png"> 53 <img src="./logo1.png">
54 - <h1 style="color:white;display: inline-block">航空物流公共信息服务平台</h1> 54 + <h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</h1>
55 </div> 55 </div>
56 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> 56 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
57 <el-submenu :index="index+''" v-if="!item.leaf"> 57 <el-submenu :index="index+''" v-if="!item.leaf">
@@ -336,8 +336,8 @@ @@ -336,8 +336,8 @@
336 padding-left:10px; 336 padding-left:10px;
337 padding-right:10px; 337 padding-right:10px;
338 border-color: rgba(238,241,146,0.3); 338 border-color: rgba(238,241,146,0.3);
339 - border-right-width: 1px;  
340 - border-right-style: solid; 339 + border-right-width: 0px;
  340 + /*border-right-style: solid;*/
341 img { 341 img {
342 width: 40px; 342 width: 40px;
343 float: left; 343 float: left;
@@ -348,7 +348,7 @@ @@ -348,7 +348,7 @@
348 } 348 }
349 } 349 }
350 .logo-width{ 350 .logo-width{
351 - width:380px; 351 + width:300px;
352 } 352 }
353 .logo-collapse-width{ 353 .logo-collapse-width{
354 width:60px 354 width:60px
@@ -374,9 +374,9 @@ @@ -374,9 +374,9 @@
374 bottom: 0px; 374 bottom: 0px;
375 overflow: hidden; 375 overflow: hidden;
376 aside { 376 aside {
377 - flex:0 0 230px;  
378 - width: 230px;  
379 - overflow-y: scroll; 377 + flex:0 0 300px;
  378 + width: 300px;
  379 + /*overflow-y: scroll;*/
380 background: rgb(38,56,76); 380 background: rgb(38,56,76);
381 // position: absolute; 381 // position: absolute;
382 // top: 0px; 382 // top: 0px;
@@ -403,7 +403,7 @@ @@ -403,7 +403,7 @@
403 } 403 }
404 .menu-expanded{ 404 .menu-expanded{
405 /*底层滚动框宽度*/ 405 /*底层滚动框宽度*/
406 - flex:0 0 380px; 406 + flex:0 0 300px;
407 width: 230px; 407 width: 230px;
408 } 408 }
409 .menu-expanded ul{ 409 .menu-expanded ul{
@@ -449,6 +449,7 @@ @@ -449,6 +449,7 @@
449 aside { 449 aside {
450 .el-menu{ 450 .el-menu{
451 height: 100%; 451 height: 100%;
  452 + /*width: 300px!important;*/
452 background: #26384c; 453 background: #26384c;
453 .el-menu-item { 454 .el-menu-item {
454 i{ 455 i{
@@ -456,11 +457,12 @@ @@ -456,11 +457,12 @@
456 } 457 }
457 color: white; 458 color: white;
458 } 459 }
459 - .el-menu-item.is-active{  
460 - color:#e6a23c;  
461 - } 460 + /*.el-menu-item.is-active{*/
  461 + /* color:#e6a23c;*/
  462 + /*}*/
462 .el-menu-item:hover,.el-menu-item:focus{ 463 .el-menu-item:hover,.el-menu-item:focus{
463 - background-color: #1a4496; 464 + background-color: #4f6273;
  465 + /*border-left: 3px solid #be1fd9;*/
464 } 466 }
465 .el-submenu { 467 .el-submenu {
466 ul.el-menu.el-menu--inline{ 468 ul.el-menu.el-menu--inline{
@@ -473,7 +475,9 @@ @@ -473,7 +475,9 @@
473 } 475 }
474 } 476 }
475 .el-submenu__title:hover { 477 .el-submenu__title:hover {
476 - background-color: #1a4496; 478 + background-color: #4f6273;
  479 + border-left: 3px solid #be1fd9
  480 +
477 } 481 }
478 } 482 }
479 } 483 }
@@ -9,7 +9,6 @@ @@ -9,7 +9,6 @@
9 <!-- </el-col>--> 9 <!-- </el-col>-->
10 <el-col :span="18" id="menu" > 10 <el-col :span="18" id="menu" >
11 <ul> 11 <ul>
12 -  
13 <li><a href="" class="drop">政府监管服务</a> 12 <li><a href="" class="drop">政府监管服务</a>
14 <div class="dropdown_1column"> 13 <div class="dropdown_1column">
15 <ul class="simple"> 14 <ul class="simple">
@@ -57,8 +56,8 @@ @@ -57,8 +56,8 @@
57 </div> 56 </div>
58 </li> 57 </li>
59 <li> 58 <li>
60 - <el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 130px">  
61 - <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img src="~img/faceDefault.jpg"/></span> 59 + <el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 100px">
  60 + <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
62 <!-- ../../assets/img/faceDefault.jpg--> 61 <!-- ../../assets/img/faceDefault.jpg-->
63 <el-dropdown-menu slot="dropdown"> 62 <el-dropdown-menu slot="dropdown">
64 <el-dropdown-item>我的消息</el-dropdown-item> 63 <el-dropdown-item>我的消息</el-dropdown-item>
@@ -244,24 +243,24 @@ @@ -244,24 +243,24 @@
244 li{ 243 li{
245 list-style-type: none; 244 list-style-type: none;
246 } 245 }
247 - a{font-size: 14px;} 246 + a{font-size: 12px;}
248 247
249 /*菜单栏底层div*/ 248 /*菜单栏底层div*/
250 #menu,#menu2 { 249 #menu,#menu2 {
251 - height: 50px;  
252 - border-bottom: 3px solid rgb(111,130,148); 250 + height: 48px;
  251 + border-bottom: 2px solid #6f8294;
253 position:relative; 252 position:relative;
254 z-index: 999; 253 z-index: 999;
255 254
256 float: right; 255 float: right;
257 - width: 900px; 256 + width: 730px;
258 257
259 } 258 }
260 /*一级菜单栏样式*/ 259 /*一级菜单栏样式*/
261 #menu li{ 260 #menu li{
262 /*float: right;*/ 261 /*float: right;*/
263 - width: 120px;  
264 - height: 50px; 262 + width: 117px;
  263 + /*height: 50px;*/
265 text-align: center; 264 text-align: center;
266 /*position:relative;*/ 265 /*position:relative;*/
267 border:none; 266 border:none;
@@ -271,7 +270,7 @@ @@ -271,7 +270,7 @@
271 } 270 }
272 /*一级菜单栏字体*/ 271 /*一级菜单栏字体*/
273 #menu li a { 272 #menu li a {
274 - font-size:13px; 273 + font-size:12px;
275 display:block; 274 display:block;
276 /*outline:0;*/ 275 /*outline:0;*/
277 /*删除下划线*/ 276 /*删除下划线*/
@@ -279,7 +278,7 @@ @@ -279,7 +278,7 @@
279 } 278 }
280 /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/ 279 /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
281 #menu li:hover .dropdown_1column { 280 #menu li:hover .dropdown_1column {
282 - left: 0px; 281 + left: -150px;
283 right: auto; 282 right: auto;
284 top:45px; 283 top:45px;
285 font-size:13px; 284 font-size:13px;
@@ -298,7 +297,7 @@ @@ -298,7 +297,7 @@
298 #menu li:hover div li:hover{background-color: rgb(18,170,255)} 297 #menu li:hover div li:hover{background-color: rgb(18,170,255)}
299 /*二级菜单栏样式*/ 298 /*二级菜单栏样式*/
300 #menu li ul li { 299 #menu li ul li {
301 - font-size:13px; 300 + font-size:12px;
302 line-height:45px; 301 line-height:45px;
303 } 302 }
304 .userinfo-inner { 303 .userinfo-inner {