root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

global theme

develop
就眠仪式 2021-01-17 21:43:58 +08:00
parent 2feca78ad7
commit 8da4df3495
9 changed files with 87 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
admin/data/menu.json
View File

@ -25,6 +25,13 @@
"type": 1,
"openType": "_iframe",
"href": "http://www.baidu.com"
}, {
"id": 15,
"title": "主题预览",
"icon": "layui-icon layui-icon-console",
"type": 1,
"openType": "_iframe",
"href": "view/system/theme.html"
}]
},
{

4
component/pear/modules/admin.js
View File

@ -171,7 +171,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
const currentColor = getColorById(colorId);
localStorage.setItem("theme-color", currentColor.id);
localStorage.setItem("theme-color-context", currentColor.color);
pearTheme.changeTheme(window, option.theme.autoHead);
pearTheme.changeTheme(window, option.other.autoHead);
let menu = localStorage.getItem("theme-menu");
if (menu === "null") {
menu = option.theme.defaultMenu;
@ -332,7 +332,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
const currentColor = getColorById(colorId);
localStorage.setItem("theme-color", currentColor.id);
localStorage.setItem("theme-color-context", currentColor.color);
pearTheme.changeTheme(window, config.theme.autoHead);
pearTheme.changeTheme(window, config.other.autoHead);
});
function applyConfig(param) {

64
component/pear/modules/theme.js
View File

@ -7,12 +7,9 @@ layui.define(["jquery","layer"], function (exports) {
theme.changeTheme = function (target, autoHead) {
this.autoHead = autoHead;
const color = localStorage.getItem("theme-color-context");
this.colorSet(color);
if (target.frames.length == 0) return;
for (var i = 0; i < target.frames.length; i++) {
try {
if(target.frames[i].layui == undefined) continue;
@ -25,56 +22,35 @@ layui.define(["jquery","layer"], function (exports) {
}
theme.colorSet = function(color) {
let style = '';
// 自 定 义 菜 单 配 色
style +=
'.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +
color + '!important;}';
// 自定义 Logo 标题演示
style +=
'.pear-admin .layui-logo .title{color:' +
color + '!important;}';
// 自 定 义 标 签 配 色
style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +
'!important;}';
// 自 定 义 快 捷 菜 单
style += '.bottom-nav li a:hover{background-color:' +
color + '!important;}';
// 自 定 义 顶 部 配 色
style += '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +color + '!important;}';
style += '.pear-admin .layui-logo .title{color:' + color + '!important;}';
style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +'!important;}';
style += '.bottom-nav li a:hover{background-color:' + color + '!important;}';
style += '.pear-admin .layui-header .layui-nav .layui-nav-bar{background-color: ' + color + '!important;}'
// 自 定 义 加 载 配 色
style += '.ball-loader>span,.signal-loader>span {background-color: ' + color + '!important;}';
// 自 定 义 顶 部 配 色
style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color +
'!important;color:white!important;}';
// 自 定 义 加 载 配 色
style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color +'!important;color:white!important;}';
style += '#preloader{background-color:' + color + '!important;}';
// 自 定 义 样 式 选 择 边 框 配 色
style +=
'.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +
color + ' 3px solid!important;}';
style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color +
'!important}';
style += '.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +color + ' 3px solid!important;}';
style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color + '!important}';
style += '.pear-social-entrance {background-color:' + color + '!important}';
style += '.pear-admin .pe-collaspe {background-color:' + color + '!important}';
style += '.layui-fixbar li {background-color:' + color + '!important}';
if(this.autoHead){
style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}';
}
style += '.layui-fixbar li {background-color:' + color + '!important}';
$("#pearadmin-bg-color").html(style);
style += '.pear-btn.pear-btn-primary {background-color:' + color + '!important}';
style += '.layui-input:focus,.layui-textarea:focus {border-color: '+ color +'!important;box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2)!important;}'
style += '.layui-form-checked[lay-skin=primary] i {border-color: '+ color +'!important;background-color: ' + color + ';}'
style += '.layui-form-onswitch { border-color: ' + color + '; background-color: '+color+';}'
style += '.layui-form-radio>i:hover, .layui-form-radioed>i {color: ' + color + ';}'
var colorPane = $("#pear-admin-color");
if(colorPane.length>0){
colorPane.html(style);
}else{
$("head").append("<style id='pear-admin-color'>"+style+"</style>")
}
}
exports(MOD_NAME, theme);

2
component/pear/modules/yaml.js
View File

@ -6,11 +6,9 @@ layui.define(['jquery', 'element'], function(exports) {
element = layui.element;
var yaml = new function() {
this.parse = function(str){
return YAML.parse(yamlString);
}
this.load = function(path){
return YAML.load(path);
}

6
component/pear/pear.all.js
View File

@ -11,7 +11,7 @@ window.rootPath = (function(src) {
* */
layui.config({
base: rootPath + "modules/",
version: "3.4.1.Release"
version: "3.4.2.Release"
}).extend({
admin: "admin", // 框架布局组件
menu: "menu", // 数据菜单组件
@ -45,6 +45,6 @@ layui.config({
http: "http", // ajax请求组件
theme: "theme" // 主题转换
}).use(['layer', 'theme'], function () {
var pearTheme = layui.theme;
pearTheme.changeTheme(window, false);
layui.theme.changeTheme(window, false);
});

6
component/pear/pear.js
View File

@ -11,7 +11,7 @@ window.rootPath = (function(src) {
* */
layui.config({
base: rootPath + "modules/",
version: "3.4.1.Release"
version: "3.4.2.Release"
}).extend({
admin: "admin", // 框架布局组件
menu: "menu", // 数据菜单组件
@ -45,6 +45,6 @@ layui.config({
http: "http", // ajax请求组件
theme: "theme" // 主题转换
}).use(['layer', 'theme'], function () {
var pearTheme = layui.theme;
pearTheme.changeTheme(window, false);
layui.theme.changeTheme(window, false);
});

6
index.html
View File

@ -10,9 +10,6 @@
<link rel="stylesheet" href="admin/css/load.css" />
<!-- 布 局 样 式 -->
<link rel="stylesheet" href="admin/css/admin.css" />
<!-- 主 题 更 换 -->
<style id="pearadmin-bg-color"></style>
<!-- 头 部 结 束 -->
</head>
<!-- 结 构 代 码 -->
<body class="layui-layout-body pear-admin">
@ -86,8 +83,9 @@
var image = new Image();
image.src = "admin/images/avatar.jpg";
image.onload = function(){
$(".layui-nav-img").attr("src", convert.imageToBase64(image));
$(".layui-nav-img").attr("src", convert.imageToBase64(image));
}
// 框架初始化时会读取 根目录下 pear.config.yml 文件作为初始化配置
// 你可以通过 admin.setConfigPath 方法修改配置文件位置
// 你可以通过 admin.setConfigType 方法修改配置文件类型

50
view/system/theme.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary">Button</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" hover placeholder="用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<input type="checkbox" name="" lay-skin="primary">
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use('form',function(){
})
</script>
</html>

3
view/system/user.html
View File

@ -4,9 +4,6 @@
<meta charset="utf-8">
<title>用户管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<style>
</style>
</head>
<body class="pear-container">
<div class="layui-card">