|
|
layui.define(["jquery", "layer"], function (exports) {
|
|
|
// 获取jQuery对象
|
|
|
var $ = layui.$,
|
|
|
// 获取Layer对象
|
|
|
layer = layui.layer;
|
|
|
|
|
|
// 定义miniTheme对象
|
|
|
var miniTheme = {
|
|
|
|
|
|
/**
|
|
|
* 主题配置项
|
|
|
* @param bgcolorId
|
|
|
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
|
|
|
*/
|
|
|
config: function (bgcolorId) {
|
|
|
// 定义一个名为bgColorConfig的数组，用于存储背景颜色配置
|
|
|
var bgColorConfig = [
|
|
|
{
|
|
|
headerRightBg: '#ffffff', //头部右侧背景色
|
|
|
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#565656', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#1E9FFF', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#565656', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#192027', //logo背景颜色,
|
|
|
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#28333E', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#1E9FFF', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#23262e', //头部右侧背景色
|
|
|
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#23262e', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#23262e', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#ffa4d1', //头部右侧背景色
|
|
|
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#e694bd', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#1aa094', //头部右侧背景色
|
|
|
headerRightBgThis: '#197971', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#23262e', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#1e9fff', //头部右侧背景色
|
|
|
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#ffb800', //头部右侧背景色
|
|
|
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#243346', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#2f4056', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#e82121', //头部右侧背景色
|
|
|
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#963885', //头部右侧背景色
|
|
|
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#243346', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#2f4056', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#586473', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#2D8CF0', //头部右侧背景色
|
|
|
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#0069b7', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#ffb800', //头部右侧背景色
|
|
|
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#d09600', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#2f4056', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#e82121', //头部右侧背景色
|
|
|
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#d91f1f', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
|
|
},
|
|
|
{
|
|
|
headerRightBg: '#963885', //头部右侧背景色
|
|
|
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
|
|
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
|
|
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
|
|
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
|
|
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
|
|
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
|
|
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
|
|
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
|
|
headerLogoBg: '#772c6a', //logo背景颜色,
|
|
|
headerLogoColor: '#ffffff', //logo字体颜色,
|
|
|
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
|
|
leftMenuBg: '#2f4056', //左侧菜单背景,
|
|
|
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
|
|
|
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
|
|
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
|
|
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
|
|
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
|
|
}
|
|
|
];
|
|
|
// 检查bgcolorId是否未定义
|
|
|
if (bgcolorId === undefined) {
|
|
|
// 如果bgcolorId未定义，返回整个背景颜色配置对象
|
|
|
return bgColorConfig;
|
|
|
} else {
|
|
|
// 如果bgcolorId已定义，返回对应ID的背景颜色配置
|
|
|
return bgColorConfig[bgcolorId];
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 初始化
|
|
|
* @param options
|
|
|
*/
|
|
|
render: function (options) {
|
|
|
// 设置默认背景颜色选项，如果未定义则设为false
|
|
|
options.bgColorDefault = options.bgColorDefault || false;
|
|
|
// 设置监听选项，如果未定义则设为false
|
|
|
options.listen = options.listen || false;
|
|
|
// 从sessionStorage中获取背景颜色ID
|
|
|
var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
|
|
|
// 如果背景颜色ID不存在或为空字符串，则使用默认背景颜色ID
|
|
|
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
|
|
|
bgcolorId = options.bgColorDefault;
|
|
|
}
|
|
|
// 构建主题CSS文件
|
|
|
miniTheme.buildThemeCss(bgcolorId);
|
|
|
// 如果需要监听，则调用监听方法
|
|
|
if (options.listen) miniTheme.listen(options);
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 构建主题样式
|
|
|
* @param bgcolorId
|
|
|
* @returns {boolean}
|
|
|
*/
|
|
|
buildThemeCss: function (bgcolorId) {
|
|
|
// 检查是否提供了背景颜色ID，如果没有则返回false
|
|
|
if (!bgcolorId) {
|
|
|
return false;
|
|
|
}
|
|
|
// 获取指定ID的背景颜色配置数据
|
|
|
var bgcolorData = miniTheme.config(bgcolorId);
|
|
|
// 构建CSS样式字符串
|
|
|
// 定义一个包含CSS样式的字符串，用于设置头部右侧背景色
|
|
|
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
|
|
|
'.layui-layout-admin .layui-header {\n' +
|
|
|
// 使用bgcolorData对象中的headerRightBg属性值设置背景颜色，并添加!important确保优先级
|
|
|
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
'/*头部右侧选中背景色 headerRightBgThis */\n' +
|
|
|
// 选择器：匹配layui-layout-admin类下的layui-header内的layuimini-header-content的子元素ul中的layui-nav-item类和layui-this类，以及layuimini-tool内的i元素在悬停时
|
|
|
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
|
|
|
// 设置背景颜色为bgcolorData对象中的headerRightBgThis属性值，并添加!important以覆盖其他样式
|
|
|
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
'/*头部右侧字体颜色 headerRightColor */\n' +
|
|
|
// 选择器：.layui-layout-admin 下的 .layui-header 中的 .layui-nav 的 .layui-nav-item 内的 a 元素
|
|
|
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
|
|
|
// 设置字体颜色为 bgcolorData 对象中的 headerRightColor 属性值
|
|
|
' color: ' + bgcolorData.headerRightColor + ';\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
/**头部右侧下拉字体颜色 headerRightChildColor */
|
|
|
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
|
|
|
// 设置下拉菜单中链接的字体颜色，使用 !important 确保优先级最高
|
|
|
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 定义CSS样式，当鼠标悬停在头部右侧菜单项上时，改变其颜色
|
|
|
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
|
|
|
'.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 {\n' +
|
|
|
// 设置颜色为bgcolorData对象中的headerRightColorThis属性值，并使用!important确保优先级最高
|
|
|
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 定义头部右侧更多下拉颜色样式
|
|
|
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
|
|
'.layui-header .layui-nav .layui-nav-more {\n' +
|
|
|
// 设置边框顶部颜色为指定的颜色，并使用!important确保优先级最高
|
|
|
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
/**头部右侧更多下拉颜色 headerRightNavMore */
|
|
|
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
|
|
|
// 设置边框颜色，上和左为透明，右和下为指定的颜色
|
|
|
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
|
|
|
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav .layui-nav-child dd.layui-this,\n' +
|
|
|
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a,\n' +
|
|
|
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this {\n' +
|
|
|
// 设置背景颜色为 headerRightNavMoreBg，并使用 !important 提升优先级
|
|
|
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
|
|
|
// 设置文字颜色为 headerRightNavMoreColor，并使用 !important 提升优先级
|
|
|
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 定义头部缩放按钮样式，使用传入的headerRightToolColor颜色值
|
|
|
'/*头部缩放按钮样式 headerRightToolColor */\n' +
|
|
|
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
|
|
|
// 设置头部工具图标的颜色
|
|
|
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 生成包含logo背景颜色的CSS样式字符串
|
|
|
'/*logo背景颜色 headerLogoBg */\n' +
|
|
|
'.layui-layout-admin .layuimini-logo {\n' +
|
|
|
// 设置logo的背景颜色，使用bgcolorData对象中的headerLogoBg属性值
|
|
|
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 定义一个CSS样式规则，用于设置layui-layout-admin类下的layuimini-logo中的h1元素的字体颜色
|
|
|
'/*logo字体颜色 headerLogoColor */\n' +
|
|
|
'.layui-layout-admin .layuimini-logo h1 {\n' +
|
|
|
// 将h1元素的颜色设置为bgcolorData对象中的headerLogoColor属性值
|
|
|
' color: ' + bgcolorData.headerLogoColor + ';\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
|
|
// 选择左侧菜单中的更多按钮，并设置其顶部边框颜色
|
|
|
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
|
|
|
// 使用变量bgcolorData.leftMenuNavMore的值来设置顶部边框颜色
|
|
|
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
/** 左侧菜单更多下拉样式 leftMenuNavMore */
|
|
|
'.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 .layui-nav-itemed > a .layui-nav-more {\n' +
|
|
|
// 设置边框颜色，上和左为透明，右和下为指定背景色
|
|
|
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
'/*左侧菜单背景 leftMenuBg */\n' +
|
|
|
// 设置左侧菜单的背景颜色为黑色，并应用到指定的元素上
|
|
|
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
|
|
|
// 使用变量bgcolorData中的leftMenuBg值作为背景颜色，并添加!important确保优先级
|
|
|
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 左侧菜单选中背景样式定义
|
|
|
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
|
|
|
// 设置左侧菜单中当前选中项的背景颜色
|
|
|
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-this a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,\n' +
|
|
|
// 设置左侧菜单缩放状态下当前选中项的背景颜色
|
|
|
'.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-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.lavueimini-tabactiveColoryt a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this {\n' +
|
|
|
// 应用背景颜色，并使用!important确保优先级最高
|
|
|
' background-color: ' + bgcolorData.leftMenuBgThis + '!important\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
|
|
|
// 选择左侧菜单中已展开的父菜单项下的子菜单
|
|
|
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
|
|
|
// 设置子菜单的背景颜色，并使用!important确保优先级最高
|
|
|
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
'/*左侧菜单字体颜色 leftMenuColor */\n' +
|
|
|
// 选择左侧菜单中的所有导航项链接，并设置其字体颜色为bgcolorData.leftMenuColor
|
|
|
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
|
|
|
// 使用!important确保颜色设置不会被其他CSS规则覆盖
|
|
|
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
// 定义左侧菜单选中字体颜色样式
|
|
|
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
|
|
|
'.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 {\n' +
|
|
|
// 设置鼠标悬停或当前选中的菜单项字体颜色，并使用!important确保优先级最高
|
|
|
' color:' + bgcolorData.leftMenuColorThis + '!important;\n' +
|
|
|
'}\n' +
|
|
|
'\n' +
|
|
|
/**
|
|
|
* 设置tab选项卡选中颜色
|
|
|
* @param {string} bgcolorData.tabActiveColor - tab选项卡选中时的背景颜色
|
|
|
*/
|
|
|
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
|
|
|
// 设置背景颜色为传入的tabActiveColor值
|
|
|
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
|
|
|
'}\n';
|
|
|
//将生成的CSS样式插入到页面中
|
|
|
// 将styleHtml的内容插入到ID为'layuimini-bg-color'的元素中
|
|
|
$('#layuimini-bg-color').html(styleHtml);
|
|
|
/**
|
|
|
* 构建主题选择html
|
|
|
* @param options
|
|
|
* @returns {string}
|
|
|
*/
|
|
|
/**
|
|
|
* 构建背景颜色HTML字符串
|
|
|
* @param {Object} options - 配置选项对象
|
|
|
* @param {number} options.bgColorDefault - 默认背景颜色ID
|
|
|
* @returns {string} 生成的背景颜色HTML字符串
|
|
|
*/
|
|
|
buildBgColorHtml: function (options) {
|
|
|
// 如果未定义默认背景颜色ID，则设置为0
|
|
|
options.bgColorDefault = options.bgColorDefault || 0;
|
|
|
|
|
|
// 从sessionStorage中获取当前背景颜色ID
|
|
|
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
|
|
|
|
|
|
// 如果获取到的背景颜色ID不是数字，则使用默认背景颜色ID
|
|
|
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
|
|
|
|
|
|
// 获取背景颜色配置
|
|
|
var bgColorConfig = miniTheme.config();
|
|
|
|
|
|
// 初始化HTML字符串
|
|
|
var html = '';
|
|
|
|
|
|
// 遍历背景颜色配置
|
|
|
$.each(bgColorConfig, function (key, val) {
|
|
|
// 如果当前背景颜色ID与配置中的ID相同，添加选中样式
|
|
|
if (key === bgcolorId) {
|
|
|
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
|
|
|
} else {
|
|
|
html += '<li data-select-bgcolor="' + key + '">\n';
|
|
|
}
|
|
|
|
|
|
// 构建背景颜色HTML片段
|
|
|
// 开始构建HTML字符串，添加一个链接元素，并设置其属性和样式
|
|
|
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
|
|
|
// 添加第一个div元素，包含两个span子元素，用于显示头部背景颜色
|
|
|
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
|
|
|
// 添加第二个div元素，包含两个span子元素，用于显示左侧菜单背景颜色和右侧白色背景
|
|
|
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
|
|
|
// 关闭链接元素
|
|
|
'</a>\n' +
|
|
|
// 关闭列表项元素
|
|
|
'</li>';
|
|
|
});
|
|
|
|
|
|
// 返回生成的HTML字符串
|
|
|
return html;
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 监听
|
|
|
* @param options
|
|
|
*/
|
|
|
listen: function (options) {
|
|
|
// 为body元素绑定点击事件，当点击带有data-bgcolor属性的元素时触发
|
|
|
$('body').on('click', '[data-bgcolor]', function () {
|
|
|
// 显示加载动画，设置加载时间为2秒
|
|
|
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
|
|
// 获取当前文档高度减去60像素的值
|
|
|
var clientHeight = (document.documentElement.clientHeight) - 60;
|
|
|
// 调用miniTheme对象的buildBgColorHtml方法生成背景颜色HTML代码
|
|
|
var bgColorHtml = miniTheme.buildBgColorHtml(options);
|
|
|
// 构建配色方案的HTML结构
|
|
|
// 定义一个包含HTML结构的字符串变量html
|
|
|
var html = '<div class="layuimini-color">\n' +
|
|
|
// 添加一个包含配色方案标题的div元素
|
|
|
'<div class="color-title">\n' +
|
|
|
// 在标题div中添加一个span元素，显示文本“配色方案”
|
|
|
'<span>配色方案</span>\n' +
|
|
|
'</div>\n' +
|
|
|
// 添加一个包含配色内容的div元素
|
|
|
'<div class="color-content">\n' +
|
|
|
// 在内容div中添加一个ul元素，用于存放背景颜色选项
|
|
|
'<ul>\n' + bgColorHtml + '</ul>\n' +
|
|
|
'</div>\n' +
|
|
|
'</div>' +
|
|
|
'</div>';
|
|
|
// 打开一个layer弹出层，显示配色方案选择器
|
|
|
layer.open({
|
|
|
type: 1, // 弹出层类型为页面层
|
|
|
title: false, // 不显示标题
|
|
|
closeBtn: 0, // 不显示关闭按钮
|
|
|
shade: 0.2, // 遮罩透明度
|
|
|
anim: 2, // 弹出动画效果
|
|
|
shadeClose: true, // 点击遮罩区域是否允许关闭
|
|
|
id: 'layuiminiBgColor', // 弹出层ID
|
|
|
area: ['340px', clientHeight + 'px'], // 弹出层宽高
|
|
|
offset: 'rb', // 弹出层位置，右下角
|
|
|
content: html, // 弹出层内容
|
|
|
success: function (index, layero) {
|
|
|
// 弹出层成功打开后的回调函数
|
|
|
},
|
|
|
end: function () {
|
|
|
// 弹出层关闭后的回调函数，移除选中的背景颜色样式
|
|
|
$('.layuimini-select-bgcolor').removeClass('layui-this');
|
|
|
}
|
|
|
});
|
|
|
// 关闭加载动画
|
|
|
layer.close(loading);
|
|
|
});
|
|
|
}
|
|
|
$('body').on('click', '[data-select-bgcolor]', function () {
|
|
|
// 获取点击元素的 data-select-bgcolor 属性值，作为背景颜色ID
|
|
|
var bgcolorId = $(this).attr('data-select-bgcolor');
|
|
|
|
|
|
// 移除当前选中的背景颜色样式类
|
|
|
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
|
|
|
|
|
// 为点击的元素添加选中的样式类
|
|
|
$(this).attr('class', 'layui-this');
|
|
|
|
|
|
// 将背景颜色ID存储到 sessionStorage 中，以便后续使用
|
|
|
sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
|
|
|
|
|
|
// 调用 miniTheme.render 方法，更新主题背景颜色
|
|
|
miniTheme.render({
|
|
|
// 设置默认背景颜色为选中的背景颜色ID
|
|
|
bgColorDefault: bgcolorId,
|
|
|
// 不监听变化
|
|
|
listen: false,
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 导出名为 "miniTheme" 的模块，供其他文件使用
|
|
|
exports("miniTheme", miniTheme);
|
|
|
})
|
|
|
; |
