提交 a8e3dd80 编写于 作者: Shine-zwj's avatar Shine-zwj

update:菜单调整

上级 0d54f56b
......@@ -2,19 +2,26 @@
<#if quick_menus??>
${quick_menus}
<#else>
<div class="app-app-menu<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??> ${ctrl.getPSSysCss().getCssName()}</#if>">
<#if ctrl.getAppMenuStyle?? && ctrl.getAppMenuStyle() == "ICONVIEW">
<#if ctrl.getAppMenuStyle?? && ctrl.getAppMenuStyle() == "ICONVIEW">
<app-icon-menus :menus = "menus" :ctrlName = "'${ctrl.codeName?lower_case}'" @menuClick="select"></app-icon-menus>
<#else>
<el-menu
class="app-menu"
<#if view.getMainMenuAlign()?? && view.getMainMenuAlign()!="TOP">:default-openeds="defaultOpeneds"</#if>
class="app-menu<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??> ${ctrl.getPSSysCss().getCssName()}</#if>"
<#if view.getMainMenuAlign()?? && view.getMainMenuAlign()!="TOP">
:default-openeds="defaultOpeneds"
background-color="#FFFFFF"
text-color="#747480"
active-text-color="#188CE5"
<#else>
background-color="#2E2E38"
text-color="#FFFFFF"
active-text-color="#FFFFFF"
</#if>
:mode="mode"
:menu-trigger="trigger"
:collapse="isCollapse"
@select="select"
:default-active="defaultActive">
<template v-if="Object.is(mode,'horizontal')">
<template v-for="item0 in menus">
<template v-if="item0.items && Array.isArray(item0.items) && item0.items.length > 0">
......@@ -116,10 +123,8 @@
</template>
</template>
<app-menu-item v-else :isCollapse="isCollapse" :menus="menus" :ctrlName="'${ctrl.getCodeName()?lower_case}'" :isFirst="true" :counterdata="counterdata" :popper-class="popperClass"></app-menu-item>
</el-menu>
</#if>
</div>
</#if>
</template>
// 基于 @CONTROL/应用菜单/CONTROL-BASE.vue.ftl 生成
......
// 基于 @CONTROL/应用菜单/CONTROL.scss.ftl 生成
/*** BRGIN:菜单样式 ***/
.app-app-menu {
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 58px);
.ivu-divider{
background-color: #b3b3b3;
height: 2px;
}
> .el-menu {
border-right: 0;
.el-menu-item {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
.ivu-badge {
.ivu-badge-count {
box-shadow: 0 0 0 0px #fff;
}
}
}
.el-submenu__title i, .el-menu-item i {
font-size: 12px;
width: 18px;
}
.el-submenu__title .app-menu-icon,.el-menu-item .app-menu-icon{
width:20px;
font-size: 14px;
}
.el-submenu__title .text {
font-size: 16px;
}
.el-submenu__title .app-menu-circle,.el-menu-item .app-menu-circle {
display: inline-block;
border-radius: 50%;
.app-menu {
.app-menu-icon {
width: 20px;
height: 20px;
line-height: 36px;
vertical-align:middle;
border: 1px solid #fff;
text-align: center;
font: 12px Arial, sans-serif;
}
.el-submenu__title, .el-menu-item {
height: 50px;
font-size: 14px;
line-height: 50px;
border-left: 4px !important;
}
.el-menu-item .el-tooltip {
padding-left: 12px !important;
}
.isCollpase .el-submenu__title{
padding-left: 12px !important;
}
.isFirst > .text {
font-size: 16px !important;
}
.el-menu-item, .el-submenu, .el-menu {
border-top: 1px solid #fff;
}
> .el-menu-item, > .el-submenu > .el-submenu__title {
height: 56px;
line-height: 56px;
padding-left: 16px !important;
}
.app-menu-icon {
margin: 4px;
text-align: center;
}
> .el-submenu {
> .el-menu {
> .el-menu-item, > .el-submenu > .el-submenu__title {
padding-left: 44px !important;
}
> .el-submenu {
> .el-menu {
> .el-menu-item, > .el-submenu > .el-submenu__title {
padding-left: 68px !important;
}
}
}
}
}
.active-icon {
font-size: 40px !important;
position: absolute;
right: 0;
line-height: 42px;
color: #fff !important;
display: none;
width: 24px !important;
overflow: hidden;
}
}
.el-menu--horizontal{
display: flex;
width: calc(100vw - 1100px);
height: 65px;
flex-wrap: nowrap;
overflow-x:scroll;
padding-top: 3px;
.el-menu-item{
overflow: visible;
}
.el-submenu{
.el-submenu__title{
padding-right: 0px !important;
padding-left: 0px !important;
}
}
}
.ivu-divider-horizontal {
width: 100%;
min-width: 100%;
margin: 4px auto;
margin-bottom: 1px;
}
}
.app-popper-menu {
.el-menu-item, .el-submenu__title {
height: 36px;
font-size: 16px;
line-height: 36px;
}
> .el-menu-item, > .el-submenu > .el-submenu__title {
height: 40px;
line-height: 40px;
margin-right: 6px;
}
&.el-menu--horizontal {
.el-menu-item {
.ivu-badge {
.ivu-badge-count {
box-shadow: 0 0 0 0px #fff;
}
}
> span{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 64px;
&.is-active {
border-bottom: 4px solid var(--app-color-yellow);
border-bottom-color: var(--app-color-yellow) !important;
}
}
.ivu-divider-horizontal {
width: 100%;
min-width: 100%;
margin: 4px auto;
margin-bottom: 1px;
}
}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册