优化前台会员中心H5下展示

优化后台菜单栏切换
优化后台Logo展示

application/admin/view/common/header.html

@@ -3,7 +3,7 @@
     <!-- 迷你模式下Logo的大小为50X50 -->
     <span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span>
     <!-- 普通模式下Logo -->
-    <span class="logo-lg"><b>{$site.name|mb_substr=0,4,'utf-8'|htmlentities}</b>{$site.name|mb_substr=4,null,'utf-8'|htmlentities}</span>
+    <span class="logo-lg">{$site.name|htmlentities}</span>
 </a>
 
 <!-- 顶部通栏样式 -->

application/index/view/common/sidenav.html

@@ -1,4 +1,5 @@
-<div class="sidenav">
+<div class="sidebar-toggle"><i class="fa fa-bars"></i></div>
+<div class="sidenav" id="sidebar-nav">
     {:hook('user_sidenav_before')}
     <ul class="list-group">
         <li class="list-group-heading">{:__('Member center')}</li>

application/index/view/user/index.html

@@ -42,6 +42,12 @@
                                     </a>
                                 </p>
                                 <!-- Success -->
+                            </div>
+                        </div>
+
+                        <div class="col-md-9 col-sm-9 col-xs-12">
+                            <!-- Content -->
+                            <div class="ui-content">
                                 <div class="basicinfo">
                                     <div class="row">
                                         <div class="col-xs-4 col-md-2">{:__('Money')}</div>
@@ -68,6 +74,7 @@
                                 </div>
                             </div>
                         </div>
+
                     </div>
                 </div>
             </div>

public/assets/css/backend.css

@@ -28,13 +28,6 @@ body.is-dialog {
   border: 1px solid #8B9;
   background-color: #BEC;
 }
-.main-header .logo,
-.main-header .navbar {
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  transition: none;
-}
 .main-header .navbar {
   position: relative;
 }
