// ============================================================================ // 清爽(fresh)皮肤 —— 36px 紧凑头部 + 白底轻量视觉 // 结构:(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触 // 约定:尺寸/布局/圆角/阴影归本文件;颜色基调归配色系统(buildThemeCss), // 文字颜色一律归配色系统,本文件不覆盖菜单/头部文字色。禁用选择器扩展语法。 // ============================================================================ // 0. 设计令牌 $header-h: 36px; $main: #1E9FFF; $main-light: #e8f3ff; $text-main: #33383f; $text-sub: #6b7280; $border-light: #f0f2f5; $border: #e5e9ef; $bg-page: #f7f8fa; $radius-btn: 4px; $radius-card: 8px; $shadow-card: 0 1px 2px rgba(0, 0, 0, .04); $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); // A. 头部 36px(对冲 layuimini.css 全部 60px !important 硬编码) .layui-layout-admin .layui-header, .layuimini-header-menu { height : $header-h !important; box-sizing : border-box; border-bottom : 1px solid $border-light; } .layuimini-header-menu>.layui-nav-item, .layui-header>.layui-layout-right>.layui-nav-item { height : $header-h !important; line-height: $header-h !important; } .layui-layout-admin .layui-header .layui-nav .layui-nav-item a { line-height: $header-h; } .layui-layout-admin .layuimini-logo { height : $header-h !important; line-height : $header-h !important; background-color: #fff !important; color : $text-main !important; box-sizing : border-box; border-right : 1px solid $border-light; } .layui-layout-admin .layuimini-logo img { height: 20px; } .layui-layout-admin .layuimini-logo h1 { color : $text-main !important; font-size: 15px; } .layuimini-tool { line-height: $header-h; color : $text-sub !important; } .layuimini-tool i { width : 20px; height : 20px; line-height : 20px; margin-top : 8px; border-radius: $radius-btn; color : $text-sub; } .layui-layout-admin .layui-body, .layui-layout-admin .layui-side { top: $header-h !important; } // B. 头部分组 tab(文字色归配色系统,激活用 inset box-shadow 底条,不依赖被置零的 :after) .layuimini-header-menu>.layui-nav-item>a, .layui-header>.layui-layout-right>.layui-nav-item>a { padding: 0 14px; } .layuimini-header-menu>.layui-nav-item:hover, .layuimini-header-menu>.layui-nav-item.layui-this, .layui-header>.layui-layout-right>.layui-nav-item:hover, .layui-header>.layui-layout-right>.layui-nav-item.layui-this { background-color: transparent !important; } .layuimini-header-menu>.layui-nav-item:hover>a, .layuimini-header-menu>.layui-nav-item.layui-this>a, .layui-header>.layui-layout-right>.layui-nav-item:hover>a, .layui-header>.layui-layout-right>.layui-nav-item.layui-this>a { color: $main !important; } .layuimini-header-menu>.layui-nav-item.layui-this, .layui-header>.layui-layout-right>.layui-nav-item.layui-this { box-shadow: inset 0 -2px 0 $main; } .layui-header .layui-nav-img { width : 24px; height: 24px; } // C. 页签条重描(高度保持 35px,仅改颜色) .layuimini-tab .layui-tab-title { border-color: $border-light; } .layuimini-tab .layui-tab-title li { border-right: 1px solid $border-light; color : $text-sub; } .layuimini-tab .layui-tab-title span { color: $text-sub; } .layuimini-tab .layui-tab-title .layui-this { box-shadow: inset 0 -2px 0 $main; } .layuimini-tab .layui-tab-title .layui-this span { color: $main !important; } .layuimini-tab .layui-tab-title .layuimini-tab-active { width : 6px; height : 6px; background-color: $main; } .layuimini-tab .layui-tab-control>li { background-color: #fff; border-top : $border-light 1px solid; border-bottom : $border-light 1px solid; } // D. 侧栏(文字色归配色系统;菜单项 40px 高度不动) .layuimini-menu-left .layui-nav .layui-nav-item a:hover { background-color: rgba(127, 127, 127, 0.15) !important; } .layui-side.layui-bg-black>.layuimini-menu-left>ul>.layui-nav-item:first-child { border-top-color: $border-light; } .layuimini-menu-left .layui-nav-tree .layui-nav-child, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child { background-color: #fafbfc; } // 激活态(选择器清单参照 _sicfi.scss:763-770,含 dd 与 -zoom 变体) .layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this>a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this>a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a { background-color: $main-light !important; color : $main !important; box-shadow : inset 3px 0 0 $main; } // E. 内容组件轻触(& = body.elem-style-fresh) & { background: $bg-page; } .layui-btn { border-radius: $radius-btn; } .layui-card, .layuimini-container { border-radius: $radius-card; border : 1px solid $border; box-shadow : $shadow-card; } .layui-layer { border-radius: $radius-card; overflow : hidden; } .layui-layer-title { background-color: #fff; border-bottom : 1px solid $border-light; } .layui-table thead tr, .layui-table-header { background-color: #fafbfc; } .layui-header .layui-nav-child { top : 100% !important; border-radius : 6px; border : 1px solid $border-light; box-shadow : $shadow-pop; }