Authored by 毕凯

侧边栏前端样式完成

@@ -181,8 +181,8 @@ @@ -181,8 +181,8 @@
181 @include transition(transform 0.3s); 181 @include transition(transform 0.3s);
182 182
183 li { 183 li {
184 - height: 109rem / $pxConvertRem;  
185 - line-height: 109rem / $pxConvertRem; 184 + height: 80rem / $pxConvertRem;
  185 + line-height: 80rem / $pxConvertRem;
186 border: none; 186 border: none;
187 border-bottom: 1px solid #e0e0e0; 187 border-bottom: 1px solid #e0e0e0;
188 188
@@ -235,7 +235,7 @@ @@ -235,7 +235,7 @@
235 a { 235 a {
236 color: #fff; 236 color: #fff;
237 border-bottom: none; 237 border-bottom: none;
238 - padding-left: 110rem / $pxConvertRem; 238 + padding-left: 70rem / $pxConvertRem;
239 } 239 }
240 240
241 .nav-back { 241 .nav-back {
@@ -247,6 +247,7 @@ @@ -247,6 +247,7 @@
247 247
248 .sub-nav.show { 248 .sub-nav.show {
249 display: block; 249 display: block;
  250 + z-index: 1;
250 @include transform(translateX(0)); 251 @include transform(translateX(0));
251 @include transition(transform 0.3s); 252 @include transition(transform 0.3s);
252 } 253 }
@@ -2,13 +2,12 @@ @@ -2,13 +2,12 @@
2 {{# sideNav}} 2 {{# sideNav}}
3 <ul {{#if @first}}class="first"{{/if}}> 3 <ul {{#if @first}}class="first"{{/if}}>
4 {{# this}} 4 {{# this}}
5 - <li class="{{styleClass}}" style="{{#if color}}color:{{color}};{{/if}}">  
6 - {{# url}}  
7 - <a href="{{.}}">  
8 - {{/ url}}  
9 - {{^ url}}  
10 - <a href="javascript:;">  
11 - {{/ url}} 5 + <li class="{{styleClass}}">
  6 + {{#if url}}
  7 + <a href="{{url}}" style="{{#if color}}color:{{color}};{{/if}}">
  8 + {{else}}
  9 + <a href="javascript:;" style="{{#if color}}color:{{color}};{{/if}}">
  10 + {{/if}}
12 {{# img}} 11 {{# img}}
13 <span class="nav-img" style="background-image: url({{.}})"></span> 12 <span class="nav-img" style="background-image: url({{.}})"></span>
14 {{/ img}} 13 {{/ img}}
@@ -24,13 +23,12 @@ @@ -24,13 +23,12 @@
24 {{# subNav}} 23 {{# subNav}}
25 <ul class="sub-nav"> 24 <ul class="sub-nav">
26 {{# list}} 25 {{# list}}
27 - <li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};{{#if color}}color:{{color}};{{/if}}">  
28 - {{# url}}  
29 - <a href="{{.}}">  
30 - {{/ url}}  
31 - {{^ url}}  
32 - <a href="javascript:;">  
33 - {{/ url}} 26 + <li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};">
  27 + {{#if url}}
  28 + <a href="{{url}}" style="{{#if color}}color:{{color}};{{/if}}">
  29 + {{else}}
  30 + <a href="javascript:;" style="{{#if color}}color:{{color}};{{/if}}">
  31 + {{/if}}
34 {{^ back}} 32 {{^ back}}
35 <span class="nav-point iconfont">&#xe60c;</span> 33 <span class="nav-point iconfont">&#xe60c;</span>
36 {{/ back}} 34 {{/ back}}
@@ -59,7 +59,15 @@ class SideModel @@ -59,7 +59,15 @@ class SideModel
59 59
60 // 如果存在子菜单,就输出子菜单 60 // 如果存在子菜单,就输出子菜单
61 if (isset($value['sub']) && !empty($value['sub'])) { 61 if (isset($value['sub']) && !empty($value['sub'])) {
62 - $subs = array(); 62 + $subs = array(
  63 + array(
  64 + 'textCn' => $group[$groupKey]['textCn'],
  65 + 'textEn' => $group[$groupKey]['textEn'],
  66 + 'back' => true,
  67 + 'isSelect' => false,
  68 + 'bgColor' => self::getSideTopColor($guangChoosed)
  69 + )
  70 + );
63 foreach ($value['sub'] as $oneSub) { 71 foreach ($value['sub'] as $oneSub) {
64 $subs[] = self::formatSideItem($oneSub); 72 $subs[] = self::formatSideItem($oneSub);
65 } 73 }
@@ -88,6 +96,7 @@ class SideModel @@ -88,6 +96,7 @@ class SideModel
88 96
89 // 追加逛的子分类数据 97 // 追加逛的子分类数据
90 $result[] = self::genLeftNavGuang($guangChoosed); 98 $result[] = self::genLeftNavGuang($guangChoosed);
  99 +
91 return $result; 100 return $result;
92 } 101 }
93 102
@@ -100,14 +109,7 @@ class SideModel @@ -100,14 +109,7 @@ class SideModel
100 private static function genLeftNavGuang($guangChoosed = 'all') 109 private static function genLeftNavGuang($guangChoosed = 'all')
101 { 110 {
102 // 判断逛的背景色 111 // 判断逛的背景色
103 - $color = false;  
104 - if ($guangChoosed === 'girls') {  
105 - $color = '#FF88AE';  
106 - } else if ($guangChoosed === 'kids') {  
107 - $color = '#7ad9f9';  
108 - } else if ($guangChoosed === 'lifestyle') {  
109 - $color = '#4f4138';  
110 - } 112 + $color = self::getSideTopColor($guangChoosed);
111 113
112 return 114 return
113 array( 115 array(
@@ -151,6 +153,26 @@ class SideModel @@ -151,6 +153,26 @@ class SideModel
151 ); 153 );
152 } 154 }
153 155
  156 + /**
  157 + * 根据选择的频道获取逛的背景色
  158 + * @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
  159 + * @return string color值
  160 + */
  161 + private static function getSideTopColor($guangChoosed)
  162 + {
  163 + // 判断逛的背景色
  164 + $color = false;
  165 + if ($guangChoosed === 'girls') {
  166 + $color = '#FF88AE';
  167 + } else if ($guangChoosed === 'kids') {
  168 + $color = '#7ad9f9';
  169 + } else if ($guangChoosed === 'lifestyle') {
  170 + $color = '#4f4138';
  171 + }
  172 +
  173 + return $color;
  174 + }
  175 +
154 176
155 /** 177 /**
156 * 格式化侧边栏数据 178 * 格式化侧边栏数据