fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit c7fbfba81680c99a2c00e3a0a61c89d432241a0c 1 parent b5421d0d

product list show

Inline Side-by-side
Showing 10 changed files with 703 additions and 115 deletions
@@ -16,156 +16,171 @@ @@ -16,156 +16,171 @@
16 {{/if}} 16 {{/if}}
17 17
18 {{#if channel}} 18 {{#if channel}}
19 - <div class="channel"> 19 + <div class="channel section">
20 <span class="title">频道：</span> 20 <span class="title">频道：</span>
21 21
22 - {{# channel}}  
23 - <span class="item">  
24 - {{name}}  
25 - </span>  
26 - {{/ channel}} 22 + <div class="attr-content clearfix">
  23 + {{#each channel}}
  24 + <a class="attr" href="{{href}}">
  25 + {{name}}
  26 + </a>
  27 + {{/each}}
  28 + </div>
27 </div> 29 </div>
28 {{/if}} 30 {{/if}}
29 31
30 - {{#if msort}}  
31 - <div class="msort"> 32 + {{#if sort}}
  33 + <div class="sort section">
32 <span class="title">分类：</span> 34 <span class="title">分类：</span>
33 35
34 - {{# msort}}  
35 - <span class="item">  
36 - {{name}}  
37 - </span>  
38 - {{/ msort}} 36 + <div class="attr-content clearfix">
  37 + {{#each sort}}
  38 + <span class="attr" data-id="{{id}}">
  39 + {{name}}
  40 + </span>
  41 + {{/each}}
  42 + </div>
39 </div> 43 </div>
40 {{/if}} 44 {{/if}}
41 45
42 - {{#if brands}}  
43 - <div class="brands"> 46 + {{# brand}}
  47 + <div class="brand section">
44 <span class="title">品牌：</span> 48 <span class="title">品牌：</span>
45 49
46 - <div class="brand-opt">  
47 - <p class="brands-index">  
48 - <span>全部</span>  
49 - <span>0 ~ 9</span>  
50 - <span>A</span>  
51 - <span>B</span>  
52 - <span>C</span>  
53 - <span>D</span>  
54 - <span>E</span>  
55 - <span>F</span>  
56 - <span>G</span>  
57 - <span>H</span>  
58 - <span>I</span>  
59 - <span>J</span>  
60 - <span>K</span>  
61 - <span>L</span>  
62 - <span>M</span>  
63 - <span>N</span>  
64 - <span>O</span>  
65 - <span>P</span>  
66 - <span>Q</span>  
67 - <span>R</span>  
68 - <span>S</span>  
69 - <span>T</span>  
70 - <span>U</span>  
71 - <span>V</span>  
72 - <span>W</span>  
73 - <span>X</span>  
74 - <span>Y</span>  
75 - <span>Z</span>  
76 - </p>  
77 -  
78 - <div class="brand-search">  
79 - <input type="text">  
80 - <button>  
81 - <span class="iconfont"></span>  
82 - </button>  
83 - </div>  
84 -  
85 - <span class="more">  
86 - <em>收起</em>  
87 - <i class="iconfont"></i>  
88 - </span>  
89 - </div>  
90 -  
91 - <div class="brand-panel">  
92 - <ul class="brands-show">  
93 - {{#brands}}  
94 - <li>  
95 - <label for="{{name}}">{{text}}</label>  
96 - <input type="checkbox" name="{{name}}"> 50 + <div class="attr-content">
  51 + <ul class="default clearfix">
  52 + {{# default}}
  53 + <li class="attr">
  54 + <a href="{{href}}" title="{{name}}">{{name}}</a>
97 </li> 55 </li>
98 - {{/ brands}} 56 + {{/ default}}
99 </ul> 57 </ul>
100 58
101 - <button>确定</button>  
102 - <button>取消</button> 59 + <div class="brand-opt">
  60 + <span id="brand-more" class="brand-more">
  61 + <em>更多</em>
  62 + <i class="iconfont">&#xe600;</i>
  63 + </span>
  64 +
  65 + <span id="brand-multi" class="multi-select">多选 +</span>
  66 + </div>
  67 +
  68 + <div class="brand-panel hide">
  69 + <div class="panel-head clearfix">
  70 + <p class="brands-index">
  71 + {{#each brandIndex}}
  72 + <span data-index="{{index}}">{{name}}</span>
  73 + {{/each}}
  74 + </p>
  75 +
  76 + <div id="brand-search" class="brand-search">
  77 + <input type="text">
  78 + <span class="btn">
  79 + <i class="iconfont">&#xe611;</i>
  80 + </span>
  81 + </div>
  82 + </div>
  83 +
  84 + <ul class="panel-body check-container clearfix">
  85 + {{# brandsShow}}
  86 + <li class="attr" data-href="{{href}}" data-id="{{id}}" data-index="{{index}}">
  87 + <span class="iconfont checkbox">&#xe613;</span>
  88 + <span title="{{name}}">{{name}}</span>
  89 + </li>
  90 + {{/ brandsShow}}
  91 + </ul>
  92 +
  93 + <div class="btns">
  94 + <button class="multi-select-ok dis">确定</button>
  95 + <button class="multi-select-cancel">取消</button>
  96 + </div>
  97 + </div>
103 </div> 98 </div>
104 </div> 99 </div>
105 - {{/if}} 100 + {{/ brand}}
106 101
107 {{#if price}} 102 {{#if price}}
108 - <div class="price"> 103 + <div class="price section">
109 <span class="title">价格：</span> 104 <span class="title">价格：</span>
110 105
111 - {{# price}}  
112 - <span>¥{{.}}</span>  
113 - {{/ price}} 106 + <div class="attr-content clearfix">
  107 + {{# price}}
  108 + <a class="attr" href="{{href}}">¥{{name}}</a>
  109 + {{/ price}}
114 110
115 - <div class="ud-price-range">  
116 - ¥  
117 - <input type="text" class="min-limit">  
118 - -  
119 - <input type="text" class="max-limit"> 111 + <div class="ud-price-range">
  112 + ¥
  113 + <input type="text" class="min limit">
  114 + <span class="price-sep">-</span>
  115 + <input type="text" class="max limit">
120 116
121 - <button>确定</button> 117 + <button class="price-sure hide">确定</button>
  118 + </div>
122 </div> 119 </div>
123 </div> 120 </div>
124 {{/if}} 121 {{/if}}
125 122
126 {{#if color}} 123 {{#if color}}
127 - <div class="color"> 124 + <div class="color section">
128 <span class="title">颜色：</span> 125 <span class="title">颜色：</span>
129 -  
130 - <ul> 126 +
  127 + <div class="attr-content clearfix">
131 {{# color}} 128 {{# color}}
132 - <li>  
133 - <div class="color-block {{name}}"></div>  
134 - {{text}}  
135 - </li> 129 + <a class="attr" href="{{href}}">
  130 + <i class="color-block" style="background: {{rgb}}"></i>
  131 + {{name}}
  132 + </a>
136 {{/ color}} 133 {{/ color}}
137 - </ul> 134 + </div>
  135 + </div>
  136 + {{/if}}
  137 +
  138 + {{#if size}}
  139 + <div class="size section">
  140 + <span class="title">尺码：</span>
  141 +
  142 + <div class="attr-content clearfix">
  143 + {{# size}}
  144 + <a class="attr" href="{{href}}">{{name}}</a>
  145 + {{/ size}}
  146 + </div>
138 </div> 147 </div>
139 {{/if}} 148 {{/if}}
140 149
141 {{#if seniorChose}} 150 {{#if seniorChose}}
142 - <div class="senior"> 151 + <div class="senior section">
143 <span class="title">高级选项：</span> 152 <span class="title">高级选项：</span>
144 153
145 - <ul>  
146 - {{#each seniorChose}}  
147 - <li>  
148 - {{name}}  
149 - <span class="iconfont"></span>  
150 - </li>  
151 - {{/each}}  
152 - </ul>  
153 -  
154 - <div>  
155 - {{#each seniorChose}}  
156 - <ul>  
157 - {{#each subSenior}}  
158 - <li {{#if >  
159 - <label for="{{name}}">{{text}}</label>  
160 - <input type="checkbox" name="{{name}}">  
161 - </li>  
162 - {{/each}}  
163 - </ul>  
164 - {{/each}}  
165 - </div> 154 + <div class="attr-content">
  155 + <ul class="clearfix">
  156 + {{#each seniorChose}}
  157 + <li class="attr">
  158 + {{name}}
  159 + <span class="iconfont"></span>
  160 + </li>
  161 + {{/each}}
  162 + </ul>
166 163
167 - <button>确定</button>  
168 - <button>取消</button> 164 + <div class="sub-senior-wrap hide">
  165 + {{#each seniorChose}}
  166 + <div class="sub check-container" data-attr="{{attr}}">
  167 + <span class="multi-select">多选 +</span>
  168 + <ul class="clearfix">
  169 + {{#each sub}}
  170 + <li class="attr">
  171 + <span class="iconfont checkbox">&#xe613;</span>
  172 + <span data-id="{{id}}" data-href="{{href}}">{{name}}</span>
  173 + </li>
  174 + {{/each}}
  175 + </ul>
  176 + <div class="btns">
  177 + <button class="multi-select-ok dis">确定</button>
  178 + <button class="multi-select-cancel">取消</button>
  179 + </div>
  180 + </div>
  181 + {{/each}}
  182 + </div>
  183 + </div>
169 </div> 184 </div>
170 {{/if}} 185 {{/if}}
171 {{/ filters}} 186 {{/ filters}}
@@ -14,6 +14,6 @@ @@ -14,6 +14,6 @@
14 {{!-- 搜索 --}} 14 {{!-- 搜索 --}}
15 {{#if searchListPage}} 15 {{#if searchListPage}}
16 <script> 16 <script>
17 - seajs.use('js/product/search'); 17 + seajs.use('js/product/list');
18 </script> 18 </script>
19 {{/if}} 19 {{/if}}
No preview for this file type
  1 +<?xml version="1.0" standalone="no"?>
  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">
  4 +<metadata>
  5 +Created by FontForge 20120731 at Wed Nov 25 18:16:02 2015
  6 + By Ads
  7 +</metadata>
  8 +<defs>
  9 +<font id="iconfont" horiz-adv-x="1024" >
  10 + <font-face
  11 + font-family="iconfont"
  12 + font-weight="500"
  13 + font-stretch="normal"
  14 + units-per-em="1024"
  15 + panose-1="2 0 6 3 0 0 0 0 0 0"
  16 + ascent="896"
  17 + descent="-128"
  18 + x-height="792"
  19 + bbox="0 -214 1024 812"
  20 + underline-thickness="50"
  21 + underline-position="-100"
  22 + unicode-range="U+0078-E613"
  23 + />
  24 +<missing-glyph horiz-adv-x="374"
  25 +d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
  26 + <glyph glyph-name=".notdef" horiz-adv-x="374"
  27 +d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
  28 + <glyph glyph-name=".null" horiz-adv-x="0"
  29 + />
  30 + <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
  31 + />
  32 + <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
  33 +d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
  34 +t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
  35 +t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
  36 + <glyph glyph-name="uniE600" unicode="&#xe600;"
  37 +d="M286 413l-46 -45l272 -272l272 272l-46 45l-226 -226z" />
  38 + <glyph glyph-name="uniE601" unicode="&#xe601;"
  39 +d="M387 62l45 -46l272 272l-272 272l-45 -46l226 -226z" />
  40 + <glyph glyph-name="uniE602" unicode="&#xe602;"
  41 +d="M766 109l-196 192l196 192l-61 60l-196 -193l-196 193l-60 -60l196 -192l-196 -192l60 -59l196 192l196 -192z" />
  42 + <glyph glyph-name="uniE603" unicode="&#xe603;"
  43 +d="M951 -7h-878l439 614z" />
  44 + <glyph glyph-name="uniE604" unicode="&#xe604;"
  45 +d="M512 -7l-439 614h878z" />
  46 + <glyph glyph-name="uniE605" unicode="&#xe605;"
  47 +d="M819 739v-878l-614 439z" />
  48 + <glyph glyph-name="uniE606" unicode="&#xe606;"
  49 +d="M205 -139v878l614 -439z" />
  50 + <glyph glyph-name="uniE607" unicode="&#xe607;"
  51 +d="M786 705l-415 -405l415 -404q19 -18 19 -44t-19 -45q-12 -12 -29 -16t-33.5 0t-29.5 16l-461 449q-19 18 -19 44.5t19 44.5l461 449q19 18 46 18t46 -18.5t19 -44.5t-19 -44zM786 705z" />
  52 + <glyph glyph-name="uniE608" unicode="&#xe608;"
  53 +d="M233 705q-19 18 -19 44t19 44.5t46 18.5t46 -18l461 -449q19 -18 19 -44.5t-19 -44.5l-461 -449q-19 -18 -46 -18t-46 18.5t-19 44.5t19 44l416 404zM233 705z" />
  54 + <glyph glyph-name="uniE609" unicode="&#xe609;"
  55 +d="M577 -214q-17 0 -30 11q-16 12 -18 31.5t11 35.5l357 443l-350 404q-13 15 -11.5 34.5t16.5 32.5q9 9 22 11.5t25 -2t20 -14.5l376 -433q12 -13 12 -30.5t-11 -30.5l-382 -475q-14 -18 -37 -18z" />
  56 + <glyph glyph-name="uniE60A" unicode="&#xe60a;"
  57 +d="M447 -214q-23 0 -37 18l-382 475q-8 8 -10 19t0.5 22t10.5 20l376 433q13 15 32.5 16.5t34.5 -11.5t16.5 -32.5t-11.5 -34.5l-350 -404l357 -443q9 -10 10.5 -22.5t-3 -24.5t-14.5 -20q-13 -11 -30 -11z" />
  58 + <glyph glyph-name="uniE60B" unicode="&#xe60b;"
  59 +d="M284 -69q-9 -9 -12.5 -21t0 -24t12.5 -20q13 -14 32 -14t32 14l397 401q5 6 8.5 12.5t4 13.5t0 14t-4 13.5t-8.5 12.5l-397 401q-13 14 -32 14t-32 -14q-6 -5 -9 -11.5t-4 -13.5t0 -14t4 -14t8 -12l351 -369l-350 -369v0zM284 -69z" />
  60 + <glyph glyph-name="uniE60C" unicode="&#xe60c;"
  61 +d="M745 669q13 14 13 33t-13 32q-9 9 -21 12.5t-23.5 0t-20.5 -12.5l-396 -401q-14 -14 -14 -33t14 -33l396 -401q14 -14 32.5 -14t32 13.5t13.5 32.5t-13 33l-351 369l351 369v0zM745 669z" />
  62 + <glyph glyph-name="uniE60D" unicode="&#xe60d;"
  63 +d="M513 654q-13 0 -22 -9t-9 -22v-311h-249q-6 0 -11.5 -2.5t-10 -6.5t-7 -10t-2.5 -12q0 -8 4.5 -15.5t11.5 -11.5t15 -4h280q12 0 21.5 9t9.5 22v342q0 8 -4.5 15.5t-11.5 11.5t-15 4zM513 778q-81 0 -157 -25t-137 -71t-107 -107t-71 -136.5t-25 -156.5q0 -101 39.5 -193
  64 +t106 -158.5t158.5 -105.5t193 -39t192.5 39t158 105.5t106 158.5t39.5 193t-39.5 193t-106 158t-158 105.5t-192.5 39.5zM513 -152q-118 0 -218 58t-158.5 158t-58.5 218q0 88 34.5 168.5t92.5 138.5t138.5 92.5t169.5 34.5q59 0 115 -15.5t103.5 -43.5t88 -68t68.5 -88
  65 +t43.5 -104t15.5 -115q0 -118 -58 -218t-158 -158t-218 -58z" />
  66 + <glyph glyph-name="uniE60E" unicode="&#xe60e;"
  67 +d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" />
  68 + <glyph glyph-name="uniE60F" unicode="&#xe60f;"
  69 +d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" />
  70 + <glyph glyph-name="uniE610" unicode="&#xe610;"
  71 +d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" />
  72 + <glyph glyph-name="uniE612" unicode="&#xe612;"
  73 +d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z
  74 +M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
  75 + <glyph glyph-name="uniE613" unicode="&#xe613;"
  76 +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" />
  77 + </font>
  78 +</defs></svg>
No preview for this file type
No preview for this file type
@@ -2,4 +2,91 @@ @@ -2,4 +2,91 @@
2 * 商品列表页 2 * 商品列表页
3 * @author: xuqi<qi.xu@yoho.cn> 3 * @author: xuqi<qi.xu@yoho.cn>
4 * @date: 2015/11/23 4 * @date: 2015/11/23
5 - */  
  5 + */
  6 +
  7 +var $ = require('jquery');
  8 +
  9 +var checkUnicode = {
  10 + unchecked: '&#xe613;',
  11 + checked: '&#xe612;'
  12 +},
  13 +moreUnicode = {
  14 + up: '&#xe610;',
  15 + down: '&#xe600;'
  16 +};
  17 +
  18 +var $brandDefault = $('.brand .default'),
  19 + $brandPanel = $('.brand .brand-panel'),
  20 + $brandMore = $('#brand-more');
  21 +
  22 +var $brandMoreTxt, $brandMoreIcon;
  23 +
  24 +//显示更多品牌面板
  25 +function brandShowMore() {
  26 + $brandDefault.addClass('hide');
  27 + $brandPanel.removeClass('hide');
  28 +}
  29 +
  30 +//隐藏更多品牌面板
  31 +function brandHideMore() {
  32 + $brandPanel.addClass('hide');
  33 + $brandDefault.removeClass('hide');
  34 +}
  35 +
  36 +if ($brandMore.length > 0) {
  37 + $brandMoreTxt = $brandMore.children('em');
  38 + $brandMoreIcon = $brandMore.children('.iconfont');
  39 +}
  40 +
  41 +//屏蔽筛选项双击文字选中
  42 +$('.filter-box').on('selectstart', '.attr', function() {
  43 + return false;
  44 +});
  45 +
  46 +//checkbox
  47 +$('.check-container').on('click', '.attr', function() {
  48 + var $check = $(this).find('.checkbox');
  49 +
  50 + $check.toggleClass('checked');
  51 +
  52 + if ($check.hasClass('checked')) {
  53 + $check.html(checkUnicode.checked);
  54 + } else {
  55 + $check.html(checkUnicode.unchecked);
  56 + }
  57 +});
  58 +
  59 +//品牌多选
  60 +$('#brand-multi').click(function() {
  61 + if ($brandPanel.css('display') === 'none') {
  62 +
  63 + //显示品牌面板
  64 + brandShowMore();
  65 + }
  66 +
  67 + $brandPanel.addClass('multi'); //显示出checkbox
  68 + $(this).addClass('hide');
  69 +});
  70 +
  71 +$brandMore.click(function() {
  72 + var $this = $(this);
  73 +
  74 + if ($this.hasClass('more')) {
  75 + brandHideMore();
  76 +
  77 + $brandMoreTxt.text('更多');
  78 + $brandMoreIcon.html(moreUnicode.down);
  79 + } else {
  80 + brandShowMore();
  81 +
  82 + $brandMoreTxt.text('收起');
  83 + $brandMoreIcon.html(moreUnicode.up);
  84 + }
  85 +
  86 + $(this).toggleClass('more');
  87 +});
  88 +
  89 +//高级选项多选
  90 +$('.sub-senior-wrap').on('click', '.multi-select', function() {
  91 +
  92 +});
@@ -6,6 +6,25 @@ body { @@ -6,6 +6,25 @@ body {
6 font-family: arial,"Microsoft YaHei"; 6 font-family: arial,"Microsoft YaHei";
7 } 7 }
8 8
  9 +@font-face {
  10 + font-family: "iconfont";
  11 + src: font-url('iconfont.eot'); /* IE9*/
  12 + src: font-url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  13 + font-url('iconfont.woff') format('woff'), /* chrome、firefox */
  14 + font-url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  15 + font-url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  16 +}
  17 +
  18 +.iconfont {
  19 + font-family: "iconfont" !important;
  20 + font-size: 16px;
  21 + font-style: normal;
  22 + text-decoration: none;
  23 + -webkit-font-smoothing: antialiased;
  24 + -webkit-text-stroke-width: 0.2px;
  25 + -moz-osx-font-smoothing: grayscale;
  26 +}
  27 +
9 .clearfix:before, 28 .clearfix:before,
10 .clearfix:after { 29 .clearfix:after {
11 content: ""; 30 content: "";
@@ -26,6 +45,11 @@ ol, ul { @@ -26,6 +45,11 @@ ol, ul {
26 45
27 a { 46 a {
28 text-decoration: none; 47 text-decoration: none;
  48 + color: #000;
  49 +}
  50 +
  51 +.hide {
  52 + display: none;
29 } 53 }
30 54
31 a:focus { 55 a:focus {
  1 +.products-page {
  2 + .filter-box {
  3 + border: 1px solid #dfdfdf;
  4 + }
  5 +
  6 + .section {
  7 + padding: 10px 15px;
  8 + font-size: 14px;
  9 + border-top: 1px solid #dfdfdf;
  10 +
  11 + &:first-child {
  12 + border-top: none;
  13 + }
  14 + }
  15 +
  16 + .title {
  17 + float: left;
  18 + width: 90px;
  19 + line-height: 30px;
  20 + }
  21 +
  22 + .attr-content {
  23 + margin-left: 90px;
  24 + }
  25 +
  26 + .multi-select {
  27 + display: inline-block;
  28 + width: 60px;
  29 + height: 18px;
  30 + line-height: 18px;
  31 + border: 1px solid #000;
  32 + text-align: center;
  33 + cursor: pointer;
  34 + }
  35 +
  36 + .attr {
  37 + display: block;
  38 + float: left;
  39 + padding: 0 10px;
  40 + margin-right: 30px;
  41 + line-height: 30px;
  42 + cursor: pointer;
  43 +
  44 + &:first-child {
  45 + margin-left: 0;
  46 + }
  47 +
  48 + -moz-user-select: none;
  49 + }
  50 +
  51 + .channel {
  52 + line-height: 35px;
  53 + background: #eaeceb;
  54 +
  55 + .title, .attr {
  56 + line-height: 35px;
  57 + }
  58 + }
  59 +
  60 + .brand {
  61 + position: relative;
  62 +
  63 + .attr {
  64 + box-sizing: border-box;
  65 + width: 20%;
  66 + margin: 0;
  67 + overflow: hidden;
  68 + white-space: nowrap;
  69 + text-overflow: ellipsis;
  70 + }
  71 +
  72 + .attr-content {
  73 + max-width: 900px;
  74 + }
  75 +
  76 + .brand-opt {
  77 + position: absolute;
  78 + right: 20px;
  79 + top: 15px;
  80 + }
  81 +
  82 + .brand-more {
  83 + margin-right: 20px;
  84 + cursor: pointer;
  85 + }
  86 +
  87 + .brands-index {
  88 + float: left;
  89 + line-height: 30px;
  90 +
  91 + span {
  92 + margin: 0 5px;
  93 +
  94 + &:first-child {
  95 + margin-left: 10px;
  96 + }
  97 + }
  98 + }
  99 +
  100 + .brand-search {
  101 + float: left;
  102 + height: 18px;
  103 + border: 1px solid #b0b0b0;
  104 + margin-top: 5px;
  105 + margin-left: 15px;
  106 +
  107 + input {
  108 + float: left;
  109 + border: none;
  110 + width: 100px;
  111 + height: 18px;
  112 + padding: 0;
  113 + }
  114 +
  115 + .btn {
  116 + display: inline-block;
  117 + width: 55px;
  118 + height: 18px;
  119 + background: #b0b0b0;
  120 + color: #fff;
  121 + text-align: center;
  122 + }
  123 + }
  124 +
  125 + .panel-body {
  126 + padding: 15px 20px;
  127 + margin-top: 5px;
  128 + background: #f4f7f6;
  129 + }
  130 + }
  131 +
  132 + .btns {
  133 + display: none;
  134 + margin-top: 10px;
  135 + text-align: center;
  136 + }
  137 +
  138 + .multi .btns {
  139 + display: block;
  140 + }
  141 +
  142 + .multi-select-ok, .multi-select-cancel {
  143 + width: 55px;
  144 + height: 24px;
  145 + border: none;
  146 + background: #000;
  147 + color: #fff;
  148 + font-size: 15px;
  149 + margin-right: 15px;
  150 + }
  151 +
  152 + .ud-price-range {
  153 + margin-top: 2px;
  154 + }
  155 +
  156 + .limit {
  157 + height: 22px;
  158 + width: 42px;
  159 + border: 1px solid #ccc;
  160 + padding: 0;
  161 + }
  162 +
  163 + .price-sep {
  164 + margin: 0 5px;
  165 + }
  166 +
  167 + .price-sure {
  168 + height: 24px;
  169 + width: 44px;
  170 + border: 1px solid #e0e0e0;
  171 + background: #fff;
  172 + color: #666;
  173 + margin-left: 10px;
  174 + }
  175 +
  176 + .color-block {
  177 + display: inline-block;
  178 + height: 22px;
  179 + width: 22px;
  180 + border: 1px solid #ccc;
  181 + margin-bottom: -6px;
  182 + margin-right: 5px;
  183 + }
  184 +
  185 + .sub-senior-wrap {
  186 + position: relative;
  187 + padding: 15px;
  188 +
  189 + .sub {
  190 + max-width: 950px;
  191 + }
  192 +
  193 + .multi-select {
  194 + position: absolute;
  195 + top: 15px;
  196 + right: 15px;
  197 + }
  198 + }
  199 +
  200 + .checkbox {
  201 + display: none;
  202 + }
  203 +
  204 + .multi .checkbox {
  205 + display: inline;
  206 + }
  207 +}
@@ -10,6 +10,183 @@ class IndexController extends AbstractAction @@ -10,6 +10,183 @@ class IndexController extends AbstractAction
10 */ 10 */
11 public function indexAction() 11 public function indexAction()
12 { 12 {
13 - $this->_view->display('list'); 13 + $data = array(
  14 + 'searchListPage' => true,
  15 + 'filters' => array(
  16 + 'channel' => array(
  17 + array(
  18 + 'href' => '/?gender=1,3',
  19 + 'name' => 'BOYS'
  20 + ),
  21 + array(
  22 + 'href' => '/?gender=2,3',
  23 + 'name' => 'GIRLS'
  24 + ),
  25 + array(
  26 + 'href' => '',
  27 + 'name' => 'KIDS'
  28 + ),
  29 + array(
  30 + 'href' => '',
  31 + 'name' => 'LIFESTYLE'
  32 + )
  33 + ),
  34 + 'sort' => array(
  35 + array(
  36 + 'id' => '1',
  37 + 'name' => '上衣'
  38 + ),
  39 + array(
  40 + 'id' => '2',
  41 + 'name' => '裤子'
  42 + ),
  43 + array(
  44 + 'id' => '3',
  45 + 'name' => '连衣裙'
  46 + ),
  47 + array(
  48 + 'id' => '4',
  49 + 'name' => '鞋'
  50 + )
  51 + ),
  52 + 'brand' => array(
  53 + 'default' => array(
  54 + array(
  55 + 'href' => '',
  56 + 'name' => 'CLOT'
  57 + ),
  58 + array(
  59 + 'href' => '',
  60 + 'name' => 'ABLE JEANS'
  61 + ),
  62 + array(
  63 + 'href' => '',
  64 + 'name' => 'Eight Guys'
  65 + ),
  66 + array(
  67 + 'href' => '',
  68 + 'name' => 'FAIRWHALE JEANS'
  69 + ),
  70 + array(
  71 + 'href' => '',
  72 + 'name' => '鬼洗'
  73 + ),
  74 + array(
  75 + 'href' => '',
  76 + 'name' => '金银帝国Imperial Taels'
  77 + ),
  78 + array(
  79 + 'href' => '',
  80 + 'name' => 'F.L.Y.D'
  81 + ),
  82 + array(
  83 + 'href' => '',
  84 + 'name' => 'Tapenade特芙娜'
  85 + ),
  86 + array(
  87 + 'href' => '',
  88 + 'name' => 'Adidas Originals'
  89 + )
  90 + ),
  91 + 'brandIndex' => array(
  92 + array(
  93 + 'index' => 'all',
  94 + 'name' => '全部'
  95 + ),
  96 + array(
  97 + 'index' => '0-9',
  98 + 'name' => '0 ~ 9'
  99 + ),
  100 + array(
  101 + 'index' => 'a',
  102 + 'name' => 'A'
  103 + )
  104 + ),
  105 + 'brandsShow' => array(
  106 + array(
  107 + 'id' => '1',
  108 + 'href' => '',
  109 + 'index' => '0-9',
  110 + 'name' => '5cm'
  111 + ),
  112 + array(
  113 + 'id' => '2',
  114 + 'href' => '',
  115 + 'index' => 'k',
  116 + 'name' => 'KTZ'
  117 + ),
  118 + array(
  119 + 'id' => '3',
  120 + 'href' => '',
  121 + 'index' => 't',
  122 + 'name' => 'Tapenade特芙娜'
  123 + ),
  124 + array(
  125 + 'id' => '4',
  126 + 'href' => '',
  127 + 'index' => 'j',
  128 + 'name' => '金银帝国Imperial Taels'
  129 + ),
  130 + array(
  131 + 'id' => '5',
  132 + 'href' => '',
  133 + 'index' => 'a',
  134 + 'name' => 'ABLE JEANS'
  135 + )
  136 + )
  137 + ),
  138 + 'price' => array(
  139 + array(
  140 + 'href' => '',
  141 + 'name' => '0-239'
  142 + ),
  143 + array(
  144 + 'href' => '',
  145 + 'name' => '240-329'
  146 + )
  147 + ),
  148 + 'color' => array(
  149 + array(
  150 + 'href' => '',
  151 + 'name' => '黑色',
  152 + 'rgb' => '#000'
  153 + ),
  154 + array(
  155 + 'href' => '',
  156 + 'name' => '红色',
  157 + 'rgb' => '#f00'
  158 + )
  159 + ),
  160 + 'size' => array(
  161 + array(
  162 + 'href' => '',
  163 + 'name' => 'S'
  164 + ),
  165 + array(
  166 + 'href' => '',
  167 + 'name' => 'L'
  168 + )
  169 + ),
  170 + 'seniorChose' => array(
  171 + array(
  172 + 'attr' => 'style',
  173 + 'name' => '风格',
  174 + 'sub' => array(
  175 + array(
  176 + 'id' => '',
  177 + 'href' => '',
  178 + 'name' => '街头'
  179 + ),
  180 + array(
  181 + 'id' => '',
  182 + 'href' => '',
  183 + 'name' => '简约'
  184 + )
  185 + )
  186 + )
  187 + )
  188 + )
  189 + );
  190 + $this->_view->display('list', $data);
14 } 191 }
15 } 192 }