From 0974ec8f2fd1621dc859293cecbcd332c25f0879 Mon Sep 17 00:00:00 2001
From: augushong <augushong@ulthon.com>
Date: Fri, 1 Jul 2022 12:58:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=BA=95=E5=B1=82=E5=A4=9A?=
 =?UTF-8?q?=E7=9A=AE=E8=82=A4=E9=A3=8E=E6=A0=BC=E4=BB=A3=E7=A0=81=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .example.env                                  |   1 -
 app/admin/view/layout/default.html            |   2 +-
 jsconfig.json                                 |  10 +-
 .../common/css/theme/{demo.css => _demo.scss} |  12 +-
 public/static/common/css/theme/_normal.scss   |   0
 public/static/common/css/theme/_sicfi.scss    |   0
 public/static/common/css/theme/index.css      |  49 ++
 public/static/common/css/theme/index.scss     |  11 +
 public/static/plugs/easy-admin/easy-admin.js  |  17 +-
 .../plugs/lay-module/layuimini/layuimini.css  | 630 ++++++++++--------
 .../plugs/lay-module/layuimini/miniTheme.js   | 104 ++-
 11 files changed, 521 insertions(+), 315 deletions(-)
 rename public/static/common/css/theme/{demo.css => _demo.scss} (82%)
 create mode 100644 public/static/common/css/theme/_normal.scss
 create mode 100644 public/static/common/css/theme/_sicfi.scss
 create mode 100644 public/static/common/css/theme/index.scss

diff --git a/.example.env b/.example.env
index 4332ed0..eda387d 100644
--- a/.example.env
+++ b/.example.env
@@ -1,5 +1,4 @@
 APP_DEBUG=true
-COVER_THEME=index
 
 [APP]
 DEFAULT_TIMEZONE=Asia/Shanghai
diff --git a/app/admin/view/layout/default.html b/app/admin/view/layout/default.html
index 46b0a59..3dd5ba9 100644
--- a/app/admin/view/layout/default.html
+++ b/app/admin/view/layout/default.html
@@ -13,7 +13,7 @@
     <![endif]-->
     <link rel="stylesheet" href="__STATIC__/admin/css/public.css?v={$version}" media="all">
 
-    <link rel="stylesheet" href="__STATIC__/common/css/theme/{:env('COVER_THEME','index')}.css?v={$version}">
+    <link rel="stylesheet" href="__STATIC__/common/css/theme/index.css?v={$version}">
 
     <script>
         window.CONFIG = {
diff --git a/jsconfig.json b/jsconfig.json
index 49602d2..9ec9c2b 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,7 @@
 {
-  "typeAcquisition": {
-    "include": [
-      "jquery"
-    ]
-  }
+    "typeAcquisition": {
+        "include": [
+            "jquery"
+        ]
+    }
 }
\ No newline at end of file
diff --git a/public/static/common/css/theme/demo.css b/public/static/common/css/theme/_demo.scss
similarity index 82%
rename from public/static/common/css/theme/demo.css
rename to public/static/common/css/theme/_demo.scss
index 20dea8d..c88ad9a 100644
--- a/public/static/common/css/theme/demo.css
+++ b/public/static/common/css/theme/_demo.scss
@@ -41,21 +41,21 @@
     color: #fff !important;
 }
 
