diff --git a/admin/css/admin.css b/admin/css/admin.css index 8c7d075..df2a98c 100644 --- a/admin/css/admin.css +++ b/admin/css/admin.css @@ -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;} diff --git a/component/pear/css/pear-module/menu.css b/component/pear/css/pear-module/menu.css index a45784e..655654a 100644 --- a/component/pear/css/pear-module/menu.css +++ b/component/pear/css/pear-module/menu.css @@ -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; + } /** 下 拉 图 标 */ diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js index c240815..cd50953 100644 --- a/component/pear/module/admin.js +++ b/component/pear/module/admin.js @@ -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 = "'; + + $("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 = + '
  • ' + + '' + + '
    ' + + '
    ' + + '    ' + + '
    • '; + + bgColorHtml += + '
  • ' + + '' + + '
    ' + + '
    ' + + '    ' + + '
    • '; + + bgColorHtml += + '
  • ' + + '' + + '
    ' + + '
    ' + + '    ' + + '
    • '; + + var html = + '
    \n' + + '
    整体风格
    \n' + + '
    \n' + + '\n' + + '
    \n' + + '
    '; - }) - - 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 = "'; - - $("#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 += '
  • ' + - '' + - '
    ' + - '
    ' + - '    ' + - '
    • '; + if (value.id == id) { + color = value; + } }) - - var html = - '
    \n' + - '
    整体风格
    \n' + - '
    \n' + - '\n' + - '
    \n' + - '
    '; - - return html; + return color; } - - function buildLinkHtml(){ - + + function buildLinkHtml() { + var links = ""; - + $.each(getData().links, function(i, value) { - - links += '' + - ' '+value.title + - '' + + links += '' + + ' ' + value.title + + '' }) - + return '
    ' + links + '
    '; } + function buildColorHtml() { + + var colors = ""; + + $.each(getData().colors, function(i, value) { + + colors += ""; + }) + + return "
    主题色
    " + + colors + "
    " + + } + exports('admin', pearAdmin); }) diff --git a/setting.json b/setting.json index 7da0c2d..ef6f236 100644 --- a/setting.json +++ b/setting.json @@ -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" + } + ] } diff --git a/view/console/console2.html b/view/console/console2.html index 3c8f530..6ffa25a 100644 --- a/view/console/console2.html +++ b/view/console/console2.html @@ -135,50 +135,50 @@

    就眠仪式

    闭上眼睛进入秘密的宇宙，与最思念的那张脸打一场照面。

    4月30日 22:43 - 回复 + 回复

  • Raccoon Core

    夏天真的来了，尽管它还有些犹豫。

    4月30日 22:43 - 回复 + 回复

  • Min Box

    看似不可达到的高度，只要坚持不懈就可能到达。

    4月30日 22:43 - 回复 + 回复

  • Pear Admin

    当浑浊变成了一种常态，那么清白就成了一种罪过。

    4月30日 22:43 - 回复 + 回复

  • Ant Design

    那是一种内在的东西，他们到达不了，也无法触及！

    5月12日 01:25 - 回复 + 回复

  • Angular

    希望是一个好东西,也许是最好的,好东西是不会消亡的！

    6月11日 15:33 - 回复 + 回复

  • Bootstrap

    一切都在不可避免的走向庸俗。

    2月09日 13:40 - 回复 + 回复

  • Element UI

    路上没有灯火的时候，就点亮自己的头颅。

    3月11日 12:30 - 回复 + 回复