侧边栏 样式调整

@@ -7,20 +7,40 @@
     left: 0;
     right: 100rem / $pxConvertRem;
     width: 540rem / $pxConvertRem;
+    background: #f0f0f0;
     overflow: hidden;
+    overflow-y: auto;
     @include transition(all .3s);
 
-    ul {
-        background: #f0f0f0;
+    > ul {
+        margin-bottom: 20rem / $pxConvertRem;
+        background: #fff;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
     }
 
     li {
         position: relative;
-        height: 128rem / $pxConvertRem;
-        line-height: 128rem / $pxConvertRem;
-        border-bottom: 1px solid #e0e0e0;
+        height: 80rem / $pxConvertRem;
+        line-height: 80rem / $pxConvertRem;
         background: #fff;
 
+        &:after {
+            content: '';
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 430rem / $pxConvertRem;
+            height: 0;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        &:last-child {
+            &:after {
+                content: none;
+            }
+        }
+
         a {
             display: block;
             height: 100%;
@@ -29,6 +49,15 @@
             font-size: 24rem / $pxConvertRem;
         }
 
+        .title {
+            display: inline-block;
+            padding-left: 10rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+            vertical-align: baseline;
+            // 此处字体小于 12px， 先扩大，再scale缩小
+            @include transform(scale(0.75));
+        }
+
         .nav-icon, .nav-img {
             position: absolute;
             width: 60rem / $pxConvertRem;
@@ -51,9 +80,38 @@
         }
 
         em {
-            margin-right: 10rem / $pxConvertRem;
             font-weight: bold;
-            font-size: 34rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+        }
+    }
+
+    .first {
+
+        li {
+            height: 100rem / $pxConvertRem;
+            line-height: 100rem / $pxConvertRem;
+            border-bottom: 1px solid #e0e0e0;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:after {
+                content: none;
+            }
+
+            a {
+                font-size: 40rem / $pxConvertRem;
+            }
+
+            em {
+                font-size: 40rem / $pxConvertRem;
+            }
+
+            .title {
+                font-size: 24rem / $pxConvertRem;
+                @include transform(scale(1));
+            }
         }
     }
 
@@ -85,17 +143,17 @@
         }
     }
 
-    li.new {
-        margin: (19rem / $pxConvertRem) 0 0;
-        border-top: 1px solid #e0e0e0;
-
-        a {}
-
-        i {
-            background: image-url("side-nav/new.png") no-repeat left center;
-            background-size: 100% 100%;
-        }
-    }
+    // li.new {
+    //     margin: (19rem / $pxConvertRem) 0 0;
+    //     border-top: 1px solid #e0e0e0;
+    //
+    //     a {}
+    //
+    //     i {
+    //         background: image-url("side-nav/new.png") no-repeat left center;
+    //         background-size: 100% 100%;
+    //     }
+    // }
 
     li.guang, li.trendfinder {
         .nav-icon {
@@ -126,13 +184,17 @@
         height: 109rem / $pxConvertRem;
         line-height: 109rem / $pxConvertRem;
         border: none;
+        border-bottom: 1px solid #e0e0e0;
+
+        &:after {
+            content: none;
+        }
 
         a {
             position: relative;
             display: block;
             margin: 0 0 0 (30rem / $pxConvertRem);
             padding-left: 50rem / $pxConvertRem;
-            border-bottom: 1px solid #e0e0e0;
             font-size: 36rem / $pxConvertRem;
             z-index: 2;
         }

 <div class="side-nav">
     {{# sideNav}}
-    <ul>
+    <ul {{#if @first}}class="first"{{/if}}>
         {{# this}}
-        <li class="{{styleClass}}">
+        <li class="{{styleClass}}" style="{{#if color}}color:{{color}};{{/if}}">
             {{# url}}
             <a href="{{.}}">
             {{/ url}}
@@ -15,7 +15,8 @@
                 {{^ img}}
                 <i class="nav-icon"></i>
                 {{/ img}}
-                <em>{{textCn}}</em>{{textEn}}
+                <em>{{textCn}}</em>
+                <span class="title">{{textEn}}</span>
                 {{# subNav}}
                 <span class="enter-subnav iconfont">&#xe614;</span>
                 {{/ subNav}}
@@ -23,7 +24,7 @@
             {{# subNav}}
             <ul class="sub-nav">
                 {{# list}}
-                <li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}}">
+                <li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};{{#if color}}color:{{color}};{{/if}}">
                     {{# url}}
                     <a href="{{.}}">
                     {{/ url}}
@@ -37,7 +38,7 @@
                         <i class="nav-back iconfont">&#xe610;</i>
                         {{/ back}}
                         <em>{{textCn}}</em>
-                        {{textEn}}
+                        <span class="title">{{textEn}}</span>
                     </a>
                 </li>
                 {{/ list}}
@@ -47,4 +48,4 @@
         {{/ this}}
     </ul>
     {{/sideNav}}
-</div>
\ No newline at end of file
+</div>

@@ -8,7 +8,7 @@ use Plugin\Helpers;
 use Plugin\Cache;
 
 /**
- * 
+ *
  * @name SideModel
  * @package models/Index
  * @copyright yoho.inc
@@ -20,7 +20,7 @@ class SideModel
 
     /**
      * 获取左侧边栏数据
-     * 
+     *
      * @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
      */
     public static function getLeftNav($guangChoosed = 'all')
@@ -88,13 +88,12 @@ class SideModel
 
         // 追加逛的子分类数据
         $result[] = self::genLeftNavGuang($guangChoosed);
-
         return $result;
     }
 
     /**
      * 获取并生成左侧边栏中逛的数据
-     * 
+     *
      * @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
      * @return array
      */