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 13:37:18 +08:00
parent 46f44399ba
commit 6b909a520f
7 changed files with 154 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
control: option.control ? 'control' : false, // control control: option.control ? 'control' : false, // control
defaultMenu: 1, defaultMenu: 1,
defaultOpen: 0, //默认打开菜单 defaultOpen: 0, //默认打开菜单
accordion: true, accordion: option.accordion,
url: option.data, //数据地址 url: option.data, //数据地址
parseData: false, //请求后是否进行数据解析 函数 parseData: false, //请求后是否进行数据解析 函数
change: option.change change: option.change
@ -147,10 +147,27 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
this.themeRender = function(option) { this.themeRender = function(option) {
if(option.allowCustom == false){
$(".setting").remove();
}
var colorId = localStorage.getItem("theme-color"); var colorId = localStorage.getItem("theme-color");
var menu = localStorage.getItem("theme-menu"); var menu = localStorage.getItem("theme-menu");
var color = getColorById(colorId);
this.colorSet(getColorById(colorId).color); if(menu=="null"){
menu = option.defaultMenu;
}else{
if(option.allowCustom == false){
menu = option.defaultMenu;
}
}
localStorage.setItem("theme-color",color.id);
localStorage.setItem("theme-menu",menu);
this.colorSet(color.color);
this.menuSkin(menu); this.menuSkin(menu);
} }
@ -359,10 +376,10 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
.addClass("layui-icon-ok"); .addClass("layui-icon-ok");
} }
if (menu!="null"){ if (menu != "null") {
$("*[data-select-bgcolor]").removeClass("layui-this"); $("*[data-select-bgcolor]").removeClass("layui-this");
$("[data-select-bgcolor='"+menu+"']").addClass("layui-this"); $("[data-select-bgcolor='" + menu + "']").addClass("layui-this");
} }
$('#layui-layer-shade' + index).click(function() { $('#layui-layer-shade' + index).click(function() {
@ -383,7 +400,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
$.ajaxSettings.async = false; $.ajaxSettings.async = false;
var data = null; var data = null;
$.get("setting.json", function(result) { $.getJSON("setting.json", function(result) {
data = result; data = result;
}); });
@ -402,7 +419,6 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
}); });
$('body').on('click', '.select-color-item', function() { $('body').on('click', '.select-color-item', function() {
$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok"); $(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
$(this).addClass("layui-icon").addClass("layui-icon-ok"); $(this).addClass("layui-icon").addClass("layui-icon-ok");
var colorId = $(".select-color-item.layui-icon-ok").attr("color-id"); var colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
@ -411,25 +427,30 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
pearAdmin.colorSet(color.color); pearAdmin.colorSet(color.color);
}); });
function getThemeById(id) {
var theme;
$.each(getData().theme, function(i, value) {
if (value.id == id) {
theme = value;
}
})
return theme;
}
function getColorById(id) { function getColorById(id) {
var color; var color;
$.each(getData().colors, function(i, value) {
var flag = false;
var data = getData();
$.each(data.colors, function(i, value) {
if (value.id == id) { if (value.id == id) {
color = value; color = value;
flag = true;
} }
}) })
if(flag==false || data.allowCustom == false){
$.each(data.colors, function(i, value) {
if (value.id == data.defaultColor) {
color = value;
}
})
}
return color; return color;
} }
@ -452,13 +473,9 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
var colors = ""; var colors = "";
$.each(getData().colors, function(i, value) { $.each(getData().colors, function(i, value) {
colors += "<span class='select-color-item' color-id='" + value.id + "' style='background-color:" + value.color + ";'></span>";
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>"
return "<div class='select-color'><div class='select-color-title'>主题色</div><div class='select-color-content'>" +
colors + "</div></div>"
} }

7
component/pear/module/menu.js
View File

@ -139,9 +139,10 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
// 根 据 菜 单 Id 选 中 菜 单 项 目 // 根 据 菜 单 Id 选 中 菜 单 项 目
if (this.option.accordion == true) {
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-nav-itemed").removeClass( $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-nav-itemed").removeClass(
"layui-nav-itemed"); "layui-nav-itemed");
}
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-this").removeClass( $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-this").removeClass(
"layui-this"); "layui-this");

2
index.html
View File

@ -26,7 +26,7 @@
<li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li> <li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
<li class="layui-nav-item layui-hide-xs"><a href="http://www.pearadmin.cn" class="layui-icon layui-icon-website"></a></li> <li class="layui-nav-item layui-hide-xs"><a href="http://www.pearadmin.cn" class="layui-icon layui-icon-website"></a></li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:;"> <a href="javascript:;" >
<img src="admin/images/avatar.jpg" class="layui-nav-img"> <img src="admin/images/avatar.jpg" class="layui-nav-img">
就眠仪式 就眠仪式
</a> </a>

11
setting.json
View File

