bwadmin/pear-admin-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: pear admin layui 更新到 4.0 正式版

Browse Source
This commit is contained in:
zhengxinonly
2023-11-26 00:51:02 +08:00
parent 3086c1a1fa
commit 2ffddda02b
18 changed files with 3689 additions and 3044 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/admin/css/admin.css
+3
View File
@@ -203,13 +203,16 @@ body,
.pear-admin .auto-theme .layui-nav * {
color: white !important;
}
.pear-admin .auto-theme .layui-nav.pear-nav-control .layui-this * {
color: black !important;
}
.pear-admin .auto-theme .layui-nav .layui-nav-child a {
color: #5f5f5f !important;
color: rgba(0, 0, 0, 0.8) !important;
}
/** 收缩布局 */
.pear-mini .layui-side .layui-logo .title {
display: none;
static/admin/css/admin.dark.css
+5
View File
@@ -146,6 +146,11 @@
background-color: #0a0a0a;
}
.pear-admin-dark .layui-body .layui-tab .layui-tab-close:hover {
border-radius: 50%;
background-color: #0a0a0a !important;
}
.pear-admin-dark .pear-tab-page-menu ul li {
color: #ffffff !important;
}
static/admin/css/other/login.css
+177 -9
View File
@@ -1,12 +1,180 @@
.demo-login-container {
width: 320px;
margin: 220px auto 0;
html,
body,
.layui-row {
height: 100%;
}
.demo-login-other .layui-icon {
position: relative;
display: inline-block;
margin: 0 2px;
top: 2px;
font-size: 26px;
.login-page {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.login-bg {
height: 100%;
box-sizing: border-box;
background-color: rgb(250, 250, 250);
display: flex;
align-items: center;
justify-content: center;
}
.login-bg-img {
width: 90%;
display: inline-block;
margin: 0 auto;
}
.login-form {
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.form-center {
background: #fff;
box-sizing: border-box;
flex-flow: row wrap;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.form-center-box {
width: 360px;
}
.top-log-title {
align-items: center;
justify-content: center;
display: flex;
margin-bottom: 30px;
}
.top-log {
width: 50px;
border-radius: 12px;
margin-right: 20px;
height: 50px;
}
.top-log-title span {
font-size: 32px;
font-weight: 700;
color: var(--global-primary-color);
}
.top-desc {
font-size: 14px;
color: #808695;
}
.tab-log-method {
width: 100%;
display: flex;
padding: 20px 0px;
}
.tab-log-method-item {
flex: 1;
box-sizing: border-box;
padding: 5px 50px;
text-align: right;
color: #1f2225;
font-size: 16px;
}
.tab-log-method-item:nth-child(2) {
text-align: left;
}
.tab-log-method-item > span {
display: inline-block;
width: 40px;
text-align: center;
height: 30px;
border-bottom: 2px solid transparent;
}
.tab-log-method-item > span:hover {
cursor: pointer;
color: #16baaa;
border-bottom: 2px solid #16baaa;
}
.tab-log-verification {
width: 100%;
display: flex;
}
.verification-text {
flex: 2;
box-sizing: border-box;
margin-right: 20px;
}
.verification-img {
flex: 1;
box-sizing: border-box;
border: 1px solid #eeeeee;
border-radius: 4px;
height: 40px;
overflow: hidden;
text-align: center;
}
.remember-passsword {
margin: 20px 0;
width: 100%;
display: flex;
box-sizing: border-box;
}
.remember-cehcked {
flex: 1;
text-align: left;
}
.greenText {
color: #16baaa;
cursor: pointer;
}
.login-btn {
width: 100%;
box-sizing: border-box;
}
.login-btn > .layui-btn {
width: 100%;
}
.other-login {
width: 100%;
box-sizing: border-box;
margin: 20px 0 0;
text-align: left;
display: flex;
}
.other-login-methods {
display: inline-block;
flex: 1;
}
.layui-input {
border-radius: 4px;
line-height: 40px;
height: 40px;
}
.layui-btn {
border-radius: 4px;
background-color: var(--global-primary-color);
}
static/admin/css/other/profile.css
+80
View File
@@ -0,0 +1,80 @@
.text-center {
text-align: center;
}
.user-info-head {
width: 110px;
height: 110px;
line-height: 110px;
position: relative;
display: inline-block;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
}
.layui-line-dash {
border-bottom: 1px dashed #ccc;
margin: 15px 0;
}
.blog-title {
padding-left: 13.5px;
}
.blog-content {
padding-left: 13px;
font-size: 13px;
color: dimgray;
}
.layui-tab-title {
border-bottom: none;
}
.fl-item {
height: 30px;
font-size: 13.5;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50px;
background-color: gray;
display: inline-block;
margin-right: 10px;
}
.message-board {
padding: 0 10px 10px;
}
.message-board li {
position: relative;
padding: 10px 0;
border-bottom: 1px solid #EEE;
}
.message-board li p {
padding-bottom: 10px;
padding-top: 3px;
}
.message-board li>span {
color: #999;
height: 24px;
line-height: 24px;
}
.message-board .message-board-reply {
position: absolute;
right: 20px;
bottom: 12px;
height: 24px;
line-height: 24px;
}
static/admin/css/other/register.css
-12
View File
@@ -1,12 +0,0 @@
.demo-reg-container {
width: 320px;
margin: 220px auto 0;
}
.demo-reg-other .layui-icon {
position: relative;
display: inline-block;
margin: 0 2px;
top: 2px;
font-size: 26px;
}
static/admin/data/menu.json
+279
View File
@@ -22,5 +22,284 @@
"href": "view/console/index.html"
}
]
},
{
"id": 9,
"title": "列表页面",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"children": [
{
"id": 91,
"title": "查询表格",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/listing/table.html"
}
]
},
{
"id": 2,
"title": "扩展组件",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"children": [
{
"id": 23,
"title": "高级栅格",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/component/grid.html"
},
{
"id": 24,
"title": "消息提示",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/component/toast.html"
},
{
"id": 25,
"title": "路由过渡",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/component/nprogress.html"
}
]
},
{
"id": "result",
"title": "结果页面",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"href": "",
"children": [
{
"id": "success",
"title": "成功页面",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/result/success.html"
},
{
"id": "failure",
"title": "失败页面",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_component",
"href": "view/result/error.html"
}
]
},
{
"id": "exception",
"title": "异常页面",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"href": "",
"children": [
{
"id": "403",
"title": "403",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/exception/403.html"
},
{
"id": "404",
"title": "404",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_component",
"href": "view/exception/404.html"
},
{
"id": "500",
"title": "500",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_component",
"href": "view/exception/500.html"
}
]
},
{
"id": "open",
"title": "菜单模式",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"children": [
{
"id": "a",
"title": "普通路由",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/result/success.html"
},
{
"id": "b",
"title": "嵌套网页",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_iframe",
"href": "http://www.layui-vue.com"
},
{
"id": "c",
"title": "新建标签",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_blank",
"href": "http://www.layui-vue.com"
},
{
"id": "d",
"title": "弹窗网页",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_layer",
"href": "http://www.layui-vue.com"
}
]
},
{
"id": "deep",
"title": "深度测试",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"href": "",
"children": [
{
"id": "deep1-1",
"title": "二级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 0,
"openType": "_component",
"href": "view/result/success.html",
"children": [
{
"id": "deep1-1-1",
"title": "三级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 0,
"openType": "_component",
"href": "view/result/success.html",
"children": [
{
"id": "deep1-1-1-1",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/result/success.html"
},
{
"id": "deep1-1-1-2",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_blank",
"href": "http://www.layui-vue.com"
}
]
},
{
"id": "deep1-1-2",
"title": "三级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 0,
"openType": "_blank",
"href": "http://www.layui-vue.com",
"children": [
{
"id": "deep1-1-2-1",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/result/success.html"
},
{
"id": "deep1-1-2-2",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_blank",
"href": "http://www.layui-vue.com"
}
]
}
]
},
{
"id": "deep1-2",
"title": "二级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 0,
"openType": "_blank",
"href": "http://www.layui-vue.com",
"children": [
{
"id": "deep1-2-1",
"title": "三级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 0,
"openType": "_component",
"href": "view/result/success.html",
"children": [
{
"id": "deep1-2-1-1",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/result/success.html"
},
{
"id": "deep1-2-1-2",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_blank",
"href": "http://www.layui-vue.com"
}
]
},
{
"id": "deep1-2-2",
"title": "三级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 0,
"openType": "_blank",
"href": "http://www.layui-vue.com",
"children": [
{
"id": "deep1-2-2-1",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_component",
"href": "view/result/success.html"
},
{
"id": "deep1-2-2-2",
"title": "四级菜单",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_blank",
"href": "http://www.layui-vue.com"
}
]
}
]
}
]
}
]
static/admin/images/banner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 MiB

static/admin/images/blog.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

static/component/layui/css/layui.css
+35 -23
View File
@@ -94,8 +94,8 @@ hr {
line-height: 0;
margin: 10px 0;
padding: 0;
border: none !important;
border-bottom: 1px solid #eee !important;
border: none;
border-bottom: 1px solid #eee;
clear: both;
overflow: hidden;
background: 0 0;
@@ -1926,6 +1926,15 @@ a cite {
border-color: #2f363c !important;
color: #2f363c !important;
}
hr.layui-border-black,
hr.layui-border-blue,
hr.layui-border-cyan,
hr.layui-border-green,
hr.layui-border-orange,
hr.layui-border-purple,
hr.layui-border-red {
border-width: 0 0 1px;
}
.layui-timeline-item:before {
background-color: #eee;
}
@@ -2413,6 +2422,9 @@ a cite {
.layui-input-wrap .layui-input:focus + .layui-input-split {
border-color: #16b777;
}
.layui-input-wrap .layui-input.layui-form-danger:focus + .layui-input-split {
border-color: #ff5722;
}
.layui-input-wrap .layui-input-prefix.layui-input-split {
border-width: 0;
border-right-width: 1px;
@@ -3803,7 +3815,7 @@ body .layui-table-tips .layui-layer-content {
}
.layui-menu li {
position: relative;
margin: 1px 0;
margin: 0 0 1px;
line-height: 26px;
color: rgba(0, 0, 0, 0.8);
font-size: 14px;
@@ -3871,6 +3883,12 @@ body .layui-table-tips .layui-layer-content {
height: 0;
overflow: hidden;
}
.layui-menu .layui-menu-item-down > .layui-menu-body-title > .layui-icon-down {
transform: rotate(180deg);
}
.layui-menu .layui-menu-item-up > .layui-menu-body-title > .layui-icon-up {
transform: rotate(-180deg);
}
.layui-menu .layui-menu-item-down:hover > .layui-menu-body-title > .layui-icon,
.layui-menu .layui-menu-item-up > .layui-menu-body-title:hover > .layui-icon {
color: #000;
@@ -3917,6 +3935,8 @@ body .layui-table-tips .layui-layer-content {
margin-top: -6px;
line-height: normal;
font-size: 14px;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.layui-menu-body-title > .layui-icon:hover {
transition: all 0.3s;
@@ -4170,6 +4190,7 @@ body .layui-table-tips .layui-layer-content {
z-index: 0;
top: 0;
border: none;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: none;
}
.layui-nav-tree .layui-nav-child dd {
@@ -4179,15 +4200,11 @@ body .layui-table-tips .layui-layer-content {
color: #fff;
color: rgba(255, 255, 255, 0.7);
}
.layui-nav-tree .layui-nav-child,
.layui-nav-tree .layui-nav-child a:hover {
background: 0 0;
color: #fff;
}
.layui-nav-itemed > .layui-nav-child {
display: block;
background-color: rgba(0, 0, 0, 0.3) !important;
}
.layui-nav-itemed > .layui-nav-child,
.layui-nav-itemed > .layui-nav-child > .layui-this > .layui-nav-child {
display: block;
}
@@ -4204,25 +4221,15 @@ body .layui-table-tips .layui-layer-content {
color: #373737;
color: rgba(0, 0, 0, 0.8);
}
.layui-nav-tree.layui-bg-gray {
padding: 6px 0;
}
.layui-nav-tree.layui-bg-gray .layui-nav-itemed > a {
color: #000 !important;
}
.layui-nav.layui-bg-gray .layui-this a {
color: #16b777;
}
.layui-nav-tree.layui-bg-gray .layui-nav-itemed > .layui-nav-child {
.layui-nav-tree.layui-bg-gray .layui-nav-child {
padding-left: 11px;
background: 0 0 !important;
}
.layui-nav-tree.layui-bg-gray .layui-nav-item > a {
padding-top: 0;
padding-bottom: 0;
}
.layui-nav-tree.layui-bg-gray .layui-nav-item > a .layui-nav-more {
padding: 0;
background: 0 0;
}
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a,
@@ -5838,10 +5845,13 @@ html #layuicss-skincodecss {
.layui-code-view:hover > .layui-code-fixbar .layui-code-lang-marker {
display: none;
}
.layui-code-theme-dark {
border-width: 1px;
.layui-code-theme-dark,
.layui-code-theme-dark > .layui-code-header {
border-color: rgb(126 122 122 / 15%);
background-color: #1f1f1f;
}
.layui-code-theme-dark {
border-width: 1px;
color: #ccc;
}
.layui-code-theme-dark > .layui-code-ln-side {
@@ -5870,7 +5880,6 @@ html #layuicss-skincodecss {
.layui-code-item-preview {
position: relative;
padding: 16px;
overflow: auto;
}
.layui-code-item-preview > iframe {
position: absolute;
@@ -5918,6 +5927,9 @@ html #layuicss-skincodecss {
height: calc(100vh - 51px) !important;
box-sizing: border-box;
}
.layui-code-full .layui-code-item-preview {
overflow: auto;
}
.layui-code-view.layui-code-hl {
line-height: 20px !important;
border-left-width: 1px;
static/component/layui/layui.js
+2810 -2664
View File
File diff suppressed because it is too large Load Diff
static/component/pear/module/admin.js
+34 -2
View File
@@ -130,6 +130,8 @@ layui.define(
/**
* @since Pear Admin 4.0
*
* 菜单搜索
*/
this.menuSearchRender = function (options) {
menuSearch.render({
@@ -171,6 +173,11 @@ layui.define(
});
};
/**
* @since Pear Admin 4.0
*
* 消息中心
*/
this.messageCenterRender = function (options) {
messageCenter.render({
elem: ".message",
@@ -184,6 +191,11 @@ layui.define(
$(".layui-logo .title").html(param.logo.title);
};
/**
* @since Pear Admin 4.0
*
* 侧边菜单
*/
this.menuRender = function (param) {
sideMenu = menu.render({
elem: "sideMenu",
@@ -210,6 +222,11 @@ layui.define(
});
};
/**
* @since Pear Admin 4.0
*
* 视图容器
*/
this.bodyRender = function (param) {
body.on("click", ".refresh", function () {
refresh();
@@ -312,6 +329,11 @@ layui.define(
document.documentElement.style.setProperty(variableKey, variableVal);
};
/**
* @since Pear Admin 4.0
*
* 主题配置
*/
this.themeRender = function (option) {
if (option.theme.allowCustom === false) {
$(".setting").remove();
@@ -415,10 +437,10 @@ layui.define(
var footerDOM = $(".pear-admin .layui-footer");
if (footer === true || footer === "true") {
footerDOM.removeClass("close");
bodyDOM.css("bottom", footerDOM.outerHeight());
bodyDOM.css("height", "calc(100% - 105px)");
} else {
footerDOM.addClass("close");
bodyDOM.css("bottom", "");
bodyDOM.css("height", "calc(100% - 60px)");
}
};
@@ -466,6 +488,11 @@ layui.define(
};
})();
/**
* @since Pear Admin 4.0
*
* 页面刷新
*/
function refresh() {
var refreshA = $(".refresh a");
refreshA.removeClass("layui-icon-refresh-1");
@@ -488,6 +515,11 @@ layui.define(
}, 600);
}
/**
* @since Pear Admin 4.0
*
* 菜单折叠
*/
function collapse() {
sideMenu.collapse();
var admin = $(".pear-admin");
static/component/pear/module/menu.js
+3 -62
View File
@@ -358,7 +358,6 @@ layui.define(["table", "jquery", "element"], function (exports) {
}
}
element.init();
downShow(option);
option.done();
}
@@ -368,7 +367,9 @@ layui.define(["table", "jquery", "element"], function (exports) {
option.theme +
'"><ul lay-filter="' +
option.elem +
'" class="layui-nav arrow pear-menu layui-nav-tree pear-nav-tree">';
'" class="layui-nav arrow pear-menu layui-nav-tree pear-nav-tree" ' +
(option.accordion ? "lay-accordion" : "") +
">";
$.each(option.data, function (i, item) {
var content = '<li class="layui-nav-item" >';
if (i == option.defaultOpen) {
@@ -684,66 +685,6 @@ layui.define(["table", "jquery", "element"], function (exports) {
return content;
}
function downShow(option) {
$("body #" + option.elem).on("click", "a[menu-type='0']", function () {
if (!$("#" + option.elem).is(".pear-nav-mini")) {
var superEle = $(this).parent();
var ele = $(this).next(".layui-nav-child");
var heights = ele.children("dd").length * 48;
if ($(this).parent().is(".layui-nav-itemed")) {
if (option.accordion) {
var currentDom = $(this)
.parent()
.siblings(".layui-nav-itemed")
.children(".layui-nav-child");
currentDom.animate(
{
height: "0px",
},
240,
function () {
currentDom.css({
height: "auto",
});
$(this).parent().removeClass("layui-nav-itemed");
$(this)
.find(".layui-nav-itemed")
.removeClass("layui-nav-itemed");
},
);
}
ele.height(0);
ele.animate(
{
height: heights + "px",
},
240,
function () {
ele.css({
height: "auto",
});
},
);
} else {
$(this).parent().addClass("layui-nav-itemed");
ele.animate(
{
height: "0px",
},
240,
function () {
ele.css({
height: "auto",
});
$(this).parent().removeClass("layui-nav-itemed");
},
);
}
}
});
}
/** 二 级 悬 浮 菜 单*/
function isHoverMenu(b, option) {
if (b) {
static/component/pear/module/menuSearch.js
+7 -6
View File
@@ -121,16 +121,17 @@ layui.define(["jquery", "tools"], function (exports) {
});
// 监听键盘事件
$(document)
$(".menu-search-content")
.off("keydown")
.keydown(function (e) {
if (e.keyCode === 13 || e.keyCode === 32) {
e.preventDefault();
var id = $(this).attr("smenu-id");
var title = $(this).attr("smenu-title");
var url = $(this).attr("smenu-url");
var type = $(this).attr("smenu-type");
var openType = $(this).attr("smenu-open-type");
var that = $(".menu-search-list li.this");
var id = that.attr("smenu-id");
var title = that.attr("smenu-title");
var url = that.attr("smenu-url");
var type = that.attr("smenu-type");
var openType = that.attr("smenu-open-type");
options.select({ id, title, url, type, openType });
static/component/pear/module/tabPage.js
+1 -3
View File
@@ -78,7 +78,7 @@ layui.define(["jquery", "element", "dropdown"], function (exports) {
);
dropdown.render({
elem: `#${option.elem} .layui-icon-down`,
elem: `#${option.elem} .layui-tab-control > .layui-icon-down`,
trigger: "hover",
data: [
{
@@ -580,7 +580,6 @@ layui.define(["jquery", "element", "dropdown"], function (exports) {
*/
function createTab(option) {
var type = "";
var types = option.type + " ";
if (option.roll == true) {
type = "layui-tab-roll";
}
@@ -592,7 +591,6 @@ layui.define(["jquery", "element", "dropdown"], function (exports) {
}
var tab =
'<div class="pear-tab-page ' +
types +
type +
' layui-tab" lay-filter="' +
option.elem +
static/component/pear/pear.js
+1 -1
View File
@@ -8,7 +8,7 @@ window.rootPath = (function (src) {
layui
.config({
base: rootPath + "module/",
version: "4.0.0-alpha.1",
version: "4.0.0",
})
.extend({
admin: "admin",
static/config/pear.config.json
+7 -13
View File
@@ -10,14 +10,14 @@
"collapse": false,
"control": false,
"controlWidth": 500,
"select": "126",
"select": "10",
"async": true
},
"tab": {
"enable": true,
"keepState": true,
"session": true,
"preload": true,
"preload": false,
"max": "30",
"index": {
"id": "126",
@@ -26,12 +26,11 @@
}
},
"theme": {
"defaultColor": "2",
"defaultColor": "1",
"defaultMenu": "dark-theme",
"defaultHeader": "light-theme",
"allowCustom": true,
"banner": false,
"dark": true
"banner": false
},
"colors": [
{
@@ -41,26 +40,21 @@
},
{
"id": "2",
"color": "#009688",
"second": "#ecf5ff"
},
{
"id": "3",
"color": "#36b368",
"second": "#f0f9eb"
},
{
"id": "4",
"id": "3",
"color": "#f6ad55",
"second": "#fdf6ec"
},
{
"id": "5",
"id": "4",
"color": "#f56c6c",
"second": "#fef0f0"
},
{
"id": "6",
"id": "5",
"color": "#3963bc",
"second": "#ecf5ff"
}