<template>
|
<aside class="aside" v-if="$store.state.horizontalRouter" :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
|
<div class="aui-sidebar__inner1">
|
<ul role="menubar" class="aui-sidebar__menu el-menu" style="border: 1px solid rgba(123, 224, 244, 0.3)">
|
<div v-for="menu in $store.state.user.menuList" :key="menu.id" style="display: inline-block; float: left">
|
<li role="menuitem" aria-haspopup="true" class="el-submenu is-active is-opened"
|
v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="true"
|
aria-expanded="true">
|
<ul role="menu" class="el-menu el-menu--inline">
|
<div v-for="item in menu.children" :key="item.id" :menu="item" style="display: inline-block;height: 65px">
|
<li role="menuitem" tabindex="-1" class="el-menu-item" @click="gotoRouteHandle(item.id)"
|
style="padding: 0 5px;" v-bind:class="{ active: ($store.state.sidebarMenuActiveName === item.id)}">
|
<div style="width: 100%;height: 24px; text-align: center;">
|
<svg class="icon-svg aui-sidebar__inner-icon" aria-hidden="true">
|
<use :xlink:href="`#${item.icon}`"></use>
|
</svg>
|
</div>
|
<div style=" padding: inherit;">
|
{{ item.name }}
|
</div>
|
</li>
|
</div>
|
</ul>
|
<div class="el-submenu__title ">
|
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
|
<use :xlink:href="`#${menu.icon}`"></use>
|
</svg>
|
<span class="">{{ menu.name}}</span>
|
</div>
|
</li>
|
<li role="menuitem" aria-haspopup="true" class="el-submenu is-active is-opened"
|
v-else :index="menu.id" :popper-append-to-body="true"
|
aria-expanded="true">
|
<ul role="menu" class="el-menu el-menu--inline">
|
<li role="menuitem" tabindex="-1" class="el-menu-item" @click="gotoRouteHandle(menu.id)"
|
style="padding: 0 5px;" v-bind:class="{ active: ($store.state.sidebarMenuActiveName === menu.id)}">
|
<div style="width: 100%;height: 24px; text-align: center;">
|
<svg class="icon-svg aui-sidebar__inner-icon" aria-hidden="true">
|
<use :xlink:href="`#${menu.icon}`"></use>
|
</svg>
|
</div>
|
<div style=" padding: inherit;">
|
{{ menu.name }}
|
</div>
|
</li>
|
</ul>
|
<div class="el-submenu__title ">
|
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
|
<use :xlink:href="`#${menu.icon}`"></use>
|
</svg>
|
<span class="">{{ menu.name }}</span>
|
</div>
|
</li>
|
</div>
|
<div style="padding-top: 30px; padding-right: 20px;float: right;" class="input_style">
|
<el-form :inline="true" @submit.native.prevent @keyup.enter.native="search()">
|
<el-form-item>
|
<el-input v-model="dataForm.keyword" placeholder="综合查询" id="materialSearch"
|
style="width: 300px;"/>
|
</el-form-item>
|
<el-form-item class="message-btn">
|
<zt-button type="query" @click="search()" style="height:40px"></zt-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</ul>
|
</div>
|
<div class="el-divider el-divider--horizontal" style="display: block;height: 5px; width: 100%;margin: -6px 0;">
|
<!----></div>
|
<main-navbar ref="mainNavbar" v-show="false"/>
|
</aside>
|
</template>
|
|
<script>
|
import SubMenu from './main-sidebar-sub-menu'
|
// import Search from '../modules/search'
|
import mainNavbar from './main-navbar'
|
|
export default {
|
data() {
|
return {
|
isShow: true,
|
dataForm: {
|
keyword: ''
|
}
|
}
|
},
|
components: {
|
SubMenu,
|
mainNavbar
|
},
|
// watch: {
|
// '$route.params.keyword'() {
|
// this.dataForm.keyword = this.$route.params.keyword
|
// this.query()
|
// }
|
// },
|
mounted() {
|
},
|
methods: {
|
sendMsg() {
|
},
|
search() {
|
let keyword = document.getElementById('materialSearch').value
|
this.$EventBus.$emit('search', keyword)
|
if (keyword) {
|
this.$router.push({
|
name: 'search',
|
params: {
|
keyword: keyword
|
}
|
})
|
} else {
|
}
|
},
|
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
gotoRouteHandle(menuId) {
|
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
if (route && this.$router.currentRoute.path !== `/${route.name}`) {
|
if (route.name === 'miantainHome-home' || 'replaceProblemHome-home') {
|
this.$refs.mainNavbar.refresh()
|
}
|
this.$router.push({name: route.name})
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
/*.aside {*/
|
/*display: block;*/
|
/*}*/
|
.aside .aui-sidebar__menu.el-menu{
|
background-color: transparent;
|
}
|
.input_style .el-input__inner {
|
height: 40px;
|
}
|
|
.input_style .el-input__inner:focus {
|
color: #17B3A3;
|
border: 1px solid #17B3A3;
|
background: #e8f7f6;
|
}
|
|
.aui-content__wrapper {
|
position: relative;
|
margin-left: 0px;
|
min-height: calc(100vh - 50px);
|
background-color: #f1f4f5;
|
-webkit-transition: margin-left .3s;
|
transition: margin-left .3s;
|
}
|
|
.aui-content > .el-tabs > .el-tabs__header {
|
position: fixed;
|
top: 175px;
|
left: 0px;
|
right: 0;
|
z-index: 930;
|
padding: 0 55px 0 15px;
|
margin: 0;
|
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
background-color: #fff;
|
-webkit-transition: left .3s;
|
transition: left .3s;
|
}
|
|
.aui-sidebar {
|
position: fixed;
|
top: 50px;
|
left: 0;
|
bottom: 0;
|
z-index: 1020;
|
width: 100%;
|
padding-top: 5px;
|
height: 120px;
|
background-color: #fff;
|
-webkit-box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.05);
|
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.05);
|
overflow: visible;
|
-webkit-transition: width .3s;
|
transition: width .3s;
|
}
|
|
.aui-sidebar__inner {
|
position: relative;
|
z-index: 1;
|
width: 100%;
|
height: 100%;
|
padding-bottom: 0px;
|
overflow-x: visible;
|
overflow-y: visible;
|
-webkit-transition: width .3s;
|
transition: width .3s;
|
}
|
|
.aui-sidebar__menu {
|
width: 100%;
|
border-right: 0;
|
height: 120px;
|
-webkit-transition: width .3s;
|
transition: width .3s;
|
overflow-x: auto;
|
}
|
|
.aside .el-menu-item, .el-submenu {
|
/*display: inline-block;*/
|
/*height: 120px;*/
|
}
|
|
.aside .el-submenu__title {
|
text-align: center;
|
color: #FFF;
|
background-color: #17B3A3;
|
border-color: #17B3A3;
|
margin: 7px 0 7px 10px;
|
border-radius: 4px;
|
}
|
|
.aside .el-menu--inline .active {
|
color: #FFF !important;
|
background-color: #17B3A3;
|
border-color: #17B3A3;
|
}
|
|
.aside .el-submenu .el-menu-item {
|
height: 65px;
|
line-height: 50px;
|
padding: 0;
|
min-width: 60px;
|
}
|
|
.aui-content__wrapper {
|
position: relative;
|
margin-left: 0px;
|
/* padding-top: 120px; */
|
min-height: calc(100vh - 50px);
|
background-color: #f1f4f5;
|
-webkit-transition: margin-left .3s;
|
transition: margin-left .3s;
|
}
|
|
.el-menu--inline {
|
border-radius: 4px;
|
border: 1px solid #DCDFE6;
|
margin-left: 10px;
|
text-align: center;
|
}
|
|
.aui-sidebar--dark .aui-sidebar__menu, .aui-sidebar--dark .aui-sidebar__menu .el-menu, .aui-sidebar--dark .aui-sidebar__menu .el-submenu.is-opened {
|
background-color: white;
|
}
|
|
.aui-sidebar--dark .aui-sidebar__menu .el-menu-item:focus,
|
.aui-sidebar--dark .aui-sidebar__menu .el-menu-item:hover,
|
el-submenu__title:hover,
|
.aui-sidebar--dark .aui-sidebar__menu .el-submenu > .el-submenu__title:focus,
|
.aui-sidebar--dark .aui-sidebar__menu .el-submenu > .el-submenu__title:hover, .aui-sidebar--dark > .el-menu--popup .el-menu-item:focus, .aui-sidebar--dark > .el-menu--popup .el-menu-item:hover, .aui-sidebar--dark > .el-menu--popup .el-submenu > .el-submenu__title:focus, .aui-sidebar--dark > .el-menu--popup .el-submenu > .el-submenu__title:hover {
|
color: #FFF;
|
background-color: #17B3A3;
|
border-color: #17B3A3;
|
}
|
|
.aui-sidebar__inner-icon {
|
display: inline-block;
|
vertical-align: middle;
|
width: 24px !important;
|
margin-right: 5px;
|
text-align: center;
|
font-size: 24px;
|
margin-top: -20px;
|
color: inherit !important;
|
-webkit-transition: font-size .3s;
|
transition: font-size .3s;
|
}
|
|
.aui-page__login .aui-content__wrapper {
|
padding-top: 0px;
|
}
|
|
.aui-sidebar__menu .el-submenu__title {
|
height: 30px;
|
line-height: 30px;
|
}
|
|
.aui-navbar__header {
|
position: relative;
|
width: 300px;
|
height: 50px;
|
-webkit-transition: width .3s;
|
transition: width .3s;
|
}
|
</style>
|