@ -5,12 +5,16 @@
"control": false, "control": false,
"index": "view/console/console1.html", "index": "view/console/console1.html",
"indexTitle": "首页", "indexTitle": "首页",
"accordion": true,
"data": "admin/data/menu.json", "data": "admin/data/menu.json",
"select": "0", "select": "0",
"logoTitle": "Pear Admin", "logoTitle": "Pear Admin",
"logoImage": "admin/images/logo.png", "logoImage": "admin/images/logo.png",
"themeColor": "1", "defaultColor": "2",
"colors": [{ "defaultMenu": "dark-theme",
"allowCustom": true,
"colors": [
{
"id": "1", "id": "1",
"color": "#FF5722" "color": "#FF5722"
}, },
@ -29,7 +33,8 @@
"color": "darkgray" "color": "darkgray"
} }
], ],
"links": [{ "links": [
{
"icon": "layui-icon layui-icon-auz", "icon": "layui-icon layui-icon-auz",
"title": "官方网站", "title": "官方网站",
"href": "http://www.pearadmin.com" "href": "http://www.pearadmin.com"

24
view/console/console1.html
View File

@ -253,31 +253,31 @@
echarts = layui.echarts; echarts = layui.echarts;
count.up("value1", { count.up("value1", {
time: 5000, time: 4000,
num: 4540.34, num: 440.34,
bit: 2, bit: 2,
regulator: 100 regulator: 50
}) })
count.up("value2", { count.up("value2", {
time: 5000, time: 4000,
num: 2436.30, num: 236.30,
bit: 2, bit: 2,
regulator: 100 regulator: 50
}) })
count.up("value3", { count.up("value3", {
time: 5000, time: 4000,
num: 6314.43, num: 634.43,
bit: 2, bit: 2,
regulator: 100 regulator: 50
}) })
count.up("value4", { count.up("value4", {
time: 5000, time: 4000,
bit: 2, bit: 2,
num: 3743.23, num: 373.23,
regulator: 100 regulator: 50
}) })
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

2
view/console/console2.html
View File

@ -133,7 +133,7 @@
<ul class="pear-card-status"> <ul class="pear-card-status">
<li> <li>
<h3>就眠仪式</h3> <h3>就眠仪式</h3>
<p>闭上眼睛进入秘密的宇宙，与最思念的那张脸打一场照面。</p> <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
<span>4月30日 22:43</span> <span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a> <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
</li> </li>

160
view/document/area.html
View File

@ -1,72 +1,72 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layarea</title> <title>layarea</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css"/> <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head> </head>
<body class="pear-container"> <body class="pear-container">
<div class="layui-row layui-col-space10"> <div class="layui-row layui-col-space10">
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">开发环境</div> <div class="layui-card-header">开发环境</div>
<div class="layui-card-body"> <div class="layui-card-body">
Area 省市级联 选择组件 Area 省市级联 选择组件
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="layui-col-md12">
<div class="layui-col-md12"> <div class="layui-collapse">
<div class="layui-card"> <div class="layui-colla-item">
<div class="layui-card-header"> <h2 class="layui-colla-title">显示代码</h2>
基本使用 <div class="layui-colla-content">
</div> <pre class="layui-code" lay-encode="true">
<div class="layui-card-body"> <link rel="stylesheet" href="component/pear/css/pear.css" />
<div class="layui-form"> 并
<div class="layui-form-item" id="area-picker"> <script src="component/layui/layui.js"></script>
<div class="layui-form-label">网点地址</div> 并
<div class="layui-input-inline" style="width: 200px;"> <script src="component/pear/pear.js"></script>
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1"> </pre>
<option value="">请选择省</option> </div>
</select> </div>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> <div class="layui-col-md12">
<div class="layui-col-md12"> <div class="layui-card">
<div class="layui-collapse"> <div class="layui-card-header">
<div class="layui-colla-item"> 基本使用
<h2 class="layui-colla-title">显示代码</h2> </div>
<div class="layui-colla-content"> <div class="layui-card-body">
<pre class="layui-code" lay-encode="true"> <div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['area'], function () { layui.use(['area'], function () {
var area = layui.area; var area = layui.area;
@ -78,30 +78,30 @@
}); });
}); });
</pre> </pre>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../../component/layui/layui.js"></script>
<script src="../../component/layui/layui.js"></script> <script src="../../component/pear/pear.js"></script>
<script src="../../component/pear/pear.js"></script> <script>
<script> layui.use(['layer', 'form', 'area', 'element', 'code'], function() {
layui.use(['layer', 'form', 'area','element','code'], function () { var layer = layui.layer,
var layer = layui.layer form = layui.form,
, form = layui.form area = layui.area;
, area = layui.area;
layui.code(); layui.code();
area.render({ area.render({
elem: '#area-picker', elem: '#area-picker',
change: function (res) { change: function(res) {
//选择结果 //选择结果
console.log(res); console.log(res);
} }
}); });
}); });
</script> </script>
</body> </body>
</html> </html>