diff --git a/src/assets/less/Suless.less b/src/assets/less/Suless.less index 9372e4e..35659ba 100644 --- a/src/assets/less/Suless.less +++ b/src/assets/less/Suless.less @@ -845,6 +845,23 @@ textarea, border-bottom: none !important; } +.ant-menu-horizontal .ant-menu-item { + background-image: url('~@/assets/img/menuDefault.png'); + background-repeat: no-repeat !important; + background-size: 100% 100% !important; + min-width: 130px !important; + margin: 0 10px !important; + min-height: 55px !important; + line-height: 50px !important; + text-align: center; + font-weight: 800; + font-size: 20px !important; + padding: 0 40px !important; + vertical-align: middle !important; + font-family: @fontfamily; + border-bottom: none !important; +} + .ant-menu-item-selected>a>span, .ant-menu-item-active>a>span, @@ -868,7 +885,6 @@ textarea, .ant-menu { border-radius: 0 !important; box-shadow: none !important; - border-bottom: 1px dotted #00CBFF; } .ant-menu-submenu, @@ -888,9 +904,23 @@ textarea, line-height: 50px !important; text-align: left; float: left; - margin-right: 20px; - padding: 0 0 0 20px !important; - border-top: 1px dotted #00CBFF; + // margin-right: 20px; + // padding: 0 0 0 20px !important; + // border-top: 1px dotted #00CBFF; + color: #fff !important; + border-bottom: 1px dotted #00CBFF; +} + +.ant-menu-dark.ant-menu-vertical{ + background-size: 100% 100%; + width: 263px !important; + height: 50px !important; + margin-bottom: 0 !important; + margin-top: -1px !important; + line-height: 50px !important; + text-align: left; + float: left; + border-top: 1px dotted #00CBFF; } .ant-menu-item>a>span { diff --git a/src/components/menu/index.js b/src/components/menu/index.js index e08c577..c7e2fe2 100644 --- a/src/components/menu/index.js +++ b/src/components/menu/index.js @@ -26,7 +26,7 @@ export default { default: false } }, - data () { + data() { return { openKeys: [], selectedKeys: [], @@ -41,11 +41,11 @@ export default { return keys } }, - mounted () { + mounted() { this.updateMenu() }, watch: { - collapsed (val) { + collapsed(val) { if (val) { this.cachedOpenKeys = this.openKeys.concat() this.openKeys = [] @@ -59,10 +59,10 @@ export default { }, methods: { // select menu item - onOpenChange (openKeys) { + onOpenChange(openKeys) { // if(openKeys.length == 1 || this.selectedKeys[0] == '/dashboard/analysis') this.latestOpenKey = openKeys - if(openKeys.length == 1) this.latestOpenKey = openKeys - else if(openKeys.length == 2) this.latestOpenKey = [openKeys[1]] + if (openKeys.length == 1) this.latestOpenKey = openKeys + else if (openKeys.length == 2) this.latestOpenKey = [openKeys[1]] // openKeys = this.latestOpenKey // 在水平模式下时执行,并且不再执行后续 if (this.mode === 'horizontal') { @@ -78,7 +78,7 @@ export default { this.openKeys = latestOpenKey ? [latestOpenKey] : [] } }, - updateMenu () { + updateMenu() { const routes = this.$route.matched.concat() const { hidden } = this.$route.meta if (routes.length >= 3 && hidden) { @@ -94,21 +94,21 @@ export default { }) } //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对 - if(!this.selectedKeys || this.selectedKeys[0].indexOf(":")<0){ + if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) { this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys) } //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对 }, // render - renderItem (menu) { + renderItem(menu) { if (!menu.hidden) { - return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu) + // return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu) return this.renderMenuItem(menu) } return null }, - renderMenuItem (menu) { + renderMenuItem(menu) { // if(menu.meta.title == '首页') // { // return null @@ -116,12 +116,15 @@ export default { const target = menu.meta.target || null const tag = target && 'a' || 'router-link' let props = { to: { name: menu.name } } - if(menu.route && menu.route === '0'){ + if (menu.children && menu.children.length > 0) props = { to: { name: menu.children[0].name } } + + if (menu.route && menu.route === '0') { props = { to: { path: menu.path } } } - const attrs = { href: menu.path, target: menu.meta.target } - + let attrs = { href: menu.path, target: menu.meta.target } + if (menu.children && menu.children.length > 0) attrs = { href: menu.children[0].path, target: menu.children[0].meta.target } + if (menu.children && menu.alwaysShow) { // 把有子菜单的 并且 父菜单是要隐藏子菜单的 // 都给子菜单增加一个 hidden 属性 @@ -130,7 +133,7 @@ export default { item.meta = Object.assign(item.meta, { hidden: true }) }) } - + return ( @@ -140,12 +143,12 @@ export default { ) }, - renderSubMenu (menu) { + renderSubMenu(menu) { const itemArr = [] if (!menu.alwaysShow) { menu.children.forEach(item => itemArr.push(this.renderItem(item))) } - + return ( @@ -156,19 +159,19 @@ export default { ) }, - renderIcon (icon) { + renderIcon(icon) { if (icon === 'none' || icon === undefined) { return null } const props = {} typeof (icon) === 'object' ? props.component = icon : props.type = icon return ( - + ) } }, - render () { + render() { const { mode, theme, menu } = this const props = { mode: mode, diff --git a/src/components/page/PageLayout.vue b/src/components/page/PageLayout.vue index d735258..5f42bae 100644 --- a/src/components/page/PageLayout.vue +++ b/src/components/page/PageLayout.vue @@ -13,8 +13,8 @@ {{ link.title }} - - --> + + --> + + + {{ item.meta.title }} + +
@@ -40,6 +45,7 @@