feat(theme): 配色专属标准皮肤,清爽全包观感与面板交互重构

This commit is contained in:
augushong
2026-09-27 02:18:41 +00:00
parent 5d1bc69fdf
commit 842641763a
4 changed files with 236 additions and 48 deletions

View File

@@ -4,7 +4,7 @@ $(function () {
iniUrl: ua.url('ajax/initAdmin'), // 初始化接口 iniUrl: ua.url('ajax/initAdmin'), // 初始化接口
clearUrl: ua.url("ajax/clearCache"), // 缓存清理接口 clearUrl: ua.url("ajax/clearCache"), // 缓存清理接口
urlHashLocation: true, // 是否打开hash定位 urlHashLocation: true, // 是否打开hash定位
bgColorDefault: 12, // 主题默认配置(12=全白浅色,配清爽皮肤) bgColorDefault: 0, // 主题默认配置(0=标准皮肤经典配色)
menuChildOpen: false, // 是否默认展开菜单 menuChildOpen: false, // 是否默认展开菜单
loadingTime: 0, // 初始化加载时间 loadingTime: 0, // 初始化加载时间
pageAnim: true, // iframe窗口动画 pageAnim: true, // iframe窗口动画

View File

@@ -1,8 +1,13 @@
// ============================================================================ // ============================================================================
// 清爽(fresh)皮肤 —— 36px 紧凑头部 + 白底轻量视觉 // 清爽(fresh)皮肤 —— 36px 紧凑头部 + 白底轻量视觉
// 结构:(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触 // 结构:(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触 (F)全包颜色接管
// 约定:尺寸/布局/圆角/阴影归本文件;颜色基调归配色系统(buildThemeCss), // 全包边界声明:本皮肤接管全部框架颜色(含文字色),配色系统注入(miniTheme.js
// 文字颜色一律归配色系统,本文件不覆盖菜单/头部文字色。禁用选择器扩展语法。 // buildThemeCss)仅对标准皮肤生效,fresh 不消费其色值。
// 此为经用户批准的第二轮架构变更,推翻第一轮"文字颜色归配色系统"边界——仅对 fresh
// 适用,其他皮肤仍守旧边界。F 段选择器逐字镜像 buildThemeCss 注入清单,作为对照表
// 出处与接管依据:.elem-style-fresh 包裹使每条规则天然 +1 类特异性,与注入同
// !important 时镜像选择器必胜。
// 约定:尺寸/布局/圆角/阴影归本文件;禁用选择器扩展语法。
// ============================================================================ // ============================================================================
// 0. 设计令牌 // 0. 设计令牌
@@ -13,7 +18,7 @@ $text-main: #33383f;
$text-sub: #6b7280; $text-sub: #6b7280;
$border-light: #f0f2f5; $border-light: #f0f2f5;
$border: #e5e9ef; $border: #e5e9ef;
$bg-page: #f7f8fa; $bg-page: #f7f8fa; // logo 区+侧栏灰底
$radius-btn: 4px; $radius-btn: 4px;
$radius-card: 8px; $radius-card: 8px;
$shadow-card: 0 1px 2px rgba(0, 0, 0, .04); $shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
@@ -40,7 +45,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
.layui-layout-admin .layuimini-logo { .layui-layout-admin .layuimini-logo {
height : $header-h !important; height : $header-h !important;
line-height : $header-h !important; line-height : $header-h !important;
background-color: #fff !important; background-color: $bg-page !important;
color : $text-main !important; color : $text-main !important;
box-sizing : border-box; box-sizing : border-box;
border-right : 1px solid $border-light; border-right : 1px solid $border-light;
@@ -66,7 +71,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
line-height : 20px; line-height : 20px;
margin-top : 8px; margin-top : 8px;
border-radius: $radius-btn; border-radius: $radius-btn;
color : $text-sub; color : #4e5969;
} }
.layui-layout-admin .layui-body, .layui-layout-admin .layui-body,
@@ -74,23 +79,29 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
top: $header-h !important; top: $header-h !important;
} }
// B. 头部分组 tab(文字色归配色系统,激活用 inset box-shadow 底条,不依赖被置零的 :after) // B. 头部分组 tab(:hover/.layui-this 路径是注入盲区的唯一 hover 反馈来源;常态文字色由 F 段 T3/T5 接管;激活底条用 inset box-shadow)
// 右侧布局项运行时 DOM 为 .layui-header > .layuimini-header-content > ul.layui-layout-right,
// 故层级用后代约束;其 hover>a 需压过 T3 常态镜像 (0,5,1),由下方 (0,7,1) 规则负责。
.layuimini-header-menu>.layui-nav-item>a, .layuimini-header-menu>.layui-nav-item>a,
.layui-header>.layui-layout-right>.layui-nav-item>a { .layui-header .layui-layout-right>.layui-nav-item>a {
padding: 0 14px; padding: 0 14px;
} }
.layuimini-header-menu>.layui-nav-item:hover, .layuimini-header-menu>.layui-nav-item:hover,
.layuimini-header-menu>.layui-nav-item.layui-this, .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:hover,
.layui-header>.layui-layout-right>.layui-nav-item.layui-this { .layui-header .layui-layout-right>.layui-nav-item.layui-this {
background-color: transparent !important; background-color: transparent !important;
} }
.layuimini-header-menu>.layui-nav-item:hover>a, .layuimini-header-menu>.layui-nav-item:hover>a,
.layuimini-header-menu>.layui-nav-item.layui-this>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:hover>a,
.layui-header>.layui-layout-right>.layui-nav-item.layui-this>a { .layui-header .layui-layout-right>.layui-nav-item.layui-this>a {
color: $main !important;
}
.layui-layout-admin .layui-header .layui-nav.layui-layout-right>.layui-nav-item:hover>a {
color: $main !important; color: $main !important;
} }
@@ -126,7 +137,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
color: $main !important; color: $main !important;
} }
.layuimini-tab .layui-tab-title .layuimini-tab-active { .layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
width : 6px; width : 6px;
height : 6px; height : 6px;
background-color: $main; background-color: $main;
@@ -138,7 +149,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
border-bottom : $border-light 1px solid; border-bottom : $border-light 1px solid;
} }
// D. 侧栏(文字色归配色系统;菜单项 40px 高度不动) // D. 侧栏(菜单项 40px 高度不动;常态文字色由 F 段 T11/T12 接管,本段仅保留 hover 背景/边框/激活胶囊)
.layuimini-menu-left .layui-nav .layui-nav-item a:hover { .layuimini-menu-left .layui-nav .layui-nav-item a:hover {
background-color: rgba(127, 127, 127, 0.15) !important; background-color: rgba(127, 127, 127, 0.15) !important;
} }
@@ -149,7 +160,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
.layuimini-menu-left .layui-nav-tree .layui-nav-child, .layuimini-menu-left .layui-nav-tree .layui-nav-child,
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child { .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child {
background-color: #fafbfc; background-color: #f2f3f6;
} }
// 激活态(选择器清单参照 _sicfi.scss:763-770,含 dd 与 -zoom 变体) // 激活态(选择器清单参照 _sicfi.scss:763-770,含 dd 与 -zoom 变体)
@@ -166,15 +177,21 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
box-shadow : inset 3px 0 0 $main; box-shadow : inset 3px 0 0 $main;
} }
// E. 内容组件轻触(& = body.elem-style-fresh) // E. 内容组件轻触
& {
background: $bg-page;
}
.layui-btn { .layui-btn {
border-radius: $radius-btn; border-radius: $radius-btn;
} }
.layui-btn-primary {
border-color: $border;
color : #4e5969;
}
.layui-btn-primary:hover {
border-color: $main;
color : $main;
}
.layui-card, .layui-card,
.layuimini-container { .layuimini-container {
border-radius: $radius-card; border-radius: $radius-card;
@@ -203,3 +220,98 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
border : 1px solid $border-light; border : 1px solid $border-light;
box-shadow : $shadow-pop; box-shadow : $shadow-pop;
} }
// F. 全包颜色接管
// 以下选择器逐字镜像 miniTheme.js buildThemeCss 注入清单(:330-423),
// 在 .elem-style-fresh 包裹上下文内每条规则天然 +1 类特异性,
// 与注入同 !important 时镜像选择器必胜。
// T8(logo h1 文字色 $text-main)已由上方既有规则满足,按定案保留、不重复声明;
// T15(页签圆点)由 C 段圆点选择器补 .layui-this 承接(包裹下 (0,5,0) > 注入 (0,4,0),无需 !important)。
// T1 头部背景(白底定案)
.layui-layout-admin .layui-header {
background-color: #fff !important;
}
// T2 头部选中背景/工具图标 hover(透明)
.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this,
.layui-layout-admin .layuimini-tool i:hover {
background-color: transparent !important;
}
// T3 头部导航文字
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
color: #4e5969 !important;
}
// T4 头部下拉文字
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
color: #4e5969 !important;
}
// T5 头部 hover/激活文字(品牌蓝)
.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
color: $main !important;
}
// T6 头部工具图标
.layui-layout-admin .layui-header .layuimini-tool i {
color: #4e5969 !important;
}
// T9 侧栏背景(灰底定案)
.layui-side.layui-bg-black,
.layui-side.layui-bg-black > .layuimini-menu-left > ul,
.layuimini-menu-left-zoom > ul {
background-color: $bg-page !important;
}
// T10 侧栏展开子菜单背景
.layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
background-color: #f2f3f6 !important;
}
// T11 侧栏文字(图标继承 a 色一并解决纯黑问题)
.layuimini-menu-left .layui-nav .layui-nav-item a,
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
color: #3d4757 !important;
}
// T12 侧栏 hover/激活文字(品牌蓝;激活底胶囊与左条由 D 段既有规则继续负责)
.layuimini-menu-left .layui-nav .layui-nav-item a:hover,
.layuimini-menu-left .layui-nav .layui-this a,
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover,
.layuimini-menu-left-zoom.layui-nav .layui-this a {
color: $main !important;
}
// T13 侧栏展开箭头
.layuimini-menu-left .layui-nav .layui-nav-more,
.layuimini-menu-left-zoom.layui-nav .layui-nav-more {
border-top-color: #3d4757 !important;
}
.layuimini-menu-left .layui-nav .layui-nav-mored,
.layuimini-menu-left .layui-nav-itemed > a .layui-nav-more,
.layuimini-menu-left-zoom.layui-nav .layui-nav-mored,
.layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
border-color: transparent transparent #3d4757 !important;
}
// T14 头部展开箭头与下拉激活
.layui-header .layui-nav .layui-nav-more {
border-top-color: #4e5969 !important;
}
.layui-header .layui-nav .layui-nav-mored,
.layui-header .layui-nav-itemed > a .layui-nav-more {
border-color: transparent transparent #4e5969 !important;
}
.layui-header .layui-nav .layui-nav-child dd.layui-this a,
.layui-header .layui-nav-child dd.layui-this,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
background-color: $main !important;
color : #fff !important;
}

