修改主题默认配置色,修改左侧菜单下拉图标,修复菜单无法自动打开子菜单,修改登录页,404页配置色

zhongshaofa · Apr 13, 2020 · ff2f49a · ff2f49a
1 parent 6eb9ee5
commit ff2f49a
Show file tree

Hide file tree

Showing 9 changed files with 524 additions and 126 deletions.
diff --git a/css/layuimini.css b/css/layuimini.css
@@ -547,15 +547,72 @@
 .popup-tips.layui-layer-tips .layui-layer-content{
     padding: 0;
 }
-.hidden-sub-menu .layui-nav-more,
-.hidden-sub-menu .layui-nav-child{
-    display: none;!important;
-}
 .popup-tips .layui-nav-tree{
     width: 150px;
     border-radius: 10px;
 }
 
+/**左侧菜单字体间距*/
+.layuimini-menu-left .layui-nav-item a span {
+    letter-spacing: 1px;
+}
+
+/**头部菜单字体间距*/
+.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;
+    -moz-osx-font-smoothing: grayscale;
+    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-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 {
+    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);
+    -webkit-transform: rotate(180deg);
+    -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';
+    background-color: transparent;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+
 
 /**
  PC版样式
@@ -615,6 +672,11 @@
         display: none;
     }
 
+    /**菜单缩放*/
+    .layuimini-mini .layuimini-menu-left .layui-nav-more,.layuimini-mini .layuimini-menu-left .layui-nav-child{
+        display: none!important;
+    }
+
 }
 
 /**

diff --git a/css/themes/default.css b/css/themes/default.css
@@ -0,0 +1,95 @@
+/*头部右侧背景色 headerRightBg */
+.layui-layout-admin .layui-header {
+    background-color: #ffffff !important;
+}
+
+/*头部右侧选中背景色 headerRightBgThis */
+.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
+    background-color: #e4e4e4 !important;
+}
+
+/*头部右侧字体颜色 headerRightColor */
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
+    color: rgba(107, 107, 107, 0.7);
+}
+
+/**头部右侧下拉字体颜色 headerRightChildColor */
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
+    color: rgba(107, 107, 107, 0.7) !important;
+}
+
+/*头部右侧鼠标选中 headerRightColorThis */
+.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 {
+    color: #565656 !important;
+}
+
+/*头部右侧更多下拉颜色 headerRightNavMore */
+.layui-header .layui-nav .layui-nav-more {
+    border-top-color: rgba(160, 160, 160, 0.7) !important;
+}
+
+/*头部右侧更多下拉颜色 headerRightNavMore */
+.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {
+    border-color: transparent transparent rgba(160, 160, 160, 0.7) !important;
+}
+
+/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
+.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
+    background-color: #1E9FFF !important;
+    color: #ffffff !important;
+}
+
+/*头部缩放按钮样式 headerRightToolColor */
+.layui-layout-admin .layui-header .layuimini-tool i {
+    color: #565656;
+}
+
+/*logo背景颜色 headerLogoBg */
+.layui-layout-admin .layuimini-logo {
+    background-color: #192027 !important;
+}
+
+/*logo字体颜色 headerLogoColor */
+.layui-layout-admin .layuimini-logo h1 {
+    color: rgb(191, 187, 187);
+}
+
+/*左侧菜单更多下拉样式 leftMenuNavMore */
+.layuimini-menu-left .layui-nav .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-more {
+    border-top-color: rgb(191, 187, 187);
+}
+
+/*左侧菜单更多下拉样式 leftMenuNavMore */
+.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
+    border-color: transparent transparent rgb(191, 187, 187) !important;
+}
+
+/*左侧菜单背景 leftMenuBg */
+.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {
+    background-color: #28333E !important;
+}
+
+/*左侧菜单选中背景 leftMenuBgThis */
+.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
+    background-color: #1E9FFF !important
+}
+
+/*左侧菜单子菜单背景 leftMenuChildBg */
+.layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
+    background-color: #0c0f13 !important;
+}
+
+/*左侧菜单字体颜色 leftMenuColor */
+.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
+    color: rgb(191, 187, 187) !important;
+}
+
+/*左侧菜单选中字体颜色 leftMenuColorThis */
+.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {
+    color: #ffffff !important;
+}
+
+/**tab选项卡选中颜色 tabActiveColor */
+.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
+    background-color: #1e9fff;
+}
diff --git a/images/home.png b/images/home.png
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
     <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
     <link rel="stylesheet" href="css/layuimini.css?v=2.0.1" media="all">
+    <link rel="stylesheet" href="css/themes/default.css" media="all">
     <link rel="stylesheet" href="css/public.css" media="all">
     <!--[if lt IE 9]>
     <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
@@ -127,7 +128,7 @@
             iniUrl: "api/init.json",    // 初始化接口
             clearUrl: "api/clear.json", // 缓存清理接口
             renderPageVersion: true,    // 初始化页面是否加版本号
-            bgColorDefault: 0,          // 主题默认配置
+            bgColorDefault: false,      // 主题默认配置
             multiModule: true,          // 是否开启多模块
             menuChildOpen: false,       // 是否默认展开菜单
             loadingTime: 0,             // 初始化加载时间

