优化前后台JS和CSS

public/assets/css/backend.css

@@ -309,14 +309,13 @@ body.is-dialog {
 html.ios-fix,
 html.ios-fix body {
   height: 100%;
-  overflow: auto;
+  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
 }
 html.ios-fix .wrapper,
 html.ios-fix body .wrapper,
 html.ios-fix .tab-pane,
 html.ios-fix body .tab-pane {
-  overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 .wrapper {
@@ -407,6 +406,14 @@ table.table-template {
   top: 62px;
   right: 12px;
 }
+.bootstrap-select {
+  min-height: 33px;
+}
+.bootstrap-select .msg-box {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 .bootstrap-select .status {
   background: #f0f0f0;
   clear: both;
@@ -417,15 +424,18 @@ table.table-template {
   margin-bottom: -5px;
   padding: 10px 20px;
 }
+.bootstrap-select .bs-placeholder {
+  min-height: 33px;
+}
 select.bs-select-hidden,
 select.selectpicker {
   display: inherit !important;
-  max-height: 31px;
+  max-height: 33px;
   overflow: hidden;
 }
 select.bs-select-hidden[multiple],
 select.selectpicker[multiple] {
-  height: 31px;
+  height: 33px;
   padding: 0;
   background: #f4f4f4;
 }
@@ -450,6 +460,9 @@ input.selectpage {
   color: transparent;
   pointer-events: none;
 }
+.sp_container {
+  min-height: 33px;
+}
 .sp_container input.selectpage {
   color: inherit;
   pointer-events: inherit;
@@ -1028,22 +1041,32 @@ form.form-horizontal .control-label {
 .bootstrap-table .fa-toggle-on.fa-2x {
   font-size: 1.86em;
 }
-.bootstrap-table .form-commonsearch .form-group {
+.bootstrap-table .form-commonsearch .row > .form-group {
   margin-left: 0;
   margin-right: 0;
+}
+.bootstrap-table .form-commonsearch .row > .form-group > .control-label {
   white-space: nowrap;
 }
+.bootstrap-table .btn-commonsearch {
+  position: relative;
+}
+.bootstrap-table .btn-commonsearch > span {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
 .bootstrap-table .table:not(.table-condensed) > tbody > tr > th,
 .bootstrap-table .table:not(.table-condensed) > tfoot > tr > th,
 .bootstrap-table .table:not(.table-condensed) > thead > tr > td,
 .bootstrap-table .table:not(.table-condensed) > tbody > tr > td,
 .bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
-  padding: 8px 15px;
+  padding: 10px 15px;
   height: 47px;
 }
 .fixed-table-container tbody td .th-inner,
 .fixed-table-container thead th .th-inner {
-  padding: 8px 10px;
+  padding: 10px 10px;
 }
 .toolbar {
   margin-top: 10px;
@@ -1437,7 +1460,7 @@ table.table-nowrap thead > tr > th {
 }
 /*修正开关关闭下的颜色值*/
 .btn-switcher.disabled {
-  opacity: .6;
+  opacity: 0.6;
   cursor: not-allowed;
 }
 .btn-switcher .text-gray {
@@ -1516,7 +1539,7 @@ table.table-nowrap thead > tr > th {
   color: #555;
   vertical-align: middle;
   width: 100%;
-  line-height: 22px;
+  line-height: 23px;
   cursor: text;
 }
 .bootstrap-tagsinput input {
@@ -1546,6 +1569,7 @@ table.table-nowrap thead > tr > th {
 .bootstrap-tagsinput .tag {
   margin-right: 2px;
   color: white;
+  min-height: 23px;
 }
 .bootstrap-tagsinput .tag [data-role="remove"] {
   margin-left: 5px;

public/assets/css/frontend.css

@@ -350,19 +350,19 @@ a:focus {
     border-top-color: #f5f5f5;
   }
 }
-.dropdown:hover .dropdown-menu {
+#header-navbar .dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0;
 }
+#header-navbar li.dropdown ul.dropdown-menu {
+  min-width: 100px;
+}
 .navbar {
   border: none;
 }
 .navbar-nav > li > a {
   font-size: 14px;
 }
-#header-navbar li.dropdown ul.dropdown-menu {
-  min-width: 100px;
-}
 .dropdown-menu > li > a {
   font-size: 14px;
   padding: 5px 20px;
@@ -464,6 +464,9 @@ a:focus {
 .input-group > .msg-box.n-right {
   position: absolute;
 }
+.bootstrap-select {
+  min-height: 33px;
+}
 .bootstrap-select .status {
   background: #f0f0f0;
   clear: both;
@@ -474,10 +477,18 @@ a:focus {
   margin-bottom: -5px;
   padding: 10px 20px;
 }
+.bootstrap-select .msg-box {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.bootstrap-select .bs-placeholder {
+  min-height: 33px;
+}
 select.bs-select-hidden,
 select.selectpicker {
   display: inherit !important;
-  max-height: 31px;
+  max-height: 33px;
   overflow: hidden;
 }
 select.bs-select-hidden[multiple],
@@ -507,6 +518,9 @@ input.selectpage {
   color: transparent;
   pointer-events: none;
 }
+.sp_container {
+  min-height: 33px;
+}
 .sp_container input.selectpage {
   color: inherit;
   pointer-events: inherit;
@@ -813,21 +827,25 @@ footer.footer .copyright a:hover {
 .login-section .login-main {
   padding: 40px 45px 20px 45px;
 }
-.login-section .n-bootstrap .form-group {
+.login-section .n-bootstrap .controls,
+.form-section .n-bootstrap .controls {
   position: relative;
 }
-.login-section .n-bootstrap .input-group {
+.login-section .n-bootstrap .input-group,
+.form-section .n-bootstrap .input-group {
   position: inherit;
 }
-.login-section .n-bootstrap .n-right {
+.login-section .n-bootstrap .n-right,
+.form-section .n-bootstrap .n-right {
   margin-top: 0;
-  top: 0;
+  top: -20px;
   position: absolute;
   left: 0;
   text-align: right;
   width: 100%;
 }
-.login-section .n-bootstrap .n-right .msg-wrap {
+.login-section .n-bootstrap .n-right .msg-wrap,
+.form-section .n-bootstrap .n-right .msg-wrap {
   position: relative;
 }
 main.content {
@@ -950,21 +968,21 @@ main.content {
   margin: 0;
 }
 .pager li {
-  margin: 0 .4em;
+  margin: 0 0.4em;
   display: inline-block;
 }
 .pager li:first-child > a,
 .pager li:last-child > a,
 .pager li:first-child > span,
 .pager li:last-child > span {
-  padding: .5em 1.2em;
+  padding: 0.5em 1.2em;
 }
 .pager li > a,
 .pager li > span {
   background: none;
   border: 1px solid #e6e6e6;
   border-radius: 0.25em;
-  padding: .5em .93em;
+  padding: 0.5em 0.93em;
   font-size: 14px;
 }
 .jumpto input {

public/assets/less/backend.less

@@ -22,6 +22,7 @@
 @main-bg: #f1f4f6;
 @panel-intro-bg: darken(@main-bg, 3%);
 @panel-nav-bg: #fff;
+@input-min-height: 33px;
 
 html,
 body {
@@ -205,24 +206,38 @@ table.table-template {
     right: 12px;
 }
 
-.bootstrap-select .status {
+.bootstrap-select {
-    background: #f0f0f0;
+    .msg-box {
-    clear: both;
+        position: absolute;
-    color: #999;
+        right: 0;
-    font-size: 13px;
+        top: 0;
-    font-weight: 500;
+    }
-    line-height: 1;
+
-    margin-bottom: -5px;
+    .status {
-    padding: 10px 20px;
+        background: #f0f0f0;
+        clear: both;
+        color: #999;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1;
+        margin-bottom: -5px;
+        padding: 10px 20px;
+    }
+
+    .bs-placeholder {
+        min-height: @input-min-height;
+    }
+
+    min-height: @input-min-height;
 }
 
 select.bs-select-hidden, select.selectpicker {
     display: inherit !important;
-    max-height: 31px;
+    max-height: @input-min-height;
     overflow: hidden;
 
     &[multiple] {
-        height: 31px;
+        height: @input-min-height;
         //visibility: hidden;
         padding: 0;
         background: #f4f4f4;
@@ -266,6 +281,8 @@ input.selectpage {
             }
         }
     }
+
+    min-height: @input-min-height;
 }
 
 .img-center {
@@ -953,10 +970,25 @@ form.form-horizontal .control-label {
     font-size: 1.86em;
 }
 
-.bootstrap-table .form-commonsearch .form-group {
+.bootstrap-table .form-commonsearch .row > .form-group {
     margin-left: 0;
     margin-right: 0;
-    white-space: nowrap;
+
+    > .control-label {
+        white-space: nowrap;
+    }
+}
+
+.bootstrap-table {
+    .btn-commonsearch {
+        position: relative;
+
+        > span {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+        }
+    }
 }
 
 .bootstrap-table .table:not(.table-condensed) > tbody > tr > th,
@@ -964,12 +996,13 @@ form.form-horizontal .control-label {
 .bootstrap-table .table:not(.table-condensed) > thead > tr > td,
 .bootstrap-table .table:not(.table-condensed) > tbody > tr > td,
 .bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
-    padding: 8px 15px;
+    padding: 10px 15px;
+
     height: 47px;
 }
 
 .fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner {
-    padding: 8px 10px;
+    padding: 10px 10px;
 }
 
 .toolbar {
@@ -1314,7 +1347,7 @@ table.table-nowrap {
 
         .toolbar {
             .btn {
-                min-height: 33px;
+                min-height: @input-min-height;
             }
 
             a.btn-refresh, a.btn-del, a.btn-add, a.btn-edit, a.btn-import, a.btn-more, a.btn-recyclebin, .btn-mini-xs, .btn-multi {
@@ -1533,13 +1566,14 @@ table.table-nowrap {
     display: inline-block;
     padding: 4px 6px;
     //margin-bottom: 10px;
+
     color: #555;
     vertical-align: middle;
     //border-radius: 4px;
     //max-width: 100%;
 
     width: 100%;
-    line-height: 22px;
+    line-height: 23px;
     cursor: text;
 
 
@@ -1574,6 +1608,7 @@ table.table-nowrap {
     .tag {
         margin-right: 2px;
         color: white;
+        min-height: 23px;
 
         [data-role="remove"] {
             margin-left: 5px;

public/assets/less/frontend.less

@@ -18,6 +18,7 @@
 
 @primary-color: #007bff;
 //@primary-color: #2d76d9;
+@input-min-height: 33px;
 
 .clearfix() {
     &:before,
@@ -130,9 +131,14 @@ a {
     }
 }
 
-.dropdown:hover .dropdown-menu {
+#header-navbar {
-    display: block;
+    .dropdown:hover .dropdown-menu {
-    margin-top: 0;
+        display: block;
+        margin-top: 0;
+    }
+    li.dropdown ul.dropdown-menu {
+        min-width: 100px;
+    }
 }
 
 .navbar {
@@ -145,10 +151,6 @@ a {
     }
 }
 
-#header-navbar li.dropdown ul.dropdown-menu {
-    min-width: 100px;
-}
-
 .dropdown-menu {
     > li > a {
         font-size: 14px;
@@ -263,20 +265,34 @@ a {
     position: absolute;
 }
 
-.bootstrap-select .status {
+.bootstrap-select {
-    background: #f0f0f0;
+    .status {
-    clear: both;
+        background: #f0f0f0;
-    color: #999;
+        clear: both;
-    font-size: 12px;
+        color: #999;
-    font-weight: 500;
+        font-size: 12px;
-    line-height: 1;
+        font-weight: 500;
-    margin-bottom: -5px;
+        line-height: 1;
-    padding: 10px 20px;
+        margin-bottom: -5px;
+        padding: 10px 20px;
+    }
+
+    .msg-box {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    .bs-placeholder {
+        min-height: @input-min-height;
+    }
+
+    min-height: @input-min-height;
 }
 
 select.bs-select-hidden, select.selectpicker {
     display: inherit !important;
-    max-height: 31px;
+    max-height: @input-min-height;
     overflow: hidden;
 
     &[multiple] {
@@ -324,6 +340,7 @@ input.selectpage {
             }
         }
     }
+    min-height: @input-min-height;
 }
 
 /*修复radio和checkbox样式对齐*/
@@ -619,9 +636,11 @@ footer.footer {
     .login-main {
         padding: 40px 45px 20px 45px;
     }
+}
 
+.login-section, .form-section {
     .n-bootstrap {
-        .form-group {
+        .controls {
             position: relative;
         }
 
@@ -631,7 +650,7 @@ footer.footer {
 
         .n-right {
             margin-top: 0;
-            top: 0;
+            top: -20px;
             position: absolute;
             left: 0;
             text-align: right;