123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- /**
- @navBg 菜单背景色
- @headerBg 头部背景色
- @footBg 页脚背景色
- @fontColor 头部颜色
- @activeFontColor 菜单激活是文字颜色
- @menuItemActive 菜单激活时背景色
- @subMenuOpened 子菜单打开时背景色
- @menuFontColor 菜单文字颜色
- @mainBackground 主要的背景色
- */
- .main-theme(@navBg,@headerBg, @footBg,@fontColor,@activeFontColor,@menuItemActive,@subMenuOpened,@menuFontColor,@mainBackground){
- .main-framework__aside{
- position: relative;
- z-index: 200;
- background: @navBg;
- box-shadow: 0 1px 4px rgba(0,21,41,.1);
- .el-menu{
- background: @navBg;
- &:not(.el-menu--collapse){
- .el-menu-item.is-active{
- border-left-color: @activeFontColor !important;
- background: @menuItemActive !important;
- color: @activeFontColor !important;
- }
- }
- .el-menu-item{
- color: @useMenuFontColor;
- border-left: 5px solid transparent;
- &:hover{
- color: @useMenuFontColor !important;
- background: @menuItemActive !important;
- }
- }
- .el-submenu {
- }
- .el-submenu__title{
- border-left: 5px solid transparent;
- color: @useMenuFontColor;
- }
- .el-menu-item.is-active{
- background: @menuItemActive;
- color: @activeFontColor;
- }
- .el-submenu{
- .el-submenu__title{
- background: @navBg;
- }
- &.is-active.el-submenu__title{
- background: @menuItemActive;
- }
- &.is-opened{
- .el-submenu__title{
- background: @subMenuOpened;
- }
- .el-menu{
- .el-menu-item{
- background: @subMenuOpened;
- &.is-active{
- background: @subMenuOpened;
- }
- }
- }
- }
- }
- }
- }
- .main-framework__name{
- background: @navBg;
- color: @fontColor;
- }
- .main-framework__header{
- .main-framework__name{ // 使用header的默认颜色和背景色
- background: @headerBg;
- color: @fontColor;
- }
- background: @headerBg;
- color: @fontColor;
- box-shadow: 0 1px 4px rgba(0,21,41,.1);
- position: relative;
- z-index: 200;
- .el-dropdown{
- color: inherit;
- }
- .el-breadcrumb__inner{
- color: inherit;
- }
- }
- .main-framework__main{
- background: @mainBackground;
- }
- .main-framework__footer{
- position: relative;
- z-index: 200;
- background: @footBg;
- color: @fontColor;
- }
- .main-framework__aside__switch{
- color: @useMenuFontColor;
- //box-shadow: 0 1px 4px rgba(0,21,41,.3);
- }
- @useMenuFontColor: if((iscolor(@menuFontColor)), @menuFontColor, @fontColor);
- }
- .main-theme--data-center{
- @themePrimary: #1e3851;
- .main-theme(@themePrimary,@themePrimary,@themePrimary,#fff,#fff,#104682,#253f58,'',@background);
- }
- .main-theme--light{
- @themePrimary: #fff;
- .main-theme(@themePrimary,@themePrimary,@themePrimary,#333,@primary,#e8f4ff,'','',@background);
- }
- // TODO: 黑暗模式待完善
- .main-theme--dark{
- @themePrimary: #2f3542;
- .main-theme(@themePrimary,@themePrimary,@themePrimary,#fff,@primary,#444,'','',@background);
- }
|