diff --git a/js/lay-module/layuimini/miniAdmin.js b/js/lay-module/layuimini/miniAdmin.js
@@ -254,6 +254,9 @@ layui.define(["jquery", "miniMenu", "element","miniPage", "miniTheme"], function
                 miniAdmin.success('刷新成功');
             });
 
+            /**
+             * 监听提示信息
+             */
             $("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
                 if (miniAdmin.checkMobile()) {
                     return false;
@@ -262,7 +265,7 @@ layui.define(["jquery", "miniMenu", "element","miniPage", "miniTheme"], function
                     tips = $(this).prop("innerHTML"),
                     isShow = $('.layuimini-tool i').attr('data-side-fold');
                 if (isShow == 0 && tips) {
-                    tips = "<ul class='layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
+                    tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
                     window.openTips = layer.tips(tips, $(this), {
                         tips: [2, '#2f4056'],
                         time: 300000,

diff --git a/js/lay-module/layuimini/miniMenu.js b/js/lay-module/layuimini/miniMenu.js
@@ -4,7 +4,7 @@
  * version:2.0
  * description:layuimini 菜单框架扩展
  */
-layui.define(["element", "laytpl","jquery"], function (exports) {
+layui.define(["element","laytpl" ,"jquery"], function (exports) {
     var element = layui.element,
         $ = layui.$,
         laytpl = layui.laytpl,
@@ -30,7 +30,6 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
             miniMenu.listen();
         },
 
-
         /**
          * 单模块
          * @param menuList 菜单数据
@@ -43,7 +42,7 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
                 leftMenuCheckDefault = 'layui-this';
             var me = this ;
             if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
-            leftMenuHtml = this.renderLeftMenu(menuList) ;
+            leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ;
             $('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
             $('.layuimini-header-menu').remove();
             $('.layuimini-menu-left').html(leftMenuHtml);
@@ -55,9 +54,9 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
          * 渲染一级菜单
          */
         compileMenu: function(menu,isSub){
-            var menuHtml = '<li {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.className}}"  {{#if( d.id){ }}  id="{{d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{d.title}}</span></a>  {{# if(d.children){}} {{d.children}} {{#}}} </li>' ;
+            var menuHtml = '<li {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}"  {{#if( d.id){ }}  id="{{d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{d.title}}</span></a>  {{# if(d.children){}} {{d.children}} {{#}}} </li>' ;
             if(isSub){
-                menuHtml = '<dd class="menu-dd  {{#if( d.className){ }} {{d.className }} {{#}}}"> <a href="javascript:;"  {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }}  id="{{d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}}> {{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}}</dd>'
+                menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;"  {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }}  id="{{d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}}> {{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}}</dd>'
             }
             return laytpl(menuHtml).render(menu);
         },
@@ -79,14 +78,15 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
             }
             return _list ;
         },
-        renderChildrenMenu:function(menuList){
+        renderChildrenMenu:function(menuList,options){
             var me = this ;
             menuList = menuList || [] ;
             var html = this.each(menuList,function (idx,menu) {
                 if(menu.child && menu.child.length){
-                    menu.children = me.renderChildrenMenu(menu.child,true);
+                    menu.children = me.renderChildrenMenu(menu.child,{ childOpenClass: options.childOpenClass || '' });
                 }
                 menu.className = "" ;
+                menu.childOpenClass = options.childOpenClass || ''
                 return me.compileMenu(menu,true)
             }).join("");
             return me.compileMenuContainer({ children:html },true)
@@ -95,11 +95,11 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
             options = options || {};
             var me = this ;
             var leftMenusHtml =  me.each(leftMenus || [],function (idx,leftMenu) { // 左侧菜单遍历
-                var children = me.renderChildrenMenu(leftMenu.child);
+                var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass:options.childOpenClass });
                 var leftMenuHtml = me.compileMenu({
                     href:leftMenu.href,
                     target:leftMenu.target,
-                    className:"",
+                    childOpenClass:options.childOpenClass,
                     icon:leftMenu.icon,
                     title:leftMenu.title,
                     children:children
@@ -141,6 +141,7 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
                 });
                 leftMenuHtml+=me.renderLeftMenu(val.child,{
                     parentMenuId:menu,
+                    childOpenClass:childOpenClass,
                     leftMenuCheckDefault:leftMenuCheckDefault
                 });
                 headerMobileMenuHtml +=me.compileMenu({ id:id,menu:menu,id:id,icon:val.icon, title:val.title, },true);
@@ -209,18 +210,18 @@ layui.define(["element", "laytpl","jquery"], function (exports) {
                     $('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
                     $('.layui-layout-body').removeClass('layuimini-all');
                     $('.layui-layout-body').addClass('layuimini-mini');
-                    $(".menu-li").each(function (idx,el) {
-                        $(el).addClass("hidden-sub-menu");
-                    });
+                    // $(".menu-li").each(function (idx,el) {
+                    //     $(el).addClass("hidden-sub-menu");
+                    // });
 
                 } else { // 正常
                     $('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
                     $('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
                     $('.layui-layout-body').removeClass('layuimini-mini');
                     $('.layui-layout-body').addClass('layuimini-all');
-                    $(".menu-li").each(function (idx,el) {
-                        $(el).removeClass("hidden-sub-menu");
-                    });
+                    // $(".menu-li").each(function (idx,el) {
+                    //     $(el).removeClass("hidden-sub-menu");
+                    // });
                     layer.close(window.openTips);
                 }
                 element.init();