-body .layuimini-tab>.layui-tab-title li,
-body .layuimini-tab>.close-box li {
+.layuimini-tab>.layui-tab-title li,
+.layuimini-tab>.close-box li {
     line-height: 27px !important;
 }
 
-body .layuimini-tab>.layui-tab-title,
-body .layuimini-tab>.close-box {
+.layuimini-tab>.layui-tab-title,
+.layuimini-tab>.close-box {
     height: 28px !important;
 }
 
-body .layuimini-tab .layui-tab-control>li {
+.layuimini-tab .layui-tab-control>li {
     height     : 28px !important;
     line-height: 28px !important;
 }
 
-body .layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
     background-color: #6C6E71 !important;
 }
\ No newline at end of file
diff --git a/public/static/common/css/theme/_normal.scss b/public/static/common/css/theme/_normal.scss
new file mode 100644
index 0000000..e69de29
diff --git a/public/static/common/css/theme/_sicfi.scss b/public/static/common/css/theme/_sicfi.scss
new file mode 100644
index 0000000..e69de29
diff --git a/public/static/common/css/theme/index.css b/public/static/common/css/theme/index.css
index e69de29..f1be79a 100644
--- a/public/static/common/css/theme/index.css
+++ b/public/static/common/css/theme/index.css
@@ -0,0 +1,49 @@
+.elem-style-demo .layui-btn {
+  color: #808185 !important;
+  background-color: #cde7ff !important;
+  border: 1px solid #d3dde6 !important;
+}
+.elem-style-demo .layui-layer-easy .layui-layer-title {
+  background-color: rgb(215, 215, 215) !important;
+  color: #6C6E71 !important;
+}
+.elem-style-demo .layui-layer-easy .layui-layer-setwin > a::after {
+  color: #6C6E71 !important;
+}
+.elem-style-demo .layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
+  color: #808185 !important;
+  background-color: #cde7ff !important;
+  border: 1px solid #d3dde6 !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title .layuimini-tab-active {
+  display: none !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title li {
+  padding: 0 5px !important;
+  font-size: 12px;
+  border-width: 1px 1px 1px 0 !important;
+  border-style: solid !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title li.layui-this {
+  color: #fff !important;
+  border-color: rgb(0, 0, 255) !important;
+  background: rgb(90, 173, 255) !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title .layui-this span {
+  color: #fff !important;
+}
+.elem-style-demo .layuimini-tab > .layui-tab-title li,
+.elem-style-demo .layuimini-tab > .close-box li {
+  line-height: 27px !important;
+}
+.elem-style-demo .layuimini-tab > .layui-tab-title,
+.elem-style-demo .layuimini-tab > .close-box {
+  height: 28px !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-control > li {
+  height: 28px !important;
+  line-height: 28px !important;
+}
+.elem-style-demo .layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+  background-color: #6C6E71 !important;
+}
\ No newline at end of file
diff --git a/public/static/common/css/theme/index.scss b/public/static/common/css/theme/index.scss
new file mode 100644
index 0000000..9a1565e
--- /dev/null
+++ b/public/static/common/css/theme/index.scss
@@ -0,0 +1,11 @@
+.elem-style-normal {
+    @import 'normal';
+}
+
+.elem-style-demo {
+    @import 'demo';
+}
+
+.elem-style-sicfi {
+    @import 'sicfi';
+}
\ No newline at end of file
diff --git a/public/static/plugs/easy-admin/easy-admin.js b/public/static/plugs/easy-admin/easy-admin.js
index b6c63a6..1a68474 100644
--- a/public/static/plugs/easy-admin/easy-admin.js
+++ b/public/static/plugs/easy-admin/easy-admin.js
@@ -1,4 +1,17 @@
-define(["jquery", "tableSelect", "ckeditor"], function ($, tableSelect, undefined) {
+define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSelect, undefined, miniTheme) {
+
+    window.onInitElemStyle = function () {
+        miniTheme.renderElemStyle()
+
+        $('iframe').each(function(index,iframe){
+            
+            if(typeof iframe.contentWindow.onInitElemStyle == "function"){
+                iframe.contentWindow.onInitElemStyle();
+            }
+        })
+
+    }
+    window.onInitElemStyle();
 
     var form = layui.form,
         layer = layui.layer,
@@ -955,7 +968,7 @@ define(["jquery", "tableSelect", "ckeditor"], function ($, tableSelect, undefine
                 } catch (e) {
                     value = undefined;
                 }
-                
+
                 if (defaultValue != undefined && admin.empty(value)) {
                     value = defaultValue;
                 }
diff --git a/public/static/plugs/lay-module/layuimini/layuimini.css b/public/static/plugs/lay-module/layuimini/layuimini.css
index f1ad3e7..947fcb3 100644
--- a/public/static/plugs/lay-module/layuimini/layuimini.css
+++ b/public/static/plugs/lay-module/layuimini/layuimini.css
@@ -6,11 +6,13 @@
     background-color: #1aa094 !important;
 }
 
-.layui-header > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
+.layui-header>ul>.layui-nav-item.layui-this,
+.layuimini-tool i:hover {
     background-color: #197971 !important;
 }
 
-.layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
+.layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
+.layuimini-tool i:hover {
     background-color: #197971 !important;
 }
 
@@ -20,7 +22,8 @@
 }
 
 /**左侧-配色*/
-.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul {
+.layui-side.layui-bg-black,
+.layui-side.layui-bg-black>.layuimini-menu-left>ul {
     background-color: #2f4056 !important;
 }
 
@@ -29,7 +32,10 @@
 }
 
 /**左侧菜单选中-配色*/
-.layui-layout-admin .layui-nav-tree .layui-this, .layui-layout-admin .layui-nav-tree .layui-this > a, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
+.layui-layout-admin .layui-nav-tree .layui-this,
+.layui-layout-admin .layui-nav-tree .layui-this>a,
+.layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this,
+.layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
     background-color: #1aa094 !important;
 }
 
@@ -37,24 +43,25 @@
 /**头部样式 */
 .layui-layout-admin .header {
     position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    left    : 0;
+    right   : 0;
+    top     : 0;
+    bottom  : 0;
 }
 
-.layuimini-header-menu, .layui-header {
+.layuimini-header-menu,
+.layui-header {
     height: 60px !important;
 }
 
-.layuimini-header-menu > .layui-nav-item {
-    color: #1b1d21;
-    height: 60px !important;
+.layuimini-header-menu>.layui-nav-item {
+    color      : #1b1d21;
+    height     : 60px !important;
     line-height: 60px !important;
 }
 
-.layui-header > .layui-layout-right > .layui-nav-item {
-    height: 60px !important;
+.layui-header>.layui-layout-right>.layui-nav-item {
+    height     : 60px !important;
     line-height: 60px !important;
 }
 
@@ -64,68 +71,68 @@
 
 .layui-nav.layui-layout-left.layuimini-header-menu.layuimini-pc-show {
     font-weight: bold;
-    transition: all .2s;
+    transition : all .2s;
 }
 
 
 /**logo演示（通用） */
 .layui-layout-admin .layuimini-logo {
     font-weight: bold;
-    color: #ffffff !important;
-    height: 60px !important;
+    color      : #ffffff !important;
+    height     : 60px !important;
     line-height: 60px !important;
-    overflow: hidden;
+    overflow   : hidden;
     line-height: 64px;
-    transition: all .2s !important;
+    transition : all .2s !important;
 }
 
 .layui-layout-admin .layuimini-logo img {
-    display: inline-block;
-    height: 40px;
+    display       : inline-block;
+    height        : 40px;
     vertical-align: middle;
 }
 
 .layui-layout-admin .layuimini-logo h1 {
-    display: inline-block;
-    margin: 0 0 0 12px;
-    color: #ffffff;
-    font-weight: 600;
-    font-size: 20px;
-    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+    display       : inline-block;
+    margin        : 0 0 0 12px;
+    color         : #ffffff;
+    font-weight   : 600;
+    font-size     : 20px;
+    font-family   : Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
     vertical-align: middle;
 }
 
 /**缩放工具（通用） */
 .layuimini-tool {
-    position: absolute !important;
-    top: 0;
-    left: 235px;
-    width: 60px;
-    height: 100%;
+    position   : absolute !important;
+    top        : 0;
+    left       : 235px;
+    width      : 60px;
+    height     : 100%;
     line-height: 60px;
-    text-align: center;
-    color: #ffffff !important;
-    transition: all .2s;
+    text-align : center;
+    color      : #ffffff !important;
+    transition : all .2s;
 }
 
 /**缩放工具（缩放） */
 .layuimini-tool i {
-    display: block;
-    color: #bbe3df;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
+    display      : block;
+    color        : #bbe3df;
+    width        : 32px;
+    height       : 32px;
+    line-height  : 32px;
     border-radius: 3px;
-    text-align: center;
-    margin-top: 15px;
-    cursor: pointer;
+    text-align   : center;
+    margin-top   : 15px;
+    cursor       : pointer;
 }
 
 /**tab选项卡 */
 .layuimini-tab {
-    margin: 0px;
+    margin  : 0px;
     overflow: hidden;
-    height: 100% !important;
+    height  : 100% !important;
 }
 
 .layuimini-tab .layui-tab-content {
@@ -141,14 +148,14 @@
 }
 
 .layuimini-tab .layui-tab-title {
-    border: none;
-    border: 1px solid whitesmoke;
+    border          : none;
+    border          : 1px solid whitesmoke;
     background-color: white;
 }
 
 .layuimini-tab .layui-tab-title li {
     border-right: 1px solid whitesmoke;
-    color: dimgray;
+    color       : dimgray;
 }
 
 .layuimini-tab .layui-tab-title .layui-tab-bar {
@@ -160,23 +167,25 @@
 }
 
 .layuimini-tab .layui-tab-title .layuimini-tab-active {
-    display: inline-block;
+    display         : inline-block;
     background-color: lightgray;
-    width: 9px;
-    height: 9px;
-    border-radius: 30px;
-    margin-right: 5px;
+    width           : 9px;
+    height          : 9px;
+    border-radius   : 30px;
+    margin-right    : 5px;
 }
 
 .layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
     background-color: #1aa094;
 }
 
-.layuimini-tab > .layui-tab-title, .layuimini-tab > .close-box {
+.layuimini-tab>.layui-tab-title,
+.layuimini-tab>.close-box {
     height: 35px !important;
 }
 
-.layuimini-tab > .layui-tab-title li, .layuimini-tab > .close-box li {
+.layuimini-tab>.layui-tab-title li,
+.layuimini-tab>.close-box li {
     line-height: 35px !important;
 }
 
@@ -189,50 +198,50 @@
 }
 
 .layuimini-tab .layui-tab-title .layui-tab-close {
-    font-size: 12px !important;
-    width: 14px !important;
-    height: 14px !important;
+    font-size  : 12px !important;
+    width      : 14px !important;
+    height     : 14px !important;
     line-height: 16px !important;
 }
 
 .layuimini-tab .layui-tab-title .layui-tab-close:hover {
     border-radius: 4em;
-    background: #ff5722;
+    background   : #ff5722;
 }
 
-.layuimini-tab .layui-tab-title .disable-close + .layui-tab-close {
+.layuimini-tab .layui-tab-title .disable-close+.layui-tab-close {
     display: none;
 }
 
-.layuimini-tab .layui-tab-title .able-close + .layui-tab-close {
+.layuimini-tab .layui-tab-title .able-close+.layui-tab-close {
     display: inline-block;
 }
 
-.layuimini-tab .layui-tab-control > li {
-    position: absolute;
-    top: 0px;
-    height: 35px;
-    line-height: 35px;
-    width: 35px;
-    text-align: center;
+.layuimini-tab .layui-tab-control>li {
+    position        : absolute;
+    top             : 0px;
+    height          : 35px;
+    line-height     : 35px;
+    width           : 35px;
+    text-align      : center;
     background-color: white;
-    border-top: whitesmoke 1px solid;
-    border-bottom: whitesmoke 1px solid;
+    border-top      : whitesmoke 1px solid;
+    border-bottom   : whitesmoke 1px solid;
 }
 
 .layuimini-tab .layuimini-tab-roll-left {
-    left: 0px;
+    left        : 0px;
     border-right: whitesmoke 1px solid;
-    border-left: whitesmoke 1px solid;
+    border-left : whitesmoke 1px solid;
 }
 
 .layuimini-tab .layuimini-tab-roll-right {
-    right: 35px;
+    right      : 35px;
     border-left: 1px solid whitesmoke;
 }
 
 .layuimini-tab .layui-tab-tool {
-    right: 0px;
+    right      : 0px;
     border-left: 1px solid whitesmoke;
 }
 
@@ -248,12 +257,12 @@
 }
 
 .layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
-    right: 0px;
+    right       : 0px;
     border-right: 1px solid whitesmoke;
 }
 
 .layuimini-tab.layui-tab-roll .layui-tab-title {
-    padding-left: 35px;
+    padding-left : 35px;
     padding-right: 35px;
 }
 
@@ -263,13 +272,13 @@
 }
 
 .layuimini-tab.layui-tab-tool .layui-tab-title {
-    padding-left: 0px;
+    padding-left : 0px;
     padding-right: 35px;
 }
 
 
 .layuimini-tab.layui-tab-rollTool .layui-tab-title {
-    padding-left: 35px;
+    padding-left : 35px;
     padding-right: 80px;
 }
 
@@ -280,12 +289,12 @@
 }
 
 .layuimini-tab .layui-tab-tool .layui-nav {
-    position: absolute;
-    height: 43px !important;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
+    position  : absolute;
+    height    : 43px !important;
+    top       : 0;
+    width     : 100%;
+    height    : 100%;
+    padding   : 0;
     background: 0 0;
 }
 
@@ -298,10 +307,10 @@
 }
 
 .layuimini-tab .layui-tab-tool .layui-nav-child {
-    left: auto;
-    top: 45px;
-    right: 3px;
-    width: 120px;
+    left  : auto;
+    top   : 45px;
+    right : 3px;
+    width : 120px;
     border: 1px solid whitesmoke;
 }
 
@@ -310,18 +319,18 @@
 }
 
 .layuimini-tab-loading {
-    position: absolute;
-    display: none;
-    width: 100%;
-    height: calc(100% - 37px);
-    top: 37px;
-    z-index: 19;
+    position        : absolute;
+    display         : none;
+    width           : 100%;
+    height          : calc(100% - 37px);
+    top             : 37px;
+    z-index         : 19;
     background-color: #fff
 }
 
 .layuimini-tab-loading.close {
-    animation: close 1s;
-    -webkit-animation: close 1s;
+    animation          : close 1s;
+    -webkit-animation  : close 1s;
     animation-fill-mode: forwards;
 }
 
@@ -330,22 +339,22 @@
     transition: all .2s;
 }
 
-.layui-side.layui-bg-black > .layuimini-menu-left > ul {
+.layui-side.layui-bg-black>.layuimini-menu-left>ul {
     transition: all .2s;
 }
 
-.layui-side.layui-bg-black > .layuimini-menu-left > ul > .layui-nav-item:first-child {
+.layui-side.layui-bg-black>.layuimini-menu-left>ul>.layui-nav-item:first-child {
     border-top: 1px solid #4b5461;
 }
 
 .layuimini-menu-left .layui-nav .layui-nav-item a {
-    height: 40px;
-    line-height: 40px;
+    height       : 40px;
+    line-height  : 40px;
     padding-right: 30px;
 }
 
-.layuimini-menu-left .layui-nav .layui-nav-item > a {
-    padding-top: 5px;
+.layuimini-menu-left .layui-nav .layui-nav-item>a {
+    padding-top   : 5px;
     padding-bottom: 5px;
 }
 
@@ -367,7 +376,8 @@
 
 
 /**左侧菜单栏 (正常) */
-.layui-layout-body .layui-nav-itemed .layui-nav-child a, .layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child a {
+.layui-layout-body .layui-nav-itemed .layui-nav-child a,
+.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child a {
     padding-left: 35px;
 }
 
@@ -383,21 +393,22 @@
     padding-left: 65px;
 }
 
-.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-itemed > .layui-nav-child {
+.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-itemed>.layui-nav-child {
     padding: 5px 0;
 }
 
 /**内容主体（通用） */
 .layui-layout-admin .layui-body {
-    overflow: hidden;
-    bottom: 0px !important;
-    top: 60px !important;
+    overflow  : hidden;
+    bottom    : 0px !important;
+    top       : 60px !important;
     transition: all .2s;
 }
 
 /**选择配色方案 */
-.layuimini-color .color-title {
-    padding: 10px 0 10px 20px;
+.layuimini-color .color-title,
+.layuimini-color .elem-title {
+    padding      : 10px 0 10px 20px;
     border-bottom: 1px solid #d9dada;
     margin-bottom: 8px;
 }
@@ -412,47 +423,61 @@
 }
 
 .layuimini-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;
+    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;
+    cursor          : pointer;
+    font-size       : 12px;
+    color           : #666;
 }
 
-.layuimini-color .color-content li.layui-this:after, .layuimini-color .color-content li:hover:after {
-    width: 100%;
-    height: 100%;
-    padding: 4px;
-    top: -5px;
-    left: -5px;
+.layuimini-color .color-content li.layui-this:after {
+    width       : 100%;
+    height      : 100%;
+    padding     : 4px;
+    top         : -5px;
+    left        : -5px;
     border-color: #d8d8d8;
-    opacity: 1;
+    opacity     : 1;
 }
 
 .layuimini-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;
+    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;
+    opacity           : 0;
+}
+
+.layuimini-color .elem-content li {
+    margin : 5px;
+    padding: 5px 10px;
+    display: inline-block;
+    border : 1px solid #999;
+    cursor : pointer;
+}
+
+.layuimini-color .elem-content li.layui-this {
+    border-color    : #1E9FFF;
+    background-color: #1E9FFF;
+    color           : #fff !important;
 }
 
 
 /**其它 */
 .layui-tab-item {
-    width: 100% !important;
+    width : 100% !important;
     height: 100% !important;
 }
 
@@ -461,27 +486,29 @@
 }
 
 .layui-width-height {
-    width: 100%;
+    width : 100%;
     height: 95%;
 }
 
 .layui-tab {
-    margin: 0 0 0 0;
+    margin : 0 0 0 0;
     z-index: 99999;
 }
 
 .text-center {
-    height: 30px !important;
+    height     : 30px !important;
     line-height: 30px !important;
-    text-align: center !important;
+    text-align : center !important;
 }
 
 .layui-nav {
     padding: 0 !important;
 }
 
-.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
-    width: 0 !important;
+.layui-nav .layui-this:after,
+.layui-nav-bar,
+.layui-nav-tree .layui-nav-itemed:after {
+    width : 0 !important;
     height: 0 !important;
 }
 
@@ -490,7 +517,7 @@
 }
 
 .layui-tab-card {
-    box-shadow: 0px 0px 0px #888888;
+    box-shadow   : 0px 0px 0px #888888;
     border-bottom: 0;
 }
 
@@ -503,14 +530,14 @@
 
 /*移动端遮罩层*/
 .layuimini-make {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    z-index: 1000;
+    position  : fixed;
+    left      : 0;
+    right     : 0;
+    bottom    : 0;
+    top       : 0;
+    z-index   : 1000;
     background: rgba(0, 0, 0, .5);
-    display: none;
+    display   : none;
 }
 
 .layuimini-mini .layui-header {
@@ -519,59 +546,60 @@
 
 /**初始化加载层*/
 .layuimini-loader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    position        : fixed;
+    top             : 0;
+    left            : 0;
+    width           : 100%;
+    height          : 100%;
     background-color: #ffffff;
-    z-index: 999999;
+    z-index         : 999999;
 }
 
 .layuimini-loader .layuimini-loader-inner {
-    display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 150px;
-    height: 150px;
-    margin: -75px 0 0 -75px;
-    border-radius: 50%;
-    border: 3px solid transparent;
+    display         : block;
+    position        : relative;
+    left            : 50%;
+    top             : 50%;
+    width           : 150px;
+    height          : 150px;
+    margin          : -75px 0 0 -75px;
+    border-radius   : 50%;
+    border          : 3px solid transparent;
     border-top-color: #1E9FFF;
-    animation: spin 2s linear infinite;
+    animation       : spin 2s linear infinite;
 }
 
 .layuimini-loader .layuimini-loader-inner:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
+    content         : "";
+    position        : absolute;
+    top             : 5px;
+    left            : 5px;
+    right           : 5px;
+    bottom          : 5px;
+    border-radius   : 50%;
+    border          : 3px solid transparent;
     border-top-color: #1E9FFF;
-    animation: spin 3s linear infinite;
+    animation       : spin 3s linear infinite;
 }
 
 .layuimini-loader .layuimini-loader-inner:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
+    content         : "";
+    position        : absolute;
+    top             : 15px;
+    left            : 15px;
+    right           : 15px;
+    bottom          : 15px;
+    border-radius   : 50%;
+    border          : 3px solid transparent;
     border-top-color: #1E9FFF;
-    animation: spin 1.5s linear infinite;
+    animation       : spin 1.5s linear infinite;
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(1turn);
     }
@@ -580,19 +608,19 @@
 /*系统设置*/
 
 .layuimini-color .layui-word-aux {
-    position: absolute;
-    left: 60px;
-    top: 12px;
+    position : absolute;
+    left     : 60px;
+    top      : 12px;
     font-size: 12px;
 }
 
 .layuimini-color .layui-input-block {
     margin-left: 15px;
-    min-height: 36px;
+    min-height : 36px;
 }
 
 .layuimini-color .more-menu-list {
-    width: 100%;
+    width     : 100%;
     margin-top: 30px;
 }
 
@@ -602,19 +630,19 @@
 }
 
 .layuimini-color .more-menu-item .layui-icon {
-    font-size: 18px;
+    font-size    : 18px;
     padding-right: 10px;
 }
 
 .layuimini-color .more-menu-item {
-    color: #595959;
-    height: 50px;
-    line-height: 50px;
-    font-size: 16px;
-    padding: 0 25px;
+    color        : #595959;
+    height       : 50px;
+    line-height  : 50px;
+    font-size    : 16px;
+    padding      : 0 25px;
     border-bottom: 1px solid #e8e8e8;
-    font-style: normal;
-    display: block;
+    font-style   : normal;
+    display      : block;
 }
 
 .layuimini-color .more-menu-item:hover {
@@ -622,10 +650,10 @@
 }
 
 .layuimini-color .more-menu-item:after {
-    color: #8c8c8c;
-    right: 16px;
-    content: "\e602";
-    position: absolute;
+    color      : #8c8c8c;
+    right      : 16px;
+    content    : "\e602";
+    position   : absolute;
     font-family: layui-icon !important;
 }
 
@@ -633,39 +661,41 @@
 鼠标右键
  */
 .layuimini-tab-mousedown {
-    display: none;
-    width: 80px;
+    display : none;
+    width   : 80px;
     position: absolute;
-    top: 0px !important;
-    left: 0px !important;
+    top     : 0px !important;
+    left    : 0px !important;
 }
 
 .layuimini-tab-mousedown dd a {
     padding: 0 15px;
-    color: #484545;
+    color  : #484545;
 }
 
-.layuimini-tab-make{
-    position: absolute;
-    top: 36px;
-    bottom: 0px;
-    width: 100%;
-    background: rgb(255, 255, 255,0);
-    padding: 0px;
-    overflow: hidden;
+.layuimini-tab-make {
+    position  : absolute;
+    top       : 36px;
+    bottom    : 0px;
+    width     : 100%;
+    background: rgb(255, 255, 255, 0);
+    padding   : 0px;
+    overflow  : hidden;
 }
 
 /**
 菜单缩放
  */
-.popup-tips .layui-layer-TipsG{
+.popup-tips .layui-layer-TipsG {
     display: none;
 }
-.popup-tips.layui-layer-tips .layui-layer-content{
+
+.popup-tips.layui-layer-tips .layui-layer-content {
     padding: 0;
 }
-.popup-tips .layui-nav-tree{
-    width: 150px;
+
+.popup-tips .layui-nav-tree {
+    width        : 150px;
     border-radius: 10px;
 }
 
@@ -675,62 +705,71 @@
 }
 
 /**头部菜单字体间距*/
-.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show,.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
+.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show,
+.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
     letter-spacing: 1px;
 }
 
 
 /**左侧菜单更多下拉样式*/
-.layuimini-menu-left .layui-nav-more,.layuimini-menu-left-zoom .layui-nav-more {
-    font-family: layui-icon !important;
-    font-size: 12px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
+.layuimini-menu-left .layui-nav-more,
+.layuimini-menu-left-zoom .layui-nav-more {
+    font-family            : layui-icon !important;
+    font-size              : 12px;
+    font-style             : normal;
+    -webkit-font-smoothing : antialiased;
     -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    width: auto;
-    height: auto;
-    line-height: normal;
-    border: none;
-    display: inline-block;
-    margin-top: -6px !important;
+    overflow               : hidden;
+    width                  : auto;
+    height                 : auto;
+    line-height            : normal;
+    border                 : none;
+    display                : inline-block;
+    margin-top             : -6px !important;
 }
 
 .layuimini-menu-left .layui-nav-child .layui-nav-more {
     margin-top: -6px !important;
 }
 
-.layuimini-menu-left .layui-nav .layui-nav-mored,.layuimini-menu-left .layui-nav-itemed>a .layui-nav-more{
-    margin-top: -9px!important;
+.layuimini-menu-left .layui-nav .layui-nav-mored,
+.layuimini-menu-left .layui-nav-itemed>a .layui-nav-more {
+    margin-top: -9px !important;
 }
 
-.layuimini-menu-left-zoom.layui-nav .layui-nav-mored,.layuimini-menu-left-zoom.layui-nav-itemed>a .layui-nav-more{
-    margin-top: -9px!important;
+.layuimini-menu-left-zoom.layui-nav .layui-nav-mored,
+.layuimini-menu-left-zoom.layui-nav-itemed>a .layui-nav-more {
+    margin-top: -9px !important;
 }
 
-.layuimini-menu-left .layui-nav-more:before,.layuimini-menu-left-zoom .layui-nav-more:before {
+.layuimini-menu-left .layui-nav-more:before,
+.layuimini-menu-left-zoom .layui-nav-more:before {
     content: "\e61a";
 }
-.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more,.layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more {
-    transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
+
+.layuimini-menu-left .layui-nav-itemed>a>.layui-nav-more,
+.layuimini-menu-left-zoom .layui-nav-itemed>a>.layui-nav-more {
+    transform        : rotate(180deg);
+    -ms-transform    : rotate(180deg);
+    -moz-transform   : rotate(180deg);
     -webkit-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    width: 12px;
-    text-align: center;
-    border-style:none;
+    -o-transform     : rotate(180deg);
+    width            : 12px;
+    text-align       : center;
+    border-style     : none;
 }
 
-.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more:before,.layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more:before {
-    content: '\e61a';
+.layuimini-menu-left .layui-nav-itemed>a>.layui-nav-more:before,
+.layuimini-menu-left-zoom .layui-nav-itemed>a>.layui-nav-more:before {
+    content         : '\e61a';
     background-color: transparent;
-    display: inline-block;
-    vertical-align: middle;
+    display         : inline-block;
+    vertical-align  : middle;
 }
 
 /**修复左侧菜单字体不对齐的问题*/
-.layuimini-menu-left .layui-nav-item a .fa,.layuimini-menu-left .layui-nav-item a .layui-icon{
+.layuimini-menu-left .layui-nav-item a .fa,
+.layuimini-menu-left .layui-nav-item a .layui-icon {
     width: 20px;
 }
 
@@ -739,6 +778,7 @@
  PC版样式
  */
 @media screen and (min-width: 1025px) {
+
     /**头部样式（缩放） */
     .layuimini-mini .layui-layout-left.layuimini-header-menu.layuimini-pc-show {
         left: 155px !important;
@@ -758,22 +798,24 @@
         width: 80px !important;
     }
 
-    .layuimini-mini .layui-side.layui-bg-black, .layuimini-mini .layuimini-menu-left > ul, .layuimini-mini .layuimini-menu-left > ul li i {
+    .layuimini-mini .layui-side.layui-bg-black,
+    .layuimini-mini .layuimini-menu-left>ul,
+    .layuimini-mini .layuimini-menu-left>ul li i {
         width: 60px !important;
     }
 
-    .layuimini-mini .layuimini-menu-left > ul li span:first-child {
+    .layuimini-mini .layuimini-menu-left>ul li span:first-child {
         display: none;
     }
 
-    .layuimini-mini .layuimini-menu-left > ul li span:last-child {
+    .layuimini-mini .layuimini-menu-left>ul li span:last-child {
         float: right;
         right: 7px;
     }
 
     .layuimini-mini .layuimini-menu-left .layui-nav .layui-nav-item a {
-        height: 40px;
-        line-height: 40px;
+        height       : 40px;
+        line-height  : 40px;
         padding-right: 0px !important;
     }
 
@@ -786,16 +828,18 @@
         left: 95px !important;
     }
 
-    .layuimini-pc-show{
+    .layuimini-pc-show {
         display: block;
     }
-    .layuimini-mobile-show{
+
+    .layuimini-mobile-show {
         display: none;
     }
 
     /**菜单缩放*/
-    .layuimini-mini .layuimini-menu-left .layui-nav-more,.layuimini-mini .layuimini-menu-left .layui-nav-child{
-        display: none;!important;
+    .layuimini-mini .layuimini-menu-left .layui-nav-more,
+    .layuimini-mini .layuimini-menu-left .layui-nav-child {
+        display: none !important;
     }
 }
 
@@ -807,24 +851,26 @@
     /**
     todo 修复低版本IOS不能滑动问题, 但还是有问题, 低版本IOS部分情况下子页面无法自适应
     */
-    .layuimini-tab .layui-tab-content .layui-tab-item{
+    .layuimini-tab .layui-tab-content .layui-tab-item {
         -webkit-overflow-scrolling: touch;
-        overflow: scroll;
-        width:100%;
-        height:100%;
+        overflow                  : scroll;
+        width                     : 100%;
+        height                    : 100%;
     }
 
     .layuimini-tab .layui-tab-content .layui-tab-item iframe {
         height: 100%;
-        width: 100%;
+        width : 100%;
     }
 
-    .layuimini-pc-show{
+    .layuimini-pc-show {
         display: none;
     }
-    .layuimini-mobile-show{
+
+    .layuimini-mobile-show {
         display: block;
     }
+
     .layuimini-header-content {
         left: 0;
     }
@@ -841,11 +887,11 @@
         left: 205px !important
     }
 
-    .layui-layout-admin .layui-nav.layui-layout-right > li:not(.layuimini-setting) {
+    .layui-layout-admin .layui-nav.layui-layout-right>li:not(.layuimini-setting) {
         width: 40px !important;
     }
 
-    .layui-layout-admin .layui-nav.layui-layout-right > li:not(.layuimini-setting) a {
+    .layui-layout-admin .layui-nav.layui-layout-right>li:not(.layuimini-setting) a {
         padding: 0 15px;
     }
 
@@ -853,24 +899,26 @@
         left: 0px !important;
     }
 
-    .layuimini-mini .layui-layout-admin .layuimini-menu-left, .layuimini-mini .layui-header .layuimini-logo {
-        left: 0;
+    .layuimini-mini .layui-layout-admin .layuimini-menu-left,
+    .layuimini-mini .layui-header .layuimini-logo {
+        left      : 0;
         transition: left .2s;
-        z-index: 1001 !important;
+        z-index   : 1001 !important;
     }
 
-    .layuimini-all .layui-layout-admin .layuimini-menu-left, .layuimini-all .layui-header .layuimini-logo {
-        left: -200px;
+    .layuimini-all .layui-layout-admin .layuimini-menu-left,
+    .layuimini-all .layui-header .layuimini-logo {
+        left      : -200px;
         transition: left .2s;
-        top: 0;
-        z-index: 1002;
+        top       : 0;
+        z-index   : 1002;
     }
 
     .layuimini-mini .layui-layout-admin .layui-body {
-        left: 0!important;
+        left      : 0 !important;
         transition: left .2s;
-        top: 0;
-        z-index: 998;
+        top       : 0;
+        z-index   : 998;
     }
 
     .layuimini-mini .layuimini-make {
@@ -890,18 +938,18 @@
     }
 
     .layuimini-site-mobile {
-        display: block !important;
-        position: fixed;
-        z-index: 100000;
-        bottom: 15px;
-        left: 15px;
-        width: 40px;
-        height: 40px;
-        line-height: 40px;
-        border-radius: 2px;
-        text-align: center;
+        display         : block !important;
+        position        : fixed;
+        z-index         : 100000;
+        bottom          : 15px;
+        left            : 15px;
+        width           : 40px;
+        height          : 40px;
+        line-height     : 40px;
+        border-radius   : 2px;
+        text-align      : center;
         background-color: rgba(0, 0, 0, .7);
-        color: #fff;
+        color           : #fff;
     }
 
     .layuimini-header-content {
@@ -918,10 +966,10 @@
     }
 }
 
-@media screen and (max-width: 550px){
+@media screen and (max-width: 550px) {
 
     /**头部右侧数据*/
     .layuimini-multi-module.layuimini-mini .layuimini-header-content .layui-layout-right {
         display: none;
     }
-}
+}
\ No newline at end of file
diff --git a/public/static/plugs/lay-module/layuimini/miniTheme.js b/public/static/plugs/lay-module/layuimini/miniTheme.js
index 123602c..054313f 100644
--- a/public/static/plugs/lay-module/layuimini/miniTheme.js
+++ b/public/static/plugs/lay-module/layuimini/miniTheme.js
@@ -278,7 +278,8 @@ define(["jquery"], function ($) {
                     tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
                 },
             ];
-            if (bgcolorId === undefined) {
+
+            if (bgcolorId == undefined) {
                 return bgColorConfig;
             } else {
                 return bgColorConfig[bgcolorId];
@@ -290,16 +291,37 @@ define(["jquery"], function ($) {
          * @param options
          */
         render: function (options) {
-            options.bgColorDefault = options.bgColorDefault || false;
+            options.bgColorDefault = options.bgColorDefault || 0;
+            options.elemStyleDefault = options.elemStyleDefault || 'index';
             options.listen = options.listen || false;
             var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
             if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
                 bgcolorId = options.bgColorDefault;
             }
             miniTheme.buildThemeCss(bgcolorId);
+
+            var elemStyleName = sessionStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = options.elemStyleDefault;
+
+            miniTheme.buildBodyElemStyle(elemStyleName);
+
+            if(typeof window.onInitElemStyle == 'function'){
+                window.onInitElemStyle()
+            }
+
             if (options.listen) miniTheme.listen(options);
         },
 
+        renderElemStyle(elemStyleDefault) {
+
+            elemStyleDefault = elemStyleDefault || 'index';
+
+            var elemStyleName = sessionStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = elemStyleDefault;
+
+            miniTheme.buildBodyElemStyle(elemStyleName);
+
+        },
         /**
          * 构建主题样式
          * @param bgcolorId
@@ -310,6 +332,7 @@ define(["jquery"], function ($) {
                 return false;
             }
             var bgcolorData = miniTheme.config(bgcolorId);
+
             var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
                 '.layui-layout-admin .layui-header {\n' +
                 '    background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
@@ -327,7 +350,7 @@ define(["jquery"], function ($) {
                 '/**头部右侧下拉字体颜色 headerRightChildColor */\n' +
                 '.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
                 '    color:  ' + bgcolorData.headerRightChildColor + '!important;\n' +
-                '}\n'+
+                '}\n' +
                 '\n' +
                 '/*头部右侧鼠标选中 headerRightColorThis */\n' +
                 '.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {\n' +
@@ -413,7 +436,6 @@ define(["jquery"], function ($) {
          * @returns {string}
          */
         buildBgColorHtml: function (options) {
-            options.bgColorDefault = options.bgColorDefault || 0;
             var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
             if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
             var bgColorConfig = miniTheme.config();
@@ -432,6 +454,54 @@ define(["jquery"], function ($) {
             });
             return html;
         },
+        configElemStyle() {
+            var listElemStyle = [
+                {
+                    title: '标准',
+                    className: 'normal'
+                },
+                {
+                    title: '原型',
+                    className: 'demo'
+                },
+                {
+                    title: '科幻',
+                    className: 'sicfi'
+                },
+            ]
+            return listElemStyle;
+        },
+        buildBodyElemStyle(className) {
+            var listElemStyle = miniTheme.configElemStyle()
+
+            $.each(listElemStyle, function (index, item) {
+                var classNameReal = 'elem-style-' + item.className;
+
+                if ($('body').hasClass(classNameReal)) {
+                    $('body').removeClass(classNameReal);
+                }
+            })
+
+            $('body').addClass('elem-style-' + className)
+        },
+        buildElemStyleHtml(options) {
+            var elemStyleName = sessionStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = options.elemStyleDefault;
+            var listElemStyle = miniTheme.configElemStyle()
+            var html = '';
+            $.each(listElemStyle, function (key, val) {
+                if (val.className === elemStyleName) {
+                    html += '<li class="layui-this style-item" data-select-style="' + val.className + '">\n';
+                } else {
+                    html += '<li class="style-item"  data-select-style="' + val.className + '">\n';
+                }
+                html +=
+                    val.title +
+
+                    '</li>';
+            });
+            return html;
+        },
 
         /**
          * 监听
@@ -439,9 +509,10 @@ define(["jquery"], function ($) {
          */
         listen: function (options) {
             $('body').on('click', '[data-bgcolor]', function () {
-                var loading = layer.load(0, {shade: false, time: 2 * 1000});
+                var loading = layer.load(0, { shade: false, time: 2 * 1000 });
                 var clientHeight = (document.documentElement.clientHeight) - 60;
                 var bgColorHtml = miniTheme.buildBgColorHtml(options);
+                var elemStyleHtml = miniTheme.buildElemStyleHtml(options);
                 var html = '<div class="layuimini-color">\n' +
                     '<div class="color-title">\n' +
                     '<span>配色方案</span>\n' +
@@ -449,6 +520,12 @@ define(["jquery"], function ($) {
                     '<div class="color-content">\n' +
                     '<ul>\n' + bgColorHtml + '</ul>\n' +
                     '</div>\n' +
+                    '<div class="elem-title">\n' +
+                    '<span>元素风格</span>\n' +
+                    '</div>\n' +
+                    '<div class="elem-content">\n' +
+                    '<ul>\n' + elemStyleHtml + '</ul>\n' +
+                    '</div>\n' +
                     '<div class="more-menu-list">\n' +
                     '<a class="more-menu-item" href="http://doc.ulthon.com/home/read/ulthon_admin/home.html" target="_blank"><i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档</a>\n' +
                     '<a class="more-menu-item" href="https://gitee.com/ulthon/ulthon_admin" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' +
@@ -477,11 +554,20 @@ define(["jquery"], function ($) {
 
             $('body').on('click', '[data-select-bgcolor]', function () {
                 var bgcolorId = $(this).attr('data-select-bgcolor');
-                $('.layuimini-color .color-content ul .layui-this').attr('class', '');
-                $(this).attr('class', 'layui-this');
+
+                $(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
                 sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
                 miniTheme.render({
-                    bgColorDefault: bgcolorId,
+                    listen: false,
+                });
+            });
+            $('body').on('click', '[data-select-style]', function () {
+                var elemStyleName = $(this).attr('data-select-style');
+
+                $(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
+
+                sessionStorage.setItem('layuiminiElemStyleName', elemStyleName);
+                miniTheme.render({
                     listen: false,
                 });
             });
@@ -490,4 +576,4 @@ define(["jquery"], function ($) {
 
     return miniTheme;
 })
-;
\ No newline at end of file
+    ;
\ No newline at end of file