Authored by xuqi

product list opt

1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="products-page yoho-page"> 2 <div class="products-page yoho-page">
3 - <div class="filter-box">  
4 - {{# filters}}  
5 - {{# checkedConditons}}  
6 - <div class="checked-conditions section">  
7 - <span class="title">已选条件:</span>  
8 -  
9 - <div class="attr-content clearfix">  
10 - {{#each conditions}}  
11 - <a class="tag" href="{{href}}">  
12 - {{#if name}}  
13 - {{name}}  
14 - {{^}}  
15 - <i class="color-block" style="background: {{color}}"></i>  
16 - {{/if}}  
17 - <i class="close iconfont">&#xe602;</i>  
18 - </a>  
19 - {{/each}}  
20 -  
21 - <a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>  
22 - </div>  
23 - </div>  
24 - {{/ checkedConditons}} 3 + {{# products}}
  4 + <div class="filter-box">
  5 + {{# filters}}
  6 + {{# checkedConditions}}
  7 + <div class="checked-conditions section">
  8 + <span class="title">已选条件:</span>
25 9
26 - {{#if channel}}  
27 - <div class="channel section">  
28 - <span class="title">频道:</span> 10 + <div class="attr-content clearfix">
  11 + {{#each conditions}}
  12 + <a class="tag" href="{{href}}">
  13 + {{#if name}}
  14 + {{name}}
  15 + {{^}}
  16 + <i class="color-block" style="background: {{color}}"></i>
  17 + {{/if}}
  18 + <i class="close iconfont">&#xe602;</i>
  19 + </a>
  20 + {{/each}}
29 21
30 - <div class="attr-content clearfix">  
31 - {{#each channel}}  
32 - <a class="attr" href="{{href}}">  
33 - {{name}}  
34 - </a>  
35 - {{/each}} 22 + <a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>
  23 + </div>
36 </div> 24 </div>
37 - </div>  
38 - {{/if}}  
39 -  
40 - {{#if sort}}  
41 - <div class="sort section">  
42 - <span class="title">分类:</span> 25 + {{/ checkedConditions}}
43 26
44 - <div class="attr-content">  
45 - <ul class="sort-pre clearfix">  
46 - {{#each sort}}  
47 - <li>  
48 - <span class="attr" data-id="{{id}}">  
49 - {{name}}  
50 - </span>  
51 - </li>  
52 - {{/each}}  
53 - </ul> 27 + {{#if channel}}
  28 + <div class="channel section">
  29 + <span class="title">频道:</span>
54 30
55 - <div class="sort-sub-wrap">  
56 - {{#each sort}}  
57 - <ul class="sort-sub clearfix hide">  
58 - {{#each sub}}  
59 - <li class="attr">  
60 - <a href="{{href}}">{{name}}</a>  
61 - </li>  
62 - {{/each}}  
63 - </ul> 31 + <div class="attr-content clearfix">
  32 + {{#each channel}}
  33 + <a class="attr" href="{{href}}">
  34 + {{name}}
  35 + </a>
64 {{/each}} 36 {{/each}}
65 </div> 37 </div>
66 </div> 38 </div>
67 - </div>  
68 - {{/if}} 39 + {{/if}}
69 40
70 - {{# brand}}  
71 - <div class="brand section">  
72 - <span class="title">品牌:</span> 41 + {{#if sort}}
  42 + <div class="sort section">
  43 + <span class="title">分类:</span>
73 44
74 - <div class="attr-content">  
75 - <ul class="default clearfix">  
76 - {{# default}}  
77 - <li class="attr">  
78 - <a href="{{href}}" title="{{name}}">{{name}}</a>  
79 - </li>  
80 - {{/ default}}  
81 - </ul> 45 + <div class="attr-content">
  46 + <ul class="sort-pre clearfix">
  47 + {{#each sort}}
  48 + <li>
  49 + <span class="attr">
  50 + {{name}}
  51 + </span>
  52 + </li>
  53 + {{/each}}
  54 + </ul>
82 55
83 - <div class="brand-opt">  
84 - <span id="brand-more" class="brand-more">  
85 - <em>更多</em>  
86 - <i class="iconfont">&#xe600;</i>  
87 - </span>  
88 -  
89 - <span id="brand-multi" class="multi-select">多选 +</span> 56 + <div class="sort-sub-wrap">
  57 + {{#each sort}}
  58 + <ul class="sort-sub clearfix hide">
  59 + {{#each sub}}
  60 + <li class="attr">
  61 + <a href="{{href}}">{{name}}</a>
  62 + </li>
  63 + {{/each}}
  64 + </ul>
  65 + {{/each}}
  66 + </div>
90 </div> 67 </div>
  68 + </div>
  69 + {{/if}}
91 70
92 - <div class="brand-panel hide">  
93 - <div class="panel-head clearfix">  
94 - <p class="brands-index">  
95 - {{#each brandIndex}}  
96 - <span data-index="{{index}}">{{name}}</span>  
97 - {{/each}}  
98 - </p>  
99 -  
100 - <div class="brand-search">  
101 - <input id="brand-search-input" type="text">  
102 - <span class="btn">  
103 - <i class="iconfont">&#xe611;</i>  
104 - </span>  
105 - </div>  
106 - </div> 71 + {{# brand}}
  72 + <div class="brand section">
  73 + <span class="title">品牌:</span>
107 74
108 - <ul class="panel-body check-container clearfix">  
109 - {{# brandsShow}}  
110 - <li class="attr" data-index="{{index}}" data-key="{{key}}">  
111 - <a href="{{href}}">  
112 - <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>  
113 - <span title="{{name}}">{{name}}</span>  
114 - </a> 75 + <div class="attr-content">
  76 + <ul class="default clearfix">
  77 + {{# default}}
  78 + <li class="attr">
  79 + <a href="{{href}}" title="{{name}}">{{name}}</a>
115 </li> 80 </li>
116 - {{/ brandsShow}} 81 + {{/ default}}
117 </ul> 82 </ul>
118 83
119 - <div class="btns">  
120 - <button id="brand-multi-ok" class="multi-select-ok dis">确定</button>  
121 - <button class="multi-select-cancel">取消</button> 84 + <div class="brand-opt">
  85 + <span id="brand-more" class="brand-more">
  86 + <em>更多</em>
  87 + <i class="iconfont">&#xe600;</i>
  88 + </span>
  89 +
  90 + <span id="brand-multi" class="multi-select">多选 +</span>
  91 + </div>
  92 +
  93 + <div class="brand-panel hide">
  94 + <div class="panel-head clearfix">
  95 + <p class="brands-index">
  96 + {{#each brandIndex}}
  97 + <span data-index="{{index}}">{{name}}</span>
  98 + {{/each}}
  99 + </p>
  100 +
  101 + <div class="brand-search">
  102 + <input id="brand-search-input" type="text">
  103 + <span class="btn">
  104 + <i class="iconfont">&#xe611;</i>
  105 + </span>
  106 + </div>
  107 + </div>
  108 +
  109 + <ul class="panel-body check-container clearfix">
  110 + {{# brandsShow}}
  111 + <li class="attr" data-index="{{index}}" data-key="{{key}}">
  112 + <a href="{{href}}">
  113 + <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
  114 + <span title="{{name}}">{{name}}</span>
  115 + </a>
  116 + </li>
  117 + {{/ brandsShow}}
  118 + </ul>
  119 +
  120 + <div class="btns">
  121 + <button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
  122 + <button class="multi-select-cancel">取消</button>
  123 + </div>
122 </div> 124 </div>
123 </div> 125 </div>
124 </div> 126 </div>
125 - </div>  
126 - {{/ brand}} 127 + {{/ brand}}
127 128
128 - {{#if price}}  
129 - <div class="price section">  
130 - <span class="title">价格:</span> 129 + {{#if price}}
  130 + <div class="price section">
  131 + <span class="title">价格:</span>
131 132
132 - <div class="attr-content clearfix">  
133 - {{# price}}  
134 - <a class="attr" href="{{href}}"{{name}}</a>  
135 - {{/ price}} 133 + <div class="attr-content clearfix">
  134 + {{# price}}
  135 + <a class="attr" href="{{href}}"{{name}}</a>
  136 + {{/ price}}
136 137
137 - <div class="ud-price-range">  
138 - ¥  
139 - <input type="text" class="min limit">  
140 - <span class="price-sep">-</span>  
141 - <input type="text" class="max limit"> 138 + <div class="ud-price-range">
  139 + ¥
  140 + <input type="text" class="min limit">
  141 + <span class="price-sep">-</span>
  142 + <input type="text" class="max limit">
142 143
143 - <button class="price-sure hide">确定</button> 144 + <button class="price-sure hide">确定</button>
  145 + </div>
144 </div> 146 </div>
145 </div> 147 </div>
146 - </div>  
147 - {{/if}}  
148 -  
149 - {{#if color}}  
150 - <div class="color section">  
151 - <span class="title">颜色:</span>  
152 -  
153 - <div class="attr-content clearfix">  
154 - {{# color}}  
155 - <a class="attr" href="{{href}}">  
156 - <i class="color-block" style="background: {{rgb}}"></i>  
157 - {{name}}  
158 - </a>  
159 - {{/ color}} 148 + {{/if}}
  149 +
  150 + {{#if color}}
  151 + <div class="color section">
  152 + <span class="title">颜色:</span>
  153 +
  154 + <div class="attr-content clearfix">
  155 + {{# color}}
  156 + <a class="attr" href="{{href}}">
  157 + <i class="color-block" style="background: {{rgb}}"></i>
  158 + {{name}}
  159 + </a>
  160 + {{/ color}}
  161 + </div>
160 </div> 162 </div>
161 - </div>  
162 - {{/if}} 163 + {{/if}}
163 164
164 - {{#if size}}  
165 - <div class="size section">  
166 - <span class="title">尺码:</span> 165 + {{#if size}}
  166 + <div class="size section">
  167 + <span class="title">尺码:</span>
167 168
168 - <div class="attr-content clearfix">  
169 - {{# size}}  
170 - <a class="attr" href="{{href}}">{{name}}</a>  
171 - {{/ size}} 169 + <div class="attr-content clearfix">
  170 + {{# size}}
  171 + <a class="attr" href="{{href}}">{{name}}</a>
  172 + {{/ size}}
  173 + </div>
172 </div> 174 </div>
173 - </div>  
174 - {{/if}} 175 + {{/if}}
175 176
176 - {{#if seniorChose}}  
177 - <div class="senior section">  
178 - <span class="title">高级选项:</span> 177 + {{#if seniorChose}}
  178 + <div class="senior section">
  179 + <span class="title">高级选项:</span>
179 180
180 - <div class="attr-content">  
181 - <ul class="clearfix senior-attr-wrap">  
182 - {{#each seniorChose}}  
183 - <li class="attr">  
184 - {{name}}  
185 - <span class="iconfont">&#xe600;</span> 181 + <div class="attr-content">
  182 + <ul class="clearfix senior-attr-wrap">
  183 + {{#each seniorChose}}
  184 + <li class="attr">
  185 + {{name}}
  186 + <span class="iconfont">&#xe600;</span>
186 187
187 - <div class="senior-up-icon"></div>  
188 - </li>  
189 - {{/each}}  
190 - </ul> 188 + <div class="senior-up-icon"></div>
  189 + </li>
  190 + {{/each}}
  191 + </ul>
191 192
192 - <div class="senior-sub-wrap">  
193 - {{#each seniorChose}}  
194 - <div class="senior-sub hide" data-attr="{{attr}}">  
195 - {{#if showMulti}}  
196 - <span class="multi-select">多选 +</span>  
197 - {{/if}}  
198 - <ul class="clearfix check-container">  
199 - {{#each sub}}  
200 - <li class="attr">  
201 - <a href="{{href}}">  
202 - <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>  
203 - <span>{{name}}</span>  
204 - </a>  
205 - </li>  
206 - {{/each}}  
207 - </ul>  
208 - <div class="btns">  
209 - <button class="multi-select-ok dis">确定</button>  
210 - <button class="multi-select-cancel">取消</button> 193 + <div class="senior-sub-wrap">
  194 + {{#each seniorChose}}
  195 + <div class="senior-sub hide" data-attr="{{attr}}">
  196 + {{#if showMulti}}
  197 + <span class="multi-select">多选 +</span>
  198 + {{/if}}
  199 + <ul class="clearfix check-container">
  200 + {{#each sub}}
  201 + <li class="attr">
  202 + <a href="{{href}}">
  203 + <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
  204 + <span>{{name}}</span>
  205 + </a>
  206 + </li>
  207 + {{/each}}
  208 + </ul>
  209 + <div class="btns">
  210 + <button class="multi-select-ok dis">确定</button>
  211 + <button class="multi-select-cancel">取消</button>
  212 + </div>
211 </div> 213 </div>
212 - </div>  
213 - {{/each}} 214 + {{/each}}
  215 + </div>
214 </div> 216 </div>
215 </div> 217 </div>
216 - </div>  
217 - {{/if}}  
218 - {{/ filters}}  
219 - </div>  
220 -  
221 - <div class="opt-banner">  
222 - {{# sortType}}  
223 - <a class="sort-type{{#if active}} active{{/if}}" href="{{href}}">  
224 - {{name}}  
225 - {{#if hasSortOrient}}  
226 - {{#if active}}  
227 - {{#if desc}}  
228 - <span class="active-icon iconfont">&#xe603;</span> 218 + {{/if}}
  219 + {{/ filters}}
  220 + </div>
  221 +
  222 + <div class="opt-banner">
  223 + {{# opts}}
  224 + {{# sortType}}
  225 + <a class="sort-type{{#if active}} active{{/if}}" href="{{href}}">
  226 + {{name}}
  227 + {{#if hasSortOrient}}
  228 + {{#if active}}
  229 + {{#if desc}}
  230 + <span class="active-icon iconfont">&#xe603;</span>
  231 + {{^}}
  232 + <span class="active-icon iconfont">&#xe604;</span>
  233 + {{/if}}
  234 + {{^}}
  235 + <span class="iconfont">&#xe614;</span>
  236 + {{/if}}
  237 + {{^}}
  238 + <span class="iconfont">&#xe604;</span>
  239 + {{/if}}
  240 + </a>
  241 + {{/ sortType}}
  242 +
  243 + {{# checks}}
  244 + <a class="checks{{#if checked}} checked{{/if}}" href="{{href}}">
  245 + {{#if checked}}
  246 + <span class="iconfont">&#xe612;</span>
229 {{^}} 247 {{^}}
230 - <span class="active-icon iconfont">&#xe604;</span> 248 + <span class="iconfont">&#xe613;</span>
231 {{/if}} 249 {{/if}}
  250 + {{name}}
  251 + </a>
  252 + {{/ checks}}
  253 +
  254 + <div class="pager-wrap">
  255 + {{#if fivePerLine}}
  256 + <div class="line-count active">
  257 + <span></span>
  258 + <span></span>
  259 + <span></span>
  260 + <span></span>
  261 + <span></span>
  262 + </div>
  263 +
  264 + <a class="line-count" href="{{sixPerLineHref}}">
  265 + <span></span>
  266 + <span></span>
  267 + <span></span>
  268 + <span></span>
  269 + <span></span>
  270 + <span></span>
  271 + </a>
232 {{^}} 272 {{^}}
233 - <span class="iconfont">&#xe614;</span> 273 + <a class="line-count" href="{{fivePerLineHref}}">
  274 + <span></span>
  275 + <span></span>
  276 + <span></span>
  277 + <span></span>
  278 + <span></span>
  279 + </a>
  280 +
  281 + <div class="line-count active">
  282 + <span></span>
  283 + <span></span>
  284 + <span></span>
  285 + <span></span>
  286 + <span></span>
  287 + <span></span>
  288 + </div>
234 {{/if}} 289 {{/if}}
235 - {{^}}  
236 - <span class="iconfont">&#xe604;</span>  
237 - {{/if}}  
238 - </a>  
239 - {{/ sortType}}  
240 -  
241 - {{# checks}}  
242 - <a class="checks{{#if checked}} checked{{/if}}" href="{{href}}">  
243 - {{#if checked}}  
244 - <span class="iconfont">&#xe612;</span>  
245 - {{^}}  
246 - <span class="iconfont">&#xe613;</span>  
247 - {{/if}}  
248 - {{name}}  
249 - </a>  
250 - {{/ checks}}  
251 -  
252 - <div class="pager">  
253 - <a class="line-count clearfix {{#if fivePerLine}}active{{/if}}" href="{{fivePerLineHref}}">  
254 - <span></span>  
255 - <span></span>  
256 - <span></span>  
257 - <span></span>  
258 - <span></span>  
259 - </a>  
260 -  
261 - <a class="line-count clearfix {{#if sixPerLine}}active{{/if}}" href="{{sixPerLineHref}}">  
262 - <span></span>  
263 - <span></span>  
264 - <span></span>  
265 - <span></span>  
266 - <span></span>  
267 - <span></span>  
268 - </a>  
269 -  
270 - <div class="page-count">  
271 - <span>  
272 - {{countPerPage}}  
273 - <i class="iconfont">&#xe604;</i>  
274 - </span>  
275 - 每页  
276 - <ul>  
277 - {{# pageCounts}}  
278 - <li>  
279 - <a href="{{href}}">{{count}}</a>  
280 - </li>  
281 - {{/ pageCounts}}  
282 - </ul>  
283 - </div> 290 +
  291 + <div class="page-count">
  292 + <span id="count-per-page">
  293 + {{countPerPage}}
  294 + <i class="iconfont">&#xe604;</i>
  295 + </span>
  296 + 每页
  297 + <ul>
  298 + {{# pageCounts}}
  299 + <li>
  300 + <a href="{{href}}">{{count}}</a>
  301 + </li>
  302 + {{/ pageCounts}}
  303 + </ul>
  304 + </div>
  305 +
  306 + <p class="pager">
  307 + {{#if preHref}}
  308 + <a href="{{preHref}}">
  309 + <span class="iconfont">&#xe615;</span>
  310 + </a>
  311 + {{^}}
  312 + <span class="dis-icon iconfont">&#xe615;</span>
  313 + {{/if}}
  314 +
  315 + <span>
  316 + <i>{{curPage}}</i>/{{pageCount}}
  317 + </span>
  318 +
  319 + {{#if nextHref}}
  320 + <a href="{{nextHref}}">
  321 + <span class="iconfont">&#xe601;</span>
  322 + </a>
  323 + {{^}}
  324 + <span class="dis-icon iconfont">&#xe601;</span>
  325 + {{/if}}
  326 + </p>
  327 + </div>
  328 + {{/opts}}
284 </div> 329 </div>
285 - </div>  
286 330
287 - <div class="goods-container">  
288 - {{#each goods}}  
289 - {{> product/good}}  
290 - {{/each}}  
291 - </div> 331 + <div class="goods-container">
  332 + {{#each goods}}
  333 + {{> product/good}}
  334 + {{/each}}
  335 + </div>
  336 + {{/ products}}
292 </div> 337 </div>
293 {{> layout/footer}} 338 {{> layout/footer}}
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Mon Nov 30 17:26:23 2015 5 +Created by FontForge 20120731 at Tue Dec 1 11:00:27 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Nov 30 17:26:23 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Nov 30 17:26:23 2015
19 bbox="0 -214 1024 864" 19 bbox="0 -214 1024 864"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E614" 22 + unicode-range="U+0078-E615"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -79,5 +79,7 @@ M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t3 @@ -79,5 +79,7 @@ M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t3
79 d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v730q0 61 -43 104t-104 43zM939 -65q0 -26 -18 -44t-44 -18h-730q-26 0 -44 18t-18 44v730q0 17 8.5 31t22.5 22.5t31 8.5h730q26 0 44 -18t18 -44v-730z" /> 79 d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v730q0 61 -43 104t-104 43zM939 -65q0 -26 -18 -44t-44 -18h-730q-26 0 -44 18t-18 44v730q0 17 8.5 31t22.5 22.5t31 8.5h730q26 0 44 -18t18 -44v-730z" />
80 <glyph glyph-name="uniE614" unicode="&#xe614;" 80 <glyph glyph-name="uniE614" unicode="&#xe614;"
81 d="M160 996zM865 247q0 -18 -13 -31l-308 -308q-13 -13 -31 -13t-31 13l-309 308q-13 13 -13 31t13.5 31t30.5 13h617q18 0 31 -13t13 -31zM865 511q0 -18 -13 -31t-31 -13h-617q-18 0 -31 13t-13 31t13 31l309 309q13 13 31 13t31 -13l308 -309q13 -13 13 -31z" /> 81 d="M160 996zM865 247q0 -18 -13 -31l-308 -308q-13 -13 -31 -13t-31 13l-309 308q-13 13 -13 31t13.5 31t30.5 13h617q18 0 31 -13t13 -31zM865 511q0 -18 -13 -31t-31 -13h-617q-18 0 -31 13t-13 31t13 31l309 309q13 13 31 13t31 -13l308 -309q13 -13 13 -31z" />
  82 + <glyph glyph-name="uniE615" unicode="&#xe615;"
  83 +d="M704 569l-41 39l-343 -320l343 -320l41 39l-301 281z" />
82 </font> 84 </font>
83 </defs></svg> 85 </defs></svg>
@@ -292,4 +292,28 @@ $('.senior-sub').on('click', '.multi-select', function() { @@ -292,4 +292,28 @@ $('.senior-sub').on('click', '.multi-select', function() {
292 clearTimeout(seniorHoverTime); 292 clearTimeout(seniorHoverTime);
293 }).on('mouseleave', function() { 293 }).on('mouseleave', function() {
294 hideSeniorPanel(); 294 hideSeniorPanel();
295 -});  
  295 +});
  296 +
  297 +//操作栏
  298 +(function() {
  299 + var $countPerPage = $('#count-per-page'),
  300 + $countChose = $countPerPage.next('ul');
  301 +
  302 + var SLIDETIME = 200;
  303 +
  304 + $(document).click(function(e) {
  305 + if ($(e.target).closest('.page-count').length > 0) {
  306 + return;
  307 + }
  308 +
  309 + $countChose && $countChose.slideUp(SLIDETIME);
  310 + });
  311 +
  312 + $countPerPage.click(function() {
  313 + if ($countChose.css('display') === 'none') {
  314 + $countChose.slideDown(SLIDETIME);
  315 + } else {
  316 + $countChose.slideUp(SLIDETIME);
  317 + }
  318 + });
  319 +}());
@@ -290,6 +290,7 @@ @@ -290,6 +290,7 @@
290 height: 48px; 290 height: 48px;
291 background: #f5f7f6; 291 background: #f5f7f6;
292 line-height: 48px; 292 line-height: 48px;
  293 + margin: 10px 0;
293 294
294 .sort-type, 295 .sort-type,
295 .checks { 296 .checks {
@@ -307,7 +308,7 @@ @@ -307,7 +308,7 @@
307 } 308 }
308 } 309 }
309 310
310 - .pager { 311 + .pager-wrap {
311 float: right; 312 float: right;
312 padding: 15px 0; 313 padding: 15px 0;
313 } 314 }
@@ -344,23 +345,53 @@ @@ -344,23 +345,53 @@
344 > span { 345 > span {
345 float: left; 346 float: left;
346 display: block; 347 display: block;
  348 + width: 42px;
347 height: 10px; 349 height: 10px;
348 line-height: 10px; 350 line-height: 10px;
349 padding: 3px; 351 padding: 3px;
350 border: 1px solid #ccc; 352 border: 1px solid #ccc;
351 color: #222; 353 color: #222;
352 - font-size: 12px;  
353 cursor: pointer; 354 cursor: pointer;
354 margin-right: 10px; 355 margin-right: 10px;
355 } 356 }
356 357
357 .iconfont { 358 .iconfont {
358 - font-size: 12px; 359 + font-size: 14px;
359 color: #ccc; 360 color: #ccc;
  361 + float: right;
360 } 362 }
361 363
362 > ul { 364 > ul {
  365 + position: absolute;
363 display: none; 366 display: none;
  367 + width: 42px;
  368 + padding: 0 3px;
  369 + border-left: 1px solid #ccc;
  370 + border-right: 1px solid #ccc;
  371 + }
  372 +
  373 + li {
  374 + border-bottom: 1px solid #ccc;
  375 + }
  376 +
  377 + a {
  378 + display: block;
  379 + width: 100%;
  380 + }
  381 + }
  382 +
  383 + .pager {
  384 + float: left;
  385 + font-size: 14px;
  386 + line-height: 15px;
  387 + margin: 0 20px;
  388 +
  389 + .dis-icon {
  390 + color: #e6e6e6;
  391 + }
  392 +
  393 + i {
  394 + color: #f00;
364 } 395 }
365 } 396 }
366 } 397 }
@@ -12,287 +12,295 @@ class IndexController extends AbstractAction @@ -12,287 +12,295 @@ class IndexController extends AbstractAction
12 { 12 {
13 $data = array( 13 $data = array(
14 'searchListPage' => true, 14 'searchListPage' => true,
15 - 'filters' => array(  
16 - 'checkedConditons' => array(  
17 - 'conditions' => array( 15 +
  16 + 'products' => array(
  17 + 'filters' => array(
  18 + 'checkedConditions' => array(
  19 + 'conditions' => array(
  20 + array(
  21 + 'href' => '',
  22 + 'name' => '暗黑'
  23 + ),
  24 + array(
  25 + 'href' => '',
  26 + 'color' => '#f00'
  27 + ),
  28 + array(
  29 + 'href' => '',
  30 + 'name' => 'CLOT'
  31 + )
  32 + ),
  33 + 'clearUrl' => ''
  34 + ),
  35 + 'channel' => array(
18 array( 36 array(
19 - 'href' => '',  
20 - 'name' => '暗黑' 37 + 'href' => '/?gender=1,3',
  38 + 'name' => 'BOYS'
  39 + ),
  40 + array(
  41 + 'href' => '/?gender=2,3',
  42 + 'name' => 'GIRLS'
21 ), 43 ),
22 array( 44 array(
23 'href' => '', 45 'href' => '',
24 - 'color' => '#f00' 46 + 'name' => 'KIDS'
25 ), 47 ),
26 array( 48 array(
27 'href' => '', 49 'href' => '',
28 - 'name' => 'CLOT' 50 + 'name' => 'LIFESTYLE'
29 ) 51 )
30 ), 52 ),
31 - 'clearUrl' => ''  
32 - ),  
33 - 'channel' => array(  
34 - array(  
35 - 'href' => '/?gender=1,3',  
36 - 'name' => 'BOYS'  
37 - ),  
38 - array(  
39 - 'href' => '/?gender=2,3',  
40 - 'name' => 'GIRLS'  
41 - ),  
42 - array(  
43 - 'href' => '',  
44 - 'name' => 'KIDS' 53 + 'sort' => array(
  54 + array(
  55 + 'id' => '1',
  56 + 'name' => '上衣',
  57 + 'sub' => array(
  58 + array(
  59 + 'href' => '',
  60 + 'name' => 'T恤'
  61 + ),
  62 + array(
  63 + 'href' => '',
  64 + 'name' => '棉袄'
  65 + ),
  66 + array(
  67 + 'href' => '',
  68 + 'name' => '外套'
  69 + )
  70 + )
  71 + ),
  72 + array(
  73 + 'id' => '2',
  74 + 'name' => '裤子'
  75 + ),
  76 + array(
  77 + 'id' => '3',
  78 + 'name' => '连衣裙'
  79 + ),
  80 + array(
  81 + 'id' => '4',
  82 + 'name' => '鞋'
  83 + )
45 ), 84 ),
46 - array(  
47 - 'href' => '',  
48 - 'name' => 'LIFESTYLE'  
49 - )  
50 - ),  
51 - 'sort' => array(  
52 - array(  
53 - 'id' => '1',  
54 - 'name' => '上衣',  
55 - 'sub' => array( 85 + 'brand' => array(
  86 + 'default' => array(
  87 + array(
  88 + 'href' => '',
  89 + 'name' => 'CLOT'
  90 + ),
  91 + array(
  92 + 'href' => '',
  93 + 'name' => 'ABLE JEANS'
  94 + ),
  95 + array(
  96 + 'href' => '',
  97 + 'name' => 'Eight Guys'
  98 + ),
  99 + array(
  100 + 'href' => '',
  101 + 'name' => 'FAIRWHALE JEANS'
  102 + ),
  103 + array(
  104 + 'href' => '',
  105 + 'name' => '鬼洗'
  106 + ),
  107 + array(
  108 + 'href' => '',
  109 + 'name' => '金银帝国Imperial Taels'
  110 + ),
  111 + array(
  112 + 'href' => '',
  113 + 'name' => 'F.L.Y.D'
  114 + ),
  115 + array(
  116 + 'href' => '',
  117 + 'name' => 'Tapenade特芙娜'
  118 + ),
  119 + array(
  120 + 'href' => '',
  121 + 'name' => 'Adidas Originals'
  122 + )
  123 + ),
  124 + 'brandIndex' => array(
  125 + array(
  126 + 'index' => 'all',
  127 + 'name' => '全部'
  128 + ),
  129 + array(
  130 + 'index' => '0-9',
  131 + 'name' => '0 ~ 9'
  132 + ),
  133 + array(
  134 + 'index' => 'a',
  135 + 'name' => 'A'
  136 + )
  137 + ),
  138 + 'brandsShow' => array(
  139 + array(
  140 + 'id' => '1',
  141 + 'href' => '',
  142 + 'index' => '0-9',
  143 + 'name' => '5cm',
  144 + 'key' => '5cm'
  145 + ),
  146 + array(
  147 + 'id' => '2',
  148 + 'href' => '',
  149 + 'index' => 'k',
  150 + 'name' => 'KTZ',
  151 + 'key' => 'ktz'
  152 + ),
56 array( 153 array(
  154 + 'id' => '3',
57 'href' => '', 155 'href' => '',
58 - 'name' => 'T恤' 156 + 'index' => 't',
  157 + 'name' => 'Tapenade特芙娜',
  158 + 'key' => 'tapenade特芙娜'
59 ), 159 ),
60 array( 160 array(
  161 + 'id' => '4',
61 'href' => '', 162 'href' => '',
62 - 'name' => '棉袄' 163 + 'index' => 'j',
  164 + 'name' => '金银帝国Imperial Taels',
  165 + 'key' => '金银帝国imperial taels'
63 ), 166 ),
64 array( 167 array(
  168 + 'id' => '5',
65 'href' => '', 169 'href' => '',
66 - 'name' => '外套' 170 + 'index' => 'a',
  171 + 'name' => 'ABLE JEANS',
  172 + 'key' => 'able jeans'
67 ) 173 )
68 ) 174 )
69 ), 175 ),
70 - array(  
71 - 'id' => '2',  
72 - 'name' => '裤子'  
73 - ),  
74 - array(  
75 - 'id' => '3',  
76 - 'name' => '连衣裙'  
77 - ),  
78 - array(  
79 - 'id' => '4',  
80 - 'name' => '鞋'  
81 - )  
82 - ),  
83 - 'brand' => array(  
84 - 'default' => array( 176 + 'price' => array(
85 array( 177 array(
86 'href' => '', 178 'href' => '',
87 - 'name' => 'CLOT' 179 + 'name' => '0-239'
88 ), 180 ),
89 array( 181 array(
90 'href' => '', 182 'href' => '',
91 - 'name' => 'ABLE JEANS'  
92 - ), 183 + 'name' => '240-329'
  184 + )
  185 + ),
  186 + 'color' => array(
93 array( 187 array(
94 'href' => '', 188 'href' => '',
95 - 'name' => 'Eight Guys' 189 + 'name' => '黑色',
  190 + 'rgb' => '#000'
96 ), 191 ),
97 array( 192 array(
98 'href' => '', 193 'href' => '',
99 - 'name' => 'FAIRWHALE JEANS' 194 + 'name' => '红色',
  195 + 'rgb' => '#f00'
  196 + )
  197 + ),
  198 + 'size' => array(
  199 + array(
  200 + 'href' => '',
  201 + 'name' => 'S'
100 ), 202 ),
101 array( 203 array(
102 'href' => '', 204 'href' => '',
103 - 'name' => '鬼洗' 205 + 'name' => 'L'
  206 + )
  207 + ),
  208 + 'seniorChose' => array(
  209 + array(
  210 + 'attr' => 'style',
  211 + 'name' => '风格',
  212 + 'showMulti' => true,
  213 + 'sub' => array(
  214 + array(
  215 + 'id' => '1',
  216 + 'href' => '',
  217 + 'name' => '街头'
  218 + ),
  219 + array(
  220 + 'id' => '2',
  221 + 'href' => '',
  222 + 'name' => '简约'
  223 + )
  224 + )
104 ), 225 ),
105 array( 226 array(
  227 + 'attr' => 'weather',
  228 + 'name' => '适用季节',
  229 + 'sub' => array(
  230 + array(
  231 + 'id' => '1',
  232 + 'href' => '',
  233 + 'name' => '春天'
  234 + ),
  235 + array(
  236 + 'id' => '2',
  237 + 'href' => '',
  238 + 'name' => '夏天'
  239 + )
  240 + )
  241 + )
  242 + )
  243 + ),
  244 + 'opts' => array(
  245 + 'sortType' => array(
  246 + array(
106 'href' => '', 247 'href' => '',
107 - 'name' => '金银帝国Imperial Taels' 248 + 'name' => '默认'
108 ), 249 ),
109 array( 250 array(
  251 + 'active' => true,
110 'href' => '', 252 'href' => '',
111 - 'name' => 'F.L.Y.D' 253 + 'name' => '最新',
  254 + 'hasSortOrient' => true,
  255 + 'desc' => true
112 ), 256 ),
113 array( 257 array(
114 'href' => '', 258 'href' => '',
115 - 'name' => 'Tapenade特芙娜' 259 + 'name' => '价格',
  260 + 'hasSortOrient' => true
116 ), 261 ),
117 array( 262 array(
118 'href' => '', 263 'href' => '',
119 - 'name' => 'Adidas Originals' 264 + 'name' => '折扣',
  265 + 'hasSortOrient' => true
120 ) 266 )
121 ), 267 ),
122 - 'brandIndex' => array( 268 + 'checks' => array(
123 array( 269 array(
124 - 'index' => 'all',  
125 - 'name' => '全部' 270 + 'name' => '新品',
  271 + 'checked' => true,
  272 + 'href' => ''
126 ), 273 ),
127 array( 274 array(
128 - 'index' => '0-9',  
129 - 'name' => '0 ~ 9' 275 + 'name' => '打折',
  276 + 'href' => ''
130 ), 277 ),
131 array( 278 array(
132 - 'index' => 'a',  
133 - 'name' => 'A' 279 + 'name' => '限量',
  280 + 'checked' => true,
  281 + 'href' => ''
134 ) 282 )
135 ), 283 ),
136 - 'brandsShow' => array(  
137 - array(  
138 - 'id' => '1',  
139 - 'href' => '',  
140 - 'index' => '0-9',  
141 - 'name' => '5cm',  
142 - 'key' => '5cm'  
143 - ),  
144 - array(  
145 - 'id' => '2',  
146 - 'href' => '',  
147 - 'index' => 'k',  
148 - 'name' => 'KTZ',  
149 - 'key' => 'ktz'  
150 - ), 284 + 'fivePerLine' => true,
  285 + 'sixPerLineHref' => '',
  286 + 'countPerPage' => '120',
  287 + 'pageCounts' => array(
151 array( 288 array(
152 - 'id' => '3',  
153 'href' => '', 289 'href' => '',
154 - 'index' => 't',  
155 - 'name' => 'Tapenade特芙娜',  
156 - 'key' => 'tapenade特芙娜' 290 + 'count' => 60
157 ), 291 ),
158 array( 292 array(
159 - 'id' => '4',  
160 'href' => '', 293 'href' => '',
161 - 'index' => 'j',  
162 - 'name' => '金银帝国Imperial Taels',  
163 - 'key' => '金银帝国imperial taels' 294 + 'count' => 100
164 ), 295 ),
165 array( 296 array(
166 - 'id' => '5',  
167 'href' => '', 297 'href' => '',
168 - 'index' => 'a',  
169 - 'name' => 'ABLE JEANS',  
170 - 'key' => 'able jeans' 298 + 'count' => 120
171 ) 299 )
172 - )  
173 - ),  
174 - 'price' => array(  
175 - array(  
176 - 'href' => '',  
177 - 'name' => '0-239'  
178 ), 300 ),
179 - array(  
180 - 'href' => '',  
181 - 'name' => '240-329'  
182 - )  
183 - ),  
184 - 'color' => array(  
185 - array(  
186 - 'href' => '',  
187 - 'name' => '黑色',  
188 - 'rgb' => '#000'  
189 - ),  
190 - array(  
191 - 'href' => '',  
192 - 'name' => '红色',  
193 - 'rgb' => '#f00'  
194 - )  
195 - ),  
196 - 'size' => array(  
197 - array(  
198 - 'href' => '',  
199 - 'name' => 'S'  
200 - ),  
201 - array(  
202 - 'href' => '',  
203 - 'name' => 'L'  
204 - )  
205 - ),  
206 - 'seniorChose' => array(  
207 - array(  
208 - 'attr' => 'style',  
209 - 'name' => '风格',  
210 - 'showMulti' => true,  
211 - 'sub' => array(  
212 - array(  
213 - 'id' => '1',  
214 - 'href' => '',  
215 - 'name' => '街头'  
216 - ),  
217 - array(  
218 - 'id' => '2',  
219 - 'href' => '',  
220 - 'name' => '简约'  
221 - )  
222 - )  
223 - ),  
224 - array(  
225 - 'attr' => 'weather',  
226 - 'name' => '适用季节',  
227 - 'sub' => array(  
228 - array(  
229 - 'id' => '1',  
230 - 'href' => '',  
231 - 'name' => '春天'  
232 - ),  
233 - array(  
234 - 'id' => '2',  
235 - 'href' => '',  
236 - 'name' => '夏天'  
237 - )  
238 - )  
239 - )  
240 - )  
241 - ),  
242 - 'sortType' => array(  
243 - array(  
244 - 'href' => '',  
245 - 'name' => '默认'  
246 - ),  
247 - array(  
248 - 'active' => true,  
249 - 'href' => '',  
250 - 'name' => '最新',  
251 - 'hasSortOrient' => true,  
252 - 'desc' => true  
253 - ),  
254 - array(  
255 - 'href' => '',  
256 - 'name' => '价格',  
257 - 'hasSortOrient' => true  
258 - ),  
259 - array(  
260 - 'href' => '',  
261 - 'name' => '折扣',  
262 - 'hasSortOrient' => true  
263 - )  
264 - ),  
265 - 'checks' => array(  
266 - array(  
267 - 'name' => '新品',  
268 - 'checked' => true,  
269 - 'href' => ''  
270 - ),  
271 - array(  
272 - 'name' => '打折',  
273 - 'href' => ''  
274 - ),  
275 - array(  
276 - 'name' => '限量',  
277 - 'checked' => true,  
278 - 'href' => ''  
279 - )  
280 - ),  
281 - 'fivePerLine' => true,  
282 - 'fivePerLineHref' => '',  
283 - 'countPerPage' => '120',  
284 - 'pageCounts' => array(  
285 - array(  
286 - 'href' => '',  
287 - 'count' => 60  
288 - ),  
289 - array(  
290 - 'href' => '',  
291 - 'count' => 100  
292 - ),  
293 - array(  
294 - 'href' => '',  
295 - 'count' => 120 301 + 'curPage' => 1,
  302 + 'pageCount' => 30,
  303 + 'nextHref' => 'hello'
296 ) 304 )
297 ) 305 )
298 ); 306 );