作者 小范

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

<template>
<div style="width: 100%">
<Assembly></Assembly>
<el-tabs v-model="activeIndex"
v-if="openTab.length"
type="card"
... ...
... ... @@ -47,11 +47,11 @@
<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen"
@close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed"
style="width: 380px;height: 100%">
style="width: 300px;height: 100%">
<!-- ;overflow: scroll-->
<div align="center" style="background-color: #2b2f3a">
<img src="./logo1.png">
<h1 style="color:white;display: inline-block">航空物流公共信息服务平台</h1>
<h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</h1>
</div>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
... ... @@ -336,8 +336,8 @@
padding-left:10px;
padding-right:10px;
border-color: rgba(238,241,146,0.3);
border-right-width: 1px;
border-right-style: solid;
border-right-width: 0px;
/*border-right-style: solid;*/
img {
width: 40px;
float: left;
... ... @@ -348,7 +348,7 @@
}
}
.logo-width{
width:380px;
width:300px;
}
.logo-collapse-width{
width:60px
... ... @@ -374,9 +374,9 @@
bottom: 0px;
overflow: hidden;
aside {
flex:0 0 230px;
width: 230px;
overflow-y: scroll;
flex:0 0 300px;
width: 300px;
/*overflow-y: scroll;*/
background: rgb(38,56,76);
// position: absolute;
// top: 0px;
... ... @@ -403,7 +403,7 @@
}
.menu-expanded{
/*底层滚动框宽度*/
flex:0 0 380px;
flex:0 0 300px;
width: 230px;
}
.menu-expanded ul{
... ... @@ -449,6 +449,7 @@
aside {
.el-menu{
height: 100%;
/*width: 300px!important;*/
background: #26384c;
.el-menu-item {
i{
... ... @@ -456,11 +457,12 @@
}
color: white;
}
.el-menu-item.is-active{
color:#e6a23c;
}
/*.el-menu-item.is-active{*/
/* color:#e6a23c;*/
/*}*/
.el-menu-item:hover,.el-menu-item:focus{
background-color: #1a4496;
background-color: #4f6273;
/*border-left: 3px solid #be1fd9;*/
}
.el-submenu {
ul.el-menu.el-menu--inline{
... ... @@ -473,7 +475,9 @@
}
}
.el-submenu__title:hover {
background-color: #1a4496;
background-color: #4f6273;
border-left: 3px solid #be1fd9
}
}
}
... ...
... ... @@ -9,7 +9,6 @@
<!-- </el-col>-->
<el-col :span="18" id="menu" >
<ul>
<li><a href="" class="drop">政府监管服务</a>
<div class="dropdown_1column">
<ul class="simple">
... ... @@ -57,8 +56,8 @@
</div>
</li>
<li>
<el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 130px">
<span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img src="~img/faceDefault.jpg"/></span>
<el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 100px">
<span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
<!-- ../../assets/img/faceDefault.jpg-->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item>
... ... @@ -244,24 +243,24 @@
li{
list-style-type: none;
}
a{font-size: 14px;}
a{font-size: 12px;}
/*菜单栏底层div*/
#menu,#menu2 {
height: 50px;
border-bottom: 3px solid rgb(111,130,148);
height: 48px;
border-bottom: 2px solid #6f8294;
position:relative;
z-index: 999;
float: right;
width: 900px;
width: 730px;
}
/*一级菜单栏样式*/
#menu li{
/*float: right;*/
width: 120px;
height: 50px;
width: 117px;
/*height: 50px;*/
text-align: center;
/*position:relative;*/
border:none;
... ... @@ -271,7 +270,7 @@
}
/*一级菜单栏字体*/
#menu li a {
font-size:13px;
font-size:12px;
display:block;
/*outline:0;*/
/*删除下划线*/
... ... @@ -279,7 +278,7 @@
}
/*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
#menu li:hover .dropdown_1column {
left: 0px;
left: -150px;
right: auto;
top:45px;
font-size:13px;
... ... @@ -298,7 +297,7 @@
#menu li:hover div li:hover{background-color: rgb(18,170,255)}
/*二级菜单栏样式*/
#menu li ul li {
font-size:13px;
font-size:12px;
line-height:45px;
}
.userinfo-inner {
... ...