mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-29 22:10:49 +00:00
improve: 菜单样式调整
This commit is contained in:
From-wh
parent
6c5af931dd
commit
575638df87
@ -85,6 +85,8 @@ export default {
|
||||
}
|
||||
.full-screen-btn-con .ivu-tooltip-rel i {
|
||||
font-size: 20px !important;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
}
|
||||
.full-screen-btn-con .ivu-tooltip-rel {
|
||||
height: 50px;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="custom-bread-crumb">
|
||||
<Breadcrumb :style="{ fontSize: `${fontSize}px` }">
|
||||
<BreadcrumbItem v-for="item in list" :key="`${item.path}`" v-if="listLast[0].path !== homePath">
|
||||
<BreadcrumbItem v-for="item in list" :key="`${item.path}`" :to="item.path" v-if="listLast[0].path !== homePath">
|
||||
<common-icon style="margin-right: 4px" :type="item.icon || ''" />
|
||||
{{ item.title }}
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem v-if="listLast[0].path === homePath">
|
||||
<BreadcrumbItem :to="listLast[0].path" v-if="listLast[0].path === homePath">
|
||||
<common-icon style="margin-right: 4px" :type="listLast[0].icon || ''" />
|
||||
{{ listLast[0].title }}
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem v-else>
|
||||
<BreadcrumbItem v-else :to="listLast[0].path">
|
||||
<common-icon style="margin-right: 4px" :type="listLast[0].icon || ''" />
|
||||
{{ listLast[0].title }}
|
||||
</BreadcrumbItem>
|
||||
@ -19,7 +19,7 @@
|
||||
<script>
|
||||
import { showTitle } from '@/libs/util';
|
||||
import CommonIcon from '_c/common-icon';
|
||||
import settings from '@/setting'
|
||||
import settings from '@/setting';
|
||||
import './custom-bread-crumb.less';
|
||||
export default {
|
||||
name: 'customBreadCrumb',
|
||||
@ -45,7 +45,7 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
homePath: settings.routePre + '/home',
|
||||
};
|
||||
@ -64,7 +64,9 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.custom-bread-crumb {
|
||||
margin-left: 46px !important;
|
||||
.ivu-breadcrumb-item-link {
|
||||
.ivu-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,6 +3,13 @@
|
||||
height: 100%;
|
||||
position: relative;
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.custom-content-con {
|
||||
float: right;
|
||||
height: auto;
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
<template>
|
||||
<div class="header-bar">
|
||||
<!-- <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger> -->
|
||||
<!-- <span class="i-layout-header-trigger" @click="handleReload">
|
||||
<div class="header-l">
|
||||
<sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
|
||||
<!-- <span class="i-layout-header-trigger" @click="handleReload">
|
||||
<Icon type="ios-refresh" color='#fff' />
|
||||
</span> -->
|
||||
<!-- <custom-bread-crumb
|
||||
show-icon
|
||||
style="margin-left: 30px"
|
||||
:list="breadCrumbList"
|
||||
:listLast="crumbPast"
|
||||
:collapsed="collapsed"
|
||||
></custom-bread-crumb> -->
|
||||
<custom-bread-crumb
|
||||
show-icon
|
||||
:list="breadCrumbList"
|
||||
:listLast="crumbPast"
|
||||
:collapsed="collapsed"
|
||||
></custom-bread-crumb>
|
||||
</div>
|
||||
|
||||
<div class="custom-content-con">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="less">
|
||||
.ivu-icon-ios-refresh {
|
||||
font-size: 23px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.i-layout-header-trigger {
|
||||
position: absolute;
|
||||
margin: 0 10px;
|
||||
@ -61,6 +60,7 @@ export default {
|
||||
});
|
||||
});
|
||||
}
|
||||
console.log('selectMenu',openMenus)
|
||||
return selectMenu;
|
||||
// return this.$store.state.app.breadCrumbList
|
||||
},
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
}
|
||||
@size: 40px;
|
||||
.sider-trigger-a {
|
||||
padding: 6px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
// color: #fff;
|
||||
|
||||
@ -28,21 +28,18 @@ export default {
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sider-menu {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 90px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
height: 50px;
|
||||
// border-top: 1px solid #f2f2f2;
|
||||
color: #515a6e;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
color: #515a6e;
|
||||
}
|
||||
@import './sider-trigger.less';
|
||||
.sider-trigger-a {
|
||||
padding: 14px 6px;
|
||||
height: 50px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.iconcaidanshouqi {
|
||||
font-size: 16px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<Dropdown @on-click="jumpUrl" :transfer="true">
|
||||
<div>
|
||||
<Badge dot :count="needList.length ? needList.length : 0">
|
||||
<Icon type="ios-notifications-outline" size="23"></Icon>
|
||||
<Icon class="icon" type="md-notifications-outline" size="20"></Icon>
|
||||
</Badge>
|
||||
</div>
|
||||
<DropdownMenu slot="list" v-show="needList.length">
|
||||
@ -21,6 +21,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.ivu-dropdown-item .iconImg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@ -44,7 +47,7 @@
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 18px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -25,9 +25,15 @@
|
||||
.search /deep/ .ivu-select-selection {
|
||||
margin-right: 20px;
|
||||
border-radius: 30px;
|
||||
border: none !important;
|
||||
}
|
||||
.search /deep/ .ivu-select-visible .ivu-select-selection {
|
||||
box-shadow: unset !important;
|
||||
border: none !important;
|
||||
}
|
||||
.search /deep/ .ivu-select-selection:hover,
|
||||
.search /deep/ .ivu-select-selection:active {
|
||||
border: none;
|
||||
}
|
||||
.search /deep/ li.ivu-select-item {
|
||||
text-align: left;
|
||||
@ -36,7 +42,7 @@
|
||||
.search /deep/ .select .ivu-select-item {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.search /deep/ .ivu-select-input{
|
||||
.search /deep/ .ivu-select-input {
|
||||
padding-left: 19px;
|
||||
border-radius: 30px;
|
||||
background-color: #f0faff;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="refresh-btn-con" @click="handleReload">
|
||||
<Tooltip content="刷新" placement="bottom">
|
||||
<Icon class="icon" type="ios-refresh" color="rgba(255,255,255,.8)" />
|
||||
<Icon class="icon" type="ios-refresh" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
@ -24,7 +24,12 @@ export default {
|
||||
margin-right: 17px !important;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
color: #f2f2f2;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
width: 20px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
// .icon:hover{
|
||||
// animation: rotate 6s linear infinite;
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
:class="{ on: parentItem.path == activeMenuPath }"
|
||||
@mouseover="handleMousemove($event, children)"
|
||||
:style="{ textAlign: !hideTitle ? 'left' : '' }"
|
||||
><common-icon :color="textColor" :type="parentItem.icon" /><Icon
|
||||
@click="handClick(parentItem.path)"
|
||||
><common-icon :type="parentItem.icon" /><Icon
|
||||
style="float: right"
|
||||
v-if="!hideTitle"
|
||||
type="ios-arrow-forward"
|
||||
@ -20,7 +21,7 @@
|
||||
/>
|
||||
<span class="title">{{ parentItem.title }}</span></a
|
||||
>
|
||||
<DropdownMenu ref="dropdown" slot="list">
|
||||
<DropdownMenu ref="dropdown" slot="list" v-if="children">
|
||||
<div v-for="child in children">
|
||||
<template v-if="child.auth === undefined">
|
||||
<collapsed-menu
|
||||
@ -66,6 +67,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
handleClick(name) {
|
||||
console.log(name, '1');
|
||||
this.$emit('on-click', name, this.activeMenuPath);
|
||||
},
|
||||
handClick(name) {
|
||||
this.$emit('on-click', name, this.activeMenuPath);
|
||||
},
|
||||
handleMousemove(event, children) {
|
||||
@ -81,22 +86,21 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
>>> .menu-title {
|
||||
// width: 100px !important;
|
||||
<style lang="less" scoped>
|
||||
@import './side-menu.less';
|
||||
|
||||
.collased-menu-dropdown {
|
||||
width: 100%;
|
||||
}
|
||||
.collased-menu-dropdown{
|
||||
width 100%
|
||||
}
|
||||
.child-menu{
|
||||
display flex
|
||||
justify-content space-between
|
||||
width 100%
|
||||
.child-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .ivu-dropdown-rel {
|
||||
width: 75px !important;
|
||||
width: @side-width !important;
|
||||
}
|
||||
.drop-menu-a /deep/ .ivu-dropdown-rel {
|
||||
width: 75px !important;
|
||||
width: @side-width !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<Submenu :name="parentItem.path">
|
||||
<template slot="title">
|
||||
<common-icon :type="parentItem.icon || ''" />
|
||||
<span>{{ parentItem.title }}</span>
|
||||
</template>
|
||||
<template v-for="item in children">
|
||||
@ -9,13 +8,13 @@
|
||||
<template v-if="item.children && item.children.length === 1">
|
||||
<side-menu-item v-if="showChildren(item)" :key="`menu${item.path}`" :parent-item="item"></side-menu-item>
|
||||
<menu-item v-else :name="item.path" :key="`menu${item.children[0].path}`"
|
||||
><common-icon :type="item.children[0].icon || ''" /><span class="title">{{ item.children[0].title }}</span></menu-item
|
||||
><span class="title">{{ item.children[0].title }}</span></menu-item
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<side-menu-item v-if="showChildren(item)" :key="`menu${item.path}`" :parent-item="item"></side-menu-item>
|
||||
<menu-item v-else :name="item.path" :key="`menu${item.path}`"
|
||||
><common-icon :type="item.icon || ''" /><span class="title">{{ item.title }}</span></menu-item
|
||||
><span class="title">{{ item.title }}</span></menu-item
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
@side-width: 80px;
|
||||
@side-height: 50px;
|
||||
@side-child-width: 160px;
|
||||
@child-menu-height: 50px;
|
||||
@side-dark-theme: #282c34;
|
||||
@side-dark-theme-font-color: #fff;
|
||||
.side-menu-wrapper {
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
.menu-collapsed {
|
||||
padding-top: 8px;
|
||||
height: 100%;
|
||||
background-color: @side-dark-theme;
|
||||
color: #fff !important;
|
||||
.ivu-dropdown {
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
.ivu-dropdown-rel a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.ivu-tooltip {
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.ivu-tooltip-rel {
|
||||
width: 100%;
|
||||
@ -28,11 +35,14 @@
|
||||
}
|
||||
}
|
||||
a.drop-menu-a {
|
||||
display: inline-block;
|
||||
padding: 10px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: @side-height;
|
||||
line-height: @side-height;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #495060;
|
||||
color: @side-dark-theme-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="side-menu-wrapper">
|
||||
<slot></slot>
|
||||
<sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
|
||||
<!-- <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger> -->
|
||||
<div class="side-menu-box" v-show="!collapsed">
|
||||
<div class="parent-menu">
|
||||
<slot></slot>
|
||||
<Menu
|
||||
ref="menu"
|
||||
class="parent-menus"
|
||||
:active-name="headerName"
|
||||
:open-names="openedNames"
|
||||
:accordion="accordion"
|
||||
:theme="theme"
|
||||
width="75px"
|
||||
@on-open-change="openNameData"
|
||||
@on-select="handleSelect"
|
||||
>
|
||||
@ -31,7 +31,7 @@
|
||||
:open-names="openNames"
|
||||
:accordion="accordion"
|
||||
:theme="theme"
|
||||
width="145px"
|
||||
class="child-menus"
|
||||
@on-open-change="openChildNameData"
|
||||
@on-select="handleChildSelect"
|
||||
>
|
||||
@ -44,7 +44,7 @@
|
||||
:parent-item="item"
|
||||
></side-menu-item>
|
||||
<menu-item v-else :name="item.path" :key="`menu${item.path}`"
|
||||
><common-icon :type="item.children[0].icon || ''" /><span class="title">{{
|
||||
><span class="title">{{
|
||||
item.children[0].title
|
||||
}}</span></menu-item
|
||||
>
|
||||
@ -56,7 +56,7 @@
|
||||
:parent-item="item"
|
||||
></side-menu-item>
|
||||
<menu-item v-else :name="item.path" :key="`menu${item.path}`"
|
||||
><common-icon :type="item.icon || ''" /><span class="title">{{ item.title }}</span></menu-item
|
||||
><span class="title">{{ item.title }}</span></menu-item
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
@ -66,9 +66,9 @@
|
||||
</div>
|
||||
|
||||
<div class="menu-collapsed" v-show="collapsed">
|
||||
<slot></slot>
|
||||
<template v-for="item in menusName">
|
||||
<collapsed-menu
|
||||
v-if="item.children && item.children.length > 0"
|
||||
@on-click="collHandleSelect"
|
||||
:hide-title="true"
|
||||
:activeMenuPath="headerName"
|
||||
@ -78,16 +78,16 @@
|
||||
:parent-item="item"
|
||||
:key="`drop-menu-${item.path}`"
|
||||
></collapsed-menu>
|
||||
<Tooltip transfer v-else :content="item.title" placement="right" :key="`drop-menu-${item.path}`">
|
||||
<!-- <Tooltip transfer v-else :content="item.title" placement="right" :key="`drop-menu-${item.path}`">
|
||||
<a
|
||||
@click="collHandleSelect(item)"
|
||||
class="drop-menu-a"
|
||||
:class="{ on: item.path == headerName }"
|
||||
:style="{ textAlign: 'center' }"
|
||||
><common-icon :color="textColor" :type="item.icon || (item.children && item.children[0].icon)" />
|
||||
><common-icon :type="item.icon || (item.children && item.children[0].icon)" />
|
||||
<span class="title">{{ item.title }}</span>
|
||||
</a>
|
||||
</Tooltip>
|
||||
</Tooltip> -->
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -222,9 +222,17 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
/deep/ .ivu-menu-vertical .ivu-menu-submenu-title-icon {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
@import './side-menu.less';
|
||||
.ivu-layout-sider{
|
||||
overflow: unset !important;
|
||||
}
|
||||
.ivu-menu {
|
||||
.side-menu-wrapper {
|
||||
position: relative;
|
||||
@ -284,12 +292,6 @@ export default {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.side-menu-wrapper a.drop-menu-a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 75px !important;
|
||||
}
|
||||
|
||||
.side-menu-box {
|
||||
display: flex;
|
||||
@ -298,8 +300,6 @@ export default {
|
||||
line-height: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px;
|
||||
margin-bottom: 4px;
|
||||
.ivu-icon {
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
@ -307,19 +307,26 @@ export default {
|
||||
}
|
||||
.parent-menu {
|
||||
z-index: 9;
|
||||
padding: 0 8px;
|
||||
box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.06);
|
||||
height: calc(~'100vh - 50px');
|
||||
width: @side-width;
|
||||
background-color: @side-dark-theme !important;
|
||||
height: 100vh;
|
||||
.parent-menus {
|
||||
width: @side-width !important;
|
||||
}
|
||||
.ivu-menu {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ivu-menu-light {
|
||||
background-color: unset;
|
||||
}
|
||||
.ivu-menu-item-selected {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ivu-menu-vertical .ivu-menu-item:hover {
|
||||
color: #1890ff !important;
|
||||
background-color: rgba(24, 144, 255, 0.1) !important;
|
||||
border-radius: 4px;
|
||||
.ivu-icon {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
@ -327,61 +334,72 @@ export default {
|
||||
.ivu-menu-item.ivu-menu-item-active:hover {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-radius: 4px;
|
||||
.ivu-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ivu-menu-vertical .ivu-menu-item {
|
||||
padding: 10px 10px;
|
||||
margin-bottom: 8px;
|
||||
padding: 18px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.title {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.ivu-menu-vertical .ivu-menu-item:first-child {
|
||||
margin-top: 8px;
|
||||
// margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.child-menu {
|
||||
z-index: 8;
|
||||
box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.06);
|
||||
.child-menus {
|
||||
width: @side-child-width !important;
|
||||
}
|
||||
.ivu-divider {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 0;
|
||||
width: @side-child-width !important;
|
||||
}
|
||||
.ivu-menu-vertical .ivu-menu-item {
|
||||
padding: 13px 10px;
|
||||
height: @child-menu-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.ivu-menu-submenu {
|
||||
.ivu-menu-item {
|
||||
padding-left: 23px !important;
|
||||
}
|
||||
.ivu-menu-submenu {
|
||||
.ivu-menu-submenu-title {
|
||||
padding-left: 23px !important;
|
||||
}
|
||||
.ivu-menu-item {
|
||||
padding-left: 35px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-menu-vertical .ivu-menu-submenu-title {
|
||||
font-size: 13px;
|
||||
padding: 12px 10px;
|
||||
line-height: 16px;
|
||||
}
|
||||
// .ivu-menu-submenu {
|
||||
// .ivu-menu-item {
|
||||
// padding-left: 23px !important;
|
||||
// }
|
||||
// .ivu-menu-submenu {
|
||||
// .ivu-menu-submenu-title {
|
||||
// padding-left: 23px !important;
|
||||
// }
|
||||
// .ivu-menu-item {
|
||||
// padding-left: 35px !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .ivu-menu-vertical .ivu-menu-submenu-title {
|
||||
// font-size: 14px;
|
||||
// padding: 12px 10px;
|
||||
// line-height: 16px;
|
||||
// }
|
||||
.cat-name {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
height: 50px;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
}
|
||||
@ -400,11 +418,16 @@ export default {
|
||||
left: 95px !important;
|
||||
}
|
||||
.menu-collapsed {
|
||||
padding: 0 8px;
|
||||
.side-menu-wrapper a.drop-menu-a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: @side-dark-theme-font-color;
|
||||
width: @side-width !important;
|
||||
}
|
||||
.drop-menu-a:hover {
|
||||
color: #1890ff;
|
||||
color: #1890ff !important;
|
||||
background-color: rgba(24, 144, 255, 0.1) !important;
|
||||
border-radius: 4px;
|
||||
.ivu-icon {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
@ -412,7 +435,6 @@ export default {
|
||||
.drop-menu-a.on:hover {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-radius: 4px;
|
||||
.ivu-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
@ -420,7 +442,6 @@ export default {
|
||||
.drop-menu-a.on {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-radius: 4px;
|
||||
.ivu-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
@ -429,17 +450,17 @@ export default {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
display: flex;
|
||||
padding: 18px 0;
|
||||
align-items: center;
|
||||
padding: 10px 11px;
|
||||
margin-bottom: 4px;
|
||||
width: @side-width;
|
||||
flex-wrap: nowrap;
|
||||
.ivu-icon {
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.title {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<!--<Avatar :src="avatars"/>-->
|
||||
<!--</Badge>-->
|
||||
<!--<Icon :size="18" type="md-arrow-dropdown"></Icon>-->
|
||||
<span>{{ info.account }}</span>
|
||||
<span class="account">{{ info.account }}</span>
|
||||
<DropdownMenu slot="list">
|
||||
<!--<DropdownItem name="message">-->
|
||||
<!--消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>-->
|
||||
@ -23,6 +23,9 @@
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.account {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.user-avatar-dropdown .ivu-dropdown-item ~ .ivu-dropdown-item {
|
||||
border-top: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
@bar-height: 50px;
|
||||
|
||||
.main {
|
||||
.logo-con {
|
||||
height: 50px;
|
||||
margin-left: 10px;
|
||||
height: @bar-height;
|
||||
img {
|
||||
height: 44px;
|
||||
width: auto;
|
||||
@ -15,8 +16,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
.ivu-layout-header {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: @bar-height;
|
||||
line-height: @bar-height;
|
||||
}
|
||||
.main-layout-con {
|
||||
height: calc(~"100vh - 60px");
|
||||
|
||||
@ -1,46 +1,44 @@
|
||||
<template>
|
||||
<Layout style="height: 100%" class="main">
|
||||
<Header class="header-con" v-if="!headMenuNoShow">
|
||||
<div class="logo-con">
|
||||
<img :src="maxLogo" key="max-logo" />
|
||||
<!-- <img v-show="collapsed" :src="minLogo" key="min-logo" /> -->
|
||||
</div>
|
||||
<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
|
||||
<user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
|
||||
<language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
|
||||
<header-notice></header-notice>
|
||||
<Reload @on-reload="handleReload"></Reload>
|
||||
|
||||
<fullscreen v-model="isFullscreen" style="margin-right: 10px" />
|
||||
<error-store
|
||||
v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
|
||||
:has-read="hasReadErrorPage"
|
||||
:count="errorCount"
|
||||
></error-store>
|
||||
<header-search></header-search>
|
||||
</header-bar>
|
||||
</Header>
|
||||
<Layout>
|
||||
<Sider
|
||||
hide-trigger
|
||||
collapsible
|
||||
:width="sider.length ? 220 : 90"
|
||||
:collapsed-width="isMobile ? 0 : 90"
|
||||
v-model="collapsed"
|
||||
:style="{ overflow: 'hidden' }"
|
||||
v-if="!headMenuNoShow"
|
||||
<Sider
|
||||
hide-trigger
|
||||
collapsible
|
||||
:width="sider.length ? 240 : 80"
|
||||
:collapsed-width="isMobile ? 0 : 80"
|
||||
v-model="collapsed"
|
||||
:style="{ overflow: 'hidden' }"
|
||||
v-if="!headMenuNoShow"
|
||||
>
|
||||
<side-menu
|
||||
accordion
|
||||
ref="sideMenu"
|
||||
@on-coll-change="handleCollapsedChange"
|
||||
:active-name="$route.path"
|
||||
:collapsed="collapsed"
|
||||
@on-select="turnToPage"
|
||||
>
|
||||
<side-menu
|
||||
accordion
|
||||
ref="sideMenu"
|
||||
@on-coll-change="handleCollapsedChange"
|
||||
:active-name="$route.path"
|
||||
:collapsed="collapsed"
|
||||
@on-select="turnToPage"
|
||||
>
|
||||
<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
|
||||
</side-menu>
|
||||
</Sider>
|
||||
<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
|
||||
<div class="logo-con">
|
||||
<img :src="minLogo" key="min-logo" />
|
||||
</div>
|
||||
</side-menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header class="header-con" v-if="!headMenuNoShow">
|
||||
<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
|
||||
<user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
|
||||
<language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
|
||||
<header-notice></header-notice>
|
||||
<Reload @on-reload="handleReload"></Reload>
|
||||
<fullscreen v-model="isFullscreen" style="margin-right: 10px" />
|
||||
<error-store
|
||||
v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
|
||||
:has-read="hasReadErrorPage"
|
||||
:count="errorCount"
|
||||
></error-store>
|
||||
<header-search></header-search>
|
||||
</header-bar>
|
||||
</Header>
|
||||
<Content class="main-content-con" :class="{ 'all-desk': headMenuNoShow }">
|
||||
<Layout class="main-layout-con">
|
||||
<div class="tag-nav-wrapper" v-if="!headMenuNoShow">
|
||||
@ -282,7 +280,8 @@ export default {
|
||||
.main .header-con {
|
||||
padding: 0 0px 0 0px;
|
||||
display: flex;
|
||||
background: linear-gradient(270deg, #1570ef 0%, #1570ef 100%);
|
||||
background: #fff;
|
||||
box-shadow: 1px 1px 4px rgba(49, 103, 154, 0.08);
|
||||
}
|
||||
.main .logo-con img {
|
||||
height: 50px;
|
||||
@ -291,7 +290,7 @@ export default {
|
||||
.main .tag-nav-wrapper {
|
||||
// height: 10px;
|
||||
background: unset;
|
||||
padding: 0 15px;
|
||||
padding: 0 15px 0 17px;
|
||||
}
|
||||
.open-image {
|
||||
display: flex;
|
||||
|
||||
@ -68,6 +68,7 @@ import scroll from '@/libs/loading';
|
||||
import * as tools from '@/libs/tools';
|
||||
import VueTreeList from 'vue-tree-list';
|
||||
import { getHeaderName, getHeaderSider, getMenuSider, getSiderSubmenu } from '@/libs/system';
|
||||
import { getMenuopen } from '@/libs/util';
|
||||
|
||||
// 复制到粘贴板插件
|
||||
import VueClipboard from 'vue-clipboard2';
|
||||
@ -201,6 +202,9 @@ new Vue({
|
||||
const headerName = getHeaderName(to, menuSider);
|
||||
if (headerName !== null) {
|
||||
this.$store.commit('menu/setActivePath', path);
|
||||
let openNameList = getMenuopen(to, menuSider);
|
||||
this.$store.commit('menus/setopenMenus', openNameList);
|
||||
console.log(openNameList, 'openNameList');
|
||||
const openNames = getSiderSubmenu(to, menuSider);
|
||||
this.$store.commit('menu/setOpenNames', openNames);
|
||||
// 设置顶栏菜单 后台添加一个接口，设置顶部菜单
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user