Merge branch 'develop' into FOTON
# Conflicts: # src/components/navMenu/index.vue
This commit is contained in:
Superman_Main
+203
-203
@@ -1,34 +1,34 @@
|
||||
<!--左侧导航菜单 liuyan -->
|
||||
<template>
|
||||
<div class="nav-menu v-class" :class="{'is-collapse': isCollapse}">
|
||||
<!-- <div class="nav-menu-header" style="height: 65px; background-color: #4788c0;">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img :src="logo" height="58" width="149" />
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- <div class="nav-menu-header" style="height: 65px; background-color: #4788c0;">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img :src="logo" height="58" width="149" />
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
|
||||
<!-- <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>-->
|
||||
<!-- <div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
|
||||
<!-- <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>-->
|
||||
<div class="left-tree">
|
||||
<el-menu
|
||||
unique-opened
|
||||
:default-active="defaultActive"
|
||||
background-color="#4788c0"
|
||||
text-color="#fff"
|
||||
active-text-color="#000"
|
||||
router
|
||||
:collapse="isCollapse"
|
||||
@select="handleSelect"
|
||||
unique-opened
|
||||
:default-active="defaultActive"
|
||||
background-color="#4788c0"
|
||||
text-color="#fff"
|
||||
active-text-color="#000"
|
||||
router
|
||||
:collapse="isCollapse"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-for="(item, index) in navMenuList">
|
||||
<el-submenu
|
||||
:key="index"
|
||||
:index="item.path"
|
||||
popper-class="nav-menu-popper"
|
||||
v-if="!item.isChildren && (!item.menuId || $hasPermission(item.menuId))"
|
||||
:key="index"
|
||||
:index="item.path"
|
||||
popper-class="nav-menu-popper"
|
||||
v-if="!item.isChildren && (!item.menuId || $hasPermission(item.menuId))"
|
||||
>
|
||||
<template slot="title">
|
||||
<i class="shangqi-icon" :class="item['icon-class']"></i>
|
||||
@@ -37,11 +37,11 @@
|
||||
</el-badge>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="(children, childrenIndex) in item.children"
|
||||
:key="childrenIndex"
|
||||
:index="children.path"
|
||||
style="text-align: center;"
|
||||
v-if="!children.menuId || $hasPermission(children.menuId)"itemSplitInfo
|
||||
v-for="(children, childrenIndex) in item.children"
|
||||
:key="childrenIndex"
|
||||
:index="children.path"
|
||||
style="text-align: center;"
|
||||
v-if="!children.menuId || $hasPermission(children.menuId)"itemSplitInfo
|
||||
>
|
||||
<el-badge :value="getDynamicTotal.msgCount" class="item" v-if="children.title === '我的消息' && getDynamicTotal.msgCount !== 0">
|
||||
{{ children.title }}
|
||||
@@ -512,133 +512,170 @@
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import '~@/assets/styles/mixins';
|
||||
/deep/.el-menu--popup > div {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-menu--collapse {
|
||||
.is-active {
|
||||
background-color: #697178 !important;
|
||||
.shangqi-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
color: #697178 !important;
|
||||
}
|
||||
}
|
||||
.nav-menu {
|
||||
width: 58px;
|
||||
height: 90%;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
background: #697178;
|
||||
background-size: 100% 100%;
|
||||
/deep/.el-tooltip {
|
||||
padding: 0px 16px !important;
|
||||
}
|
||||
.left-tree::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&:not(.is-collapse) {
|
||||
width: 200px;
|
||||
background: #697178;
|
||||
background-size: 100% 100%;
|
||||
.logo {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
img {
|
||||
width: 150px;
|
||||
height: 61px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tree-collapse{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15px;
|
||||
min-height: 140%;
|
||||
background: #EEE;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
img {
|
||||
width: 36px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
.nav-menu-header{
|
||||
/*background:url("../../assets/images/shangqi/home/logo3.png");*/
|
||||
}
|
||||
/deep/:not(.is-collapse) .el-menu-item.is-active{
|
||||
background: #4788c0 !important;
|
||||
@import '~@/assets/styles/mixins';
|
||||
/deep/.el-menu--popup > div {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-menu--collapse {
|
||||
.is-active {
|
||||
background-color: #697178 !important;
|
||||
.shangqi-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
color: #697178 !important;
|
||||
}
|
||||
.has-no-read{
|
||||
position: relative;
|
||||
top:-15px;
|
||||
left:10px
|
||||
}
|
||||
.nav-menu {
|
||||
width: 58px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
background: #697178;
|
||||
background-size: 100% 100%;
|
||||
/deep/.el-tooltip {
|
||||
padding: 0px 16px !important;
|
||||
}
|
||||
/*.el-menu--collapse {*/
|
||||
/* .shangqi-icon {*/
|
||||
/* color: #4091FF !important;*/
|
||||
/* }*/
|
||||
/* .is-active /deep/.shangqi-icon {*/
|
||||
/* color: #4091FF !important;*/
|
||||
/* }*/
|
||||
/* /deep/.el-submenu__title i {*/
|
||||
/* color: #fff;*/
|
||||
/* }*/
|
||||
/* /deep/.el-submenu__title i {*/
|
||||
/* color: #fff;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
.is-active /deep/.shangqi-icon {
|
||||
color: #fff;
|
||||
.left-tree::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/deep/.el-submenu__title i {
|
||||
color: #fff;
|
||||
&:not(.is-collapse) {
|
||||
width: 200px;
|
||||
background: #697178;
|
||||
background-size: 100% 100%;
|
||||
.logo {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
img {
|
||||
width: 150px;
|
||||
height: 61px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-menu /deep/.el-submenu__title i {
|
||||
color: #fff;
|
||||
.tree-collapse{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15px;
|
||||
min-height: 140%;
|
||||
background: #EEE;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
}
|
||||
.nav-menu{
|
||||
background-color: #697178;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
.logo{
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
img {
|
||||
width: 36px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
.nav-menu::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
.nav-menu-header{
|
||||
/*background:url("../../assets/images/shangqi/home/logo3.png");*/
|
||||
}
|
||||
.nav-menu-popper .el-menu .el-menu-item {
|
||||
/deep/:not(.is-collapse) .el-menu-item.is-active{
|
||||
background: #4788c0 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.nav-menu-popper .el-menu .el-menu-item.is-active {
|
||||
background-color: #fff !important;
|
||||
color: #4788c0 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-menu-popper .el-menu .el-menu-item:hover {
|
||||
background-color: #697178 !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.has-no-read{
|
||||
position: relative;
|
||||
top:-15px;
|
||||
left:10px
|
||||
}
|
||||
/*.el-menu--collapse {*/
|
||||
/* .shangqi-icon {*/
|
||||
/* color: #4091FF !important;*/
|
||||
/* }*/
|
||||
/* .is-active /deep/.shangqi-icon {*/
|
||||
/* color: #4091FF !important;*/
|
||||
/* }*/
|
||||
/* /deep/.el-submenu__title i {*/
|
||||
/* color: #fff;*/
|
||||
/* }*/
|
||||
/* /deep/.el-submenu__title i {*/
|
||||
/* color: #fff;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
.is-active /deep/.shangqi-icon {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/.el-submenu__title i {
|
||||
color: #fff;
|
||||
}
|
||||
.nav-menu /deep/.el-submenu__title i {
|
||||
color: #fff;
|
||||
}
|
||||
.nav-menu{
|
||||
background-color: #697178;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
}
|
||||
.nav-menu::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.nav-menu-popper .el-menu .el-menu-item {
|
||||
color: #fff !important;
|
||||
}
|
||||
.nav-menu-popper .el-menu .el-menu-item.is-active {
|
||||
background-color: #fff !important;
|
||||
color: #4788c0 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-menu-popper .el-menu .el-menu-item:hover {
|
||||
background-color: #697178 !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
.el-menu-item {
|
||||
span {
|
||||
margin-left: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.shangqi-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85% 85%;
|
||||
background-position: center center;
|
||||
&.home {
|
||||
background-image: url("~assets/images/shangqi/sideBar/home.png");
|
||||
}
|
||||
&.baobiao {
|
||||
background-image: url("~assets/images/shangqi/sideBar/baobiao.png");
|
||||
}
|
||||
&.ucenter {
|
||||
background-image: url("~assets/images/shangqi/sideBar/ucenter.png");
|
||||
}
|
||||
&.search {
|
||||
background-image: url("~assets/images/shangqi/sideBar/search.png");
|
||||
}
|
||||
&.warning {
|
||||
background-image: url("~assets/images/shangqi/sideBar/warning.png");
|
||||
}
|
||||
&.liucheng {
|
||||
background-image: url("~assets/images/shangqi/sideBar/liucheng.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
.is-opened {
|
||||
background-color: red;
|
||||
}
|
||||
/deep/.el-submenu__title {
|
||||
padding: 0 16px !important;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
font-weight: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.shangqi-icon {
|
||||
display: inline-block;
|
||||
@@ -647,11 +684,11 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85% 85%;
|
||||
background-position: center center;
|
||||
&.home {
|
||||
background-image: url("~assets/images/shangqi/sideBar/home.png");
|
||||
&.fagui {
|
||||
background-image: url("~assets/images/shangqi/sideBar/fagui.png");
|
||||
}
|
||||
&.baobiao {
|
||||
background-image: url("~assets/images/shangqi/sideBar/baobiao.png");
|
||||
&.tools {
|
||||
background-image: url("~assets/images/shangqi/sideBar/tools.png");
|
||||
}
|
||||
&.ucenter {
|
||||
background-image: url("~assets/images/shangqi/sideBar/ucenter.png");
|
||||
@@ -659,78 +696,41 @@
|
||||
&.search {
|
||||
background-image: url("~assets/images/shangqi/sideBar/search.png");
|
||||
}
|
||||
&.warning {
|
||||
background-image: url("~assets/images/shangqi/sideBar/warning.png");
|
||||
&.conf {
|
||||
background-image: url("~assets/images/shangqi/sideBar/conf.png");
|
||||
}
|
||||
&.liucheng {
|
||||
background-image: url("~assets/images/shangqi/sideBar/liucheng.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
.is-opened {
|
||||
background-color: red;
|
||||
}
|
||||
/deep/.el-submenu__title {
|
||||
padding: 0 16px !important;
|
||||
span {
|
||||
font-weight: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.shangqi-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85% 85%;
|
||||
background-position: center center;
|
||||
&.fagui {
|
||||
background-image: url("~assets/images/shangqi/sideBar/fagui.png");
|
||||
}
|
||||
&.tools {
|
||||
background-image: url("~assets/images/shangqi/sideBar/tools.png");
|
||||
}
|
||||
&.ucenter {
|
||||
background-image: url("~assets/images/shangqi/sideBar/ucenter.png");
|
||||
}
|
||||
&.search {
|
||||
background-image: url("~assets/images/shangqi/sideBar/search.png");
|
||||
}
|
||||
&.conf {
|
||||
background-image: url("~assets/images/shangqi/sideBar/conf.png");
|
||||
}
|
||||
&.liucheng {
|
||||
background-image: url("~assets/images/shangqi/sideBar/liucheng.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
padding-left: 29px !important;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
div {
|
||||
}
|
||||
}
|
||||
/deep/.el-menu {
|
||||
/*padding-left: 18px;*/
|
||||
.el-menu-item {
|
||||
padding-left: 29px !important;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
div {
|
||||
}
|
||||
}
|
||||
.el-menu--collapse{
|
||||
width: 100%;
|
||||
.shangqi-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.el-submenu{
|
||||
/deep/.el-submenu__title{
|
||||
.shangqi-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
/deep/.el-menu {
|
||||
/*padding-left: 18px;*/
|
||||
}
|
||||
}
|
||||
.el-menu--collapse{
|
||||
width: 100%;
|
||||
.shangqi-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.el-submenu{
|
||||
/deep/.el-submenu__title{
|
||||
.shangqi-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user