View File

@@ -2184,7 +2184,7 @@
.elem-style-fresh .layui-layout-admin .layuimini-logo { .elem-style-fresh .layui-layout-admin .layuimini-logo {
height: 36px !important; height: 36px !important;
line-height: 36px !important; line-height: 36px !important;
background-color: #fff !important; background-color: #f7f8fa !important;
color: #33383f !important; color: #33383f !important;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #f0f2f5; border-right: 1px solid #f0f2f5;
@@ -2206,26 +2206,29 @@
line-height: 20px; line-height: 20px;
margin-top: 8px; margin-top: 8px;
border-radius: 4px; border-radius: 4px;
color: #6b7280; color: #4e5969;
} }
.elem-style-fresh .layui-layout-admin .layui-body, .elem-style-fresh .layui-layout-admin .layui-body,
.elem-style-fresh .layui-layout-admin .layui-side { .elem-style-fresh .layui-layout-admin .layui-side {
top: 36px !important; top: 36px !important;
} }
.elem-style-fresh .layuimini-header-menu > .layui-nav-item > a, .elem-style-fresh .layuimini-header-menu > .layui-nav-item > a,
.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item > a { .elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item > a {
padding: 0 14px; padding: 0 14px;
} }
.elem-style-fresh .layuimini-header-menu > .layui-nav-item:hover, .elem-style-fresh .layuimini-header-menu > .layui-nav-item:hover,
.elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this, .elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this,
.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item:hover, .elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item:hover,
.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item.layui-this { .elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item.layui-this {
background-color: transparent !important; background-color: transparent !important;
} }
.elem-style-fresh .layuimini-header-menu > .layui-nav-item:hover > a, .elem-style-fresh .layuimini-header-menu > .layui-nav-item:hover > a,
.elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this > a, .elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this > a,
.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item:hover > a, .elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item:hover > a,
.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item.layui-this > a { .elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item.layui-this > a {
color: #1E9FFF !important;
}
.elem-style-fresh .layui-layout-admin .layui-header .layui-nav.layui-layout-right > .layui-nav-item:hover > a {
color: #1E9FFF !important; color: #1E9FFF !important;
} }
.elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this, .elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this,
@@ -2252,7 +2255,7 @@
.elem-style-fresh .layuimini-tab .layui-tab-title .layui-this span { .elem-style-fresh .layuimini-tab .layui-tab-title .layui-this span {
color: #1E9FFF !important; color: #1E9FFF !important;
} }
.elem-style-fresh .layuimini-tab .layui-tab-title .layuimini-tab-active { .elem-style-fresh .layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: #1E9FFF; background-color: #1E9FFF;
@@ -2270,7 +2273,7 @@
} }
.elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-nav-child, .elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-nav-child,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child { .elem-style-fresh .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child {
background-color: #fafbfc; background-color: #f2f3f6;
} }
.elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-this, .elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-this,
.elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-this > a, .elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-this > a,
@@ -2284,9 +2287,6 @@
color: #1E9FFF !important; color: #1E9FFF !important;
box-shadow: inset 3px 0 0 #1E9FFF; box-shadow: inset 3px 0 0 #1E9FFF;
} }
.elem-style-fresh {
background: #f7f8fa;
}
.elem-style-fresh .layui-btn, .elem-style-fresh .elem-style-sicfi .layui-layer-easy .layui-layer-btn a, .elem-style-sicfi .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-gtk .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-gtk .layuimini-container .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-gtk .laydate-footer-btns span, .elem-style-gtk .laydate-footer-btns .elem-style-fresh span, .elem-style-fresh .elem-style-gtk .layui-laydate-footer span, .elem-style-gtk .layui-laydate-footer .elem-style-fresh span, .elem-style-fresh .elem-style-gtk .layui-tab-brief > .layui-tab-title li, .elem-style-gtk .layui-tab-brief > .layui-tab-title .elem-style-fresh li, .elem-style-fresh .elem-style-gtk .layuimini-header-menu > li.layui-nav-item, .elem-style-gtk .elem-style-fresh .layuimini-header-menu > li.layui-nav-item, .elem-style-fresh .elem-style-nes .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-nes .layuimini-container .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-nes .layui-layer-easy .layui-layer-btn a, .elem-style-nes .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-win7 .layui-layer-easy .layui-layer-btn a, .elem-style-win7 .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-neomorphic .layui-table-tool .layui-inline[lay-event], .elem-style-neomorphic .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-neomorphic .layuimini-main, .elem-style-neomorphic .elem-style-fresh .layuimini-main, .elem-style-fresh .elem-style-neomorphic .layui-layer, .elem-style-neomorphic .elem-style-fresh .layui-layer, .elem-style-fresh .elem-style-neomorphic .layui-card, .elem-style-neomorphic .elem-style-fresh .layui-card, .elem-style-fresh .elem-style-neomorphic .panel, .elem-style-neomorphic .elem-style-fresh .panel, .elem-style-fresh .elem-style-neomorphic .layuimini-qiuck-module, .elem-style-neomorphic .elem-style-fresh .layuimini-qiuck-module, .elem-style-fresh .elem-style-neomorphic .layui-side.layui-bg-black, .elem-style-neomorphic .elem-style-fresh .layui-side.layui-bg-black, .elem-style-fresh .layui-btn, .elem-style-fresh .elem-style-sicfi .layui-layer-easy .layui-layer-btn a, .elem-style-sicfi .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-gtk .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-gtk .layuimini-container .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-gtk .laydate-footer-btns span, .elem-style-gtk .laydate-footer-btns .elem-style-fresh span, .elem-style-fresh .elem-style-gtk .layui-laydate-footer span, .elem-style-gtk .layui-laydate-footer .elem-style-fresh span, .elem-style-fresh .elem-style-gtk .layui-tab-brief > .layui-tab-title li, .elem-style-gtk .layui-tab-brief > .layui-tab-title .elem-style-fresh li, .elem-style-fresh .elem-style-gtk .layuimini-header-menu > li.layui-nav-item, .elem-style-gtk .elem-style-fresh .layuimini-header-menu > li.layui-nav-item, .elem-style-fresh .elem-style-nes .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-nes .layuimini-container .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-nes .layui-layer-easy .layui-layer-btn a, .elem-style-nes .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-win7 .layui-layer-easy .layui-layer-btn a, .elem-style-win7 .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-neomorphic .layui-table-tool .layui-inline[lay-event], .elem-style-neomorphic .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-neomorphic .layuimini-main, .elem-style-neomorphic .elem-style-fresh .layuimini-main, .elem-style-fresh .elem-style-neomorphic .layui-layer, .elem-style-neomorphic .elem-style-fresh .layui-layer, .elem-style-fresh .elem-style-neomorphic .layui-card, .elem-style-neomorphic .elem-style-fresh .layui-card, .elem-style-fresh .elem-style-neomorphic .panel, .elem-style-neomorphic .elem-style-fresh .panel, .elem-style-fresh .elem-style-neomorphic .layuimini-qiuck-module, .elem-style-neomorphic .elem-style-fresh .layuimini-qiuck-module, .elem-style-fresh .elem-style-neomorphic .layui-side.layui-bg-black, .elem-style-neomorphic .elem-style-fresh .layui-side.layui-bg-black,
.elem-style-fresh .elem-style-neomorphic .layui-side.layui-bg-black > .layuimini-menu-left > ul, .elem-style-fresh .elem-style-neomorphic .layui-side.layui-bg-black > .layuimini-menu-left > ul,
.elem-style-neomorphic .elem-style-fresh .layui-side.layui-bg-black > .layuimini-menu-left > ul, .elem-style-neomorphic .elem-style-fresh .layui-side.layui-bg-black > .layuimini-menu-left > ul,
@@ -2296,6 +2296,14 @@
.elem-style-neomorphic .layuimini-menu-left-zoom.layui-nav .layui-nav-item .elem-style-fresh a, .elem-style-fresh .elem-style-neomorphic .layui-header .layuimini-header-menu > .layui-nav-item, .elem-style-neomorphic .layui-header .elem-style-fresh .layuimini-header-menu > .layui-nav-item, .elem-style-fresh .elem-style-neomorphic .layui-header .layui-nav .layui-nav-item, .elem-style-neomorphic .layui-header .layui-nav .elem-style-fresh .layui-nav-item, .elem-style-fresh .elem-style-neomorphic .layui-form-select dl, .elem-style-neomorphic .layui-form-select .elem-style-fresh dl, .elem-style-fresh .elem-style-neomorphic .layui-form-checkbox, .elem-style-neomorphic .elem-style-fresh .layui-form-checkbox, .elem-style-fresh .elem-style-neomorphic .layui-form-radio, .elem-style-neomorphic .elem-style-fresh .layui-form-radio { .elem-style-neomorphic .layuimini-menu-left-zoom.layui-nav .layui-nav-item .elem-style-fresh a, .elem-style-fresh .elem-style-neomorphic .layui-header .layuimini-header-menu > .layui-nav-item, .elem-style-neomorphic .layui-header .elem-style-fresh .layuimini-header-menu > .layui-nav-item, .elem-style-fresh .elem-style-neomorphic .layui-header .layui-nav .layui-nav-item, .elem-style-neomorphic .layui-header .layui-nav .elem-style-fresh .layui-nav-item, .elem-style-fresh .elem-style-neomorphic .layui-form-select dl, .elem-style-neomorphic .layui-form-select .elem-style-fresh dl, .elem-style-fresh .elem-style-neomorphic .layui-form-checkbox, .elem-style-neomorphic .elem-style-fresh .layui-form-checkbox, .elem-style-fresh .elem-style-neomorphic .layui-form-radio, .elem-style-neomorphic .elem-style-fresh .layui-form-radio {
border-radius: 4px; border-radius: 4px;
} }
.elem-style-fresh .layui-btn-primary {
border-color: #e5e9ef;
color: #4e5969;
}
.elem-style-fresh .layui-btn-primary:hover {
border-color: #1E9FFF;
color: #1E9FFF;
}
.elem-style-fresh .layui-card, .elem-style-fresh .layui-card,
.elem-style-fresh .layuimini-container { .elem-style-fresh .layuimini-container {
border-radius: 8px; border-radius: 8px;
@@ -2320,6 +2328,67 @@
border: 1px solid #f0f2f5; border: 1px solid #f0f2f5;
box-shadow: 0 6px 16px rgba(31, 35, 41, 0.08); box-shadow: 0 6px 16px rgba(31, 35, 41, 0.08);
} }
.elem-style-fresh .layui-layout-admin .layui-header {
background-color: #fff !important;
}
.elem-style-fresh .layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this,
.elem-style-fresh .layui-layout-admin .layuimini-tool i:hover {
background-color: transparent !important;
}
.elem-style-fresh .layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
color: #4e5969 !important;
}
.elem-style-fresh .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
color: #4e5969 !important;
}
.elem-style-fresh .layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
.elem-style-fresh .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
color: #1E9FFF !important;
}
.elem-style-fresh .layui-layout-admin .layui-header .layuimini-tool i {
color: #4e5969 !important;
}
.elem-style-fresh .layui-side.layui-bg-black,
.elem-style-fresh .layui-side.layui-bg-black > .layuimini-menu-left > ul,
.elem-style-fresh .layuimini-menu-left-zoom > ul {
background-color: #f7f8fa !important;
}
.elem-style-fresh .layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
background-color: #f2f3f6 !important;
}
.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-item a,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
color: #3d4757 !important;
}
.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-item a:hover,
.elem-style-fresh .layuimini-menu-left .layui-nav .layui-this a,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-this a {
color: #1E9FFF !important;
}
.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-more,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-more {
border-top-color: #3d4757 !important;
}
.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-mored,
.elem-style-fresh .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-mored,
.elem-style-fresh .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
border-color: transparent transparent #3d4757 !important;
}
.elem-style-fresh .layui-header .layui-nav .layui-nav-more {
border-top-color: #4e5969 !important;
}
.elem-style-fresh .layui-header .layui-nav .layui-nav-mored,
.elem-style-fresh .layui-header .layui-nav-itemed > a .layui-nav-more {
border-color: transparent transparent #4e5969 !important;
}
.elem-style-fresh .layui-header .layui-nav .layui-nav-child dd.layui-this a,
.elem-style-fresh .layui-header .layui-nav-child dd.layui-this,
.elem-style-fresh .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
background-color: #1E9FFF !important;
color: #fff !important;
}
@font-face { @font-face {
font-family: "ark-pixel"; font-family: "ark-pixel";

View File

@@ -452,12 +452,12 @@
var listElemStyle = [ var listElemStyle = [
{ {
title: '清爽', title: '清爽',
className: 'fresh', className: 'fresh'
defaultColorConfig: '12'
}, },
{ {
title: '标准', title: '标准',
className: 'normal' className: 'normal',
defaultColorConfig: '0'
}, },
{ {
title: '原型', title: '原型',
@@ -470,7 +470,8 @@
}, },
{ {
title: 'GTK', title: 'GTK',
className: 'gtk' className: 'gtk',
defaultColorConfig: '0'
}, },
{ {
title: '像素', title: '像素',
@@ -510,14 +511,12 @@
var html = ''; var html = '';
$.each(listElemStyle, function (key, val) { $.each(listElemStyle, function (key, val) {
if (typeof val.defaultColorConfig == 'undefined') { var dcc = (typeof val.defaultColorConfig == 'undefined') ? '' : val.defaultColorConfig;
val.defaultColorConfig = '0'
}
if (val.className === elemStyleName) { if (val.className === elemStyleName) {
html += '<li class="layui-this style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n'; html += '<li class="layui-this style-item" data-select-style="' + val.className + '" data-default-color-config="' + dcc + '">\n';
} else { } else {
html += '<li class="style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n'; html += '<li class="style-item" data-select-style="' + val.className + '" data-default-color-config="' + dcc + '">\n';
} }
html += html +=
val.title + val.title +
@@ -537,19 +536,20 @@
var clientHeight = (document.documentElement.clientHeight) - 60; var clientHeight = (document.documentElement.clientHeight) - 60;
var bgColorHtml = miniTheme.buildBgColorHtml(options); var bgColorHtml = miniTheme.buildBgColorHtml(options);
var elemStyleHtml = miniTheme.buildElemStyleHtml(options); var elemStyleHtml = miniTheme.buildElemStyleHtml(options);
var currentElemStyle = localStorage.getItem('layuiminiElemStyleName') || options.elemStyleDefault;
var html = '<div class="layuimini-color">\n' + var html = '<div class="layuimini-color">\n' +
'<div class="color-title">\n' +
'<span>配色方案</span>\n' +
'</div>\n' +
'<div class="color-content">\n' +
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'<div class="elem-title">\n' + '<div class="elem-title">\n' +
'<span>元素风格</span>\n' + '<span>元素风格</span>\n' +
'</div>\n' + '</div>\n' +
'<div class="elem-content">\n' + '<div class="elem-content">\n' +
'<ul>\n' + elemStyleHtml + '</ul>\n' + '<ul>\n' + elemStyleHtml + '</ul>\n' +
'</div>\n' + '</div>\n' +
'<div class="color-title">\n' +
'<span>配色方案</span>' + (currentElemStyle !== 'normal' ? '<span class="layui-word-aux" style="position:static;margin-left:8px;font-size:12px;color:#5f6368">标准皮肤支持</span>' : '') + '\n' +
'</div>\n' +
'<div class="color-content">\n' +
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'<div class="more-menu-list">\n' + '<div class="more-menu-list">\n' +
'<a class="more-menu-item" href="http://doc.ulthon.com/home/read/ulthon_admin/home.html" target="_blank"><i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档</a>\n' + '<a class="more-menu-item" href="http://doc.ulthon.com/home/read/ulthon_admin/home.html" target="_blank"><i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档</a>\n' +
'<a class="more-menu-item" href="https://gitee.com/ulthon/ulthon_admin" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' + '<a class="more-menu-item" href="https://gitee.com/ulthon/ulthon_admin" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' +
@@ -584,6 +584,13 @@
$('body').on('click', '[data-select-bgcolor]', function () { $('body').on('click', '[data-select-bgcolor]', function () {
var bgcolorId = $(this).attr('data-select-bgcolor'); var bgcolorId = $(this).attr('data-select-bgcolor');
var currentElemStyle = localStorage.getItem('layuiminiElemStyleName') || 'fresh';
if (currentElemStyle !== 'normal') {
localStorage.setItem('layuiminiElemStyleName', 'normal');
$('.elem-content li[data-select-style]').removeClass('layui-this');
$('.elem-content li[data-select-style="normal"]').addClass('layui-this');
}
$(this).attr('class', 'layui-this').siblings().removeClass('layui-this'); $(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
localStorage.setItem('layuiminiBgcolorId', bgcolorId); localStorage.setItem('layuiminiBgcolorId', bgcolorId);
miniTheme.render({ miniTheme.render({