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

主题配置

develop
就眠仪式 2020-07-23 04:41:52 +08:00
parent e7ff771cc0
commit 77db9f2f36
5 changed files with 295 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
admin/css/admin.css
View File

@ -207,13 +207,27 @@
}
/** 主 题 选 择 界 面 样 式 */
.pearone-color .color-title {
padding: 15px 0 0px 20px;
margin-bottom: 4px;
/** 亮色侧边风格 */
.light-theme .layui-logo {
background-color: white !important;
color: black !important;
}
.light-theme .layui-side-scroll {
background-color: white !important;
color: black !important;
}
.light-theme .layui-side{
box-shadow: none;
border-right: 1px whitesmoke solid;
}
/** 主 题 选 择 界 面 样 式 */
.pearone-color .color-title {padding: 15px 0 0px 20px;margin-bottom: 4px;}
.pearone-color .color-content {
padding: 15px 10px 0 20px;
@ -228,10 +242,10 @@
position: relative;
display: inline-block;
vertical-align: top;
width: 80px;
width: 70px;
height: 50px;
margin: 0 15px 15px 0;
padding: 2px 2px 4px 2px;
margin: 0 20px 20px 0;
padding: 2px 2px 2px 2px;
background-color: #f2f2f2;
cursor: pointer;
font-size: 12px;
@ -292,59 +306,15 @@
line-height: 30px;
}
.more-setting {
margin-top: 45px;
}
.more-setting form {
margin-top: 30px;
}
.more-setting-title {
padding: 15px 0 0px 20px;
margin-bottom: 4px;
}
.more-setting .layui-form-label {
width: 60px;
}
.more-menu-list {
width: 100%;
margin-top: 80px;
}
.more-menu-item:first-child {
border-top: 1px solid #e8e8e8;
}
.more-menu-item .layui-icon {
font-size: 18px;
padding-right: 10px;
}
.more-menu-item {
color: #595959;
height: 50px;
line-height: 50px;
font-size: 16px;
padding: 0 25px;
border-bottom: 1px solid #e8e8e8;
font-style: normal;
display: block;
}
.more-menu-item:hover {
background-color: whitesmoke;
}
.more-menu-item:after {
color: #8c8c8c;
right: 16px;
content: "\e602";
position: absolute;
font-family: layui-icon !important;
}
/** 友情链接 */
.more-setting {margin-top: 45px;}
.more-setting form {margin-top: 30px;}
.more-setting-title {padding: 15px 0 0px 20px;margin-bottom: 4px;}
.more-setting .layui-form-label {width: 60px;}
.more-menu-list {width: 100%;margin-top: 80px;}
.more-menu-item:first-child {border-top: 1px solid #e8e8e8;}
.more-menu-item .layui-icon {font-size: 18px;padding-right: 10px;}
.more-menu-item {color: #595959;height: 50px;line-height: 50px;font-size: 16px;padding: 0 25px;border-bottom: 1px solid #e8e8e8;font-style: normal;display: block;}
.more-menu-item:hover {background-color: whitesmoke;}
.more-menu-item:after {color: #8c8c8c;right: 16px;content: "\e602";position: absolute;font-family: layui-icon !important;}

48
component/pear/css/pear-module/menu.css
View File

@ -135,8 +135,52 @@
}
/** 亮 样 式*/
.dark-theme .layui-nav-tree {
background-color: #28333E !important;
/** 亮 样 式*/
.dark-theme .layui-nav-tree{
background-color: #28333E!important;
}
.light-theme{
background-color: white!important;
}
.light-theme .pear-nav-tree,
.light-theme .pear-nav-tree .layui-nav-child{
background-color: white!important;
}
.light-theme .pear-nav-tree a,
.light-theme .pear-nav-tree .layui-nav-more{
color: dimgray!important;
border-top-color: dimgray;
}
.light-theme .pear-nav-tree .layui-nav-itemed>a>.layui-nav-more{
border-top-color: white!important;
border-bottom-color: dimgray!important;
}
.light-theme .pear-nav-tree .layui-nav-child{
padding-top: 0px;
padding-bottom: 0px;
}
.light-theme .pear-nav-tree .layui-this a,
.light-theme .pear-nav-tree .layui-this{
color: white!important;
background-color: #5FB878!important;
}
.light-theme .pear-nav-tree .layui-this a:hover{
background-color: #5FB878!important;
}
.light-theme .pear-nav-tree .layui-nav-bar{
display: none;
}
/** 下 拉 图 标 */

237
component/pear/module/admin.js
View File

@ -23,6 +23,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
this.bodyRender(option);
this.keepLoad(option);
this.logoRender(option);
this.themeRender(option);
}
this.logoRender = function(option) {
@ -139,11 +140,86 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
this.keepLoad = function(option) {
compatible()
setTimeout(function() {
$(".loader-main").fadeOut(option.done);
}, option.keepLoad)
}
this.themeRender = function(option) {
var colorId = localStorage.getItem("theme-color");
var menu = localStorage.getItem("theme-menu");
this.colorSet(getColorById(colorId).color);
this.menuSkin(menu);
}
this.menuSkin = function(theme) {
$(".pear-admin").removeClass("light-theme");
$(".pear-admin").removeClass("dark-theme");
$(".pear-admin").removeClass("night-theme");
$(".pear-admin").addClass(theme);
}
this.colorSet = function(color) {
var 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 += '.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 += '#preloader{background-color:' + color + '!important;}';
// 自 定 义 样 式 选 择 边 框 配 色
style +=
'.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +
color + ' 2px 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}';
if ($("iframe").contents().find("#customTheme").length > 0) {
$("iframe").contents().find("#customTheme").remove();
}
var theme = "<style>";
theme += '</style>';
$("iframe").contents().find("head").append(theme);
$("#pearadmin-bg-color").html(style);
}
};
$("body").on("click", ".collaspe,.pear-cover", function() {
@ -224,15 +300,38 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
$("body").on("click", ".setting", function() {
openRight();
var bgColorHtml =
'<li class="layui-this" data-select-bgcolor="dark-theme" >' +
'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
'</a>' +
'</li>';
bgColorHtml +=
'<li data-select-bgcolor="light-theme" >' +
'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: white;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: white;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
'</a>' +
'</li>';
bgColorHtml +=
'<li data-select-bgcolor="night-theme" >' +
'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: #28333E;"></span></div>' +
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #28333E;"></span></div>' +
'</a>' +
'</li>';
var html =
'<div class="pearone-color">\n' +
'<div class="color-title">整体风格</div>\n' +
'<div class="color-content">\n' +
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'</div>';
})
function openRight() {
var themeHtml = buildThemeHtml();
var linkHtml = buildLinkHtml();
layer.open({
type: 1,
offset: 'r',
@ -244,11 +343,28 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
anim: -1,
skin: 'layer-anim-right',
move: false,
content: themeHtml + linkHtml,
content: html + buildColorHtml() + buildLinkHtml(),
success: function(layero, index) {
form.render();
var color = localStorage.getItem("theme-color");
var menu = localStorage.getItem("theme-menu");
if (color != "null") {
$(".select-color-item").removeClass("layui-icon")
.removeClass("layui-icon-ok");
$("*[color-id='" + color + "']").addClass("layui-icon")
.addClass("layui-icon-ok");
}
if (menu!="null"){
$("*[data-select-bgcolor]").removeClass("layui-this");
$("[data-select-bgcolor='"+menu+"']").addClass("layui-this");
}
$('#layui-layer-shade' + index).click(function() {
var $layero = $('#layui-layer' + index);
$layero.animate({
@ -259,9 +375,9 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
})
}
});
}
})
/** 同 步 请 求 获 取 数 据 */
function getData() {
$.ajaxSettings.async = false;
@ -274,74 +390,77 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
$.ajaxSettings.async = true;
return data;
}
$('body').on('click', '[data-select-bgcolor]', function() {
var theme = $(this).attr('data-select-bgcolor');
$('[data-select-bgcolor]').removeClass("layui-this");
$(this).addClass("layui-this");
setColor(getThemeById(theme));
localStorage.setItem("theme-menu", theme);
pearAdmin.menuSkin(theme);
});
function getThemeById(id){
$('body').on('click', '.select-color-item', function() {
$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
$(this).addClass("layui-icon").addClass("layui-icon-ok");
var colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
localStorage.setItem("theme-color", colorId);
var color = getColorById(colorId);
pearAdmin.colorSet(color.color);
});
function getThemeById(id) {
var theme;
$.each(getData().theme, function(i, value) {
if(value.id == id){
if (value.id == id) {
theme = value;
}
})
return theme;
}
function setColor(theme){
console.log("传过来的主题"+JSON.stringify(theme));
var theme = "<style>";
theme += '</style>';
$("#pearadmin-bg-color").html(style);
}
function getColorById(id) {
var color;
$.each(getData().colors, function(i, value) {
function buildThemeHtml() {
var bgColorHtml = "";
$.each(getData().theme, function(i, value) {
bgColorHtml += '<li data-select-bgcolor="'+value.id+'">' +
'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: '+value.logoBgColor+';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: '+value.headerBgColor+';"></span></div>' +
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: '+value.menuBgColor+';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
'</a>' +
'</li>';
if (value.id == id) {
color = value;
}
})
var html =
'<div class="pearone-color">\n' +
'<div class="color-title">整体风格</div>\n' +
'<div class="color-content">\n' +
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'</div>';
return html;
return color;
}
function buildLinkHtml(){
function buildLinkHtml() {
var links = "";
$.each(getData().links, function(i, value) {
links += '<a class="more-menu-item" href="'+value.href+'" target="_blank">' +
'<i class="'+value.icon+'" style="font-size: 19px;"></i> '+value.title +
'</a>'
links += '<a class="more-menu-item" href="' + value.href + '" target="_blank">' +
'<i class="' + value.icon + '" style="font-size: 19px;"></i> ' + value.title +
'</a>'
})
return '<div class="more-menu-list">' + links + '</div>';
}
function buildColorHtml() {
var colors = "";
$.each(getData().colors, function(i, value) {
colors += "<span class='select-color-item' color-id='" + value.id + "' style='background-color:" + value.color +
";'></span>";
})
return "<div class='select-color'><div class='select-color-title'>主题色</div><div class='select-color-content'>" +
colors + "</div></div>"
}
exports('admin', pearAdmin);
})

112
setting.json
View File

@ -9,92 +9,40 @@
"select": "0",
"logoTitle": "Pear Admin",
"logoImage": "admin/images/logo.png",
"theme": [{
"id": 1,
"menuBgColor": "black",
"menuActiveBgColor": "",
"menuTextColor": "",
"logoColor": "",
"logoBgColor": "black",
"headerColor": "",
"headerActiveColor": "black",
"headerBgColor": "white",
"headerTextColor": ""
"themeColor": "1",
"colors": [{
"id": "1",
"color": "#FF5722"
},
{
"id": 2,
"menuBgColor": "black",
"menuActiveBgColor": "black",
"menuTextColor": "",
"logoColor": "red",
"logoBgColor": "black",
"headerColor": "",
"headerActiveColor": "red",
"headerBgColor": "white",
"headerTextColor": ""
"id": "2",
"color": "#5FB878"
},
{
"id": 3,
"menuBgColor": "black",
"menuActiveBgColor": "black",
"menuTextColor": "",
"logoColor": "red",
"logoBgColor": "black",
"headerColor": "",
"headerActiveColor": "red",
"headerBgColor": "white",
"headerTextColor": ""
},
{
"id": 4,
"menuBgColor": "black",
"menuActiveBgColor": "black",
"menuTextColor": "",
"logoColor": "red",
"logoBgColor": "black",
"headerColor": "",
"headerActiveColor": "red",
"headerBgColor": "white",
"headerTextColor": ""
},
{
"id": 5,
"menuBgColor": "black",
"menuActiveBgColor": "black",
"menuTextColor": "",
"logoColor": "red",
"logoBgColor": "black",
"headerColor": "",
"headerActiveColor": "red",
"headerBgColor": "white",
"headerTextColor": ""
},
{
"id": 6,
"menuBgColor": "black",
"menuActiveBgColor": "black",
"menuTextColor": "",
"logoColor": "red",
"logoBgColor": "black",
"headerColor": "",
"headerActiveColor": "red",
"headerBgColor": "white",
"headerTextColor": ""
"id": "3",
"color": "#1E9FFF"
}, {
"id": "4",
"color": "#FFB800"
}, {
"id": "5",
"color": "darkgray"
}
],
"links":[{
"icon":"layui-icon layui-icon-home",
"title":"官方网站",
"href":"http://www.pearadmin.com"
},
{
"icon":"layui-icon layui-icon-read",
"title":"开发文档",
"href":"http://www.pearadmin.com"
},
{
"icon":"layui-icon layui-icon-note",
"title":"开源地址",
"href":"https://gitee.com/Jmysy/Pear-Admin-Layui"
}]
"links": [{
"icon": "layui-icon layui-icon-auz",
"title": "官方网站",
"href": "http://www.pearadmin.com"
},
{
"icon": "layui-icon layui-icon-auz",
"title": "开发文档",
"href": "http://www.pearadmin.com"
},
{
"icon": "layui-icon layui-icon-auz",
"title": "开源地址",
"href": "https://gitee.com/Jmysy/Pear-Admin-Layui"
}
]
}

16
view/console/console2.html
View File

@ -135,50 +135,50 @@
<h3>就眠仪式</h3>
<p>闭上眼睛进入秘密的宇宙，与最思念的那张脸打一场照面。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
<li>
<h3>Raccoon Core</h3>
<p>夏天真的来了，尽管它还有些犹豫。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
<li>
<h3>Min Box</h3>
<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
<li>
<h3>Pear Admin</h3>
<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
<li>
<h3>Ant Design</h3>
<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
<span>5月12日 01:25</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
</li>
<li>
<h3>Angular</h3>
<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
<span>6月11日 15:33</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
<li>
<h3>Bootstrap</h3>
<p>一切都在不可避免的走向庸俗。</p>
<span>2月09日 13:40</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
<li>
<h3>Element UI</h3>
<p>路上没有灯火的时候，就点亮自己的头颅。</p>
<span>3月11日 12:30</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li>
</ul>
</div>