@@ -52,9 +45,6 @@ html.ios-fix body {
 .wrapper {
   height: 100%;
 }
-#header {
-  background: #fff;
-}
 .content-wrapper {
   position: relative;
   height: 100%;

public/assets/css/skins/_all-skins.css

@@ -2,6 +2,9 @@
  * Skin: Blue
  * ----------
  */
+.skin-blue .main-header {
+  background-color: #3c8dbc;
+}
 .skin-blue .main-header .navbar {
   background-color: #3c8dbc;
 }
@@ -652,6 +655,9 @@
  * Skin: Green
  * -----------
  */
+.skin-green .main-header {
+  background-color: #18bc9c;
+}
 .skin-green .main-header .navbar {
   background-color: #18bc9c;
 }
@@ -791,6 +797,9 @@
  * Skin: Green
  * -----------
  */
+.skin-green-light .main-header {
+  background-color: #18bc9c;
+}
 .skin-green-light .main-header .navbar {
   background-color: #18bc9c;
 }
@@ -944,6 +953,9 @@
  * Skin: Red
  * ---------
  */
+.skin-red .main-header {
+  background-color: #e74c3c;
+}
 .skin-red .main-header .navbar {
   background-color: #e74c3c;
 }
@@ -1083,6 +1095,9 @@
  * Skin: Red
  * ---------
  */
+.skin-red-light .main-header {
+  background-color: #e74c3c;
+}
 .skin-red-light .main-header .navbar {
   background-color: #e74c3c;
 }
@@ -1236,6 +1251,9 @@
  * Skin: Yellow
  * ------------
  */
+.skin-yellow .main-header {
+  background-color: #f39c12;
+}
 .skin-yellow .main-header .navbar {
   background-color: #f39c12;
 }
@@ -1375,6 +1393,9 @@
  * Skin: Yellow
  * ------------
  */
+.skin-yellow-light .main-header {
+  background-color: #f39c12;
+}
 .skin-yellow-light .main-header .navbar {
   background-color: #f39c12;
 }
@@ -1528,6 +1549,9 @@
  * Skin: Purple
  * ------------
  */
+.skin-purple .main-header {
+  background-color: #605ca8;
+}
 .skin-purple .main-header .navbar {
   background-color: #605ca8;
 }
@@ -1667,6 +1691,9 @@
  * Skin: Purple
  * ------------
  */
+.skin-purple-light .main-header {
+  background-color: #605ca8;
+}
 .skin-purple-light .main-header .navbar {
   background-color: #605ca8;
 }

public/assets/css/skins/skin-blue.css

@@ -2,6 +2,9 @@
  * Skin: Blue
  * ----------
  */
+.skin-blue .main-header {
+  background-color: #3c8dbc;
+}
 .skin-blue .main-header .navbar {
   background-color: #3c8dbc;
 }

public/assets/css/skins/skin-green-light.css

@@ -2,6 +2,9 @@
  * Skin: Green
  * -----------
  */
+.skin-green-light .main-header {
+  background-color: #18bc9c;
+}
 .skin-green-light .main-header .navbar {
   background-color: #18bc9c;
 }

public/assets/css/skins/skin-green.css

@@ -2,6 +2,9 @@
  * Skin: Green
  * -----------
  */
+.skin-green .main-header {
+  background-color: #18bc9c;
+}
 .skin-green .main-header .navbar {
   background-color: #18bc9c;
 }

public/assets/css/skins/skin-purple-light.css

@@ -2,6 +2,9 @@
  * Skin: Purple
  * ------------
  */
+.skin-purple-light .main-header {
+  background-color: #605ca8;
+}
 .skin-purple-light .main-header .navbar {
   background-color: #605ca8;
 }

public/assets/css/skins/skin-purple.css

@@ -2,6 +2,9 @@
  * Skin: Purple
  * ------------
  */
+.skin-purple .main-header {
+  background-color: #605ca8;
+}
 .skin-purple .main-header .navbar {
   background-color: #605ca8;
 }

public/assets/css/skins/skin-red-light.css

@@ -2,6 +2,9 @@
  * Skin: Red
  * ---------
  */
+.skin-red-light .main-header {
+  background-color: #e74c3c;
+}
 .skin-red-light .main-header .navbar {
   background-color: #e74c3c;
 }

public/assets/css/skins/skin-red.css

@@ -2,6 +2,9 @@
  * Skin: Red
  * ---------
  */
+.skin-red .main-header {
+  background-color: #e74c3c;
+}
 .skin-red .main-header .navbar {
   background-color: #e74c3c;
 }

public/assets/css/skins/skin-yellow-light.css

@@ -2,6 +2,9 @@
  * Skin: Yellow
  * ------------
  */
+.skin-yellow-light .main-header {
+  background-color: #f39c12;
+}
 .skin-yellow-light .main-header .navbar {
   background-color: #f39c12;
 }

public/assets/css/skins/skin-yellow.css

@@ -2,6 +2,9 @@
  * Skin: Yellow
  * ------------
  */
+.skin-yellow .main-header {
+  background-color: #f39c12;
+}
 .skin-yellow .main-header .navbar {
   background-color: #f39c12;
 }

public/assets/css/user.css

@@ -1,17 +1,73 @@
 h2.page-header {
-    margin:10px 0  25px 0;
-    padding-bottom:15px;
+  margin: 10px 0 25px 0;
+  padding-bottom: 15px;
 }
 .user-baseinfo {
-    margin-bottom:25px;
-}
-.user-baseinfo table tr td {color:#999;}
-@media (min-width: 767px) {
-    .user-center .avatar-text,.user-center .avatar-img {
-        height:150px;width:150px;border-radius: 150px;line-height:150px;font-size:70px;
-    }
-    .user-center .avatar-img  {font-size:0;}
-    .user-center .avatar-img img {
-        height:150px;width:150px;border-radius:150px;
-    }
-}
+  margin-bottom: 25px;
+}
+.user-baseinfo table tr td {
+  color: #999;
+}
+@media (min-width: 992px) {
+  .user-center .avatar-text,
+  .user-center .avatar-img {
+    height: 150px;
+    width: 150px;
+    border-radius: 150px;
+    line-height: 150px;
+    font-size: 70px;
+  }
+  .user-center .avatar-img {
+    font-size: 0;
+  }
+  .user-center .avatar-img img {
+    height: 150px;
+    width: 150px;
+    border-radius: 150px;
+  }
+}
+.sidebar-toggle {
+  display: none;
+}
+@media (max-width: 991px) {
+  .sidenav {
+    position: fixed;
+    top: 50px;
+    z-index: 1029;
+    height: calc(100vh - 50px);
+    padding: 20px 0 20px 0;
+    min-width: 250px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 250px;
+    left: -250px;
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+  }
+  .sidebar-toggle {
+    display: block;
+    position: fixed;
+    right: 20px;
+    bottom: 70px;
+    border-radius: 50%;
+    background: #eee;
+    font-size: 22px;
+    padding: 10px;
+    line-height: 30px;
+    height: 50px;
+    width: 50px;
+    text-align: center;
+    z-index: 999999;
+  }
+}
+body.sidebar-open .sidenav {
+  left: 0;
+  width: 250px;
+  box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
+}
+body.sidebar-open .sidebar-toggle i:before {
+  content: "\f00d";
+}
+/*# sourceMappingURL=user.css.map */

public/assets/js/frontend.js

@@ -67,6 +67,39 @@ define(['fast', 'template', 'moment'], function (Fast, Template, Moment) {
                 $('body').tooltip({selector: '[data-toggle="tooltip"]'});
             }
             $('body').popover({selector: '[data-toggle="popover"]'});
+
+            // 手机端左右滑动切换菜单栏
+            if ('ontouchstart' in document.documentElement) {
+                var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element;
+                element = $('body', document);
+                element.on("touchstart", function (e) {
+                    startX = e.originalEvent.changedTouches[0].pageX;
+                    startY = e.originalEvent.changedTouches[0].pageY;
+                });
+                element.on("touchend", function (e) {
+                    moveEndX = e.originalEvent.changedTouches[0].pageX;
+                    moveEndY = e.originalEvent.changedTouches[0].pageY;
+                    relativeX = moveEndX - startX;
+                    relativeY = moveEndY - startY;
+
+                    // 判断标准
+                    //右滑
+                    if (relativeX > 45) {
+                        if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
+                            element.addClass("sidebar-open");
+                        }
+                    }
+                    //左滑
+                    else if (relativeX < -45) {
+                        if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
+                            element.removeClass("sidebar-open");
+                        }
+                    }
+                });
+            }
+            $(document).on("click", ".sidebar-toggle", function () {
+                $("body").toggleClass("sidebar-open");
+            });
         }
     };
     Frontend.api = $.extend(Fast.api, Frontend.api);

