From e7ff771cc0b9cfd6ad3115259fe0e48c7e279cd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Wed, 22 Jul 2020 01:31:28 +0800 Subject: [PATCH] add theme setting --- admin/css/admin.css | 143 +++++++++++++++++++++++++++++++++ component/pear/module/admin.js | 91 ++++++++++++++++++--- setting.json | 90 ++++++++++++++++++++- view/console/console1.html | 110 ++++++++++++------------- view/system/operate/add.html | 105 ++++++++++++++++++++++++ view/system/operate/edit.html | 105 ++++++++++++++++++++++++ 6 files changed, 578 insertions(+), 66 deletions(-) create mode 100644 view/system/operate/add.html create mode 100644 view/system/operate/edit.html diff --git a/admin/css/admin.css b/admin/css/admin.css index 5279943..8c7d075 100644 --- a/admin/css/admin.css +++ b/admin/css/admin.css @@ -205,3 +205,146 @@ animation: am-horizontal-roll_show .6s ease-out; } + + +/** 主 题 选 择 界 面 样 式 */ + +.pearone-color .color-title { + padding: 15px 0 0px 20px; + margin-bottom: 4px; +} + +.pearone-color .color-content { + padding: 15px 10px 0 20px; + +} + +.pearone-color .color-content ul { + list-style: none; + padding: 0px; +} + +.pearone-color .color-content ul li { + position: relative; + display: inline-block; + vertical-align: top; + width: 80px; + height: 50px; + margin: 0 15px 15px 0; + padding: 2px 2px 4px 2px; + background-color: #f2f2f2; + cursor: pointer; + font-size: 12px; + color: #666; +} + +.pearone-color .color-content li.layui-this:after, +.pearone-color .color-content li:hover:after { + width: 100%; + height: 100%; + padding: 4px; + top: -5px; + left: -5px; + border: #5FB878 2px solid; + opacity: 1; + border-radius: 4px; +} + +.pearone-color .color-content li:after { + content: ''; + position: absolute; + z-index: 20; + top: 50%; + left: 50%; + width: 1px; + height: 0; + border: 1px solid #F2F2F2; + transition: all .3s; + -webkit-transition: all .3s; + opacity: 0; +} + +.select-color { + margin-bottom: 30px; +} + +.select-color .select-color-title { + padding: 15px 0 0px 20px; + margin-bottom: 4px; +} + +.select-color .select-color-content { + padding: 20px 0 0px 0px; + margin-bottom: 4px; +} + +.select-color .select-color-content .select-color-item { + background-color: gray; + width: 30px; + height: 30px; + border-radius: 3px; + float: left; + margin-left: 20px; + color: white; + font-size: 18px; + text-align: center; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .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; +} + diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js index b3303a5..c240815 100644 --- a/component/pear/module/admin.js +++ b/component/pear/module/admin.js @@ -16,9 +16,9 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'], var pearAdmin = new function() { this.render = function(option) { - + var option = getData(); - + this.menuRender(option); this.bodyRender(option); this.keepLoad(option); @@ -224,11 +224,15 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'], $("body").on("click", ".setting", function() { - openRight(""); + openRight(); }) - - function openRight(html) { + + function openRight() { + var themeHtml = buildThemeHtml(); + + var linkHtml = buildLinkHtml(); + layer.open({ type: 1, offset: 'r', @@ -240,7 +244,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'], anim: -1, skin: 'layer-anim-right', move: false, - content: html, + content: themeHtml + linkHtml, success: function(layero, index) { form.render(); @@ -256,21 +260,88 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'], } }); } - + /** 同 步 请 求 获 取 数 据 */ function getData() { - + $.ajaxSettings.async = false; var data = null; - + $.get("setting.json", function(result) { data = result; }); - + $.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)); + }); + + function getThemeById(id){ + var theme; + $.each(getData().theme, function(i, value) { + if(value.id == id){ + theme = value; + } + }) + return theme; + } + + function setColor(theme){ + + console.log("传过来的主题"+JSON.stringify(theme)); + + var theme = "'; + + $("#pearadmin-bg-color").html(style); + + } + + function buildThemeHtml() { + + var bgColorHtml = ""; + + $.each(getData().theme, function(i, value) { + + bgColorHtml += '
  • ' + + '' + + '
    ' + + '
    ' + + '    ' + + '
    • '; + }) + + var html = + '
    \n' + + '
    整体风格
    \n' + + '
    \n' + + '\n' + + '
    \n' + + '
    '; + + return html; + } + + function buildLinkHtml(){ + + var links = ""; + + $.each(getData().links, function(i, value) { + + links += '' + + ' '+value.title + + '' + }) + + return '
    ' + links + '
    '; + } exports('admin', pearAdmin); }) diff --git a/setting.json b/setting.json index 35022e5..7da0c2d 100644 --- a/setting.json +++ b/setting.json @@ -8,5 +8,93 @@ "data": "admin/data/menu.json", "select": "0", "logoTitle": "Pear Admin", - "logoImage": "admin/images/logo.png" + "logoImage": "admin/images/logo.png", + "theme": [{ + "id": 1, + "menuBgColor": "black", + "menuActiveBgColor": "", + "menuTextColor": "", + "logoColor": "", + "logoBgColor": "black", + "headerColor": "", + "headerActiveColor": "black", + "headerBgColor": "white", + "headerTextColor": "" + }, + { + "id": 2, + "menuBgColor": "black", + "menuActiveBgColor": "black", + "menuTextColor": "", + "logoColor": "red", + "logoBgColor": "black", + "headerColor": "", + "headerActiveColor": "red", + "headerBgColor": "white", + "headerTextColor": "" + }, + { + "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": "" + } + ], + "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" + }] } diff --git a/view/console/console1.html b/view/console/console1.html index c3650d1..e1c77cc 100644 --- a/view/console/console1.html +++ b/view/console/console1.html @@ -13,65 +13,65 @@
    -
    -
    今日访问
    -
    -
    -
    - 9,04,0 +
    +
    今日访问
    +
    +
    +
    + 9,04,0 +
    +
    + +
    +
    +
    +
    -
    - +
    +
    +
    提交次数
    +
    +
    +
    + 6,34,4 +
    +
    + +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    提交次数
    -
    -
    -
    - 6,34,4 +
    +
    +
    下载数量
    +
    +
    +
    + 1,34,1 +
    +
    + +
    +
    +
    +
    -
    - +
    +
    +
    流量统计
    +
    +
    +
    + 7,04,6 +
    +
    + +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    下载数量
    -
    -
    -
    - 1,34,1 -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    流量统计
    -
    -
    -
    - 7,04,6 -
    -
    - -
    -
    -
    -
    -
    diff --git a/view/system/operate/add.html b/view/system/operate/add.html new file mode 100644 index 0000000..15e46bb --- /dev/null +++ b/view/system/operate/add.html @@ -0,0 +1,105 @@ + + + + + Title + + + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/view/system/operate/edit.html b/view/system/operate/edit.html new file mode 100644 index 0000000..641a4f0 --- /dev/null +++ b/view/system/operate/edit.html @@ -0,0 +1,105 @@ + + + + + Title + + + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    + + + + + +