Showing
10 changed files
with
904 additions
and
959 deletions
| 1 | -{{> layout/header}} | ||
| 2 | -<div class="products-page yoho-page"> | ||
| 3 | - {{# products}} | ||
| 4 | - {{> layout/path-nav}} | ||
| 5 | - <div class="filter-box"> | ||
| 6 | - {{# filters}} | ||
| 7 | - {{# checkedConditions}} | ||
| 8 | - <div class="checked-conditions section"> | ||
| 9 | - <span class="title">已选条件：</span> | ||
| 10 | - | ||
| 11 | - <div class="attr-content clearfix"> | ||
| 12 | - {{#each conditions}} | ||
| 13 | - <a class="tag" href="{{href}}"> | ||
| 14 | - {{#if name}} | ||
| 15 | - {{name}} | ||
| 16 | - {{^}} | ||
| 17 | - <i class="color-block" style="background: {{color}}"></i> | ||
| 18 | - {{/if}} | ||
| 19 | - <i class="close iconfont"></i> | ||
| 20 | - </a> | ||
| 21 | - {{/each}} | ||
| 22 | - | ||
| 23 | - <a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a> | ||
| 24 | - </div> | ||
| 25 | - </div> | ||
| 26 | - {{/ checkedConditions}} | ||
| 27 | - | ||
| 28 | - {{#if channel}} | ||
| 29 | - <div class="channel section"> | ||
| 30 | - <span class="title">频道：</span> | ||
| 31 | - | ||
| 32 | - <div class="attr-content clearfix"> | ||
| 33 | - {{#each channel}} | ||
| 34 | - <a class="attr" href="{{href}}"> | ||
| 35 | - {{name}} | ||
| 36 | - </a> | ||
| 37 | - {{/each}} | ||
| 38 | - </div> | ||
| 39 | - </div> | ||
| 40 | - {{/if}} | ||
| 41 | - | ||
| 42 | - {{#if sort}} | ||
| 43 | - <div class="sort section"> | ||
| 44 | - <span class="title">分类：</span> | ||
| 45 | - | ||
| 46 | - <div class="attr-content"> | ||
| 47 | - <ul class="sort-pre clearfix"> | ||
| 48 | - {{#each sort}} | ||
| 49 | - <li> | ||
| 50 | - <span class="attr"> | ||
| 51 | - {{name}} | ||
| 52 | - </span> | ||
| 53 | - </li> | ||
| 54 | - {{/each}} | ||
| 55 | - </ul> | ||
| 56 | - | ||
| 57 | - <div class="sort-sub-wrap"> | ||
| 58 | - {{#each sort}} | ||
| 59 | - <ul class="sort-sub clearfix hide"> | ||
| 60 | - {{#each sub}} | ||
| 61 | - <li class="attr"> | ||
| 62 | - <a href="{{href}}">{{name}}</a> | ||
| 63 | - </li> | ||
| 64 | - {{/each}} | ||
| 65 | - </ul> | ||
| 66 | - {{/each}} | ||
| 67 | - </div> | ||
| 68 | - </div> | ||
| 69 | - </div> | ||
| 70 | - {{/if}} | ||
| 71 | - | ||
| 72 | - {{# brand}} | ||
| 73 | - <div class="brand section"> | ||
| 74 | - <span class="title">品牌：</span> | ||
| 75 | - | ||
| 76 | - <div class="attr-content"> | ||
| 77 | - <ul class="default clearfix"> | ||
| 78 | - {{# default}} | ||
| 79 | - <li class="attr"> | ||
| 80 | - <a href="{{href}}" title="{{name}}">{{name}}</a> | ||
| 81 | - </li> | ||
| 82 | - {{/ default}} | ||
| 83 | - </ul> | ||
| 84 | - | ||
| 85 | - <div class="brand-opt"> | ||
| 86 | - <span id="brand-more" class="brand-more"> | ||
| 87 | - <em>更多</em> | ||
| 88 | - <i class="iconfont"></i> | ||
| 89 | - </span> | ||
| 90 | - | ||
| 91 | - <span id="brand-multi" class="multi-select">多选 +</span> | ||
| 92 | - </div> | ||
| 93 | - | ||
| 94 | - <div class="brand-panel hide"> | ||
| 95 | - <div class="panel-head clearfix"> | ||
| 96 | - <p class="brands-index"> | ||
| 97 | - {{#each brandIndex}} | ||
| 98 | - <span data-index="{{index}}">{{name}}</span> | ||
| 99 | - {{/each}} | ||
| 100 | - </p> | ||
| 101 | - | ||
| 102 | - <div class="brand-search"> | ||
| 103 | - <input id="brand-search-input" type="text"> | ||
| 104 | - <span class="btn"> | ||
| 105 | - <i class="iconfont"></i> | ||
| 106 | - </span> | ||
| 107 | - </div> | ||
| 108 | - </div> | ||
| 109 | - | ||
| 110 | - <ul class="panel-body check-container clearfix"> | ||
| 111 | - {{# brandsShow}} | ||
| 112 | - <li class="attr" data-index="{{index}}" data-key="{{key}}"> | ||
| 113 | - <a href="{{href}}"> | ||
| 114 | - <span class="iconfont checkbox" data-id="{{id}}"></span> | ||
| 115 | - <span title="{{name}}">{{name}}</span> | ||
| 116 | - </a> | ||
| 117 | - </li> | ||
| 118 | - {{/ brandsShow}} | ||
| 119 | - </ul> | ||
| 120 | - | ||
| 121 | - <div class="btns"> | ||
| 122 | - <button id="brand-multi-ok" class="multi-select-ok dis">确定</button> | ||
| 123 | - <button class="multi-select-cancel">取消</button> | ||
| 124 | - </div> | ||
| 125 | - </div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - {{/ brand}} | ||
| 129 | - | ||
| 130 | - {{#if price}} | ||
| 131 | - <div class="price section"> | ||
| 132 | - <span class="title">价格：</span> | ||
| 133 | - | ||
| 134 | - <div class="attr-content clearfix"> | ||
| 135 | - {{# price}} | ||
| 136 | - <a class="attr" href="{{href}}">¥{{name}}</a> | ||
| 137 | - {{/ price}} | ||
| 138 | - | ||
| 139 | - <div class="ud-price-range"> | ||
| 140 | - ¥ | ||
| 141 | - <input type="text" class="min limit"> | ||
| 142 | - <span class="price-sep">-</span> | ||
| 143 | - <input type="text" class="max limit"> | ||
| 144 | - | ||
| 145 | - <button class="price-sure hide">确定</button> | ||
| 146 | - </div> | ||
| 147 | - </div> | ||
| 148 | - </div> | ||
| 149 | - {{/if}} | ||
| 150 | - | ||
| 151 | - {{#if color}} | ||
| 152 | - <div class="color section"> | ||
| 153 | - <span class="title">颜色：</span> | ||
| 154 | - | ||
| 155 | - <div class="attr-content clearfix"> | ||
| 156 | - {{# color}} | ||
| 157 | - <a class="attr" href="{{href}}"> | ||
| 158 | - <i class="color-block" style="background: {{rgb}}"></i> | ||
| 159 | - {{name}} | ||
| 160 | - </a> | ||
| 161 | - {{/ color}} | ||
| 162 | - </div> | ||
| 163 | - </div> | ||
| 164 | - {{/if}} | ||
| 165 | - | ||
| 166 | - {{#if size}} | ||
| 167 | - <div class="size section"> | ||
| 168 | - <span class="title">尺码：</span> | ||
| 169 | - | ||
| 170 | - <div class="attr-content clearfix"> | ||
| 171 | - {{# size}} | ||
| 172 | - <a class="attr" href="{{href}}">{{name}}</a> | ||
| 173 | - {{/ size}} | ||
| 174 | - </div> | ||
| 175 | - </div> | ||
| 176 | - {{/if}} | ||
| 177 | - | ||
| 178 | - {{#if seniorChose}} | ||
| 179 | - <div class="senior section"> | ||
| 180 | - <span class="title">高级选项：</span> | ||
| 181 | - | ||
| 182 | - <div class="attr-content"> | ||
| 183 | - <ul class="clearfix senior-attr-wrap"> | ||
| 184 | - {{#each seniorChose}} | ||
| 185 | - <li class="attr"> | ||
| 186 | - {{name}} | ||
| 187 | - <span class="iconfont"></span> | ||
| 188 | - | ||
| 189 | - <div class="senior-up-icon"></div> | ||
| 190 | - </li> | ||
| 191 | - {{/each}} | ||
| 192 | - </ul> | ||
| 193 | - | ||
| 194 | - <div class="senior-sub-wrap"> | ||
| 195 | - {{#each seniorChose}} | ||
| 196 | - <div class="senior-sub hide" data-attr="{{attr}}"> | ||
| 197 | - {{#if showMulti}} | ||
| 198 | - <span class="multi-select">多选 +</span> | ||
| 199 | - {{/if}} | ||
| 200 | - <ul class="clearfix check-container"> | ||
| 201 | - {{#each sub}} | ||
| 202 | - <li class="attr"> | ||
| 203 | - <a href="{{href}}"> | ||
| 204 | - <span class="iconfont checkbox" data-id="{{id}}"></span> | ||
| 205 | - <span>{{name}}</span> | ||
| 206 | - </a> | ||
| 207 | - </li> | ||
| 208 | - {{/each}} | ||
| 209 | - </ul> | ||
| 210 | - <div class="btns"> | ||
| 211 | - <button class="multi-select-ok dis">确定</button> | ||
| 212 | - <button class="multi-select-cancel">取消</button> | ||
| 213 | - </div> | ||
| 214 | - </div> | ||
| 215 | - {{/each}} | ||
| 216 | - </div> | ||
| 217 | - </div> | ||
| 218 | - </div> | ||
| 219 | - {{/if}} | ||
| 220 | - {{/ filters}} | ||
| 221 | - </div> | ||
| 222 | - | ||
| 223 | - <div class="opt-banner"> | ||
| 224 | - {{# opts}} | ||
| 225 | - {{# sortType}} | ||
| 226 | - <a class="sort-type{{#if active}} active{{/if}}" href="{{href}}"> | ||
| 227 | - {{name}} | ||
| 228 | - {{#if hasSortOrient}} | ||
| 229 | - {{#if active}} | ||
| 230 | - {{#if desc}} | ||
| 231 | - <span class="active-icon iconfont"></span> | ||
| 232 | - {{^}} | ||
| 233 | - <span class="active-icon iconfont"></span> | ||
| 234 | - {{/if}} | ||
| 235 | - {{^}} | ||
| 236 | - <span class="iconfont"></span> | ||
| 237 | - {{/if}} | ||
| 238 | - {{^}} | ||
| 239 | - <span class="iconfont"></span> | ||
| 240 | - {{/if}} | ||
| 241 | - </a> | ||
| 242 | - {{/ sortType}} | ||
| 243 | - | ||
| 244 | - {{# checks}} | ||
| 245 | - <a class="checks{{#if checked}} checked{{/if}}" href="{{href}}"> | ||
| 246 | - {{#if checked}} | ||
| 247 | - <span class="iconfont"></span> | ||
| 248 | - {{^}} | ||
| 249 | - <span class="iconfont"></span> | ||
| 250 | - {{/if}} | ||
| 251 | - {{name}} | ||
| 252 | - </a> | ||
| 253 | - {{/ checks}} | ||
| 254 | - | ||
| 255 | - <div class="pager-wrap"> | ||
| 256 | - {{#if fivePerLine}} | ||
| 257 | - <div class="line-count active"> | ||
| 258 | - <span></span> | ||
| 259 | - <span></span> | ||
| 260 | - <span></span> | ||
| 261 | - <span></span> | ||
| 262 | - <span></span> | ||
| 263 | - </div> | ||
| 264 | - | ||
| 265 | - <a class="line-count" href="{{sixPerLineHref}}"> | ||
| 266 | - <span></span> | ||
| 267 | - <span></span> | ||
| 268 | - <span></span> | ||
| 269 | - <span></span> | ||
| 270 | - <span></span> | ||
| 271 | - <span></span> | ||
| 272 | - </a> | ||
| 273 | - {{^}} | ||
| 274 | - <a class="line-count" href="{{fivePerLineHref}}"> | ||
| 275 | - <span></span> | ||
| 276 | - <span></span> | ||
| 277 | - <span></span> | ||
| 278 | - <span></span> | ||
| 279 | - <span></span> | ||
| 280 | - </a> | ||
| 281 | - | ||
| 282 | - <div class="line-count active"> | ||
| 283 | - <span></span> | ||
| 284 | - <span></span> | ||
| 285 | - <span></span> | ||
| 286 | - <span></span> | ||
| 287 | - <span></span> | ||
| 288 | - <span></span> | ||
| 289 | - </div> | ||
| 290 | - {{/if}} | ||
| 291 | - | ||
| 292 | - <div class="page-count"> | ||
| 293 | - <span id="count-per-page"> | ||
| 294 | - {{countPerPage}} | ||
| 295 | - <i class="iconfont"></i> | ||
| 296 | - </span> | ||
| 297 | - 每页 | ||
| 298 | - <ul> | ||
| 299 | - {{# pageCounts}} | ||
| 300 | - <li> | ||
| 301 | - <a href="{{href}}">{{count}}</a> | ||
| 302 | - </li> | ||
| 303 | - {{/ pageCounts}} | ||
| 304 | - </ul> | ||
| 305 | - </div> | ||
| 306 | - | ||
| 307 | - <p class="pager"> | ||
| 308 | - {{#if preHref}} | ||
| 309 | - <a href="{{preHref}}"> | ||
| 310 | - <span class="iconfont"></span> | ||
| 311 | - </a> | ||
| 312 | - {{^}} | ||
| 313 | - <span class="dis-icon iconfont"></span> | ||
| 314 | - {{/if}} | ||
| 315 | - | ||
| 316 | - <span> | ||
| 317 | - <i>{{curPage}}</i>/{{pageCount}} | ||
| 318 | - </span> | ||
| 319 | - | ||
| 320 | - {{#if nextHref}} | ||
| 321 | - <a href="{{nextHref}}"> | ||
| 322 | - <span class="iconfont"></span> | ||
| 323 | - </a> | ||
| 324 | - {{^}} | ||
| 325 | - <span class="dis-icon iconfont"></span> | ||
| 326 | - {{/if}} | ||
| 327 | - </p> | ||
| 328 | - </div> | ||
| 329 | - {{/opts}} | ||
| 330 | - </div> | ||
| 331 | - | ||
| 332 | - <div class="goods-container clearfix{{#if opts.sixPerLine}} six-per-line{{/if}}"> | ||
| 333 | - {{#each goods}} | ||
| 334 | - {{> product/good}} | ||
| 335 | - {{/each}} | ||
| 336 | - <div class="good-item-wrapper"> | ||
| 337 | - <div class="good-info-main"></div> | ||
| 338 | - <div class="good-select-color"></div> | ||
| 339 | - </div> | ||
| 340 | - </div> | ||
| 341 | - {{/ products}} | ||
| 342 | -</div> | ||
| 343 | -{{> layout/footer}} |
| 1 | +{{> layout/header}} | ||
| 2 | +<div class="product-search-page yoho-page"> | ||
| 3 | + {{# products}} | ||
| 4 | + {{> layout/path-nav}} | ||
| 5 | + | ||
| 6 | + {{# filters}} | ||
| 7 | + {{> product/filter-box}} | ||
| 8 | + {{/ filters}} | ||
| 9 | + | ||
| 10 | + {{# opts}} | ||
| 11 | + {{> product/sort-pager}} | ||
| 12 | + {{/ opts}} | ||
| 13 | + | ||
| 14 | + <div class="goods-container clearfix"> | ||
| 15 | + {{#each goods}} | ||
| 16 | + {{> product/good}} | ||
| 17 | + {{/each}} | ||
| 18 | + <div class="good-item-wrapper"> | ||
| 19 | + <div class="good-info-main"></div> | ||
| 20 | + <div class="good-select-color"></div> | ||
| 21 | + </div> | ||
| 22 | + </div> | ||
| 23 | + {{/ products}} | ||
| 24 | +</div> | ||
| 25 | +{{> layout/footer}} |
| 1 | +<div class="filter-box"> | ||
| 2 | + {{# checkedConditions}} | ||
| 3 | + <div class="checked-conditions section"> | ||
| 4 | + <span class="title">已选条件：</span> | ||
| 5 | + | ||
| 6 | + <div class="attr-content clearfix"> | ||
| 7 | + {{#each conditions}} | ||
| 8 | + <a class="tag" href="{{href}}"> | ||
| 9 | + {{#if name}} | ||
| 10 | + {{name}} | ||
| 11 | + {{^}} | ||
| 12 | + <i class="color-block" style="background: {{color}}"></i> | ||
| 13 | + {{/if}} | ||
| 14 | + <i class="close iconfont"></i> | ||
| 15 | + </a> | ||
| 16 | + {{/each}} | ||
| 17 | + | ||
| 18 | + <a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a> | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 21 | + {{/ checkedConditions}} | ||
| 22 | + | ||
| 23 | + {{#if channel}} | ||
| 24 | + <div class="channel section"> | ||
| 25 | + <span class="title">频道：</span> | ||
| 26 | + | ||
| 27 | + <div class="attr-content clearfix"> | ||
| 28 | + {{#each channel}} | ||
| 29 | + <a class="attr" href="{{href}}"> | ||
| 30 | + {{name}} | ||
| 31 | + </a> | ||
| 32 | + {{/each}} | ||
| 33 | + </div> | ||
| 34 | + </div> | ||
| 35 | + {{/if}} | ||
| 36 | + | ||
| 37 | + {{#if sort}} | ||
| 38 | + <div class="sort section"> | ||
| 39 | + <span class="title">分类：</span> | ||
| 40 | + | ||
| 41 | + <div class="attr-content"> | ||
| 42 | + <ul class="sort-pre clearfix"> | ||
| 43 | + {{#each sort}} | ||
| 44 | + <li> | ||
| 45 | + <span class="attr"> | ||
| 46 | + {{name}} | ||
| 47 | + </span> | ||
| 48 | + </li> | ||
| 49 | + {{/each}} | ||
| 50 | + </ul> | ||
| 51 | + | ||
| 52 | + <div class="sort-sub-wrap"> | ||
| 53 | + {{#each sort}} | ||
| 54 | + <ul class="sort-sub clearfix hide"> | ||
| 55 | + {{#each sub}} | ||
| 56 | + <li class="attr"> | ||
| 57 | + <a href="{{href}}">{{name}}</a> | ||
| 58 | + </li> | ||
| 59 | + {{/each}} | ||
| 60 | + </ul> | ||
| 61 | + {{/each}} | ||
| 62 | + </div> | ||
| 63 | + </div> | ||
| 64 | + </div> | ||
| 65 | + {{/if}} | ||
| 66 | + | ||
| 67 | + {{# brand}} | ||
| 68 | + <div class="brand section"> | ||
| 69 | + <span class="title">品牌：</span> | ||
| 70 | + | ||
| 71 | + <div class="attr-content"> | ||
| 72 | + <ul class="default clearfix"> | ||
| 73 | + {{# default}} | ||
| 74 | + <li class="attr"> | ||
| 75 | + <a href="{{href}}" title="{{name}}">{{name}}</a> | ||
| 76 | + </li> | ||
| 77 | + {{/ default}} | ||
| 78 | + </ul> | ||
| 79 | + | ||
| 80 | + <div class="brand-opt"> | ||
| 81 | + <span id="brand-more" class="brand-more"> | ||
| 82 | + <em>更多</em> | ||
| 83 | + <i class="iconfont"></i> | ||
| 84 | + </span> | ||
| 85 | + | ||
| 86 | + <span id="brand-multi" class="multi-select">多选 +</span> | ||
| 87 | + </div> | ||
| 88 | + | ||
| 89 | + <div class="brand-panel hide"> | ||
| 90 | + <div class="panel-head clearfix"> | ||
| 91 | + <p class="brands-index"> | ||
| 92 | + {{#each brandIndex}} | ||
| 93 | + <span data-index="{{index}}">{{name}}</span> | ||
| 94 | + {{/each}} | ||
| 95 | + </p> | ||
| 96 | + | ||
| 97 | + <div class="brand-search"> | ||
| 98 | + <input id="brand-search-input" type="text"> | ||
| 99 | + <span class="btn"> | ||
| 100 | + <i class="iconfont"></i> | ||
| 101 | + </span> | ||
| 102 | + </div> | ||
| 103 | + </div> | ||
| 104 | + | ||
| 105 | + <ul class="panel-body check-container clearfix"> | ||
| 106 | + {{# brandsShow}} | ||
| 107 | + <li class="attr" data-index="{{index}}" data-key="{{key}}"> | ||
| 108 | + <a href="{{href}}"> | ||
| 109 | + <span class="iconfont checkbox" data-id="{{id}}"></span> | ||
| 110 | + <span title="{{name}}">{{name}}</span> | ||
| 111 | + </a> | ||
| 112 | + </li> | ||
| 113 | + {{/ brandsShow}} | ||
| 114 | + </ul> | ||
| 115 | + | ||
| 116 | + <div class="btns"> | ||
| 117 | + <button id="brand-multi-ok" class="multi-select-ok dis">确定</button> | ||
| 118 | + <button class="multi-select-cancel">取消</button> | ||
| 119 | + </div> | ||
| 120 | + </div> | ||
| 121 | + </div> | ||
| 122 | + </div> | ||
| 123 | + {{/ brand}} | ||
| 124 | + | ||
| 125 | + {{#if price}} | ||
| 126 | + <div class="price section"> | ||
| 127 | + <span class="title">价格：</span> | ||
| 128 | + | ||
| 129 | + <div class="attr-content clearfix"> | ||
| 130 | + {{# price}} | ||
| 131 | + <a class="attr" href="{{href}}">¥{{name}}</a> | ||
| 132 | + {{/ price}} | ||
| 133 | + | ||
| 134 | + <div class="ud-price-range"> | ||
| 135 | + ¥ | ||
| 136 | + <input type="text" class="min limit"> | ||
| 137 | + <span class="price-sep">-</span> | ||
| 138 | + <input type="text" class="max limit"> | ||
| 139 | + | ||
| 140 | + <button class="price-sure hide">确定</button> | ||
| 141 | + </div> | ||
| 142 | + </div> | ||
| 143 | + </div> | ||
| 144 | + {{/if}} | ||
| 145 | + | ||
| 146 | + {{#if color}} | ||
| 147 | + <div class="color section"> | ||
| 148 | + <span class="title">颜色：</span> | ||
| 149 | + | ||
| 150 | + <div class="attr-content clearfix"> | ||
| 151 | + {{# color}} | ||
| 152 | + <a class="attr" href="{{href}}"> | ||
| 153 | + <i class="color-block" style="background: {{rgb}}"></i> | ||
| 154 | + {{name}} | ||
| 155 | + </a> | ||
| 156 | + {{/ color}} | ||
| 157 | + </div> | ||
| 158 | + </div> | ||
| 159 | + {{/if}} | ||
| 160 | + | ||
| 161 | + {{#if size}} | ||
| 162 | + <div class="size section"> | ||
| 163 | + <span class="title">尺码：</span> | ||
| 164 | + | ||
| 165 | + <div class="attr-content clearfix"> | ||
| 166 | + {{# size}} | ||
| 167 | + <a class="attr" href="{{href}}">{{name}}</a> | ||
| 168 | + {{/ size}} | ||
| 169 | + </div> | ||
| 170 | + </div> | ||
| 171 | + {{/if}} | ||
| 172 | + | ||
| 173 | + {{#if seniorChose}} | ||
| 174 | + <div class="senior section"> | ||
| 175 | + <span class="title">高级选项：</span> | ||
| 176 | + | ||
| 177 | + <div class="attr-content"> | ||
| 178 | + <ul class="clearfix senior-attr-wrap"> | ||
| 179 | + {{#each seniorChose}} | ||
| 180 | + <li class="attr"> | ||
| 181 | + {{name}} | ||
| 182 | + <span class="iconfont"></span> | ||
| 183 | + | ||
| 184 | + <div class="senior-up-icon"></div> | ||
| 185 | + </li> | ||
| 186 | + {{/each}} | ||
| 187 | + </ul> | ||
| 188 | + | ||
| 189 | + <div class="senior-sub-wrap"> | ||
| 190 | + {{#each seniorChose}} | ||
| 191 | + <div class="senior-sub hide" data-attr="{{attr}}"> | ||
| 192 | + {{#if showMulti}} | ||
| 193 | + <span class="multi-select">多选 +</span> | ||
| 194 | + {{/if}} | ||
| 195 | + <ul class="clearfix check-container"> | ||
| 196 | + {{#each sub}} | ||
| 197 | + <li class="attr"> | ||
| 198 | + <a href="{{href}}"> | ||
| 199 | + <span class="iconfont checkbox" data-id="{{id}}"></span> | ||
| 200 | + <span>{{name}}</span> | ||
| 201 | + </a> | ||
| 202 | + </li> | ||
| 203 | + {{/each}} | ||
| 204 | + </ul> | ||
| 205 | + <div class="btns"> | ||
| 206 | + <button class="multi-select-ok dis">确定</button> | ||
| 207 | + <button class="multi-select-cancel">取消</button> | ||
| 208 | + </div> | ||
| 209 | + </div> | ||
| 210 | + {{/each}} | ||
| 211 | + </div> | ||
| 212 | + </div> | ||
| 213 | + </div> | ||
| 214 | + {{/if}} | ||
| 215 | +</div> |
| 1 | +<div class="sort-pager"> | ||
| 2 | + {{# sortType}} | ||
| 3 | + <a class="sort-type{{#if active}} active{{/if}}" href="{{href}}"> | ||
| 4 | + {{name}} | ||
| 5 | + {{#if hasSortOrient}} | ||
| 6 | + {{#if active}} | ||
| 7 | + {{#if desc}} | ||
| 8 | + <span class="active-icon iconfont"></span> | ||
| 9 | + {{^}} | ||
| 10 | + <span class="active-icon iconfont"></span> | ||
| 11 | + {{/if}} | ||
| 12 | + {{^}} | ||
| 13 | + <span class="iconfont"></span> | ||
| 14 | + {{/if}} | ||
| 15 | + {{^}} | ||
| 16 | + <span class="iconfont"></span> | ||
| 17 | + {{/if}} | ||
| 18 | + </a> | ||
| 19 | + {{/ sortType}} | ||
| 20 | + | ||
| 21 | + {{# checks}} | ||
| 22 | + <a class="checks{{#if checked}} checked{{/if}}" href="{{href}}"> | ||
| 23 | + {{#if checked}} | ||
| 24 | + <span class="iconfont"></span> | ||
| 25 | + {{^}} | ||
| 26 | + <span class="iconfont"></span> | ||
| 27 | + {{/if}} | ||
| 28 | + {{name}} | ||
| 29 | + </a> | ||
| 30 | + {{/ checks}} | ||
| 31 | + | ||
| 32 | + <div class="pager-wrap"> | ||
| 33 | + <div class="page-count"> | ||
| 34 | + <span id="count-per-page"> | ||
| 35 | + {{countPerPage}} | ||
| 36 | + <i class="iconfont"></i> | ||
| 37 | + </span> | ||
| 38 | + 每页 | ||
| 39 | + <ul> | ||
| 40 | + {{# pageCounts}} | ||
| 41 | + <li> | ||
| 42 | + <a href="{{href}}">{{count}}</a> | ||
| 43 | + </li> | ||
| 44 | + {{/ pageCounts}} | ||
| 45 | + </ul> | ||
| 46 | + </div> | ||
| 47 | + | ||
| 48 | + <p class="pager"> | ||
| 49 | + {{#if preHref}} | ||
| 50 | + <a href="{{preHref}}"> | ||
| 51 | + <span class="iconfont"></span> | ||
| 52 | + </a> | ||
| 53 | + {{^}} | ||
| 54 | + <span class="dis-icon iconfont"></span> | ||
| 55 | + {{/if}} | ||
| 56 | + | ||
| 57 | + <span> | ||
| 58 | + <i>{{curPage}}</i>/{{pageCount}} | ||
| 59 | + </span> | ||
| 60 | + | ||
| 61 | + {{#if nextHref}} | ||
| 62 | + <a href="{{nextHref}}"> | ||
| 63 | + <span class="iconfont"></span> | ||
| 64 | + </a> | ||
| 65 | + {{^}} | ||
| 66 | + <span class="dis-icon iconfont"></span> | ||
| 67 | + {{/if}} | ||
| 68 | + </p> | ||
| 69 | + </div> | ||
| 70 | +</div> |
web-static/sass/product/_filter-box.scss
0 → 100644
| 1 | +.filter-box { | ||
| 2 | + border: 1px solid #dfdfdf; | ||
| 3 | + | ||
| 4 | + .section { | ||
| 5 | + padding: 10px 15px; | ||
| 6 | + font-size: 14px; | ||
| 7 | + border-top: 1px solid #dfdfdf; | ||
| 8 | + | ||
| 9 | + &:first-child { | ||
| 10 | + border-top: none; | ||
| 11 | + background: #eaeceb; | ||
| 12 | + } | ||
| 13 | + } | ||
| 14 | + | ||
| 15 | + .title { | ||
| 16 | + float: left; | ||
| 17 | + width: 90px; | ||
| 18 | + line-height: 30px; | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + .attr-content { | ||
| 22 | + margin-left: 90px; | ||
| 23 | + } | ||
| 24 | + | ||
| 25 | + .multi-select { | ||
| 26 | + display: inline-block; | ||
| 27 | + width: 60px; | ||
| 28 | + height: 18px; | ||
| 29 | + line-height: 18px; | ||
| 30 | + border: 1px solid #000; | ||
| 31 | + text-align: center; | ||
| 32 | + cursor: pointer; | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .attr { | ||
| 36 | + display: block; | ||
| 37 | + float: left; | ||
| 38 | + padding: 0 10px; | ||
| 39 | + margin-right: 30px; | ||
| 40 | + line-height: 30px; | ||
| 41 | + cursor: pointer; | ||
| 42 | + | ||
| 43 | + &:first-child { | ||
| 44 | + margin-left: 0; | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + -moz-user-select: none; | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + .checked-conditions { | ||
| 51 | + line-height: 30px; | ||
| 52 | + | ||
| 53 | + .tag { | ||
| 54 | + display: block; | ||
| 55 | + float: left; | ||
| 56 | + padding: 0 10px; | ||
| 57 | + margin-right: 30px; | ||
| 58 | + background: #000; | ||
| 59 | + color: #fff; | ||
| 60 | + cursor: pointer; | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + .color-block { | ||
| 64 | + height: 14px; | ||
| 65 | + width: 14px; | ||
| 66 | + border: 1px solid #fff; | ||
| 67 | + margin-bottom: -3px; | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + .clear-checked { | ||
| 71 | + color: #999; | ||
| 72 | + float: right; | ||
| 73 | + } | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .sort-sub-wrap { | ||
| 77 | + width: 100%; | ||
| 78 | + | ||
| 79 | + .sort-sub { | ||
| 80 | + padding: 15px 0; | ||
| 81 | + } | ||
| 82 | + } | ||
| 83 | + | ||
| 84 | + .brand { | ||
| 85 | + position: relative; | ||
| 86 | + | ||
| 87 | + .attr { | ||
| 88 | + box-sizing: border-box; | ||
| 89 | + width: 20%; | ||
| 90 | + margin: 0; | ||
| 91 | + overflow: hidden; | ||
| 92 | + white-space: nowrap; | ||
| 93 | + text-overflow: ellipsis; | ||
| 94 | + } | ||
| 95 | + | ||
| 96 | + .attr-content { | ||
| 97 | + max-width: 900px; | ||
| 98 | + } | ||
| 99 | + | ||
| 100 | + .brand-opt { | ||
| 101 | + position: absolute; | ||
| 102 | + right: 20px; | ||
| 103 | + top: 15px; | ||
| 104 | + } | ||
| 105 | + | ||
| 106 | + .brand-more { | ||
| 107 | + margin-right: 20px; | ||
| 108 | + cursor: pointer; | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + .brands-index { | ||
| 112 | + float: left; | ||
| 113 | + line-height: 30px; | ||
| 114 | + | ||
| 115 | + span { | ||
| 116 | + margin: 0 5px; | ||
| 117 | + cursor: pointer; | ||
| 118 | + -moz-user-select: none; | ||
| 119 | + | ||
| 120 | + &:first-child { | ||
| 121 | + margin-left: 10px; | ||
| 122 | + } | ||
| 123 | + } | ||
| 124 | + } | ||
| 125 | + | ||
| 126 | + .brand-search { | ||
| 127 | + float: left; | ||
| 128 | + height: 18px; | ||
| 129 | + line-height: 18px; | ||
| 130 | + border: 1px solid #b0b0b0; | ||
| 131 | + margin-top: 5px; | ||
| 132 | + margin-left: 15px; | ||
| 133 | + | ||
| 134 | + input { | ||
| 135 | + float: left; | ||
| 136 | + border: none; | ||
| 137 | + width: 100px; | ||
| 138 | + height: 18px; | ||
| 139 | + padding: 0; | ||
| 140 | + } | ||
| 141 | + | ||
| 142 | + .btn { | ||
| 143 | + display: inline-block; | ||
| 144 | + width: 55px; | ||
| 145 | + height: 18px; | ||
| 146 | + background: #b0b0b0; | ||
| 147 | + color: #fff; | ||
| 148 | + text-align: center; | ||
| 149 | + cursor: default; | ||
| 150 | + } | ||
| 151 | + } | ||
| 152 | + | ||
| 153 | + .panel-body { | ||
| 154 | + padding: 15px 20px; | ||
| 155 | + margin-top: 5px; | ||
| 156 | + background: #f4f7f6; | ||
| 157 | + min-height: 30px; | ||
| 158 | + border: 1px solid #000; | ||
| 159 | + } | ||
| 160 | + } | ||
| 161 | + | ||
| 162 | + .btns { | ||
| 163 | + display: none; | ||
| 164 | + margin-top: 10px; | ||
| 165 | + text-align: center; | ||
| 166 | + } | ||
| 167 | + | ||
| 168 | + .multi .btns { | ||
| 169 | + display: block; | ||
| 170 | + } | ||
| 171 | + | ||
| 172 | + .multi-select-ok, .multi-select-cancel { | ||
| 173 | + width: 55px; | ||
| 174 | + height: 24px; | ||
| 175 | + border: none; | ||
| 176 | + background: #000; | ||
| 177 | + color: #fff; | ||
| 178 | + font-size: 15px; | ||
| 179 | + margin-right: 15px; | ||
| 180 | + cursor: pointer; | ||
| 181 | + | ||
| 182 | + &.dis { | ||
| 183 | + background: #ccc; | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | + | ||
| 187 | + .ud-price-range { | ||
| 188 | + margin-top: 2px; | ||
| 189 | + } | ||
| 190 | + | ||
| 191 | + .limit { | ||
| 192 | + height: 22px; | ||
| 193 | + width: 42px; | ||
| 194 | + border: 1px solid #ccc; | ||
| 195 | + padding: 0; | ||
| 196 | + } | ||
| 197 | + | ||
| 198 | + .price-sep { | ||
| 199 | + margin: 0 5px; | ||
| 200 | + } | ||
| 201 | + | ||
| 202 | + .price-sure { | ||
| 203 | + height: 24px; | ||
| 204 | + width: 44px; | ||
| 205 | + border: 1px solid #e0e0e0; | ||
| 206 | + background: #fff; | ||
| 207 | + color: #666; | ||
| 208 | + margin-left: 10px; | ||
| 209 | + } | ||
| 210 | + | ||
| 211 | + .color-block { | ||
| 212 | + display: inline-block; | ||
| 213 | + height: 22px; | ||
| 214 | + width: 22px; | ||
| 215 | + border: 1px solid #ccc; | ||
| 216 | + margin-bottom: -6px; | ||
| 217 | + margin-right: 5px; | ||
| 218 | + } | ||
| 219 | + | ||
| 220 | + .senior { | ||
| 221 | + padding-bottom: 6px; | ||
| 222 | + | ||
| 223 | + .attr-content { | ||
| 224 | + position: relative; | ||
| 225 | + } | ||
| 226 | + } | ||
| 227 | + | ||
| 228 | + .senior-attr-wrap { | ||
| 229 | + position: relative; | ||
| 230 | + } | ||
| 231 | + | ||
| 232 | + .senior-attr-wrap > .attr:hover, | ||
| 233 | + .senior-attr-wrap > .attr.hover { | ||
| 234 | + > .iconfont { | ||
| 235 | + visibility: hidden; | ||
| 236 | + } | ||
| 237 | + | ||
| 238 | + .senior-up-icon { | ||
| 239 | + visibility: visible; | ||
| 240 | + } | ||
| 241 | + } | ||
| 242 | + | ||
| 243 | + .senior-sub { | ||
| 244 | + box-sizing: border-box; | ||
| 245 | + position: absolute; | ||
| 246 | + padding: 15px 0; | ||
| 247 | + left: 0; | ||
| 248 | + right: 0; | ||
| 249 | + top: 39px; | ||
| 250 | + background: #fff; | ||
| 251 | + border: 1px solid #eaeceb; | ||
| 252 | + | ||
| 253 | + ul { | ||
| 254 | + max-width: 950px; | ||
| 255 | + } | ||
| 256 | + | ||
| 257 | + &.multi .multi-select { | ||
| 258 | + display: none; | ||
| 259 | + } | ||
| 260 | + | ||
| 261 | + .multi-select { | ||
| 262 | + position: absolute; | ||
| 263 | + top: 20px; | ||
| 264 | + right: 15px; | ||
| 265 | + } | ||
| 266 | + } | ||
| 267 | + | ||
| 268 | + .senior-up-icon { | ||
| 269 | + width: 100%; | ||
| 270 | + height: 9px; | ||
| 271 | + z-index: 1; | ||
| 272 | + margin-left: -11px; | ||
| 273 | + visibility: hidden; | ||
| 274 | + | ||
| 275 | + background: image-url('product/senior-up.png') no-repeat; | ||
| 276 | + background-position-x: 50%; | ||
| 277 | + } | ||
| 278 | + | ||
| 279 | + .checkbox { | ||
| 280 | + display: none; | ||
| 281 | + } | ||
| 282 | + | ||
| 283 | + .multi .checkbox { | ||
| 284 | + display: inline; | ||
| 285 | + } | ||
| 286 | +} |
| 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 | - background: #eaeceb; | ||
| 14 | - } | ||
| 15 | - } | ||
| 16 | - | ||
| 17 | - .title { | ||
| 18 | - float: left; | ||
| 19 | - width: 90px; | ||
| 20 | - line-height: 30px; | ||
| 21 | - } | ||
| 22 | - | ||
| 23 | - .attr-content { | ||
| 24 | - margin-left: 90px; | ||
| 25 | - } | ||
| 26 | - | ||
| 27 | - .multi-select { | ||
| 28 | - display: inline-block; | ||
| 29 | - width: 60px; | ||
| 30 | - height: 18px; | ||
| 31 | - line-height: 18px; | ||
| 32 | - border: 1px solid #000; | ||
| 33 | - text-align: center; | ||
| 34 | - cursor: pointer; | ||
| 35 | - } | ||
| 36 | - | ||
| 37 | - .attr { | ||
| 38 | - display: block; | ||
| 39 | - float: left; | ||
| 40 | - padding: 0 10px; | ||
| 41 | - margin-right: 30px; | ||
| 42 | - line-height: 30px; | ||
| 43 | - cursor: pointer; | ||
| 44 | - | ||
| 45 | - &:first-child { | ||
| 46 | - margin-left: 0; | ||
| 47 | - } | ||
| 48 | - | ||
| 49 | - -moz-user-select: none; | ||
| 50 | - } | ||
| 51 | - | ||
| 52 | - .checked-conditions { | ||
| 53 | - line-height: 30px; | ||
| 54 | - | ||
| 55 | - .tag { | ||
| 56 | - display: block; | ||
| 57 | - float: left; | ||
| 58 | - padding: 0 10px; | ||
| 59 | - margin-right: 30px; | ||
| 60 | - background: #000; | ||
| 61 | - color: #fff; | ||
| 62 | - cursor: pointer; | ||
| 63 | - } | ||
| 64 | - | ||
| 65 | - .color-block { | ||
| 66 | - height: 14px; | ||
| 67 | - width: 14px; | ||
| 68 | - border: 1px solid #fff; | ||
| 69 | - margin-bottom: -3px; | ||
| 70 | - } | ||
| 71 | - | ||
| 72 | - .clear-checked { | ||
| 73 | - color: #999; | ||
| 74 | - float: right; | ||
| 75 | - } | ||
| 76 | - } | ||
| 77 | - | ||
| 78 | - .sort-sub-wrap { | ||
| 79 | - width: 100%; | ||
| 80 | - | ||
| 81 | - .sort-sub { | ||
| 82 | - padding: 15px 0; | ||
| 83 | - } | ||
| 84 | - } | ||
| 85 | - | ||
| 86 | - .brand { | ||
| 87 | - position: relative; | ||
| 88 | - | ||
| 89 | - .attr { | ||
| 90 | - box-sizing: border-box; | ||
| 91 | - width: 20%; | ||
| 92 | - margin: 0; | ||
| 93 | - overflow: hidden; | ||
| 94 | - white-space: nowrap; | ||
| 95 | - text-overflow: ellipsis; | ||
| 96 | - } | ||
| 97 | - | ||
| 98 | - .attr-content { | ||
| 99 | - max-width: 900px; | ||
| 100 | - } | ||
| 101 | - | ||
| 102 | - .brand-opt { | ||
| 103 | - position: absolute; | ||
| 104 | - right: 20px; | ||
| 105 | - top: 15px; | ||
| 106 | - } | ||
| 107 | - | ||
| 108 | - .brand-more { | ||
| 109 | - margin-right: 20px; | ||
| 110 | - cursor: pointer; | ||
| 111 | - } | ||
| 112 | - | ||
| 113 | - .brands-index { | ||
| 114 | - float: left; | ||
| 115 | - line-height: 30px; | ||
| 116 | - | ||
| 117 | - span { | ||
| 118 | - margin: 0 5px; | ||
| 119 | - cursor: pointer; | ||
| 120 | - -moz-user-select: none; | ||
| 121 | - | ||
| 122 | - &:first-child { | ||
| 123 | - margin-left: 10px; | ||
| 124 | - } | ||
| 125 | - } | ||
| 126 | - } | ||
| 127 | - | ||
| 128 | - .brand-search { | ||
| 129 | - float: left; | ||
| 130 | - height: 18px; | ||
| 131 | - line-height: 18px; | ||
| 132 | - border: 1px solid #b0b0b0; | ||
| 133 | - margin-top: 5px; | ||
| 134 | - margin-left: 15px; | ||
| 135 | - | ||
| 136 | - input { | ||
| 137 | - float: left; | ||
| 138 | - border: none; | ||
| 139 | - width: 100px; | ||
| 140 | - height: 18px; | ||
| 141 | - padding: 0; | ||
| 142 | - } | ||
| 143 | - | ||
| 144 | - .btn { | ||
| 145 | - display: inline-block; | ||
| 146 | - width: 55px; | ||
| 147 | - height: 18px; | ||
| 148 | - background: #b0b0b0; | ||
| 149 | - color: #fff; | ||
| 150 | - text-align: center; | ||
| 151 | - cursor: default; | ||
| 152 | - } | ||
| 153 | - } | ||
| 154 | - | ||
| 155 | - .panel-body { | ||
| 156 | - padding: 15px 20px; | ||
| 157 | - margin-top: 5px; | ||
| 158 | - background: #f4f7f6; | ||
| 159 | - min-height: 30px; | ||
| 160 | - border: 1px solid #000; | ||
| 161 | - } | ||
| 162 | - } | ||
| 163 | - | ||
| 164 | - .btns { | ||
| 165 | - display: none; | ||
| 166 | - margin-top: 10px; | ||
| 167 | - text-align: center; | ||
| 168 | - } | ||
| 169 | - | ||
| 170 | - .multi .btns { | ||
| 171 | - display: block; | ||
| 172 | - } | ||
| 173 | - | ||
| 174 | - .multi-select-ok, .multi-select-cancel { | ||
| 175 | - width: 55px; | ||
| 176 | - height: 24px; | ||
| 177 | - border: none; | ||
| 178 | - background: #000; | ||
| 179 | - color: #fff; | ||
| 180 | - font-size: 15px; | ||
| 181 | - margin-right: 15px; | ||
| 182 | - cursor: pointer; | ||
| 183 | - | ||
| 184 | - &.dis { | ||
| 185 | - background: #ccc; | ||
| 186 | - } | ||
| 187 | - } | ||
| 188 | - | ||
| 189 | - .ud-price-range { | ||
| 190 | - margin-top: 2px; | ||
| 191 | - } | ||
| 192 | - | ||
| 193 | - .limit { | ||
| 194 | - height: 22px; | ||
| 195 | - width: 42px; | ||
| 196 | - border: 1px solid #ccc; | ||
| 197 | - padding: 0; | ||
| 198 | - } | ||
| 199 | - | ||
| 200 | - .price-sep { | ||
| 201 | - margin: 0 5px; | ||
| 202 | - } | ||
| 203 | - | ||
| 204 | - .price-sure { | ||
| 205 | - height: 24px; | ||
| 206 | - width: 44px; | ||
| 207 | - border: 1px solid #e0e0e0; | ||
| 208 | - background: #fff; | ||
| 209 | - color: #666; | ||
| 210 | - margin-left: 10px; | ||
| 211 | - } | ||
| 212 | - | ||
| 213 | - .color-block { | ||
| 214 | - display: inline-block; | ||
| 215 | - height: 22px; | ||
| 216 | - width: 22px; | ||
| 217 | - border: 1px solid #ccc; | ||
| 218 | - margin-bottom: -6px; | ||
| 219 | - margin-right: 5px; | ||
| 220 | - } | ||
| 221 | - | ||
| 222 | - .senior { | ||
| 223 | - padding-bottom: 6px; | ||
| 224 | - | ||
| 225 | - .attr-content { | ||
| 226 | - position: relative; | ||
| 227 | - } | ||
| 228 | - } | ||
| 229 | - | ||
| 230 | - .senior-attr-wrap { | ||
| 231 | - position: relative; | ||
| 232 | - } | ||
| 233 | - | ||
| 234 | - .senior-attr-wrap > .attr:hover, | ||
| 235 | - .senior-attr-wrap > .attr.hover { | ||
| 236 | - > .iconfont { | ||
| 237 | - visibility: hidden; | ||
| 238 | - } | ||
| 239 | - | ||
| 240 | - .senior-up-icon { | ||
| 241 | - visibility: visible; | ||
| 242 | - } | ||
| 243 | - } | ||
| 244 | - | ||
| 245 | - .senior-sub { | ||
| 246 | - box-sizing: border-box; | ||
| 247 | - position: absolute; | ||
| 248 | - padding: 15px 0; | ||
| 249 | - left: 0; | ||
| 250 | - right: 0; | ||
| 251 | - top: 39px; | ||
| 252 | - background: #fff; | ||
| 253 | - border: 1px solid #eaeceb; | ||
| 254 | - | ||
| 255 | - ul { | ||
| 256 | - max-width: 950px; | ||
| 257 | - } | ||
| 258 | - | ||
| 259 | - &.multi .multi-select { | ||
| 260 | - display: none; | ||
| 261 | - } | ||
| 262 | - | ||
| 263 | - .multi-select { | ||
| 264 | - position: absolute; | ||
| 265 | - top: 20px; | ||
| 266 | - right: 15px; | ||
| 267 | - } | ||
| 268 | - } | ||
| 269 | - | ||
| 270 | - .senior-up-icon { | ||
| 271 | - width: 100%; | ||
| 272 | - height: 9px; | ||
| 273 | - z-index: 1; | ||
| 274 | - margin-left: -11px; | ||
| 275 | - visibility: hidden; | ||
| 276 | - | ||
| 277 | - background: image-url('product/senior-up.png') no-repeat; | ||
| 278 | - background-position-x: 50%; | ||
| 279 | - } | ||
| 280 | - | ||
| 281 | - .checkbox { | ||
| 282 | - display: none; | ||
| 283 | - } | ||
| 284 | - | ||
| 285 | - .multi .checkbox { | ||
| 286 | - display: inline; | ||
| 287 | - } | ||
| 288 | - | ||
| 289 | - /*商品列表 | ||
| 290 | - *Added by wangchenglong at 2015/12/1 | ||
| 291 | - */ | ||
| 292 | - .goods-container { | ||
| 293 | - height: auto; | ||
| 294 | - padding: 25px 15px 0 15px; | ||
| 295 | - overflow: hidden; | ||
| 296 | - position: relative; | ||
| 297 | - width: 1150px + 10px; | ||
| 298 | - | ||
| 299 | - //标签 | ||
| 300 | - .tag-container { | ||
| 301 | - font-size: 12px; | ||
| 302 | - height: 22px; | ||
| 303 | - line-height: 22px; | ||
| 304 | - | ||
| 305 | - .good-tag { | ||
| 306 | - padding: 0 7px; | ||
| 307 | - display: block; | ||
| 308 | - float: left; | ||
| 309 | - margin-right: 3px; | ||
| 310 | - | ||
| 311 | - &:nth-last-of-type(1) { | ||
| 312 | - margin-right: 0; | ||
| 313 | - } | ||
| 314 | - | ||
| 315 | - @each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d), | ||
| 316 | - (renew-tag, #fff, #78dc7e), | ||
| 317 | - (new-festival-tag, #fff, #000000), | ||
| 318 | - (yep-tag, #fff, #ff565b), | ||
| 319 | - (ymp-tag, #fff, #ff565b), | ||
| 320 | - (sale-tag, #fff, #ff565b) { | ||
| 321 | - &.#{$tag} { | ||
| 322 | - color: $tagColor; | ||
| 323 | - background: $tagBackground; | ||
| 324 | - } | ||
| 325 | - } | ||
| 326 | - &.limit-tag { | ||
| 327 | - color: #4e4e4e; | ||
| 328 | - border: 1px solid #4e4e4e; | ||
| 329 | - } | ||
| 330 | - } | ||
| 331 | - } | ||
| 332 | - | ||
| 333 | - //商品列表 | ||
| 334 | - .good-info { | ||
| 335 | - height: 400px; //todo | ||
| 336 | - margin-bottom: 35px; | ||
| 337 | - width: 222px; | ||
| 338 | - margin-right: 10px; | ||
| 339 | - float: left; | ||
| 340 | - | ||
| 341 | - //图片 | ||
| 342 | - .good-detail-img { | ||
| 343 | - width: 100%; | ||
| 344 | - height: 300px; | ||
| 345 | - position: relative; | ||
| 346 | - | ||
| 347 | - .good-thumb, img.lazy { | ||
| 348 | - display: block; | ||
| 349 | - overflow: hidden; | ||
| 350 | - width: 100%; | ||
| 351 | - height: 100%; | ||
| 352 | - } | ||
| 353 | - .few-tag { | ||
| 354 | - width: 100%; | ||
| 355 | - position: absolute; | ||
| 356 | - left: 0; | ||
| 357 | - height: 16px; | ||
| 358 | - line-height: 16px; | ||
| 359 | - background: #ffac5b; | ||
| 360 | - color: #fff; | ||
| 361 | - font-size: 12px; | ||
| 362 | - text-align: center; | ||
| 363 | - bottom: 0; | ||
| 364 | - } | ||
| 365 | - } | ||
| 366 | - | ||
| 367 | - //文本 | ||
| 368 | - .good-detail-text { | ||
| 369 | - color: #222; | ||
| 370 | - font-size: 12px; | ||
| 371 | - text-align: center; | ||
| 372 | - | ||
| 373 | - > a { | ||
| 374 | - margin-top: 16px; | ||
| 375 | - line-height: 1.5; | ||
| 376 | - display: block; | ||
| 377 | - } | ||
| 378 | - | ||
| 379 | - > .price { | ||
| 380 | - margin-top: 10px; | ||
| 381 | - } | ||
| 382 | - } | ||
| 383 | - | ||
| 384 | - .col-btn { | ||
| 385 | - position: absolute; | ||
| 386 | - top: 15px; | ||
| 387 | - right: 15px; | ||
| 388 | - color: #ccc; | ||
| 389 | - font-size: 12px; | ||
| 390 | - display: none; | ||
| 391 | - } | ||
| 392 | - } | ||
| 393 | - | ||
| 394 | - //弹层 | ||
| 395 | - .good-item-wrapper { | ||
| 396 | - border: 1px solid #dddddd; | ||
| 397 | - padding-left: 20px; | ||
| 398 | - padding-top: 18px; | ||
| 399 | - padding-right: 20px; | ||
| 400 | - position: absolute; | ||
| 401 | - background: #fff; | ||
| 402 | - display: none; | ||
| 403 | - | ||
| 404 | - .good-info-main{ | ||
| 405 | - float: left; | ||
| 406 | - | ||
| 407 | - .col-btn { | ||
| 408 | - display: block; | ||
| 409 | - | ||
| 410 | - &:hover { | ||
| 411 | - color: #f95b4f; | ||
| 412 | - cursor: pointer; | ||
| 413 | - } | ||
| 414 | - } | ||
| 415 | - } | ||
| 416 | - | ||
| 417 | - .good-select-color { | ||
| 418 | - float: left; | ||
| 419 | - margin-top: 22px; | ||
| 420 | - | ||
| 421 | - ul { | ||
| 422 | - display: block; | ||
| 423 | - float: left; | ||
| 424 | - margin-left: 15px; | ||
| 425 | - } | ||
| 426 | - | ||
| 427 | - li { | ||
| 428 | - width: 50px; | ||
| 429 | - margin-bottom: 15px; | ||
| 430 | - | ||
| 431 | - a, img { | ||
| 432 | - display: block; | ||
| 433 | - overflow: hidden; | ||
| 434 | - width: 100%; | ||
| 435 | - } | ||
| 436 | - } | ||
| 437 | - } | ||
| 438 | - | ||
| 439 | - .good-info { | ||
| 440 | - margin-right: 10px; | ||
| 441 | - } | ||
| 442 | - } | ||
| 443 | - | ||
| 444 | - //每行六个商品 | ||
| 445 | - &.six-per-line { | ||
| 446 | - .good-info { | ||
| 447 | - height: 400px; //todo | ||
| 448 | - margin-bottom: 35px; | ||
| 449 | - width: 222px; | ||
| 450 | - | ||
| 451 | - //图片 | ||
| 452 | - .good-detail-img { | ||
| 453 | - width: 100%; | ||
| 454 | - height: 300px; | ||
| 455 | - position: relative; | ||
| 456 | - | ||
| 457 | - .good-thumb, img.lazy { | ||
| 458 | - display: block; | ||
| 459 | - overflow: hidden; | ||
| 460 | - width: 100%; | ||
| 461 | - height: 100%; | ||
| 462 | - } | ||
| 463 | - .few-tag { | ||
| 464 | - width: 100%; | ||
| 465 | - position: absolute; | ||
| 466 | - left: 0; | ||
| 467 | - height: 16px; | ||
| 468 | - line-height: 16px; | ||
| 469 | - background: #ffac5b; | ||
| 470 | - color: #fff; | ||
| 471 | - font-size: 12px; | ||
| 472 | - text-align: center; | ||
| 473 | - bottom: 0; | ||
| 474 | - } | ||
| 475 | - } | ||
| 476 | - | ||
| 477 | - //文本 | ||
| 478 | - .good-detail-text { | ||
| 479 | - color: #222; | ||
| 480 | - font-size: 12px; | ||
| 481 | - text-align: center; | ||
| 482 | - | ||
| 483 | - > a { | ||
| 484 | - margin-top: 16px; | ||
| 485 | - line-height: 1.5; | ||
| 486 | - display: block; | ||
| 487 | - } | ||
| 488 | - | ||
| 489 | - > .price { | ||
| 490 | - margin-top: 10px; | ||
| 491 | - } | ||
| 492 | - } | ||
| 493 | - | ||
| 494 | - .col-btn { | ||
| 495 | - position: absolute; | ||
| 496 | - top: 15px; | ||
| 497 | - right: 15px; | ||
| 498 | - color: #ccc; | ||
| 499 | - font-size: 12px; | ||
| 500 | - display: none; | ||
| 501 | - } | ||
| 502 | - } | ||
| 503 | - } | ||
| 504 | - } | ||
| 505 | - //商品列表END | ||
| 506 | - .opt-banner { | ||
| 507 | - height: 48px; | ||
| 508 | - background: #f5f7f6; | ||
| 509 | - line-height: 48px; | ||
| 510 | - margin: 10px 0; | ||
| 511 | - | ||
| 512 | - .sort-type, | ||
| 513 | - .checks { | ||
| 514 | - color: #ccc; | ||
| 515 | - font-size: 14px; | ||
| 516 | - padding: 0 10px; | ||
| 517 | - | ||
| 518 | - .iconfont { | ||
| 519 | - font-size: 14px; | ||
| 520 | - } | ||
| 521 | - | ||
| 522 | - &.active, | ||
| 523 | - &.checked { | ||
| 524 | - color: #000; | ||
| 525 | - } | ||
| 526 | - } | ||
| 527 | - | ||
| 528 | - .pager-wrap { | ||
| 529 | - float: right; | ||
| 530 | - padding: 15px 0; | ||
| 531 | - } | ||
| 532 | - | ||
| 533 | - .line-count { | ||
| 534 | - float: left; | ||
| 535 | - padding: 3px 1px 3px 3px; | ||
| 536 | - border: 1px solid #ccc; | ||
| 537 | - margin-right: 10px; | ||
| 538 | - | ||
| 539 | - span { | ||
| 540 | - float: left; | ||
| 541 | - width: 5px; | ||
| 542 | - height: 10px; | ||
| 543 | - background: #ccc; | ||
| 544 | - margin-right: 2px; | ||
| 545 | - } | ||
| 546 | - | ||
| 547 | - &.active { | ||
| 548 | - border-color: #222; | ||
| 549 | - span { | ||
| 550 | - background: #222; | ||
| 551 | - } | ||
| 552 | - } | ||
| 553 | - } | ||
| 554 | - | ||
| 555 | - .page-count { | ||
| 556 | - position: relative; | ||
| 557 | - height: 18px; | ||
| 558 | - float: left; | ||
| 559 | - font-size: 12px; | ||
| 560 | - line-height: 18px; | ||
| 561 | - | ||
| 562 | - > span { | ||
| 563 | - float: left; | ||
| 564 | - display: block; | ||
| 565 | - width: 42px; | ||
| 566 | - height: 10px; | ||
| 567 | - line-height: 10px; | ||
| 568 | - padding: 3px; | ||
| 569 | - border: 1px solid #ccc; | ||
| 570 | - color: #222; | ||
| 571 | - cursor: pointer; | ||
| 572 | - margin-right: 10px; | ||
| 573 | - } | ||
| 574 | - | ||
| 575 | - .iconfont { | ||
| 576 | - font-size: 14px; | ||
| 577 | - color: #ccc; | ||
| 578 | - float: right; | ||
| 579 | - } | ||
| 580 | - | ||
| 581 | - > ul { | ||
| 582 | - position: absolute; | ||
| 583 | - display: none; | ||
| 584 | - width: 42px; | ||
| 585 | - padding: 0 3px; | ||
| 586 | - border-left: 1px solid #ccc; | ||
| 587 | - border-right: 1px solid #ccc; | ||
| 588 | - } | ||
| 589 | - | ||
| 590 | - li { | ||
| 591 | - border-bottom: 1px solid #ccc; | ||
| 592 | - } | ||
| 593 | - | ||
| 594 | - a { | ||
| 595 | - display: block; | ||
| 596 | - width: 100%; | ||
| 597 | - } | ||
| 598 | - } | ||
| 599 | - | ||
| 600 | - .pager { | ||
| 601 | - float: left; | ||
| 602 | - font-size: 14px; | ||
| 603 | - line-height: 15px; | ||
| 604 | - margin: 0 20px; | ||
| 605 | - | ||
| 606 | - .dis-icon { | ||
| 607 | - color: #e6e6e6; | ||
| 608 | - } | ||
| 609 | - | ||
| 610 | - i { | ||
| 611 | - color: #f00; | ||
| 612 | - } | ||
| 613 | - } | ||
| 614 | - } | ||
| 615 | -} | ||
| 1 | +@import "search", "list", "filter-box", "sort-pager"; |
web-static/sass/product/_list.scss
0 → 100644
web-static/sass/product/_search.scss
0 → 100644
| 1 | +.product-search-page { | ||
| 2 | + /*商品列表 | ||
| 3 | + *Added by wangchenglong at 2015/12/1 | ||
| 4 | + */ | ||
| 5 | + .goods-container { | ||
| 6 | + height: auto; | ||
| 7 | + padding: 25px 15px 0 15px; | ||
| 8 | + overflow: hidden; | ||
| 9 | + position: relative; | ||
| 10 | + width: 1150px + 10px; | ||
| 11 | + | ||
| 12 | + //标签 | ||
| 13 | + .tag-container { | ||
| 14 | + font-size: 12px; | ||
| 15 | + height: 22px; | ||
| 16 | + line-height: 22px; | ||
| 17 | + | ||
| 18 | + .good-tag { | ||
| 19 | + padding: 0 7px; | ||
| 20 | + display: block; | ||
| 21 | + float: left; | ||
| 22 | + margin-right: 3px; | ||
| 23 | + | ||
| 24 | + &:nth-last-of-type(1) { | ||
| 25 | + margin-right: 0; | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + @each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d), | ||
| 29 | + (renew-tag, #fff, #78dc7e), | ||
| 30 | + (new-festival-tag, #fff, #000000), | ||
| 31 | + (yep-tag, #fff, #ff565b), | ||
| 32 | + (ymp-tag, #fff, #ff565b), | ||
| 33 | + (sale-tag, #fff, #ff565b) { | ||
| 34 | + &.#{$tag} { | ||
| 35 | + color: $tagColor; | ||
| 36 | + background: $tagBackground; | ||
| 37 | + } | ||
| 38 | + } | ||
| 39 | + &.limit-tag { | ||
| 40 | + color: #4e4e4e; | ||
| 41 | + border: 1px solid #4e4e4e; | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | + | ||
| 46 | + //商品列表 | ||
| 47 | + .good-info { | ||
| 48 | + height: 400px; //todo | ||
| 49 | + margin-bottom: 35px; | ||
| 50 | + width: 222px; | ||
| 51 | + margin-right: 10px; | ||
| 52 | + float: left; | ||
| 53 | + | ||
| 54 | + //图片 | ||
| 55 | + .good-detail-img { | ||
| 56 | + width: 100%; | ||
| 57 | + height: 300px; | ||
| 58 | + position: relative; | ||
| 59 | + | ||
| 60 | + .good-thumb, img.lazy { | ||
| 61 | + display: block; | ||
| 62 | + overflow: hidden; | ||
| 63 | + width: 100%; | ||
| 64 | + height: 100%; | ||
| 65 | + } | ||
| 66 | + .few-tag { | ||
| 67 | + width: 100%; | ||
| 68 | + position: absolute; | ||
| 69 | + left: 0; | ||
| 70 | + height: 16px; | ||
| 71 | + line-height: 16px; | ||
| 72 | + background: #ffac5b; | ||
| 73 | + color: #fff; | ||
| 74 | + font-size: 12px; | ||
| 75 | + text-align: center; | ||
| 76 | + bottom: 0; | ||
| 77 | + } | ||
| 78 | + } | ||
| 79 | + | ||
| 80 | + //文本 | ||
| 81 | + .good-detail-text { | ||
| 82 | + color: #222; | ||
| 83 | + font-size: 12px; | ||
| 84 | + text-align: center; | ||
| 85 | + | ||
| 86 | + > a { | ||
| 87 | + margin-top: 16px; | ||
| 88 | + line-height: 1.5; | ||
| 89 | + display: block; | ||
| 90 | + } | ||
| 91 | + | ||
| 92 | + > .price { | ||
| 93 | + margin-top: 10px; | ||
| 94 | + } | ||
| 95 | + } | ||
| 96 | + | ||
| 97 | + .col-btn { | ||
| 98 | + position: absolute; | ||
| 99 | + top: 15px; | ||
| 100 | + right: 15px; | ||
| 101 | + color: #ccc; | ||
| 102 | + font-size: 12px; | ||
| 103 | + display: none; | ||
| 104 | + } | ||
| 105 | + } | ||
| 106 | + | ||
| 107 | + //弹层 | ||
| 108 | + .good-item-wrapper { | ||
| 109 | + border: 1px solid #dddddd; | ||
| 110 | + padding-left: 20px; | ||
| 111 | + padding-top: 18px; | ||
| 112 | + padding-right: 20px; | ||
| 113 | + position: absolute; | ||
| 114 | + background: #fff; | ||
| 115 | + display: none; | ||
| 116 | + | ||
| 117 | + .good-info-main{ | ||
| 118 | + float: left; | ||
| 119 | + | ||
| 120 | + .col-btn { | ||
| 121 | + display: block; | ||
| 122 | + | ||
| 123 | + &:hover { | ||
| 124 | + color: #f95b4f; | ||
| 125 | + cursor: pointer; | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + .good-select-color { | ||
| 131 | + float: left; | ||
| 132 | + margin-top: 22px; | ||
| 133 | + | ||
| 134 | + ul { | ||
| 135 | + display: block; | ||
| 136 | + float: left; | ||
| 137 | + margin-left: 15px; | ||
| 138 | + } | ||
| 139 | + | ||
| 140 | + li { | ||
| 141 | + width: 50px; | ||
| 142 | + margin-bottom: 15px; | ||
| 143 | + | ||
| 144 | + a, img { | ||
| 145 | + display: block; | ||
| 146 | + overflow: hidden; | ||
| 147 | + width: 100%; | ||
| 148 | + } | ||
| 149 | + } | ||
| 150 | + } | ||
| 151 | + | ||
| 152 | + .good-info { | ||
| 153 | + margin-right: 10px; | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + | ||
| 157 | + //每行六个商品 | ||
| 158 | + &.six-per-line { | ||
| 159 | + .good-info { | ||
| 160 | + height: 400px; //todo | ||
| 161 | + margin-bottom: 35px; | ||
| 162 | + width: 222px; | ||
| 163 | + | ||
| 164 | + //图片 | ||
| 165 | + .good-detail-img { | ||
| 166 | + width: 100%; | ||
| 167 | + height: 300px; | ||
| 168 | + position: relative; | ||
| 169 | + | ||
| 170 | + .good-thumb, img.lazy { | ||
| 171 | + display: block; | ||
| 172 | + overflow: hidden; | ||
| 173 | + width: 100%; | ||
| 174 | + height: 100%; | ||
| 175 | + } | ||
| 176 | + .few-tag { | ||
| 177 | + width: 100%; | ||
| 178 | + position: absolute; | ||
| 179 | + left: 0; | ||
| 180 | + height: 16px; | ||
| 181 | + line-height: 16px; | ||
| 182 | + background: #ffac5b; | ||
| 183 | + color: #fff; | ||
| 184 | + font-size: 12px; | ||
| 185 | + text-align: center; | ||
| 186 | + bottom: 0; | ||
| 187 | + } | ||
| 188 | + } | ||
| 189 | + | ||
| 190 | + //文本 | ||
| 191 | + .good-detail-text { | ||
| 192 | + color: #222; | ||
| 193 | + font-size: 12px; | ||
| 194 | + text-align: center; | ||
| 195 | + | ||
| 196 | + > a { | ||
| 197 | + margin-top: 16px; | ||
| 198 | + line-height: 1.5; | ||
| 199 | + display: block; | ||
| 200 | + } | ||
| 201 | + | ||
| 202 | + > .price { | ||
| 203 | + margin-top: 10px; | ||
| 204 | + } | ||
| 205 | + } | ||
| 206 | + | ||
| 207 | + .col-btn { | ||
| 208 | + position: absolute; | ||
| 209 | + top: 15px; | ||
| 210 | + right: 15px; | ||
| 211 | + color: #ccc; | ||
| 212 | + font-size: 12px; | ||
| 213 | + display: none; | ||
| 214 | + } | ||
| 215 | + } | ||
| 216 | + } | ||
| 217 | + } | ||
| 218 | + //商品列表END | ||
| 219 | +} |
web-static/sass/product/_sort-pager.scss
0 → 100644
| 1 | +.sort-pager { | ||
| 2 | + height: 48px; | ||
| 3 | + background: #f5f7f6; | ||
| 4 | + line-height: 48px; | ||
| 5 | + margin: 10px 0; | ||
| 6 | + | ||
| 7 | + .sort-type, | ||
| 8 | + .checks { | ||
| 9 | + color: #ccc; | ||
| 10 | + font-size: 14px; | ||
| 11 | + padding: 0 10px; | ||
| 12 | + | ||
| 13 | + .iconfont { | ||
| 14 | + font-size: 14px; | ||
| 15 | + } | ||
| 16 | + | ||
| 17 | + &.active, | ||
| 18 | + &.checked { | ||
| 19 | + color: #000; | ||
| 20 | + } | ||
| 21 | + } | ||
| 22 | + | ||
| 23 | + .pager-wrap { | ||
| 24 | + float: right; | ||
| 25 | + padding: 15px 0; | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + .page-count { | ||
| 29 | + position: relative; | ||
| 30 | + height: 18px; | ||
| 31 | + float: left; | ||
| 32 | + font-size: 12px; | ||
| 33 | + line-height: 18px; | ||
| 34 | + | ||
| 35 | + > span { | ||
| 36 | + float: left; | ||
| 37 | + display: block; | ||
| 38 | + width: 42px; | ||
| 39 | + height: 10px; | ||
| 40 | + line-height: 10px; | ||
| 41 | + padding: 3px; | ||
| 42 | + border: 1px solid #ccc; | ||
| 43 | + color: #222; | ||
| 44 | + cursor: pointer; | ||
| 45 | + margin-right: 10px; | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + .iconfont { | ||
| 49 | + font-size: 14px; | ||
| 50 | + color: #ccc; | ||
| 51 | + float: right; | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | + > ul { | ||
| 55 | + position: absolute; | ||
| 56 | + display: none; | ||
| 57 | + width: 42px; | ||
| 58 | + padding: 0 3px; | ||
| 59 | + border-left: 1px solid #ccc; | ||
| 60 | + border-right: 1px solid #ccc; | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + li { | ||
| 64 | + border-bottom: 1px solid #ccc; | ||
| 65 | + } | ||
| 66 | + | ||
| 67 | + a { | ||
| 68 | + display: block; | ||
| 69 | + width: 100%; | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + | ||
| 73 | + .pager { | ||
| 74 | + float: left; | ||
| 75 | + font-size: 14px; | ||
| 76 | + line-height: 15px; | ||
| 77 | + margin: 0 20px; | ||
| 78 | + | ||
| 79 | + .dis-icon { | ||
| 80 | + color: #e6e6e6; | ||
| 81 | + } | ||
| 82 | + | ||
| 83 | + i { | ||
| 84 | + color: #f00; | ||
| 85 | + } | ||
| 86 | + } | ||
| 87 | +} |
-
Please register or login to post a comment