public/assets/js/require-frontend.min.js

@@ -6758,6 +6758,39 @@ define('frontend',['fast', 'template', 'moment'], function (Fast, Template, Mome
                 $('body').tooltip({selector: '[data-toggle="tooltip"]'});
             }
             $('body').popover({selector: '[data-toggle="popover"]'});
+
+            // 手机端左右滑动切换菜单栏
+            if ('ontouchstart' in document.documentElement) {
+                var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element;
+                element = $('body', document);
+                element.on("touchstart", function (e) {
+                    startX = e.originalEvent.changedTouches[0].pageX;
+                    startY = e.originalEvent.changedTouches[0].pageY;
+                });
+                element.on("touchend", function (e) {
+                    moveEndX = e.originalEvent.changedTouches[0].pageX;
+                    moveEndY = e.originalEvent.changedTouches[0].pageY;
+                    relativeX = moveEndX - startX;
+                    relativeY = moveEndY - startY;
+
+                    // 判断标准
+                    //右滑
+                    if (relativeX > 45) {
+                        if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
+                            element.addClass("sidebar-open");
+                        }
+                    }
+                    //左滑
+                    else if (relativeX < -45) {
+                        if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
+                            element.removeClass("sidebar-open");
+                        }
+                    }
+                });
+            }
+            $(document).on("click", ".sidebar-toggle", function () {
+                $("body").toggleClass("sidebar-open");
+            });
         }
     };
     Frontend.api = $.extend(Fast.api, Frontend.api);

public/assets/less/backend.less

