侧边栏 优化

@@ -49,18 +49,13 @@ $('.overlay').on('touchstart', function(e) {
     return false;
     return false;
 });
 });
 
 
-//禁止在侧边栏可以上下滚动
-$('.side-nav').on('touchmove', function() {
-    return false;
-});
-
 //点击一级导航，弹出二级导航
 //点击一级导航，弹出二级导航
 $sideNav.on('touchstart', 'li', function(e) {
 $sideNav.on('touchstart', 'li', function(e) {
     if ($(this).find('.sub-nav').size() > 0) {
     if ($(this).find('.sub-nav').size() > 0) {
         $('.sub-nav').removeClass('show');
         $('.sub-nav').removeClass('show');
         $(this).find('.sub-nav').addClass('show');
         $(this).find('.sub-nav').addClass('show');
     }
     }
-    e.stopPropagation();
+
     if (e.target.pathname === location.pathname) {
     if (e.target.pathname === location.pathname) {
         hideSideBar();
         hideSideBar();
         return false;
         return false;
@@ -69,9 +64,8 @@ $sideNav.on('touchstart', 'li', function(e) {
 
 
 //返回一级导航，收起二级导航
 //返回一级导航，收起二级导航
 $subNav.each(function() {
 $subNav.each(function() {
-    $(this).find('li').eq(0).on('touchstart', function(e) {
+    $(this).find('li').eq(0).on('touchstart', function() {
         $('.sub-nav').removeClass('show');
         $('.sub-nav').removeClass('show');
-        e.stopPropagation();
         return false;
         return false;
     });
     });
 }).on('touchstart', function(e) {
 }).on('touchstart', function(e) {
@@ -81,12 +75,16 @@ $subNav.each(function() {
 });
 });
 
 
 // 侧边栏点击背景色变化
 // 侧边栏点击背景色变化
-$sideNav.children('ul').children('li').on('touchstart', function() {
-    $sideNav.children('ul').children('li').css('background', '#fff');
-    $(this).css('background', '#eee');
-}).on('touchend touchcancel', function() {
-    $(this).css('background', '#fff');
-});
+function highlight($elem) {
+    $elem.find('li').on('touchstart', function() {
+        $(this).addClass('highlight');
+    }).on('touchend touchcancel', function() {
+        $(this).removeClass('highlight');
+    });
+}
+highlight($sideNav);
+highlight($subNav);
+
 
 
 //头部banner轮播
 //头部banner轮播
 if ($('.banner-swiper').find('li').size() > 1) {
 if ($('.banner-swiper').find('li').size() > 1) {

@@ -8,6 +8,7 @@
     right: 100rem / $pxConvertRem;
     right: 100rem / $pxConvertRem;
     width: 540rem / $pxConvertRem;
     width: 540rem / $pxConvertRem;
     background: #f0f0f0;
     background: #f0f0f0;
+    z-index: 4;
     overflow: hidden;
     overflow: hidden;
     overflow-y: auto;
     overflow-y: auto;
     @include transition(all .3s);
     @include transition(all .3s);
@@ -46,25 +47,28 @@
             height: 100%;
             height: 100%;
             padding-left: 110rem / $pxConvertRem;
             padding-left: 110rem / $pxConvertRem;
             color: #444;
             color: #444;
-            font-size: 24rem / $pxConvertRem;
+        }
+
+        em {
+            font-weight: bold;
+            font-size: 26rem / $pxConvertRem;
         }
         }
 
 
         .title {
         .title {
             display: inline-block;
             display: inline-block;
-            padding-left: 10rem / $pxConvertRem;
-            font-size: 30rem / $pxConvertRem;
-            vertical-align: baseline;
+            font-size: 36rem / $pxConvertRem;
+            vertical-align: bottom;
             // 此处字体小于 12px， 先扩大，再scale缩小
             // 此处字体小于 12px， 先扩大，再scale缩小
-            @include transform(scale(0.75));
+            @include transform(scale(0.5));
         }
         }
 
 
         .nav-icon, .nav-img {
         .nav-icon, .nav-img {
             position: absolute;
             position: absolute;
-            width: 60rem / $pxConvertRem;
-            height: 60rem / $pxConvertRem;
+            width: 48rem / $pxConvertRem;
+            height: 48rem / $pxConvertRem;
             top: 50%;
             top: 50%;
-            margin-top: -30rem / $pxConvertRem;
-            left: 24rem / $pxConvertRem;
+            margin-top: -24rem / $pxConvertRem;
+            left: 30rem / $pxConvertRem;
             background: no-repeat left center;
             background: no-repeat left center;
             background-size: 100% 100%;
             background-size: 100% 100%;
         }
         }
@@ -79,10 +83,10 @@
             font-weight: lighter;
             font-weight: lighter;
         }
         }
 
 
-        em {
-            font-weight: bold;
-            font-size: 30rem / $pxConvertRem;
+        &.highlight {
+            background: #eee;
         }
         }
+
     }
     }
 
 
     .first {
     .first {
@@ -100,17 +104,15 @@
                 content: none;
                 content: none;
             }
             }
 
 
-            a {
-                font-size: 40rem / $pxConvertRem;
+            em {
+                font-size: 36rem / $pxConvertRem;
             }
             }
 
 
-            em {
-                font-size: 40rem / $pxConvertRem;
         }
         }
 
 
-            .title {
-                font-size: 24rem / $pxConvertRem;
-                @include transform(scale(1));
+        .sub-nav {
+            li {
+                border-bottom: 1px solid #e0e0e0;
             }
             }
         }
         }
     }
     }
@@ -181,8 +183,8 @@
     @include transition(transform 0.3s);
     @include transition(transform 0.3s);
 
 
     li {
     li {
-        height: 80rem / $pxConvertRem;
-        line-height: 80rem / $pxConvertRem;
+        height: 80rem / $pxConvertRem !important;
+        line-height: 80rem / $pxConvertRem !important;
         border: none;
         border: none;
         border-bottom: 1px solid #e0e0e0;
         border-bottom: 1px solid #e0e0e0;
 
 
@@ -215,9 +217,13 @@
             color: #f0f0f0;
             color: #f0f0f0;
         }
         }
 
 
+        &.highlight {
+            background: #eee;
+        }
+
         em {
         em {
             font-weight: normal;
             font-weight: normal;
-            font-size: 30rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem !important;
         }
         }
     }
     }