优化移动端下Tabs滚动

优化移动端下系统配置页面展示

application/admin/view/general/config/index.html

@@ -20,6 +20,15 @@
     .edit-form table > tbody > tr:hover td a.btn-delcfg {
         visibility: visible;
     }
+
+    @media (max-width: 767px) {
+        .edit-form table tr th:nth-last-child(-n + 2), .edit-form table tr td:nth-last-child(-n + 2) {
+            display: none;
+        }
+        .edit-form table tr td .msg-box {
+            display: none;
+        }
+    }
 </style>
 <div class="panel panel-default panel-intro">
     <div class="panel-heading">
@@ -36,6 +45,7 @@
 
     <div class="panel-body">
         <div id="myTabContent" class="tab-content">
+            <!--@formatter:off-->
             {foreach $siteList as $index=>$vo}
             <div class="tab-pane fade {$vo.active ? 'active in' : ''}" id="{$vo.name}">
                 <div class="widget-body no-padding">
@@ -316,6 +326,7 @@ value2|title2</textarea>
                 </form>
 
             </div>
+            <!--@formatter:on-->
         </div>
     </div>
 </div>

application/config.php

@@ -275,7 +275,7 @@ return [
         'multiplenav'           => false,
         //是否开启多选项卡(仅在开启多级菜单时起作用)
         'multipletab'           => true,
-        //后台皮肤,为空时表示使用skin-green
+        //后台皮肤,为空时表示使用skin-black-green
         'adminskin'             => '',
         //后台是否启用面包屑
         'breadcrumb'            => false,

public/assets/css/backend.css

@@ -271,6 +271,18 @@ form.form-horizontal .control-label {
   border-bottom-color: transparent;
   cursor: default;
 }
+@media (max-width: 768px) {
+  .panel-intro > .panel-heading .nav-tabs {
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-bottom: -1px;
+  }
+  .panel-intro > .panel-heading .nav-tabs > li {
+    display: inline-block;
+    float: none;
+  }
+}
 /*单表格*/
 .panel-tabs .panel-heading {
   padding: 12px 15px 12px 15px;
@@ -480,19 +492,16 @@ form.form-horizontal .control-label {
   color: #222e32;
 }
 .multiplenav .content-wrapper,
-.multiplenav .right-side {
+.multiplenav .right-side,
+.multiplenav .main-sidebar {
   padding-top: 50px;
 }
 .multiplenav #firstnav .nav-addtabs {
   padding-right: 450px;
 }
 @media (max-width: 767px) {
-  .multipletab .fixed .content-wrapper,
+  .multipletab.multiplenav .content-wrapper,
-  .multipletab .fixed .right-side {
+  .multipletab.multiplenav .right-side {
-    padding-top: 94px;
-  }
-  .multipletab .content-wrapper,
-  .multipletab .right-side {
     padding-top: 94px;
   }
 }
@@ -1022,7 +1031,7 @@ table.table-nowrap thead > tr > th {
   .left-side {
     padding-top: 50px;
   }
-  .multiplenav .main-sidebar {
+  .multipletab.multiplenav .main-sidebar {
     padding-top: 95px;
   }
   .n-bootstrap .n-right {

public/assets/js/backend/index.js

@@ -55,10 +55,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'adminlte', 'form'], functi
             //切换左侧sidebar显示隐藏
             $(document).on("click fa.event.toggleitem", ".sidebar-menu li > a", function (e) {
                 var nextul = $(this).next("ul");
-                if (nextul.length > 0) {
+                if (nextul.length == 0 && (!$(this).parent("li").hasClass("treeview") || ($("body").hasClass("multiplenav") && $(this).parent().parent().hasClass("sidebar-menu")))) {
-                    return;
-                }
-                if (!$(this).parent("li").hasClass("treeview") || ($("body").hasClass("multiplenav") && $(this).parent().parent().hasClass("sidebar-menu"))) {
                     $(".sidebar-menu li").removeClass("active");
                 }
                 //当外部触发隐藏的a时,触发父辈a的事件

public/assets/less/backend.less

@@ -338,6 +338,20 @@ form.form-horizontal .control-label {
             border-bottom-color: transparent;
             cursor: default;
         }
+
+        @media (max-width: @screen-tablet) {
+            .nav-tabs {
+                white-space: nowrap;
+                overflow-x: auto;
+                overflow-y: hidden;
+                margin-bottom: -1px;
+
+                > li {
+                    display: inline-block;
+                    float: none;
+                }
+            }
+        }
     }
 }
 
@@ -595,7 +609,7 @@ form.form-horizontal .control-label {
 }
 
 .multiplenav {
-    .content-wrapper, .right-side {
+    .content-wrapper, .right-side, .main-sidebar {
         padding-top: 50px;
     }
 
@@ -606,14 +620,12 @@ form.form-horizontal .control-label {
 
 @media (max-width: 767px) {
     .multipletab {
-        .fixed .content-wrapper, .fixed .right-side {
+        &.multiplenav {
-            padding-top: 94px;
-        }
-
             .content-wrapper, .right-side {
                 padding-top: 94px;
             }
         }
+    }
 }
 
 .multipletab {
@@ -1266,7 +1278,7 @@ table.table-nowrap {
         padding-top: 50px;
     }
 
-    .multiplenav {
+    .multipletab.multiplenav {
         .main-sidebar {
             padding-top: 95px;
         }