同步代码

app/admin/view/index/index.html

@@ -33,13 +33,20 @@
     <!-- 左则菜单 结束 -->
 
     <!-- 主体内容 开始 -->
-    <div class="layui-body">{block name='content'}{/block}</div>
+    <div class="layui-body">
+        <div class="think-page-body">
+            {block name='content'}{/block}
+        </div>
+        <!-- 页面加载动画 -->
+        <div class="think-page-loader layui-hide">
+            <div class="loader"></div>
+        </div>
+    </div>
     <!-- 主体内容 结束 -->
-
 </div>
 
 <!-- 加载动画 开始 -->
-<div class="layui-page-loader">
+<div class="think-page-loader">
     <div class="loader"></div>
 </div>
 <!-- 加载动画 结束 -->

public/static/admin.js

@@ -169,6 +169,17 @@ $(function () {
             var idx = msg ? layer.msg(msg, {icon: 16, scrollbar: false, shade: this.shade, time: 0, end: call}) : layer.load(2, {time: 0, scrollbar: false, shade: this.shade, end: call});
             return that.idx.push(idx), idx;
         };
+        /*! 页面加载层 */
+        this.page = {
+            show: function () {
+                if ($('body>.think-page-loader').is(':hidden')) {
+                    $('.think-page-body+.think-page-loader').removeClass('layui-hide').show();
+                }
+            },
+            hide: function () {
+                setTimeout("$('.think-page-body+.think-page-loader').fadeOut()", 500);
+            },
+        };
         /*! 确认对话框 */
         this.confirm = function (msg, ok, no) {
             return layer.confirm(msg, {title: '操作确认', btn: ['确认', '取消']}, function (idx) {
@@ -196,7 +207,7 @@ $(function () {
     $.form = new function (that) {
         that = this;
         /*! 内容区选择器 */
-        this.selecter = '.layui-layout-admin>.layui-body';
+        this.selecter = '.layui-layout-admin>.layui-body>.think-page-body';
         /*! 刷新当前页面 */
         this.reload = function (force) {
             if (force) top.location.reload();
@@ -390,7 +401,7 @@ $(function () {
             window.onhashchange = function (hash, node) {
                 hash = location.hash || '';
                 if (hash.length < 1) return $('[data-menu-node]:first').trigger('click');
-                $.form.load(hash), that.syncOpenStatus(2);
+                $.msg.page.show(), $.form.load(hash, {}, 'get', $.msg.page.hide, false), that.syncOpenStatus(2);
                 /*! 菜单选择切换 */
                 node = node || that.queryNode(that.getUri());
                 if (/^m-/.test(node)) {
@@ -1004,7 +1015,7 @@ $(function () {
     /*! 延时关闭加载动画 */
     window.addEventListener('load', function () {
         setTimeout(function () {
-            $('body>.layui-page-loader').fadeOut();
+            $('body>.think-page-loader').fadeOut();
         }, 200);
     }, true);
 

public/static/theme/css/console.config.less

@@ -56,11 +56,11 @@
 @LeftMainNavActiveTextColor: #FFF;
 
 // 加载页面背景颜色
-@LoadBackColor: #EEE;
+@LoadBackColor: #EFEFEF;
 
 // 窗口页面背景颜色
 @BodyMainTop: 51px;
-@BodyMainBackColor: #EEE;
+@BodyMainBackColor: #EFEFEF;
 
 // 左侧菜单大小
 @LayoutMiniLeftSize: 50px;

public/static/theme/css/console.display.less

@@ -751,21 +751,24 @@ fieldset {
 }
 
 /*! 首页加载动画 */
-.layui-page-loader {
+.think-page-loader {
   top: 0;
-  width: 100%;
+  left: 0;
-  height: 100%;
+  right: 0;
+  bottom: 0;
   z-index: 9999999;
   position: fixed;
+  text-align: center;
   background-color: @LoadBackColor;
 
   .loader {
     top: 50%;
     width: 50px;
     height: 50px;
-    margin: -30px auto 40px;
     z-index: 999999;
+    margin-top: -30px;
     position: relative;
+    display: inline-block;
     background-color: @LoadBackColor;
   }
 
@@ -776,9 +779,9 @@ fieldset {
     height: 7px;
     opacity: 0.1;
     content: "";
-    background: #000;
-    border-radius: 50%;
     position: absolute;
+    border-radius: 50%;
+    background-color: #000;
     animation: shadow .5s linear infinite;
   }
 

public/static/theme/css/console.layout.less

@@ -247,7 +247,11 @@
     background: @BodyMainBackColor;
     box-shadow: @ShadowDownInset;
 
-    > .layui-card {
+    > .think-page-body + .think-page-loader {
+      left: @LayoutDefaLeftSzie
+    }
+
+    > .think-page-body > .layui-card {
       box-shadow: none !important;
       background: none !important;
 
@@ -304,15 +308,17 @@
   }
 }
 
+
 .layui-layout-left-mini {
-  .layui-header {
+
+  .layui-header, .think-page-body + .think-page-loader {
     left: @LayoutMiniLeftSize;
   }
 
   > .layui-body {
     left: @LayoutMiniLeftSize;
 
-    > .layui-card {
+    > .think-page-body > .layui-card {
       > .layui-card-header {
         left: @LayoutMiniLeftSize;
       }
@@ -372,14 +378,14 @@
   > .layui-body {
     left: 0 !important;
 
-    > .layui-card {
+    > .think-page-body > .layui-card {
       > .layui-card-header {
         left: 0 !important;
       }
     }
   }
 
-  > .layui-header {
+  > .layui-header, .think-page-body + .think-page-loader {
     left: 0 !important;
 
     .layui-logo-hide {