@@ -43,9 +43,6 @@ body.is-dialog {
 }
 
 .main-header {
-    .logo, .navbar {
-        .transition(none);
-    }
 
     .navbar {
         position: relative;
@@ -69,7 +66,6 @@ html.ios-fix, html.ios-fix body {
 }
 
 #header {
-    background: #fff;
     //box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05);
 }
 

public/assets/less/frontend.less

@@ -518,3 +518,4 @@ main.content {
     text-align: center;
     display: inline-block;
 }
+

public/assets/less/skins/skin-blue.less

@@ -10,6 +10,7 @@
 .skin-blue {
     //Navbar
     .main-header {
+        background-color:@light-blue;
         .navbar {
             .navbar-variant(@light-blue; #fff);
             .sidebar-toggle {

public/assets/less/skins/skin-green-light.less

@@ -10,6 +10,7 @@
 .skin-green-light {
   //Navbar
   .main-header {
+    background-color:@green;
     .navbar {
       .navbar-variant(@green; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-green.less

@@ -10,6 +10,7 @@
 .skin-green {
   //Navbar
   .main-header {
+    background-color:@green;
     .navbar {
       .navbar-variant(@green; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-purple-light.less

@@ -10,6 +10,7 @@
 .skin-purple-light {
   //Navbar
   .main-header {
+    background-color:@purple;
     .navbar {
       .navbar-variant(@purple; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-purple.less

@@ -10,6 +10,7 @@
 .skin-purple {
   //Navbar
   .main-header {
+    background-color:@purple;
     .navbar {
       .navbar-variant(@purple; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-red-light.less

@@ -10,6 +10,7 @@
 .skin-red-light {
   //Navbar
   .main-header {
+    background-color:@red;
     .navbar {
       .navbar-variant(@red; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-red.less

@@ -10,6 +10,7 @@
 .skin-red {
   //Navbar
   .main-header {
+    background-color:@red;
     .navbar {
       .navbar-variant(@red; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-yellow-light.less

@@ -10,6 +10,7 @@
 .skin-yellow-light {
   //Navbar
   .main-header {
+    background-color:@yellow;
     .navbar {
       .navbar-variant(@yellow; #fff);
       .sidebar-toggle {

public/assets/less/skins/skin-yellow.less

@@ -10,6 +10,7 @@
 .skin-yellow {
   //Navbar
   .main-header {
+    background-color:@yellow;
     .navbar {
       .navbar-variant(@yellow; #fff);
       .sidebar-toggle {

public/assets/less/user.less

@@ -0,0 +1,86 @@
+h2.page-header {
+    margin: 10px 0 25px 0;
+    padding-bottom: 15px;
+}
+
+.user-baseinfo {
+    margin-bottom: 25px;
+
+    table tr td {
+        color: #999;
+    }
+}
+
+@media (min-width: 992px) {
+    .user-center {
+        .avatar-text, .avatar-img {
+            height: 150px;
+            width: 150px;
+            border-radius: 150px;
+            line-height: 150px;
+            font-size: 70px;
+        }
+
+        .avatar-img {
+            font-size: 0;
+
+            img {
+                height: 150px;
+                width: 150px;
+                border-radius: 150px;
+            }
+        }
+    }
+
+}
+
+.sidebar-toggle {
+    display: none;
+}
+
+@media (max-width: 991px) {
+    .sidenav {
+        position: fixed;
+        top: 50px;
+        z-index: 1029;
+        height: calc(~ '100vh - 50px');
+        padding: 20px 0 20px 0;
+        min-width: 250px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        width: 250px;
+        left: -250px;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+    }
+
+    .sidebar-toggle {
+        display: block;
+        position: fixed;
+        right: 20px;
+        bottom: 70px;
+        border-radius: 50%;
+        background: #eee;
+        font-size: 22px;
+        padding: 10px;
+        line-height: 30px;
+        height: 50px;
+        width: 50px;
+        text-align: center;
+        z-index: 999999;
+    }
+}
+
+body.sidebar-open {
+    .sidenav {
+        left: 0;
+        width: 250px;
+        box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
+    }
+
+    .sidebar-toggle i:before {
+        content: "\f00d";
+    }
+}