Merge branch 'web' into feature/passport
Showing
32 changed files
with
2581 additions
and
1499 deletions
| @@ -2,8 +2,49 @@ | @@ -2,8 +2,49 @@ | ||
| 2 | 2 | ||
| 3 | ## 公共定义 | 3 | ## 公共定义 |
| 4 | 4 | ||
| 5 | +### 公共底部 | ||
| 6 | + | ||
| 7 | + { | ||
| 8 | + footerTop: true //是否显示足部有货services，意见反馈和更多YOHO产品等模块 | ||
| 9 | + } | ||
| 10 | + | ||
| 5 | ### 商品 | 11 | ### 商品 |
| 6 | 12 | ||
| 13 | + { | ||
| 14 | + skn: 1, | ||
| 15 | + thumb: 'path/to/goods/img', | ||
| 16 | + url: '', | ||
| 17 | + name: '', | ||
| 18 | + salePrice: 500, //售价 | ||
| 19 | + marketPrice: 1000, //市场价 | ||
| 20 | + tags: [ | ||
| 21 | + { | ||
| 22 | + isNew: true //NEW | ||
| 23 | + }, | ||
| 24 | + { | ||
| 25 | + isSale: true //SALE | ||
| 26 | + }, | ||
| 27 | + { | ||
| 28 | + isLimit: false //限量商品 | ||
| 29 | + }, | ||
| 30 | + { | ||
| 31 | + isNewFestival: true //新品节 | ||
| 32 | + }, | ||
| 33 | + { | ||
| 34 | + isReNew: true //再到着 | ||
| 35 | + }, | ||
| 36 | + { | ||
| 37 | + isYearEndPromotion: true //年终大促 | ||
| 38 | + }, | ||
| 39 | + { | ||
| 40 | + isYearMidPromotion: true // 年中大促 | ||
| 41 | + } | ||
| 42 | + ], | ||
| 43 | + isFew: true, //即将售罄 | ||
| 44 | + showColBtn: true, //是否显示收藏按钮 | ||
| 45 | + coled: true //已收藏 | ||
| 46 | + } | ||
| 47 | + | ||
| 7 | ### 路径导航 | 48 | ### 路径导航 |
| 8 | 49 | ||
| 9 | { | 50 | { |
| @@ -195,7 +236,7 @@ | @@ -195,7 +236,7 @@ | ||
| 195 | ## 搜索页 | 236 | ## 搜索页 |
| 196 | 237 | ||
| 197 | { | 238 | { |
| 198 | - products: { | 239 | + search: { |
| 199 | //路径导航 | 240 | //路径导航 |
| 200 | pathNav: [...], | 241 | pathNav: [...], |
| 201 | 242 | ||
| @@ -381,6 +422,66 @@ | @@ -381,6 +422,66 @@ | ||
| 381 | preHref: '', //若当前为第一页，不传此参数 | 422 | preHref: '', //若当前为第一页，不传此参数 |
| 382 | nexHref: '' //若当前为最后一页，不传此参数 | 423 | nexHref: '' //若当前为最后一页，不传此参数 |
| 383 | }, | 424 | }, |
| 425 | + // 商品导航列表 | ||
| 426 | + allSort: { | ||
| 427 | + //全部品类 | ||
| 428 | + updateNum: 2, //更新总数 | ||
| 429 | + list: [ | ||
| 430 | + { | ||
| 431 | + name: 'AA', //一级分类 | ||
| 432 | + num: 12 //一级分类更新数目 | ||
| 433 | + childList: [ | ||
| 434 | + { | ||
| 435 | + name: 'AAA', //二级分类 | ||
| 436 | + href: '##', //二级分类跳转链接 | ||
| 437 | + num: 12 //二级分类更新数目 | ||
| 438 | + } | ||
| 439 | + ] | ||
| 440 | + } | ||
| 441 | + ] | ||
| 442 | + }, | ||
| 443 | + advNav: { | ||
| 444 | + //图片导航 | ||
| 445 | + advNavTitle: 'AA', 图片导航标题 | ||
| 446 | + list: [ | ||
| 447 | + { | ||
| 448 | + href: '', | ||
| 449 | + src: '' // 图片地址 | ||
| 450 | + } | ||
| 451 | + ] | ||
| 452 | + }, | ||
| 453 | + advPic: { | ||
| 454 | + //图片banner | ||
| 455 | + advPicTitle: 'AA', 图片banner标题 | ||
| 456 | + list: [ | ||
| 457 | + { | ||
| 458 | + href: '', | ||
| 459 | + src: '' // 图片地址 | ||
| 460 | + } | ||
| 461 | + ] | ||
| 462 | + }, | ||
| 463 | + newSales: { | ||
| 464 | + //一周新品上架 | ||
| 465 | + updateNum: 123, | ||
| 466 | + list: [ | ||
| 467 | + { | ||
| 468 | + name: 'AAA', | ||
| 469 | + href: '', | ||
| 470 | + num: 12, | ||
| 471 | + } | ||
| 472 | + ] | ||
| 473 | + }, | ||
| 474 | + allDiscount: { | ||
| 475 | + //全部折扣 | ||
| 476 | + updateNum: 111, | ||
| 477 | + list: [ | ||
| 478 | + { | ||
| 479 | + name: 'VVV', | ||
| 480 | + href: '##', | ||
| 481 | + num: 11 | ||
| 482 | + } | ||
| 483 | + ] | ||
| 484 | + } | ||
| 384 | //商品列表 | 485 | //商品列表 |
| 385 | goods: [ | 486 | goods: [ |
| 386 | //商品信息 | 487 | //商品信息 |
| 1 | {{> layout/header}} | 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> | 2 | +<div class="product-list-page yoho-page"> |
| 3 | + {{# list}} | ||
| 4 | + {{# brandBanner}} | ||
| 5 | + <div class="brand-banner"> | ||
| 6 | + <div class="banner-img" style="height: {{bannerHeight}}px;background: url({{banner}})"></div> | ||
| 7 | + <div class="opt-wrap"> | ||
| 8 | + <p class="opt center-content"> | ||
| 9 | + <a href="{{brandHome}}"> | ||
| 10 | + <i class="iconfont"></i> | ||
| 11 | + 品牌首页 | ||
| 12 | + </a> | ||
| 13 | + <a href="{{brandIntro}}"> | ||
| 14 | + <i class="iconfont"></i> | ||
| 15 | + 品牌介绍 | ||
| 16 | + </a> | ||
| 17 | + <span id="brand-favor" class="brand-favor"> | ||
| 18 | + <i class="iconfont{{#if coled}} coled{{/if}}"></i> | ||
| 19 | + </span> | ||
| 20 | + </p> | ||
| 21 | + </div> | ||
| 22 | + </div> | ||
| 23 | + {{/ brandBanner}} | ||
| 10 | 24 | ||
| 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}} | 25 | + <div class="center-content clearfix"> |
| 26 | + {{> layout/path-nav}} | ||
| 22 | 27 | ||
| 23 | - <a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a> | ||
| 24 | - </div> | 28 | + {{# brandAbout}} |
| 29 | + <div class="brand-about"> | ||
| 30 | + {{{brandIntro}}} | ||
| 31 | + </div> | ||
| 32 | + {{^}} | ||
| 33 | + <div class="list-left pull-left"> | ||
| 34 | + {{# allDiscount}} | ||
| 35 | + <div class="sort-container"> | ||
| 36 | + <ul class="sort-child-list new-sale"> | ||
| 37 | + <li><a href="{{href}}">全部折扣</a><span>{{updateNum}}</span></li> | ||
| 38 | + {{#each list}} | ||
| 39 | + <li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li> | ||
| 40 | + {{/each}} | ||
| 41 | + </ul> | ||
| 25 | </div> | 42 | </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> | 43 | + {{/ allDiscount}} |
| 44 | + | ||
| 45 | + {{# newSales}} | ||
| 46 | + <div class="sort-container"> | ||
| 47 | + <h2>一周新品上架<span>{{updateNum}}</span></h2> | ||
| 48 | + <ul class="sort-child-list new-sale"> | ||
| 49 | + {{#each list}} | ||
| 50 | + <li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li> | ||
| 37 | {{/each}} | 51 | {{/each}} |
| 38 | - </div> | 52 | + </ul> |
| 39 | </div> | 53 | </div> |
| 40 | - {{/if}} | ||
| 41 | - | ||
| 42 | - {{#if sort}} | ||
| 43 | - <div class="sort section"> | ||
| 44 | - <span class="title">分类：</span> | 54 | + {{/ newSales}} |
| 45 | 55 | ||
| 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"> | 56 | + {{# allSort}} |
| 57 | + <div class="sort-container"> | ||
| 58 | + <h2>全部品类<span>{{updateNum}}</span></h2> | ||
| 59 | + <ul> | ||
| 60 | + {{#each list}} | ||
| 61 | + <li class="product-list-nav"> | ||
| 62 | + <h3> | ||
| 63 | + <span class="icon-triangle"></span> | ||
| 64 | + {{name}}<span>{{num}}</span> | ||
| 65 | + </h3> | ||
| 66 | + <ul class="sort-child-list"> | ||
| 67 | + {{#each childList}} | ||
| 68 | + <li> | ||
| 62 | <a href="{{href}}">{{name}}</a> | 69 | <a href="{{href}}">{{name}}</a> |
| 70 | + <span>{{num}}</span> | ||
| 63 | </li> | 71 | </li> |
| 64 | {{/each}} | 72 | {{/each}} |
| 65 | </ul> | 73 | </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> | 74 | </li> |
| 303 | - {{/ pageCounts}} | 75 | + {{/each}} |
| 304 | </ul> | 76 | </ul> |
| 305 | </div> | 77 | </div> |
| 306 | - | ||
| 307 | - <p class="pager"> | ||
| 308 | - {{#if preHref}} | ||
| 309 | - <a href="{{preHref}}"> | ||
| 310 | - <span class="iconfont"></span> | 78 | + {{/ allSort}} |
| 79 | + | ||
| 80 | + {{# advNav}} | ||
| 81 | + {{# advNavTitle}} | ||
| 82 | + <h2 class="nav-pic-title">{{.}}</h2> | ||
| 83 | + {{/advNavTitle}} | ||
| 84 | + <ul class="pic-nav"> | ||
| 85 | + {{#each list}} | ||
| 86 | + <li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li> | ||
| 87 | + {{/each}} | ||
| 88 | + </ul> | ||
| 89 | + {{/advNav}} | ||
| 90 | + | ||
| 91 | + {{#advPic}} | ||
| 92 | + {{# advPicTitle}} | ||
| 93 | + <h2 class="nav-pic-title">{{.}}</h2> | ||
| 94 | + {{/ advPicTitle}} | ||
| 95 | + <ul class="pic-nav"> | ||
| 96 | + {{#each list}} | ||
| 97 | + <li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li> | ||
| 98 | + {{/each}} | ||
| 99 | + </ul> | ||
| 100 | + {{/advPic}} | ||
| 101 | + </div> | ||
| 102 | + <div class="list-right pull-right"> | ||
| 103 | + {{# shopEntry}} | ||
| 104 | + <div class="shop-entry clearfix"> | ||
| 105 | + <a class="pull-left" href="{{home}}"> | ||
| 106 | + <img class="logo" src="{{logo}}"> | ||
| 311 | </a> | 107 | </a> |
| 312 | - {{^}} | ||
| 313 | - <span class="dis-icon iconfont"></span> | ||
| 314 | - {{/if}} | ||
| 315 | 108 | ||
| 316 | - <span> | ||
| 317 | - <i>{{curPage}}</i>/{{pageCount}} | ||
| 318 | - </span> | 109 | + <div class="name pull-left"> |
| 110 | + <a class="shop-name" href="{{home}}">{{shopName}}</a> | ||
| 111 | + <p class="sorts"> | ||
| 112 | + {{#each sort}} | ||
| 113 | + <a href="{{href}}">{{name}}</a> | ||
| 114 | + | ||
| 115 | + {{#unless @last}} | ||
| 116 | + / | ||
| 117 | + {{/unless}} | ||
| 118 | + {{/each}} | ||
| 119 | + </p> | ||
| 120 | + </div> | ||
| 319 | 121 | ||
| 320 | - {{#if nextHref}} | ||
| 321 | - <a href="{{nextHref}}"> | 122 | + <a class="entry-btn pull-right" href="{{home}}"> |
| 123 | + 进入品牌店铺 | ||
| 322 | <span class="iconfont"></span> | 124 | <span class="iconfont"></span> |
| 323 | </a> | 125 | </a> |
| 324 | - {{^}} | ||
| 325 | - <span class="dis-icon iconfont"></span> | ||
| 326 | - {{/if}} | ||
| 327 | - </p> | 126 | + </div> |
| 127 | + {{/ shopEntry}} | ||
| 128 | + | ||
| 129 | + {{# filters}} | ||
| 130 | + {{> product/filter-box}} | ||
| 131 | + {{/ filters}} | ||
| 132 | + | ||
| 133 | + {{# opts}} | ||
| 134 | + {{> product/sort-pager}} | ||
| 135 | + {{/ opts}} | ||
| 136 | + | ||
| 137 | + <div class="goods-container clearfix"> | ||
| 138 | + {{#each goods}} | ||
| 139 | + {{> product/good}} | ||
| 140 | + {{/each}} | ||
| 141 | + <div class="good-item-wrapper"> | ||
| 142 | + <div class="good-info-main"></div> | ||
| 143 | + <div class="good-select-color"></div> | ||
| 144 | + </div> | ||
| 145 | + </div> | ||
| 328 | </div> | 146 | </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> | 147 | + {{/ brandAbout}} |
| 340 | </div> | 148 | </div> |
| 341 | - {{/ products}} | 149 | + {{/ list}} |
| 342 | </div> | 150 | </div> |
| 343 | {{> layout/footer}} | 151 | {{> layout/footer}} |
| 1 | +{{> layout/header}} | ||
| 2 | +<div class="product-search-page yoho-page center-content"> | ||
| 3 | + {{# search}} | ||
| 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 | + {{/ search}} | ||
| 24 | +</div> | ||
| 25 | +{{> layout/footer}} |
| 1 | <div class="yoho-footer"> | 1 | <div class="yoho-footer"> |
| 2 | - <div class="footertop"> | ||
| 3 | - <div class="index-foot"> | ||
| 4 | - <dl class="center-content clearfix"> | ||
| 5 | - <dd> | ||
| 6 | - <div class="foot-panel"> | ||
| 7 | - <div class="title"> | ||
| 8 | - <div class="title-line"></div> | ||
| 9 | - <div class="text"> | ||
| 10 | - <span>有货SERVICES</span> | 2 | + {{#if footerTop}} |
| 3 | + <div class="footertop"> | ||
| 4 | + <div class="index-foot"> | ||
| 5 | + <dl class="center-content clearfix"> | ||
| 6 | + <dd> | ||
| 7 | + <div class="foot-panel"> | ||
| 8 | + <div class="title"> | ||
| 9 | + <div class="title-line"></div> | ||
| 10 | + <div class="text"> | ||
| 11 | + <span>有货SERVICES</span> | ||
| 12 | + </div> | ||
| 13 | + </div> | ||
| 14 | + <div id="foot-services"> | ||
| 15 | + <ul class="two-dim clearfix"> | ||
| 16 | + <li class="left"> | ||
| 17 | + <img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png"> | ||
| 18 | + <p>YOHO!有货</p> | ||
| 19 | + </li> | ||
| 20 | + <li class="left"> | ||
| 21 | + <img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg"> | ||
| 22 | + <p>微信</p> | ||
| 23 | + </li> | ||
| 24 | + <li class="left"> | ||
| 25 | + <img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png"> | ||
| 26 | + <p>微博</p> | ||
| 27 | + </li> | ||
| 28 | + </ul> | ||
| 11 | </div> | 29 | </div> |
| 12 | </div> | 30 | </div> |
| 13 | - <div id="foot-services"> | ||
| 14 | - <ul class="two-dim clearfix"> | ||
| 15 | - <li class="left"> | ||
| 16 | - <img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png"> | ||
| 17 | - <p>YOHO!有货</p> | 31 | + <p class="item-nav center"> |
| 32 | + <span class="iconfont cur" key="0"></span> | ||
| 33 | + </p> | ||
| 34 | + </dd> | ||
| 35 | + <dd> | ||
| 36 | + <div id="feed-back-box-list" class="foot-panel"> | ||
| 37 | + <div class="title"> | ||
| 38 | + <div class="title-line"></div> | ||
| 39 | + <div class="text"> | ||
| 40 | + <span>意见反馈</span> | ||
| 41 | + </div> | ||
| 42 | + </div> | ||
| 43 | + <ul class="vote clearfix"> | ||
| 44 | + <li key="0"> | ||
| 45 | + <form class="feed-back-form" action="#"> | ||
| 46 | + <div>您喜欢有货的新版吗?</div> | ||
| 47 | + <div class="vote-item clearfix"> | ||
| 48 | + <p> | ||
| 49 | + <input type="radio" name="solution" value="33">非常喜欢 | ||
| 50 | + </p> | ||
| 51 | + <p> | ||
| 52 | + <input type="radio" name="solution" value="34">喜欢 | ||
| 53 | + </p> | ||
| 54 | + <p> | ||
| 55 | + <input type="radio" name="solution" value="35">一般般 | ||
| 56 | + </p> | ||
| 57 | + <p> | ||
| 58 | + <input type="radio" name="solution" value="36">不喜欢 | ||
| 59 | + </p> | ||
| 60 | + <p> | ||
| 61 | + <input type="radio" name="solution" value="37">非常不喜欢 | ||
| 62 | + </p> | ||
| 63 | + </div> | ||
| 64 | + <div> | ||
| 65 | + <span class="feed-back-btn button">提交</span> | ||
| 66 | + </div> | ||
| 67 | + <input class="question-id" type="hidden" name="question_id" value="38"> | ||
| 68 | + <input class="feedback-id" type="hidden" name="feedback_id" value="5"> | ||
| 69 | + </form> | ||
| 18 | </li> | 70 | </li> |
| 19 | - <li class="left"> | ||
| 20 | - <img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg"> | ||
| 21 | - <p>微信</p> | 71 | + <li class="hide" key="1"> |
| 72 | + <form class="feed-back-form" action="#"> | ||
| 73 | + <div>您可以方便的找到想查看的内容吗？</div> | ||
| 74 | + <div class="vote-item clearfix"> | ||
| 75 | + <p> | ||
| 76 | + <input type="radio" name="solution" value="38">非常方便 | ||
| 77 | + </p> | ||
| 78 | + <p> | ||
| 79 | + <input type="radio" name="solution" value="39">方便 | ||
| 80 | + </p> | ||
| 81 | + <p> | ||
| 82 | + <input type="radio" name="solution" value="40">一般般 | ||
| 83 | + </p> | ||
| 84 | + <p> | ||
| 85 | + <input type="radio" name="solution" value="41">不方便 | ||
| 86 | + </p> | ||
| 87 | + <p> | ||
| 88 | + <input type="radio" name="solution" value="42">非常不方便 | ||
| 89 | + </p> | ||
| 90 | + </div> | ||
| 91 | + <div> | ||
| 92 | + <span class="feed-back-btn button">提交</span> | ||
| 93 | + </div> | ||
| 94 | + <input class="question-id" type="hidden" value="39"> | ||
| 95 | + <input class="feedback-id" type="hidden" value="5"> | ||
| 96 | + </form> | ||
| 22 | </li> | 97 | </li> |
| 23 | - <li class="left"> | ||
| 24 | - <img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png"> | ||
| 25 | - <p>微博</p> | 98 | + <li class="hide" key="2"> |
| 99 | + <form class="feed-back-form" action="#"> | ||
| 100 | + <div>您对新版还有哪些意见或建议？</div> | ||
| 101 | + <textarea name="answer" id="feedback-answer"></textarea> | ||
| 102 | + <div> | ||
| 103 | + <span class="feed-back-btn button">提交</span> | ||
| 104 | + </div> | ||
| 105 | + <input class="question-id" type="hidden" value="37"> | ||
| 106 | + <input class="feedback-id" type="hidden" value="5"> | ||
| 107 | + </form> | ||
| 26 | </li> | 108 | </li> |
| 27 | </ul> | 109 | </ul> |
| 28 | </div> | 110 | </div> |
| 29 | - </div> | ||
| 30 | - <p class="item-nav center"> | ||
| 31 | - <span class="iconfont cur" key="0"></span> | ||
| 32 | - </p> | ||
| 33 | - </dd> | ||
| 34 | - <dd> | ||
| 35 | - <div id="feed-back-box-list" class="foot-panel"> | ||
| 36 | - <div class="title"> | ||
| 37 | - <div class="title-line"></div> | ||
| 38 | - <div class="text"> | ||
| 39 | - <span>意见反馈</span> | 111 | + <p id="feed-back-page" class="item-nav center"> |
| 112 | + <span class="iconfont cur"></span> | ||
| 113 | + <span class="iconfont "></span> | ||
| 114 | + <span class="iconfont "></span> | ||
| 115 | + </p> | ||
| 116 | + </dd> | ||
| 117 | + <dd class="last"> | ||
| 118 | + <div class="foot-panel"> | ||
| 119 | + <div class="title"> | ||
| 120 | + <div class="title-line"></div> | ||
| 121 | + <div class="text"> | ||
| 122 | + <span>更多 YOHO!产品</span> | ||
| 123 | + </div> | ||
| 40 | </div> | 124 | </div> |
| 41 | - </div> | ||
| 42 | - <ul class="vote clearfix"> | ||
| 43 | - <li key="0"> | ||
| 44 | - <form class="feed-back-form" action="#"> | ||
| 45 | - <div>您喜欢有货的新版吗?</div> | ||
| 46 | - <div class="vote-item clearfix"> | ||
| 47 | - <p> | ||
| 48 | - <input type="radio" name="solution" value="33">非常喜欢 | ||
| 49 | - </p> | ||
| 50 | - <p> | ||
| 51 | - <input type="radio" name="solution" value="34">喜欢 | ||
| 52 | - </p> | ||
| 53 | - <p> | ||
| 54 | - <input type="radio" name="solution" value="35">一般般 | ||
| 55 | - </p> | ||
| 56 | - <p> | ||
| 57 | - <input type="radio" name="solution" value="36">不喜欢 | ||
| 58 | - </p> | ||
| 59 | - <p> | ||
| 60 | - <input type="radio" name="solution" value="37">非常不喜欢 | ||
| 61 | - </p> | ||
| 62 | - </div> | ||
| 63 | - <div> | ||
| 64 | - <span class="feed-back-btn button">提交</span> | ||
| 65 | - </div> | ||
| 66 | - <input class="question-id" type="hidden" name="question_id" value="38"> | ||
| 67 | - <input class="feedback-id" type="hidden" name="feedback_id" value="5"> | ||
| 68 | - </form> | ||
| 69 | - </li> | ||
| 70 | - <li class="hide" key="1"> | ||
| 71 | - <form class="feed-back-form" action="#"> | ||
| 72 | - <div>您可以方便的找到想查看的内容吗？</div> | ||
| 73 | - <div class="vote-item clearfix"> | ||
| 74 | - <p> | ||
| 75 | - <input type="radio" name="solution" value="38">非常方便 | ||
| 76 | - </p> | ||
| 77 | - <p> | ||
| 78 | - <input type="radio" name="solution" value="39">方便 | ||
| 79 | - </p> | ||
| 80 | - <p> | ||
| 81 | - <input type="radio" name="solution" value="40">一般般 | ||
| 82 | - </p> | ||
| 83 | - <p> | ||
| 84 | - <input type="radio" name="solution" value="41">不方便 | ||
| 85 | - </p> | ||
| 86 | - <p> | ||
| 87 | - <input type="radio" name="solution" value="42">非常不方便 | ||
| 88 | - </p> | ||
| 89 | - </div> | ||
| 90 | - <div> | ||
| 91 | - <span class="feed-back-btn button">提交</span> | ||
| 92 | - </div> | ||
| 93 | - <input class="question-id" type="hidden" value="39"> | ||
| 94 | - <input class="feedback-id" type="hidden" value="5"> | ||
| 95 | - </form> | ||
| 96 | - </li> | ||
| 97 | - <li class="hide" key="2"> | ||
| 98 | - <form class="feed-back-form" action="#"> | ||
| 99 | - <div>您对新版还有哪些意见或建议？</div> | ||
| 100 | - <textarea name="answer" id="feedback-answer"></textarea> | ||
| 101 | - <div> | ||
| 102 | - <span class="feed-back-btn button">提交</span> | ||
| 103 | - </div> | ||
| 104 | - <input class="question-id" type="hidden" value="37"> | ||
| 105 | - <input class="feedback-id" type="hidden" value="5"> | ||
| 106 | - </form> | ||
| 107 | - </li> | ||
| 108 | - </ul> | ||
| 109 | - </div> | ||
| 110 | - <p id="feed-back-page" class="item-nav center"> | ||
| 111 | - <span class="iconfont cur"></span> | ||
| 112 | - <span class="iconfont "></span> | ||
| 113 | - <span class="iconfont "></span> | ||
| 114 | - </p> | ||
| 115 | - </dd> | ||
| 116 | - <dd class="last"> | ||
| 117 | - <div class="foot-panel"> | ||
| 118 | - <div class="title"> | ||
| 119 | - <div class="title-line"></div> | ||
| 120 | - <div class="text"> | ||
| 121 | - <span>更多 YOHO!产品</span> | 125 | + <div id="foot-mobile"> |
| 126 | + <ul class="mobile clearfix"> | ||
| 127 | + <li> | ||
| 128 | + <a href="http://app.yohoshow.com/" target="_blank"> | ||
| 129 | + <img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg"> | ||
| 130 | + </a> | ||
| 131 | + </li> | ||
| 132 | + <li> | ||
| 133 | + <a href="http://www.yohoboys.com/" target="_blank"> | ||
| 134 | + <img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg"> | ||
| 135 | + </a> | ||
| 136 | + </li> | ||
| 137 | + <li> | ||
| 138 | + <a href="http://www.yohogirls.com/" target="_blank"> | ||
| 139 | + <img class="lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg"> | ||
| 140 | + </a> | ||
| 141 | + </li> | ||
| 142 | + </ul> | ||
| 122 | </div> | 143 | </div> |
| 123 | </div> | 144 | </div> |
| 124 | - <div id="foot-mobile"> | ||
| 125 | - <ul class="mobile clearfix"> | ||
| 126 | - <li> | ||
| 127 | - <a href="http://app.yohoshow.com/" target="_blank"> | ||
| 128 | - <img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg"> | ||
| 129 | - </a> | ||
| 130 | - </li> | ||
| 131 | - <li> | ||
| 132 | - <a href="http://www.yohoboys.com/" target="_blank"> | ||
| 133 | - <img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg"> | ||
| 134 | - </a> | ||
| 135 | - </li> | ||
| 136 | - <li> | ||
| 137 | - <a href="http://www.yohogirls.com/" target="_blank"> | ||
| 138 | - <img class="lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg"> | ||
| 139 | - </a> | ||
| 140 | - </li> | ||
| 141 | - </ul> | ||
| 142 | - </div> | ||
| 143 | - </div> | ||
| 144 | - <p class="item-nav center"> | ||
| 145 | - <span class="iconfont cur"></span> | ||
| 146 | - </p> | ||
| 147 | - </dd> | ||
| 148 | - </dl> | 145 | + <p class="item-nav center"> |
| 146 | + <span class="iconfont cur"></span> | ||
| 147 | + </p> | ||
| 148 | + </dd> | ||
| 149 | + </dl> | ||
| 150 | + </div> | ||
| 149 | </div> | 151 | </div> |
| 150 | - </div> | 152 | + {{/if}} |
| 151 | <div class="footerbottom"> | 153 | <div class="footerbottom"> |
| 152 | <div class="promise"> | 154 | <div class="promise"> |
| 153 | <div class="center-content clearfix"> | 155 | <div class="center-content clearfix"> |
| @@ -270,9 +270,9 @@ | @@ -270,9 +270,9 @@ | ||
| 270 | <span class="activity-name">活动</span> | 270 | <span class="activity-name">活动</span> |
| 271 | <h3 class="activity-content"> | 271 | <h3 class="activity-content"> |
| 272 | \{\{fit_outlet_promotion \}\}购outlet商品，满￥1999再享9折\}\} | 272 | \{\{fit_outlet_promotion \}\}购outlet商品，满￥1999再享9折\}\} |
| 273 | - {{#equalone has_other_promotion\}\} | 273 | + \{\{#equalone has_other_promotion\}\} |
| 274 | <span class="mycart_i_down" title="更多" ></span> | 274 | <span class="mycart_i_down" title="更多" ></span> |
| 275 | - {{/equalone\}\} | 275 | + \{\{/equalone\}\} |
| 276 | \{\{#equalone has_first_promotion\}\} | 276 | \{\{#equalone has_first_promotion\}\} |
| 277 | \{\{first_promotions.promotion_title\}\} | 277 | \{\{first_promotions.promotion_title\}\} |
| 278 | \{\{/equalone\}\} | 278 | \{\{/equalone\}\} |
| @@ -11,10 +11,21 @@ | @@ -11,10 +11,21 @@ | ||
| 11 | {{!-- 搜索 --}} | 11 | {{!-- 搜索 --}} |
| 12 | {{#if searchListPage}} | 12 | {{#if searchListPage}} |
| 13 | <script> | 13 | <script> |
| 14 | - seajs.use('js/product/list'); | 14 | + seajs.use(['js/product/list', 'js/product/product'], function (list, product) { |
| 15 | + product.init(5); | ||
| 16 | + }); | ||
| 15 | </script> | 17 | </script> |
| 16 | {{/if}} | 18 | {{/if}} |
| 17 | 19 | ||
| 20 | +{{!-- 列表 --}} | ||
| 21 | +{{#if productListPage}} | ||
| 22 | +<script> | ||
| 23 | + seajs.use(['js/product/list', 'js/product/product'], function (list, product) { | ||
| 24 | + product.init(4); | ||
| 25 | + }); | ||
| 26 | +</script> | ||
| 27 | +{{/if}} | ||
| 28 | + | ||
| 18 | {{!-- 登录注册找回密码--}} | 29 | {{!-- 登录注册找回密码--}} |
| 19 | {{#if loginPage}} | 30 | {{#if loginPage}} |
| 20 | <script> | 31 | <script> |
| 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> |
| @@ -14,7 +14,7 @@ fonts_dir = "font" | @@ -14,7 +14,7 @@ fonts_dir = "font" | ||
| 14 | output_style = :expanded | 14 | output_style = :expanded |
| 15 | # To enable relative paths to assets via compass helper functions. Uncomment: | 15 | # To enable relative paths to assets via compass helper functions. Uncomment: |
| 16 | relative_assets = true | 16 | relative_assets = true |
| 17 | -# sourcemap = true | 17 | +sourcemap = true |
| 18 | 18 | ||
| 19 | # To disable debugging comments that display the original location of your selectors. Uncomment: | 19 | # To disable debugging comments that display the original location of your selectors. Uncomment: |
| 20 | line_comments = false | 20 | line_comments = false |
web-static/font/icomoon.eot
deleted
100644 → 0
No preview for this file type
web-static/font/icomoon.svg
deleted
100644 → 0
No preview for this file type
web-static/font/icomoon.ttf
deleted
100644 → 0
No preview for this file type
web-static/font/icomoon.woff
deleted
100644 → 0
No preview for this file type
No preview for this file type
| @@ -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 Fri Dec 4 15:54:33 2015 | 5 | +Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015 |
| 6 | By Ads | 6 | By Ads |
| 7 | </metadata> | 7 | </metadata> |
| 8 | <defs> | 8 | <defs> |
| @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015 | @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015 | ||
| 19 | bbox="0 -214 1172.1 864" | 19 | bbox="0 -214 1172.1 864" |
| 20 | underline-thickness="50" | 20 | underline-thickness="50" |
| 21 | underline-position="-100" | 21 | underline-position="-100" |
| 22 | - unicode-range="U+0078-E619" | 22 | + unicode-range="U+0078-E61B" |
| 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" /> |
| @@ -92,5 +92,10 @@ q0 -24 -9.5 -42t-24.5 -31t-33.5 -20t-35.5 -7h-394q-15 0 -33 8.5t-33.5 23t-26.5 3 | @@ -92,5 +92,10 @@ q0 -24 -9.5 -42t-24.5 -31t-33.5 -20t-35.5 -7h-394q-15 0 -33 8.5t-33.5 23t-26.5 3 | ||
| 92 | q-21 0 -35.5 -14.5t-14.5 -35.5t14.5 -35.5t35.5 -14.5h299zM714 374q0 21 -14.5 36t-35.5 15h-299q-21 0 -35.5 -15t-14.5 -36t14.5 -35t35.5 -14h299q21 0 35.5 14t14.5 35zM714 374z" /> | 92 | q-21 0 -35.5 -14.5t-14.5 -35.5t14.5 -35.5t35.5 -14.5h299zM714 374q0 21 -14.5 36t-35.5 15h-299q-21 0 -35.5 -15t-14.5 -36t14.5 -35t35.5 -14h299q21 0 35.5 14t14.5 35zM714 374z" /> |
| 93 | <glyph glyph-name="uniE619" unicode="" | 93 | <glyph glyph-name="uniE619" unicode="" |
| 94 | d="M512 515q47 0 88 -18t72 -49t49 -72t18 -89q0 -23 -4.5 -45t-13.5 -42q-18 -41 -49 -72t-72 -49q-20 -9 -42 -13.5t-46 -4.5q-47 0 -88 18t-72 49t-49 72t-18 87q0 48 18 89t49 72t72 49t88 18v0zM512 515z" /> | 94 | d="M512 515q47 0 88 -18t72 -49t49 -72t18 -89q0 -23 -4.5 -45t-13.5 -42q-18 -41 -49 -72t-72 -49q-20 -9 -42 -13.5t-46 -4.5q-47 0 -88 18t-72 49t-49 72t-18 87q0 48 18 89t49 72t72 49t88 18v0zM512 515z" /> |
| 95 | + <glyph glyph-name="uniE61A" unicode="" | ||
| 96 | +d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" /> | ||
| 97 | + <glyph glyph-name="uniE61B" unicode="" | ||
| 98 | +d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328 | ||
| 99 | +q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" /> | ||
| 95 | </font> | 100 | </font> |
| 96 | </defs></svg> | 101 | </defs></svg> |
No preview for this file type
No preview for this file type
| @@ -4,5 +4,6 @@ require('./js/common'); | @@ -4,5 +4,6 @@ require('./js/common'); | ||
| 4 | 4 | ||
| 5 | require('./js/home/home'); | 5 | require('./js/home/home'); |
| 6 | require('./js/product/list'); | 6 | require('./js/product/list'); |
| 7 | +require('./js/product/product'); | ||
| 7 | 8 | ||
| 8 | module.exports = webYohobuy; | 9 | module.exports = webYohobuy; |
web-static/js/common/product-event.js
0 → 100644
| 1 | +/** | ||
| 2 | + *Description: 商品自定义事件 | ||
| 3 | + *Author: chenglong.wang@yoho.cn | ||
| 4 | + *Date: 2015/12/3 | ||
| 5 | + */ | ||
| 6 | + | ||
| 7 | +var $ = require('yoho.jquery'); | ||
| 8 | + | ||
| 9 | +function ProductEvent() { | ||
| 10 | + | ||
| 11 | + this.handlers = {}; | ||
| 12 | + | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +ProductEvent.prototype = { | ||
| 16 | + | ||
| 17 | + constructor: ProductEvent, | ||
| 18 | + | ||
| 19 | + addHandler: function(type, handler) { | ||
| 20 | + if (typeof this.handlers[type] === 'undefined') { | ||
| 21 | + this.handlers[type] = []; | ||
| 22 | + } | ||
| 23 | + this.handlers[type].push(handler); | ||
| 24 | + }, | ||
| 25 | + | ||
| 26 | + fire: function(event) { | ||
| 27 | + var handlers, | ||
| 28 | + i; | ||
| 29 | + | ||
| 30 | + if (!event.target) { | ||
| 31 | + | ||
| 32 | + event.target = this; | ||
| 33 | + } | ||
| 34 | + if (this.handlers[event.type] instanceof Array) { | ||
| 35 | + handlers = this.handlers[event.type]; | ||
| 36 | + for (i = 0; i < handlers.length; i++) { | ||
| 37 | + handlers[i](event); | ||
| 38 | + } | ||
| 39 | + } | ||
| 40 | + }, | ||
| 41 | + | ||
| 42 | + removeHandler: function(type, handler) { | ||
| 43 | + var handlers, | ||
| 44 | + i; | ||
| 45 | + | ||
| 46 | + if (this.handlers[type] instanceof Array) { | ||
| 47 | + handlers = this.handlers[type]; | ||
| 48 | + for (i = 0; i < handlers.length; i++) { | ||
| 49 | + if (handlers[i] === handler) { | ||
| 50 | + break; | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | + handlers.splice(i, 1); | ||
| 54 | + } | ||
| 55 | + } | ||
| 56 | +}; | ||
| 57 | + | ||
| 58 | +module.exports = function($o, rowWidth) { | ||
| 59 | + | ||
| 60 | + var pMouseHover = new ProductEvent(); | ||
| 61 | + | ||
| 62 | + var targetWidth = $o.eq(0).width(), | ||
| 63 | + targetHeight = $o.eq(0).height(), | ||
| 64 | + winW = $(window).width(); | ||
| 65 | + | ||
| 66 | + function handleEvent(event) { | ||
| 67 | + var $target, | ||
| 68 | + targetX = 0, | ||
| 69 | + targetY = 0, | ||
| 70 | + rowW = rowWidth, | ||
| 71 | + activeIndex = 0, | ||
| 72 | + $targetDuplicate = '', | ||
| 73 | + offsetL = 0, | ||
| 74 | + offsetR = 0; | ||
| 75 | + | ||
| 76 | + | ||
| 77 | + switch (event.type) { | ||
| 78 | + case 'mouseenter': | ||
| 79 | + | ||
| 80 | + $target = $(this); | ||
| 81 | + $targetDuplicate = $target.clone(); | ||
| 82 | + activeIndex = $target.index() + 1; | ||
| 83 | + targetX = (activeIndex % rowW) === 0 ? rowW : activeIndex % rowW; | ||
| 84 | + targetY = Math.ceil(activeIndex / rowW); | ||
| 85 | + offsetL = $target.offset().left; | ||
| 86 | + offsetR = winW - (offsetL + targetWidth); | ||
| 87 | + | ||
| 88 | + pMouseHover.fire({ | ||
| 89 | + type: 'MouseEnter', | ||
| 90 | + target: $target, | ||
| 91 | + targetWidth: targetWidth, | ||
| 92 | + targetHeight: targetHeight, | ||
| 93 | + targetX: targetX, | ||
| 94 | + targetY: targetY, | ||
| 95 | + rowWidth: rowW, | ||
| 96 | + activeIndex: activeIndex, | ||
| 97 | + targetDuplicate: $targetDuplicate, | ||
| 98 | + offsetL: offsetL, | ||
| 99 | + offsetR: offsetR | ||
| 100 | + }); | ||
| 101 | + break; | ||
| 102 | + case 'mouseleave': | ||
| 103 | + pMouseHover.fire({ | ||
| 104 | + type: 'MouseLeave' | ||
| 105 | + }); | ||
| 106 | + break; | ||
| 107 | + } | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + $o.bind('mouseenter', handleEvent); | ||
| 111 | + | ||
| 112 | + //$o.bind('mouseleave', handleEvent); | ||
| 113 | + | ||
| 114 | + return pMouseHover; | ||
| 115 | +}; |
web-static/js/product/filter.js
0 → 100644
| 1 | +/** | ||
| 2 | + * 商品筛选逻辑 | ||
| 3 | + * @author: xuqi<qi.xu@yoho.cn> | ||
| 4 | + * @date: 2015/12/4 | ||
| 5 | + */ | ||
| 6 | + | ||
| 7 | +var $ = require('yoho.jquery'); | ||
| 8 | + | ||
| 9 | +var checkUnicode = { | ||
| 10 | + unchecked: '', | ||
| 11 | + checked: '' | ||
| 12 | +}, | ||
| 13 | +moreUnicode = { | ||
| 14 | + up: '', | ||
| 15 | + down: '' | ||
| 16 | +}; | ||
| 17 | + | ||
| 18 | +//品牌相关变量 | ||
| 19 | +var $brandDefault = $('.brand .default'), | ||
| 20 | + $brandPanel = $('.brand .brand-panel'), | ||
| 21 | + $brandAttrs = $('.brand .attr'), | ||
| 22 | + $brandMore = $('#brand-more'), | ||
| 23 | + $brandMulti = $('#brand-multi'); | ||
| 24 | + | ||
| 25 | +var $brandMoreTxt, $brandMoreIcon; | ||
| 26 | + | ||
| 27 | +//价格相关变量 | ||
| 28 | +var $udPrice = $('.ud-price-range'), | ||
| 29 | + interReg = /^\d+$/, | ||
| 30 | + $limit, $min, $max, $btn; | ||
| 31 | + | ||
| 32 | +//分类相关变量 | ||
| 33 | +var $sortSub = $('.sort-sub-wrap'); | ||
| 34 | + | ||
| 35 | +//高级选项相关变量 | ||
| 36 | +var $seniorSubWrap = $('.senior-sub-wrap'), | ||
| 37 | + $seniorAttrWrap = $('.senior-attr-wrap'); | ||
| 38 | + | ||
| 39 | +var seniorHoverTime, hoveredIndex; | ||
| 40 | + | ||
| 41 | +//清除checkbox选中状态 | ||
| 42 | +function clearChecked($checkbox) { | ||
| 43 | + $checkbox.removeClass('checked').html(checkUnicode.unchecked); | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +//显示更多品牌面板 | ||
| 47 | +function brandShowMore() { | ||
| 48 | + $brandDefault.addClass('hide'); | ||
| 49 | + $brandPanel.removeClass('hide'); | ||
| 50 | +} | ||
| 51 | + | ||
| 52 | +//隐藏更多品牌面板 | ||
| 53 | +function brandHideMore() { | ||
| 54 | + $brandPanel.addClass('hide'); | ||
| 55 | + $brandDefault.removeClass('hide'); | ||
| 56 | +} | ||
| 57 | + | ||
| 58 | +//url构造&跳转 | ||
| 59 | +function uriLoc(attr, val) { | ||
| 60 | + var href = decodeURIComponent(window.location.search), | ||
| 61 | + query = attr + '=' + val, | ||
| 62 | + newHref; | ||
| 63 | + | ||
| 64 | + if (href === '') { | ||
| 65 | + newHref = '?' + query; | ||
| 66 | + } else { | ||
| 67 | + newHref = href + '&' + query; | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + window.location.href = newHref; | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +//隐藏高级选项面板 | ||
| 74 | +function hideSeniorPanel(index) { | ||
| 75 | + $seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide'); | ||
| 76 | + $seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover'); | ||
| 77 | + hoveredIndex = -1; | ||
| 78 | +} | ||
| 79 | + | ||
| 80 | +//屏蔽筛选项双击文字选中 | ||
| 81 | +$('.filter-box').on('selectstart', '.attr, .brands-index span', function() { | ||
| 82 | + return false; | ||
| 83 | +}); | ||
| 84 | + | ||
| 85 | +//【分类】 | ||
| 86 | +$('.sort-pre').on('click', 'li', function() { | ||
| 87 | + var $this = $(this), | ||
| 88 | + index = $this.index(); | ||
| 89 | + | ||
| 90 | + $this.siblings('.active').removeClass('active'); | ||
| 91 | + $this.addClass('active'); | ||
| 92 | + | ||
| 93 | + $sortSub.children(':not(.hide)').addClass('hide'); | ||
| 94 | + $sortSub.children(':eq(' + index + ')').removeClass('hide'); | ||
| 95 | +}); | ||
| 96 | + | ||
| 97 | +//【品牌】 | ||
| 98 | +if ($brandMore.length > 0) { | ||
| 99 | + $brandMoreTxt = $brandMore.children('em'); | ||
| 100 | + $brandMoreIcon = $brandMore.children('.iconfont'); | ||
| 101 | +} | ||
| 102 | + | ||
| 103 | +//【品牌】多选 | ||
| 104 | +$brandMulti.click(function() { | ||
| 105 | + if ($brandPanel.css('display') === 'none') { | ||
| 106 | + | ||
| 107 | + //显示品牌面板 | ||
| 108 | + brandShowMore(); | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + $brandPanel.addClass('multi'); //显示出checkbox | ||
| 112 | + $(this).addClass('hide'); | ||
| 113 | +}); | ||
| 114 | + | ||
| 115 | +//【品牌】更多 | ||
| 116 | +$brandMore.click(function() { | ||
| 117 | + var $this = $(this); | ||
| 118 | + | ||
| 119 | + if ($this.hasClass('more')) { | ||
| 120 | + brandHideMore(); | ||
| 121 | + | ||
| 122 | + $brandMoreTxt.text('更多'); | ||
| 123 | + $brandMoreIcon.html(moreUnicode.down); | ||
| 124 | + } else { | ||
| 125 | + brandShowMore(); | ||
| 126 | + | ||
| 127 | + $brandMoreTxt.text('收起'); | ||
| 128 | + $brandMoreIcon.html(moreUnicode.up); | ||
| 129 | + } | ||
| 130 | + | ||
| 131 | + $(this).toggleClass('more'); | ||
| 132 | +}); | ||
| 133 | + | ||
| 134 | +//【品牌】索引 | ||
| 135 | +$('.brands-index').on('click', 'span', function() { | ||
| 136 | + var $this = $(this), | ||
| 137 | + index = $this.data('index'); | ||
| 138 | + | ||
| 139 | + if ($this.index() === 0) { | ||
| 140 | + | ||
| 141 | + //全部 | ||
| 142 | + $brandAttrs.removeClass('hide'); | ||
| 143 | + } else { | ||
| 144 | + $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide'); | ||
| 145 | + } | ||
| 146 | +}); | ||
| 147 | + | ||
| 148 | +//【品牌】搜索 | ||
| 149 | +$('#brand-search-input').keyup(function() { | ||
| 150 | + var val = $(this).val().toLowerCase(); | ||
| 151 | + | ||
| 152 | + if (val === '') { | ||
| 153 | + $brandAttrs.removeClass('hide'); | ||
| 154 | + } else { | ||
| 155 | + $brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide'); | ||
| 156 | + } | ||
| 157 | +}); | ||
| 158 | + | ||
| 159 | +//【品牌】多选确定 | ||
| 160 | +$('#brand-multi-ok').click(function() { | ||
| 161 | + var val = ''; | ||
| 162 | + | ||
| 163 | + if ($(this).hasClass('dis')) { | ||
| 164 | + return; | ||
| 165 | + } | ||
| 166 | + | ||
| 167 | + $brandPanel.find('.checked').each(function() { | ||
| 168 | + var id = $(this).data('id'); | ||
| 169 | + | ||
| 170 | + val += (val === '') ? id : (',' + id); | ||
| 171 | + }); | ||
| 172 | + | ||
| 173 | + uriLoc('brand', val); | ||
| 174 | +}); | ||
| 175 | + | ||
| 176 | +//【品牌/高级选项】多选取消 | ||
| 177 | +$('.multi-select-cancel').click(function() { | ||
| 178 | + var $panel = $(this).closest('.multi'); | ||
| 179 | + | ||
| 180 | + if ($panel.hasClass('brand-panel')) { | ||
| 181 | + brandHideMore(); | ||
| 182 | + | ||
| 183 | + $brandMulti.removeClass('hide'); //显示多选按钮 | ||
| 184 | + } | ||
| 185 | + | ||
| 186 | + $panel.removeClass('multi'); | ||
| 187 | + clearChecked($panel.find('.checkbox.checked')); //清除选中状态 | ||
| 188 | +}); | ||
| 189 | + | ||
| 190 | +//【品牌/高级选项】checkbox | ||
| 191 | +$('.check-container').on('click', '.attr', function() { | ||
| 192 | + var $this = $(this), | ||
| 193 | + $check = $this.find('.checkbox'), | ||
| 194 | + $btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok'); | ||
| 195 | + | ||
| 196 | + $check.toggleClass('checked'); | ||
| 197 | + | ||
| 198 | + if ($check.hasClass('checked')) { | ||
| 199 | + $check.html(checkUnicode.checked); | ||
| 200 | + } else { | ||
| 201 | + $check.html(checkUnicode.unchecked); | ||
| 202 | + } | ||
| 203 | + | ||
| 204 | + //更新按钮状态 | ||
| 205 | + if ($check.hasClass('checked') || | ||
| 206 | + $this.siblings('.attr').find('.checked').length > 0) { | ||
| 207 | + $btnOk.removeClass('dis'); | ||
| 208 | + } else { | ||
| 209 | + $btnOk.addClass('dis'); | ||
| 210 | + } | ||
| 211 | +}); | ||
| 212 | + | ||
| 213 | +//【品牌/高级选项】当多选时阻止链接默认跳转 | ||
| 214 | +$('.brand, .senior').on('click', '.attr > a', function(e) { | ||
| 215 | + if ($(this).closest('.multi').length > 0) { | ||
| 216 | + e.preventDefault(); | ||
| 217 | + } | ||
| 218 | +}); | ||
| 219 | + | ||
| 220 | +//【价格】用户定义价格处理 | ||
| 221 | +if ($udPrice.length > 0) { | ||
| 222 | + $limit = $udPrice.find('.limit'); | ||
| 223 | + $min = $limit.filter('.min'); | ||
| 224 | + $max = $limit.filter('.max'); | ||
| 225 | + $btn = $udPrice.find('.price-sure'); | ||
| 226 | + | ||
| 227 | + //【价格】输入 | ||
| 228 | + $limit.keyup(function() { | ||
| 229 | + var min = $.trim($min.val()), | ||
| 230 | + max = $.trim($max.val()), | ||
| 231 | + isMinInt = interReg.test(min), | ||
| 232 | + isMaxInt = interReg.test(max); | ||
| 233 | + | ||
| 234 | + if (isMaxInt && (min === '' || isMinInt) || | ||
| 235 | + isMinInt && (max === '' || isMaxInt) | ||
| 236 | + ) { | ||
| 237 | + $btn.removeClass('hide'); | ||
| 238 | + } else { | ||
| 239 | + $btn.addClass('hide'); | ||
| 240 | + } | ||
| 241 | + }); | ||
| 242 | + | ||
| 243 | + //【价格】多项查询 | ||
| 244 | + $btn.click(function() { | ||
| 245 | + var min = $.trim($min.val()), | ||
| 246 | + max = $.trim($max.val()), | ||
| 247 | + tmp; | ||
| 248 | + | ||
| 249 | + //对于min大于max的情况，交换位置 | ||
| 250 | + if (min !== '' && max !== '' && +min > +max) { | ||
| 251 | + tmp = max; | ||
| 252 | + max = min; | ||
| 253 | + min = tmp; | ||
| 254 | + } | ||
| 255 | + | ||
| 256 | + uriLoc('price', min + ',' + max); | ||
| 257 | + }); | ||
| 258 | +} | ||
| 259 | + | ||
| 260 | +//【高级选项】鼠标移入显示子项 | ||
| 261 | +$seniorAttrWrap.on('mouseenter', '.attr', function() { | ||
| 262 | + var index = $(this).addClass('hover').index(); | ||
| 263 | + | ||
| 264 | + $seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide'); | ||
| 265 | +}).on('mouseleave', '.attr', function() { | ||
| 266 | + var $this = $(this), | ||
| 267 | + index = $this.index(); | ||
| 268 | + | ||
| 269 | + hoveredIndex = index; | ||
| 270 | + | ||
| 271 | + seniorHoverTime = setTimeout(function() { | ||
| 272 | + hideSeniorPanel(); | ||
| 273 | + }, 100); | ||
| 274 | +}); | ||
| 275 | + | ||
| 276 | +//【高级选项】多选 | ||
| 277 | +$('.senior-sub').on('click', '.multi-select', function() { | ||
| 278 | + $(this).closest('.senior-sub').addClass('multi'); | ||
| 279 | +}).on('click', '.multi-select-ok', function() { | ||
| 280 | + var $btn = $(this), | ||
| 281 | + $sub = $btn.closest('.senior-sub'), | ||
| 282 | + val = ''; | ||
| 283 | + | ||
| 284 | + if ($btn.hasClass('dis')) { | ||
| 285 | + return; | ||
| 286 | + } | ||
| 287 | + | ||
| 288 | + $sub.find('.checked').each(function() { | ||
| 289 | + var id = $(this).data('id'); | ||
| 290 | + | ||
| 291 | + val += (val === '') ? id : (',' + id); | ||
| 292 | + }); | ||
| 293 | + | ||
| 294 | + uriLoc($sub.data('attr'), val); | ||
| 295 | +}).on('mouseenter', function() { | ||
| 296 | + clearTimeout(seniorHoverTime); | ||
| 297 | +}).on('mouseleave', function() { | ||
| 298 | + hideSeniorPanel(); | ||
| 299 | +}); |
| @@ -4,420 +4,8 @@ | @@ -4,420 +4,8 @@ | ||
| 4 | * @date: 2015/11/23 | 4 | * @date: 2015/11/23 |
| 5 | */ | 5 | */ |
| 6 | 6 | ||
| 7 | -var $ = require('yoho.jquery'); | 7 | +require('./filter'); |
| 8 | 8 | ||
| 9 | -var checkUnicode = { | ||
| 10 | - unchecked: '', | ||
| 11 | - checked: '' | ||
| 12 | -}, | ||
| 13 | -moreUnicode = { | ||
| 14 | - up: '', | ||
| 15 | - down: '' | ||
| 16 | -}; | 9 | +require('./sort-pager'); |
| 17 | 10 | ||
| 18 | -//品牌相关变量 | ||
| 19 | -var $brandDefault = $('.brand .default'), | ||
| 20 | - $brandPanel = $('.brand .brand-panel'), | ||
| 21 | - $brandAttrs = $('.brand .attr'), | ||
| 22 | - $brandMore = $('#brand-more'), | ||
| 23 | - $brandMulti = $('#brand-multi'); | ||
| 24 | - | ||
| 25 | -var $brandMoreTxt, $brandMoreIcon; | ||
| 26 | - | ||
| 27 | -//商品相关变量 | ||
| 28 | -var $goodsContainer = $('.goods-container'), | ||
| 29 | - $goodItem = $goodsContainer.find('.good-info'), | ||
| 30 | - $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'), | ||
| 31 | - $goodInfoMain = $goodsContainer.find('.good-info-main'), | ||
| 32 | - $goodSelectColor = $goodsContainer.find('.good-select-color'); | ||
| 33 | - | ||
| 34 | -//价格相关变量 | ||
| 35 | -var $udPrice = $('.ud-price-range'), | ||
| 36 | - interReg = /^\d+$/, | ||
| 37 | - $limit, $min, $max, $btn; | ||
| 38 | - | ||
| 39 | -//分类相关变量 | ||
| 40 | -var $sortSub = $('.sort-sub-wrap'); | ||
| 41 | - | ||
| 42 | -//高级选项相关变量 | ||
| 43 | -var $seniorSubWrap = $('.senior-sub-wrap'), | ||
| 44 | - $seniorAttrWrap = $('.senior-attr-wrap'); | ||
| 45 | - | ||
| 46 | -var seniorHoverTime, hoveredIndex; | ||
| 47 | - | ||
| 48 | -//清除checkbox选中状态 | ||
| 49 | -function clearChecked($checkbox) { | ||
| 50 | - $checkbox.removeClass('checked').html(checkUnicode.unchecked); | ||
| 51 | -} | ||
| 52 | - | ||
| 53 | -//显示更多品牌面板 | ||
| 54 | -function brandShowMore() { | ||
| 55 | - $brandDefault.addClass('hide'); | ||
| 56 | - $brandPanel.removeClass('hide'); | ||
| 57 | -} | ||
| 58 | - | ||
| 59 | -//隐藏更多品牌面板 | ||
| 60 | -function brandHideMore() { | ||
| 61 | - $brandPanel.addClass('hide'); | ||
| 62 | - $brandDefault.removeClass('hide'); | ||
| 63 | -} | ||
| 64 | - | ||
| 65 | -//url构造&跳转 | ||
| 66 | -function uriLoc(attr, val) { | ||
| 67 | - var href = decodeURIComponent(window.location.search), | ||
| 68 | - query = attr + '=' + val, | ||
| 69 | - newHref; | ||
| 70 | - | ||
| 71 | - if (href === '') { | ||
| 72 | - newHref = '?' + query; | ||
| 73 | - } else { | ||
| 74 | - newHref = href + '&' + query; | ||
| 75 | - } | ||
| 76 | - | ||
| 77 | - window.location.href = newHref; | ||
| 78 | -} | ||
| 79 | - | ||
| 80 | -//隐藏高级选项面板 | ||
| 81 | -function hideSeniorPanel(index) { | ||
| 82 | - $seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide'); | ||
| 83 | - $seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover'); | ||
| 84 | - hoveredIndex = -1; | ||
| 85 | -} | ||
| 86 | - | ||
| 87 | -//屏蔽筛选项双击文字选中 | ||
| 88 | -$('.filter-box').on('selectstart', '.attr, .brands-index span', function() { | ||
| 89 | - return false; | ||
| 90 | -}); | ||
| 91 | - | ||
| 92 | -//【分类】 | ||
| 93 | -$('.sort-pre').on('click', 'li', function() { | ||
| 94 | - var index = $(this).index(); | ||
| 95 | - | ||
| 96 | - $sortSub.children(':not(.hide)').addClass('hide'); | ||
| 97 | - $sortSub.children(':eq(' + index + ')').removeClass('hide'); | ||
| 98 | -}); | ||
| 99 | - | ||
| 100 | -//【品牌】 | ||
| 101 | -if ($brandMore.length > 0) { | ||
| 102 | - $brandMoreTxt = $brandMore.children('em'); | ||
| 103 | - $brandMoreIcon = $brandMore.children('.iconfont'); | ||
| 104 | -} | ||
| 105 | - | ||
| 106 | -//【品牌】多选 | ||
| 107 | -$brandMulti.click(function() { | ||
| 108 | - if ($brandPanel.css('display') === 'none') { | ||
| 109 | - | ||
| 110 | - //显示品牌面板 | ||
| 111 | - brandShowMore(); | ||
| 112 | - } | ||
| 113 | - | ||
| 114 | - $brandPanel.addClass('multi'); //显示出checkbox | ||
| 115 | - $(this).addClass('hide'); | ||
| 116 | -}); | ||
| 117 | - | ||
| 118 | -//【品牌】更多 | ||
| 119 | -$brandMore.click(function() { | ||
| 120 | - var $this = $(this); | ||
| 121 | - | ||
| 122 | - if ($this.hasClass('more')) { | ||
| 123 | - brandHideMore(); | ||
| 124 | - | ||
| 125 | - $brandMoreTxt.text('更多'); | ||
| 126 | - $brandMoreIcon.html(moreUnicode.down); | ||
| 127 | - } else { | ||
| 128 | - brandShowMore(); | ||
| 129 | - | ||
| 130 | - $brandMoreTxt.text('收起'); | ||
| 131 | - $brandMoreIcon.html(moreUnicode.up); | ||
| 132 | - } | ||
| 133 | - | ||
| 134 | - $(this).toggleClass('more'); | ||
| 135 | -}); | ||
| 136 | - | ||
| 137 | -//【品牌】索引 | ||
| 138 | -$('.brands-index').on('click', 'span', function() { | ||
| 139 | - var $this = $(this), | ||
| 140 | - index = $this.data('index'); | ||
| 141 | - | ||
| 142 | - if ($this.index() === 0) { | ||
| 143 | - | ||
| 144 | - //全部 | ||
| 145 | - $brandAttrs.removeClass('hide'); | ||
| 146 | - } else { | ||
| 147 | - $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide'); | ||
| 148 | - } | ||
| 149 | -}); | ||
| 150 | - | ||
| 151 | -//【品牌】搜索 | ||
| 152 | -$('#brand-search-input').keyup(function() { | ||
| 153 | - var val = $(this).val().toLowerCase(); | ||
| 154 | - | ||
| 155 | - if (val === '') { | ||
| 156 | - $brandAttrs.removeClass('hide'); | ||
| 157 | - } else { | ||
| 158 | - $brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide'); | ||
| 159 | - } | ||
| 160 | -}); | ||
| 161 | - | ||
| 162 | -//【品牌】多选确定 | ||
| 163 | -$('#brand-multi-ok').click(function() { | ||
| 164 | - var val = ''; | ||
| 165 | - | ||
| 166 | - if ($(this).hasClass('dis')) { | ||
| 167 | - return; | ||
| 168 | - } | ||
| 169 | - | ||
| 170 | - $brandPanel.find('.checked').each(function() { | ||
| 171 | - var id = $(this).data('id'); | ||
| 172 | - | ||
| 173 | - val += (val === '') ? id : (',' + id); | ||
| 174 | - }); | ||
| 175 | - | ||
| 176 | - uriLoc('brand', val); | ||
| 177 | -}); | ||
| 178 | - | ||
| 179 | -//【品牌/高级选项】多选取消 | ||
| 180 | -$('.multi-select-cancel').click(function() { | ||
| 181 | - var $panel = $(this).closest('.multi'); | ||
| 182 | - | ||
| 183 | - if ($panel.hasClass('brand-panel')) { | ||
| 184 | - brandHideMore(); | ||
| 185 | - | ||
| 186 | - $brandMulti.removeClass('hide'); //显示多选按钮 | ||
| 187 | - } | ||
| 188 | - | ||
| 189 | - $panel.removeClass('multi'); | ||
| 190 | - clearChecked($panel.find('.checkbox.checked')); //清除选中状态 | ||
| 191 | -}); | ||
| 192 | - | ||
| 193 | -//【品牌/高级选项】checkbox | ||
| 194 | -$('.check-container').on('click', '.attr', function() { | ||
| 195 | - var $this = $(this), | ||
| 196 | - $check = $this.find('.checkbox'), | ||
| 197 | - $btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok'); | ||
| 198 | - | ||
| 199 | - $check.toggleClass('checked'); | ||
| 200 | - | ||
| 201 | - if ($check.hasClass('checked')) { | ||
| 202 | - $check.html(checkUnicode.checked); | ||
| 203 | - } else { | ||
| 204 | - $check.html(checkUnicode.unchecked); | ||
| 205 | - } | ||
| 206 | - | ||
| 207 | - //更新按钮状态 | ||
| 208 | - if ($check.hasClass('checked') || | ||
| 209 | - $this.siblings('.attr').find('.checked').length > 0) { | ||
| 210 | - $btnOk.removeClass('dis'); | ||
| 211 | - } else { | ||
| 212 | - $btnOk.addClass('dis'); | ||
| 213 | - } | ||
| 214 | -}); | ||
| 215 | - | ||
| 216 | -//【品牌/高级选项】当多选时阻止链接默认跳转 | ||
| 217 | -$('.brand, .senior').on('click', '.attr > a', function(e) { | ||
| 218 | - if ($(this).closest('.multi').length > 0) { | ||
| 219 | - e.preventDefault(); | ||
| 220 | - } | ||
| 221 | -}); | ||
| 222 | - | ||
| 223 | -//【价格】用户定义价格处理 | ||
| 224 | -if ($udPrice.length > 0) { | ||
| 225 | - $limit = $udPrice.find('.limit'); | ||
| 226 | - $min = $limit.filter('.min'); | ||
| 227 | - $max = $limit.filter('.max'); | ||
| 228 | - $btn = $udPrice.find('.price-sure'); | ||
| 229 | - | ||
| 230 | - //【价格】输入 | ||
| 231 | - $limit.keyup(function() { | ||
| 232 | - var min = $.trim($min.val()), | ||
| 233 | - max = $.trim($max.val()), | ||
| 234 | - isMinInt = interReg.test(min), | ||
| 235 | - isMaxInt = interReg.test(max); | ||
| 236 | - | ||
| 237 | - if (isMaxInt && (min === '' || isMinInt) || | ||
| 238 | - isMinInt && (max === '' || isMaxInt) | ||
| 239 | - ) { | ||
| 240 | - $btn.removeClass('hide'); | ||
| 241 | - } else { | ||
| 242 | - $btn.addClass('hide'); | ||
| 243 | - } | ||
| 244 | - }); | ||
| 245 | - | ||
| 246 | - //【价格】多项查询 | ||
| 247 | - $btn.click(function() { | ||
| 248 | - var min = $.trim($min.val()), | ||
| 249 | - max = $.trim($max.val()), | ||
| 250 | - tmp; | ||
| 251 | - | ||
| 252 | - //对于min大于max的情况，交换位置 | ||
| 253 | - if (min !== '' && max !== '' && +min > +max) { | ||
| 254 | - tmp = max; | ||
| 255 | - max = min; | ||
| 256 | - min = tmp; | ||
| 257 | - } | ||
| 258 | - | ||
| 259 | - uriLoc('price', min + ',' + max); | ||
| 260 | - }); | ||
| 261 | -} | ||
| 262 | - | ||
| 263 | -//【高级选项】鼠标移入显示子项 | ||
| 264 | -$seniorAttrWrap.on('mouseenter', '.attr', function() { | ||
| 265 | - var index = $(this).addClass('hover').index(); | ||
| 266 | - | ||
| 267 | - $seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide'); | ||
| 268 | -}).on('mouseleave', '.attr', function() { | ||
| 269 | - var $this = $(this), | ||
| 270 | - index = $this.index(); | ||
| 271 | - | ||
| 272 | - hoveredIndex = index; | ||
| 273 | - | ||
| 274 | - seniorHoverTime = setTimeout(function() { | ||
| 275 | - hideSeniorPanel(); | ||
| 276 | - }, 100); | ||
| 277 | -}); | ||
| 278 | - | ||
| 279 | -//【高级选项】多选 | ||
| 280 | -$('.senior-sub').on('click', '.multi-select', function() { | ||
| 281 | - $(this).closest('.senior-sub').addClass('multi'); | ||
| 282 | -}).on('click', '.multi-select-ok', function() { | ||
| 283 | - var $btn = $(this), | ||
| 284 | - $sub = $btn.closest('.senior-sub'), | ||
| 285 | - val = ''; | ||
| 286 | - | ||
| 287 | - if ($btn.hasClass('dis')) { | ||
| 288 | - return; | ||
| 289 | - } | ||
| 290 | - | ||
| 291 | - $sub.find('.checked').each(function() { | ||
| 292 | - var id = $(this).data('id'); | ||
| 293 | - | ||
| 294 | - val += (val === '') ? id : (',' + id); | ||
| 295 | - }); | ||
| 296 | - | ||
| 297 | - uriLoc($sub.data('attr'), val); | ||
| 298 | -}).on('mouseenter', function() { | ||
| 299 | - clearTimeout(seniorHoverTime); | ||
| 300 | -}).on('mouseleave', function() { | ||
| 301 | - hideSeniorPanel(); | ||
| 302 | -}); | ||
| 303 | - | ||
| 304 | -//操作栏 | ||
| 305 | -(function() { | ||
| 306 | - var $countPerPage = $('#count-per-page'), | ||
| 307 | - $countChose = $countPerPage.next('ul'); | ||
| 308 | - | ||
| 309 | - var SLIDETIME = 200; | ||
| 310 | - | ||
| 311 | - $(document).click(function(e) { | ||
| 312 | - if ($(e.target).closest('.page-count').length > 0) { | ||
| 313 | - return; | ||
| 314 | - } | ||
| 315 | - | ||
| 316 | - $countChose && $countChose.slideUp(SLIDETIME); | ||
| 317 | - }); | ||
| 318 | - | ||
| 319 | - $countPerPage.click(function() { | ||
| 320 | - if ($countChose.css('display') === 'none') { | ||
| 321 | - $countChose.slideDown(SLIDETIME); | ||
| 322 | - } else { | ||
| 323 | - $countChose.slideUp(SLIDETIME); | ||
| 324 | - } | ||
| 325 | - }); | ||
| 326 | -}()); | ||
| 327 | - | ||
| 328 | - | ||
| 329 | -/* | ||
| 330 | - * Description: 商品列表移入效果 | ||
| 331 | - * Added by wangchenglong at 2015/12/1 | ||
| 332 | - */ | ||
| 333 | - | ||
| 334 | -// 构造html | ||
| 335 | -function createColorList(data) { | ||
| 336 | - var colorListStr = '', | ||
| 337 | - len = data.length, | ||
| 338 | - row = 4, //每列ul放4个li | ||
| 339 | - col = Math.ceil(len / row), //需要几**列**ul | ||
| 340 | - i, | ||
| 341 | - j, | ||
| 342 | - index, | ||
| 343 | - ulNum = 0; | ||
| 344 | - | ||
| 345 | - for (i = 0; i < col; i++) { | ||
| 346 | - colorListStr += '<ul>'; | ||
| 347 | - for (j = 0; j < row; j++) { | ||
| 348 | - index = i * row + j; | ||
| 349 | - if (index === len) { | ||
| 350 | - break; | ||
| 351 | - } | ||
| 352 | - colorListStr += | ||
| 353 | - '<li>' + | ||
| 354 | - '<a href="' + data[i * row + j].url + '">' + | ||
| 355 | - '<img src="' + data[i * row + j].src + '" />' + | ||
| 356 | - '</a>' + | ||
| 357 | - '</li>'; | ||
| 358 | - | ||
| 359 | - if (j === row - 1) { | ||
| 360 | - colorListStr += '</ul>'; | ||
| 361 | - ulNum++; | ||
| 362 | - } | ||
| 363 | - } | ||
| 364 | - } | ||
| 365 | - if (ulNum < col) { | ||
| 366 | - colorListStr += '</ul>'; | ||
| 367 | - } | ||
| 368 | - return colorListStr; | ||
| 369 | -} | ||
| 370 | - | ||
| 371 | -//todo | ||
| 372 | -$goodItem.mouseenter(function() { | ||
| 373 | - var $cloneStr, | ||
| 374 | - activeIndex, | ||
| 375 | - X, | ||
| 376 | - left, | ||
| 377 | - Y, | ||
| 378 | - top, | ||
| 379 | - colNum = 5, | ||
| 380 | - itemW = 222, | ||
| 381 | - itemH = 400, | ||
| 382 | - itemMr = 10, | ||
| 383 | - itemMb = 35; | ||
| 384 | - | ||
| 385 | - activeIndex = $(this).index() + 1; | ||
| 386 | - | ||
| 387 | - X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum; | ||
| 388 | - Y = Math.ceil(activeIndex / colNum); | ||
| 389 | - left = (X - 1) * (itemW + itemMr) + 15 - 21; | ||
| 390 | - top = (Y - 1) * (itemH + itemMb) + 25 - 19; | ||
| 391 | - | ||
| 392 | - $cloneStr = $(this).clone(); | ||
| 393 | - | ||
| 394 | - $goodInfoMain.html(''); | ||
| 395 | - $goodSelectColor.html(''); | ||
| 396 | - $goodItemWrapper.css({ | ||
| 397 | - display: 'none' | ||
| 398 | - }); | ||
| 399 | - $.ajax({ | ||
| 400 | - type: 'GET', | ||
| 401 | - url: '/product/index/productColor', | ||
| 402 | - dataType: 'json' | ||
| 403 | - }).then(function(data) { | ||
| 404 | - | ||
| 405 | - $goodInfoMain.append($cloneStr); | ||
| 406 | - $goodSelectColor.append($(createColorList(data))); | ||
| 407 | - }); | ||
| 408 | - | ||
| 409 | - $goodItemWrapper.css({ | ||
| 410 | - left: left, | ||
| 411 | - top: top, | ||
| 412 | - display: 'inline-block' | ||
| 413 | - }); | ||
| 414 | - | ||
| 415 | -}); | ||
| 416 | - | ||
| 417 | -$goodItemWrapper.mouseleave(function() { | ||
| 418 | - $goodInfoMain.html(''); | ||
| 419 | - $goodSelectColor.html(''); | ||
| 420 | - $goodItemWrapper.css({ | ||
| 421 | - display: 'none' | ||
| 422 | - }); | ||
| 423 | -}); | ||
| 11 | +require('./product'); |
web-static/js/product/product.js
0 → 100644
| 1 | +/** | ||
| 2 | + *Description: 商品列表页 | ||
| 3 | + *Author: chenglong.wang@yoho.cn | ||
| 4 | + *Date: 2015/12/2 | ||
| 5 | + */ | ||
| 6 | + | ||
| 7 | +var $ = require('yoho.jquery'), | ||
| 8 | + productEvent = require('../common/product-event'); | ||
| 9 | + | ||
| 10 | +var $goodsContainer = $('.goods-container'), | ||
| 11 | + $goodItem = $goodsContainer.find('.good-info'), | ||
| 12 | + $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'), | ||
| 13 | + $goodInfoMain = $goodsContainer.find('.good-info-main'), | ||
| 14 | + $goodSelectColor = $goodsContainer.find('.good-select-color'), | ||
| 15 | + $productListNav = $('.product-list-nav'), | ||
| 16 | + productList; | ||
| 17 | + | ||
| 18 | +/** | ||
| 19 | + * @description 初始化鼠标移入商品列表弹层效果 | ||
| 20 | + * @num 每列存放商品的个数 | ||
| 21 | + */ | ||
| 22 | +exports.init = function(num) { | ||
| 23 | + | ||
| 24 | + productList = productEvent($goodItem, num); | ||
| 25 | + | ||
| 26 | + /** | ||
| 27 | + * @description 构造商品颜色列表的html结构 | ||
| 28 | + * @param data 商品颜色的数组，[url: '',src: ''] | ||
| 29 | + * @return json {'colorListStr': '', 'ulNum': ''} | ||
| 30 | + * */ | ||
| 31 | + function createColorList(data) { | ||
| 32 | + var colorListStr = '', | ||
| 33 | + len = data.length, | ||
| 34 | + row = 4, //每列ul放4个li | ||
| 35 | + col = Math.ceil(len / row), //需要几**列**ul | ||
| 36 | + i, | ||
| 37 | + j, | ||
| 38 | + index, | ||
| 39 | + ulNum = 0; | ||
| 40 | + | ||
| 41 | + for (i = 0; i < col; i++) { | ||
| 42 | + colorListStr += '<ul>'; | ||
| 43 | + for (j = 0; j < row; j++) { | ||
| 44 | + index = i * row + j; | ||
| 45 | + if (index === len) { | ||
| 46 | + break; | ||
| 47 | + } | ||
| 48 | + colorListStr += | ||
| 49 | + '<li>' + | ||
| 50 | + '<a href="' + data[i * row + j].url + '">' + | ||
| 51 | + '<img src="' + data[i * row + j].src + '" />' + | ||
| 52 | + '</a>' + | ||
| 53 | + '</li>'; | ||
| 54 | + | ||
| 55 | + if (j === row - 1) { | ||
| 56 | + colorListStr += '</ul>'; | ||
| 57 | + ulNum++; | ||
| 58 | + } | ||
| 59 | + } | ||
| 60 | + } | ||
| 61 | + if (ulNum < col) { | ||
| 62 | + colorListStr += '</ul>'; | ||
| 63 | + } | ||
| 64 | + return { | ||
| 65 | + colorListStr: colorListStr, | ||
| 66 | + ulNum: col | ||
| 67 | + }; | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + productList.addHandler('MouseEnter', function(event) { | ||
| 71 | + | ||
| 72 | + | ||
| 73 | + | ||
| 74 | + var itemMr = 10, //list的右边距 | ||
| 75 | + itemMb = 35, //list的下边距 | ||
| 76 | + ulStr = '', | ||
| 77 | + ulNum, | ||
| 78 | + wrapperWidth, | ||
| 79 | + diffWidth, | ||
| 80 | + wrapperX, | ||
| 81 | + wrapperY, | ||
| 82 | + wrapperPl, //鼠标移入时弹层的左内边距 | ||
| 83 | + wrapperPt, //鼠标移入时弹层的上内边距 | ||
| 84 | + containerPt; //商品列表容器的上内边距 | ||
| 85 | + | ||
| 86 | + $goodInfoMain.html(''); | ||
| 87 | + $goodSelectColor.html(''); | ||
| 88 | + $goodItemWrapper.css({ | ||
| 89 | + display: 'none' | ||
| 90 | + }); | ||
| 91 | + $.ajax({ | ||
| 92 | + type: 'GET', | ||
| 93 | + url: '/product/index/productColor', | ||
| 94 | + dataType: 'json' | ||
| 95 | + }).then(function(data) { | ||
| 96 | + | ||
| 97 | + ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表 | ||
| 98 | + ulNum = createColorList(data).ulNum;//ajax请求的颜色的数量 | ||
| 99 | + | ||
| 100 | + $goodInfoMain.append(event.targetDuplicate); | ||
| 101 | + $goodSelectColor.append($(ulStr)); | ||
| 102 | + | ||
| 103 | + wrapperPl = $goodItemWrapper.css('paddingLeft'); | ||
| 104 | + wrapperPt = $goodItemWrapper.css('paddingTop'); | ||
| 105 | + containerPt = $goodsContainer.css('paddingTop'); | ||
| 106 | + | ||
| 107 | + wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth; | ||
| 108 | + | ||
| 109 | + wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1); | ||
| 110 | + wrapperY = (event.targetY - 1) * | ||
| 111 | + (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1); | ||
| 112 | + | ||
| 113 | + //todo | ||
| 114 | + diffWidth = event.offsetR - ((15 + 50) * ulNum + 25); | ||
| 115 | + | ||
| 116 | + if (diffWidth <= 0) { | ||
| 117 | + wrapperX = wrapperX + diffWidth; | ||
| 118 | + } | ||
| 119 | + $goodItemWrapper.css({ | ||
| 120 | + width: wrapperWidth, | ||
| 121 | + left: wrapperX, | ||
| 122 | + top: wrapperY, | ||
| 123 | + display: 'inline-block' | ||
| 124 | + }); | ||
| 125 | + | ||
| 126 | + }); | ||
| 127 | + }); | ||
| 128 | + | ||
| 129 | + $goodItemWrapper.mouseleave(function() { | ||
| 130 | + $goodInfoMain.html(''); | ||
| 131 | + $goodSelectColor.html(''); | ||
| 132 | + $goodItemWrapper.css({ | ||
| 133 | + display: 'none' | ||
| 134 | + }); | ||
| 135 | + }); | ||
| 136 | + | ||
| 137 | + // 左侧导航 | ||
| 138 | + $productListNav.click(function() { | ||
| 139 | + if ($(this).hasClass('active')) { | ||
| 140 | + $(this).find('.sort-child-list').stop(true, true).slideUp(); | ||
| 141 | + } else { | ||
| 142 | + $(this).find('.sort-child-list').stop(true, true).slideDown(); | ||
| 143 | + } | ||
| 144 | + $(this).toggleClass('active'); | ||
| 145 | + }); | ||
| 146 | +}; |
web-static/js/product/sort-pager.js
0 → 100644
| 1 | +/** | ||
| 2 | + * 筛选页和列表页操作banner中的每页N个商品选择逻辑 | ||
| 3 | + * @author: xuqi<qi.xu@yoho.cn> | ||
| 4 | + * @date: 2015/12/4 | ||
| 5 | + */ | ||
| 6 | + | ||
| 7 | +var $ = require('yoho.jquery'); | ||
| 8 | + | ||
| 9 | +var $countPerPage = $('#count-per-page'), | ||
| 10 | + $countChose = $countPerPage.next('ul'); | ||
| 11 | + | ||
| 12 | +var SLIDETIME = 200; | ||
| 13 | + | ||
| 14 | +$(document).click(function(e) { | ||
| 15 | + if ($(e.target).closest('.page-count').length > 0) { | ||
| 16 | + return; | ||
| 17 | + } | ||
| 18 | + | ||
| 19 | + $countChose && $countChose.slideUp(SLIDETIME); | ||
| 20 | +}); | ||
| 21 | + | ||
| 22 | +$countPerPage.click(function() { | ||
| 23 | + if ($countChose.css('display') === 'none') { | ||
| 24 | + $countChose.slideDown(SLIDETIME); | ||
| 25 | + } else { | ||
| 26 | + $countChose.slideUp(SLIDETIME); | ||
| 27 | + } | ||
| 28 | +}); |
| @@ -56,6 +56,14 @@ a { | @@ -56,6 +56,14 @@ a { | ||
| 56 | display: none !important; | 56 | display: none !important; |
| 57 | } | 57 | } |
| 58 | 58 | ||
| 59 | +.pull-left { | ||
| 60 | + float: left; | ||
| 61 | +} | ||
| 62 | + | ||
| 63 | +.pull-right { | ||
| 64 | + float: right; | ||
| 65 | +} | ||
| 66 | + | ||
| 59 | a:focus { | 67 | a:focus { |
| 60 | outline: none; | 68 | outline: none; |
| 61 | } | 69 | } |
| @@ -71,4 +79,5 @@ a:focus { | @@ -71,4 +79,5 @@ a:focus { | ||
| 71 | width: 990px; | 79 | width: 990px; |
| 72 | } | 80 | } |
| 73 | } | 81 | } |
| 74 | -@import "home/index", "product/index", "passport/index"; | ||
| 82 | + | ||
| 83 | +@import "home/index", "product/index", "passport/index"; |
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-pre .active .attr { | ||
| 77 | + border: 1px solid #000; | ||
| 78 | + } | ||
| 79 | + | ||
| 80 | + .sort-sub-wrap { | ||
| 81 | + width: 100%; | ||
| 82 | + | ||
| 83 | + .sort-sub { | ||
| 84 | + padding: 15px 0; | ||
| 85 | + } | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + .brand { | ||
| 89 | + position: relative; | ||
| 90 | + | ||
| 91 | + .attr { | ||
| 92 | + box-sizing: border-box; | ||
| 93 | + width: 20%; | ||
| 94 | + margin: 0; | ||
| 95 | + overflow: hidden; | ||
| 96 | + white-space: nowrap; | ||
| 97 | + text-overflow: ellipsis; | ||
| 98 | + } | ||
| 99 | + | ||
| 100 | + .attr-content { | ||
| 101 | + max-width: 900px; | ||
| 102 | + } | ||
| 103 | + | ||
| 104 | + .brand-opt { | ||
| 105 | + position: absolute; | ||
| 106 | + right: 20px; | ||
| 107 | + top: 15px; | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + .brand-more { | ||
| 111 | + margin-right: 20px; | ||
| 112 | + cursor: pointer; | ||
| 113 | + } | ||
| 114 | + | ||
| 115 | + .brands-index { | ||
| 116 | + float: left; | ||
| 117 | + line-height: 30px; | ||
| 118 | + | ||
| 119 | + span { | ||
| 120 | + margin: 0 5px; | ||
| 121 | + cursor: pointer; | ||
| 122 | + -moz-user-select: none; | ||
| 123 | + | ||
| 124 | + &:first-child { | ||
| 125 | + margin-left: 10px; | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + .brand-search { | ||
| 131 | + float: left; | ||
| 132 | + height: 18px; | ||
| 133 | + line-height: 18px; | ||
| 134 | + border: 1px solid #b0b0b0; | ||
| 135 | + margin-top: 5px; | ||
| 136 | + margin-left: 15px; | ||
| 137 | + | ||
| 138 | + input { | ||
| 139 | + float: left; | ||
| 140 | + border: none; | ||
| 141 | + width: 100px; | ||
| 142 | + height: 18px; | ||
| 143 | + padding: 0; | ||
| 144 | + } | ||
| 145 | + | ||
| 146 | + .btn { | ||
| 147 | + display: inline-block; | ||
| 148 | + width: 55px; | ||
| 149 | + height: 18px; | ||
| 150 | + background: #b0b0b0; | ||
| 151 | + color: #fff; | ||
| 152 | + text-align: center; | ||
| 153 | + cursor: default; | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + | ||
| 157 | + .panel-body { | ||
| 158 | + padding: 15px 20px; | ||
| 159 | + margin-top: 5px; | ||
| 160 | + background: #f4f7f6; | ||
| 161 | + min-height: 30px; | ||
| 162 | + border: 1px solid #000; | ||
| 163 | + } | ||
| 164 | + } | ||
| 165 | + | ||
| 166 | + .btns { | ||
| 167 | + display: none; | ||
| 168 | + margin-top: 10px; | ||
| 169 | + text-align: center; | ||
| 170 | + } | ||
| 171 | + | ||
| 172 | + .multi .btns { | ||
| 173 | + display: block; | ||
| 174 | + } | ||
| 175 | + | ||
| 176 | + .multi-select-ok, .multi-select-cancel { | ||
| 177 | + width: 55px; | ||
| 178 | + height: 24px; | ||
| 179 | + border: none; | ||
| 180 | + background: #000; | ||
| 181 | + color: #fff; | ||
| 182 | + font-size: 15px; | ||
| 183 | + margin-right: 15px; | ||
| 184 | + cursor: pointer; | ||
| 185 | + | ||
| 186 | + &.dis { | ||
| 187 | + background: #ccc; | ||
| 188 | + } | ||
| 189 | + } | ||
| 190 | + | ||
| 191 | + .ud-price-range { | ||
| 192 | + margin-top: 2px; | ||
| 193 | + } | ||
| 194 | + | ||
| 195 | + .limit { | ||
| 196 | + height: 22px; | ||
| 197 | + width: 42px; | ||
| 198 | + border: 1px solid #ccc; | ||
| 199 | + padding: 0; | ||
| 200 | + } | ||
| 201 | + | ||
| 202 | + .price-sep { | ||
| 203 | + margin: 0 5px; | ||
| 204 | + } | ||
| 205 | + | ||
| 206 | + .price-sure { | ||
| 207 | + height: 24px; | ||
| 208 | + width: 44px; | ||
| 209 | + border: 1px solid #e0e0e0; | ||
| 210 | + background: #fff; | ||
| 211 | + color: #666; | ||
| 212 | + margin-left: 10px; | ||
| 213 | + } | ||
| 214 | + | ||
| 215 | + .color-block { | ||
| 216 | + display: inline-block; | ||
| 217 | + height: 22px; | ||
| 218 | + width: 22px; | ||
| 219 | + border: 1px solid #ccc; | ||
| 220 | + margin-bottom: -6px; | ||
| 221 | + margin-right: 5px; | ||
| 222 | + } | ||
| 223 | + | ||
| 224 | + .senior { | ||
| 225 | + padding-bottom: 6px; | ||
| 226 | + | ||
| 227 | + .attr-content { | ||
| 228 | + position: relative; | ||
| 229 | + } | ||
| 230 | + } | ||
| 231 | + | ||
| 232 | + .senior-attr-wrap { | ||
| 233 | + position: relative; | ||
| 234 | + } | ||
| 235 | + | ||
| 236 | + .senior-attr-wrap > .attr:hover, | ||
| 237 | + .senior-attr-wrap > .attr.hover { | ||
| 238 | + > .iconfont { | ||
| 239 | + visibility: hidden; | ||
| 240 | + } | ||
| 241 | + | ||
| 242 | + .senior-up-icon { | ||
| 243 | + visibility: visible; | ||
| 244 | + } | ||
| 245 | + } | ||
| 246 | + | ||
| 247 | + .senior-sub { | ||
| 248 | + box-sizing: border-box; | ||
| 249 | + position: absolute; | ||
| 250 | + padding: 15px 0; | ||
| 251 | + left: 0; | ||
| 252 | + right: 0; | ||
| 253 | + top: 39px; | ||
| 254 | + background: #fff; | ||
| 255 | + border: 1px solid #eaeceb; | ||
| 256 | + | ||
| 257 | + ul { | ||
| 258 | + max-width: 950px; | ||
| 259 | + } | ||
| 260 | + | ||
| 261 | + &.multi .multi-select { | ||
| 262 | + display: none; | ||
| 263 | + } | ||
| 264 | + | ||
| 265 | + .multi-select { | ||
| 266 | + position: absolute; | ||
| 267 | + top: 20px; | ||
| 268 | + right: 15px; | ||
| 269 | + } | ||
| 270 | + } | ||
| 271 | + | ||
| 272 | + .senior-up-icon { | ||
| 273 | + width: 100%; | ||
| 274 | + height: 9px; | ||
| 275 | + z-index: 1; | ||
| 276 | + margin-left: -11px; | ||
| 277 | + visibility: hidden; | ||
| 278 | + | ||
| 279 | + background: image-url('product/senior-up.png') no-repeat; | ||
| 280 | + background-position-x: 50%; | ||
| 281 | + } | ||
| 282 | + | ||
| 283 | + .checkbox { | ||
| 284 | + display: none; | ||
| 285 | + } | ||
| 286 | + | ||
| 287 | + .multi .checkbox { | ||
| 288 | + display: inline; | ||
| 289 | + } | ||
| 290 | +} |
web-static/sass/product/_good.scss
0 → 100644
| 1 | +.good-info { | ||
| 2 | + height: 400px; //todo | ||
| 3 | + margin-bottom: 35px; | ||
| 4 | + width: 222px; | ||
| 5 | + margin-right: 10px; | ||
| 6 | + float: left; | ||
| 7 | + | ||
| 8 | + //图片 | ||
| 9 | + .good-detail-img { | ||
| 10 | + width: 100%; | ||
| 11 | + /*height: 300px;*/ | ||
| 12 | + position: relative; | ||
| 13 | + | ||
| 14 | + .good-thumb, img.lazy { | ||
| 15 | + display: block; | ||
| 16 | + overflow: hidden; | ||
| 17 | + width: 100%; | ||
| 18 | + height: 100%; | ||
| 19 | + } | ||
| 20 | + .few-tag { | ||
| 21 | + width: 100%; | ||
| 22 | + position: absolute; | ||
| 23 | + left: 0; | ||
| 24 | + height: 16px; | ||
| 25 | + line-height: 16px; | ||
| 26 | + background: #ffac5b; | ||
| 27 | + color: #fff; | ||
| 28 | + font-size: 12px; | ||
| 29 | + text-align: center; | ||
| 30 | + bottom: 0; | ||
| 31 | + } | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + //文本 | ||
| 35 | + .good-detail-text { | ||
| 36 | + color: #222; | ||
| 37 | + font-size: 12px; | ||
| 38 | + text-align: center; | ||
| 39 | + | ||
| 40 | + > a { | ||
| 41 | + margin-top: 16px; | ||
| 42 | + line-height: 1.5; | ||
| 43 | + display: block; | ||
| 44 | + } | ||
| 45 | + | ||
| 46 | + > .price { | ||
| 47 | + margin-top: 10px; | ||
| 48 | + } | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + .col-btn { | ||
| 52 | + position: absolute; | ||
| 53 | + top: 15px; | ||
| 54 | + right: 15px; | ||
| 55 | + color: #ccc; | ||
| 56 | + font-size: 12px; | ||
| 57 | + display: none; | ||
| 58 | + } | ||
| 59 | + | ||
| 60 | + .tag-container { | ||
| 61 | + font-size: 12px; | ||
| 62 | + height: 22px; | ||
| 63 | + line-height: 22px; | ||
| 64 | + | ||
| 65 | + .good-tag { | ||
| 66 | + padding: 0 7px; | ||
| 67 | + display: block; | ||
| 68 | + float: left; | ||
| 69 | + margin-right: 3px; | ||
| 70 | + | ||
| 71 | + &:nth-last-of-type(1) { | ||
| 72 | + margin-right: 0; | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + @each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d), | ||
| 76 | + (renew-tag, #fff, #78dc7e), | ||
| 77 | + (new-festival-tag, #fff, #000000), | ||
| 78 | + (yep-tag, #fff, #ff565b), | ||
| 79 | + (ymp-tag, #fff, #ff565b), | ||
| 80 | + (sale-tag, #fff, #ff565b) { | ||
| 81 | + &.#{$tag} { | ||
| 82 | + color: $tagColor; | ||
| 83 | + background: $tagBackground; | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + &.limit-tag { | ||
| 87 | + color: #4e4e4e; | ||
| 88 | + border: 1px solid #4e4e4e; | ||
| 89 | + } | ||
| 90 | + } | ||
| 91 | + } | ||
| 92 | +} | ||
| 93 | + | ||
| 94 | +//弹层 | ||
| 95 | +.good-item-wrapper { | ||
| 96 | + border: 1px solid #dddddd; | ||
| 97 | + padding-left: 20px; | ||
| 98 | + padding-top: 18px; | ||
| 99 | + padding-right: 20px; | ||
| 100 | + position: absolute; | ||
| 101 | + background: #fff; | ||
| 102 | + display: none; | ||
| 103 | + | ||
| 104 | + .good-info-main{ | ||
| 105 | + float: left; | ||
| 106 | + | ||
| 107 | + .col-btn { | ||
| 108 | + display: block; | ||
| 109 | + | ||
| 110 | + &:hover { | ||
| 111 | + color: #f95b4f; | ||
| 112 | + cursor: pointer; | ||
| 113 | + } | ||
| 114 | + } | ||
| 115 | + } | ||
| 116 | + | ||
| 117 | + .good-select-color { | ||
| 118 | + float: left; | ||
| 119 | + margin-top: 22px; | ||
| 120 | + | ||
| 121 | + ul { | ||
| 122 | + display: block; | ||
| 123 | + float: left; | ||
| 124 | + margin-left: 15px; | ||
| 125 | + } | ||
| 126 | + | ||
| 127 | + li { | ||
| 128 | + width: 50px; | ||
| 129 | + margin-bottom: 15px; | ||
| 130 | + | ||
| 131 | + a, img { | ||
| 132 | + display: block; | ||
| 133 | + overflow: hidden; | ||
| 134 | + width: 100%; | ||
| 135 | + } | ||
| 136 | + } | ||
| 137 | + } | ||
| 138 | + | ||
| 139 | + .good-info { | ||
| 140 | + margin-right: 10px; | ||
| 141 | + } | ||
| 142 | +} |
| 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", "good"; |
web-static/sass/product/_list.scss
0 → 100644
| 1 | +.product-list-page { | ||
| 2 | + .list-left { | ||
| 3 | + width: 160px; | ||
| 4 | + | ||
| 5 | + .sort-container { | ||
| 6 | + width: 100%; | ||
| 7 | + font-size: 12px; | ||
| 8 | + border-bottom: 1px solid #ebebeb; | ||
| 9 | + padding-bottom: 10px; | ||
| 10 | + margin-bottom: 10px; | ||
| 11 | + | ||
| 12 | + h2 { | ||
| 13 | + height: 28px; | ||
| 14 | + line-height: 28px; | ||
| 15 | + color: #222; | ||
| 16 | + font-weight: bold; | ||
| 17 | + position: relative; | ||
| 18 | + | ||
| 19 | + span { | ||
| 20 | + color: #bbb; | ||
| 21 | + padding-left: 5px; | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | + | ||
| 25 | + .product-list-nav { | ||
| 26 | + h3 { | ||
| 27 | + height: 28px; | ||
| 28 | + line-height: 28px; | ||
| 29 | + color: #222; | ||
| 30 | + font-weight: bold; | ||
| 31 | + position: relative; | ||
| 32 | + text-indent: 10px; | ||
| 33 | + cursor: pointer; | ||
| 34 | + | ||
| 35 | + span { | ||
| 36 | + color: #bbb; | ||
| 37 | + padding-left: 5px; | ||
| 38 | + | ||
| 39 | + &.icon-triangle { | ||
| 40 | + display: inline-block; | ||
| 41 | + padding-left: 0; | ||
| 42 | + width: 0; | ||
| 43 | + height: 0; | ||
| 44 | + border-top: 6px solid #fff; | ||
| 45 | + border-left: 6px solid #000; | ||
| 46 | + border-bottom: 6px solid #fff; | ||
| 47 | + position: absolute; | ||
| 48 | + top: 50%; | ||
| 49 | + margin-top: -6px; | ||
| 50 | + left: 0; | ||
| 51 | + @include transition(transform .3s) | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + &.active { | ||
| 57 | + h3 { | ||
| 58 | + span { | ||
| 59 | + &.icon-triangle { | ||
| 60 | + @include rotate(90deg) | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + } | ||
| 64 | + /*ul.sort-child-list { | ||
| 65 | + display: block; | ||
| 66 | + }*/ | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + ul.sort-child-list { | ||
| 71 | + display: none; | ||
| 72 | + | ||
| 73 | + &.new-sale { | ||
| 74 | + display: block; | ||
| 75 | + } | ||
| 76 | + li { | ||
| 77 | + color: #bbb; | ||
| 78 | + | ||
| 79 | + span { | ||
| 80 | + padding-left: 5px; | ||
| 81 | + } | ||
| 82 | + } | ||
| 83 | + a { | ||
| 84 | + color: #666; | ||
| 85 | + padding-left: 10px; | ||
| 86 | + height: 22px; | ||
| 87 | + line-height: 22px; | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | + } | ||
| 91 | + | ||
| 92 | + .nav-pic-title { | ||
| 93 | + height: 35px; | ||
| 94 | + line-height: 35px; | ||
| 95 | + color: #000; | ||
| 96 | + font-weight: bold; | ||
| 97 | + border-bottom: 1px solid #ebebeb; | ||
| 98 | + font-size: 12px; | ||
| 99 | + } | ||
| 100 | + | ||
| 101 | + .pic-nav { | ||
| 102 | + display: block; | ||
| 103 | + | ||
| 104 | + li, img { | ||
| 105 | + display: block; | ||
| 106 | + width: 100%; | ||
| 107 | + overflow: hidden; | ||
| 108 | + } | ||
| 109 | + } | ||
| 110 | + } | ||
| 111 | + | ||
| 112 | + .list-right { | ||
| 113 | + width: 970px; | ||
| 114 | + } | ||
| 115 | + | ||
| 116 | + .brand-banner { | ||
| 117 | + position: relative; | ||
| 118 | + | ||
| 119 | + .opt-wrap { | ||
| 120 | + position: absolute; | ||
| 121 | + width: 100%; | ||
| 122 | + height: 32px; | ||
| 123 | + top: 50%; | ||
| 124 | + margin-top: -16px; | ||
| 125 | + text-align: right; | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + a, span { | ||
| 129 | + display: inline-block; | ||
| 130 | + height: 20px; | ||
| 131 | + margin-right: 5px; | ||
| 132 | + line-height: 20px; | ||
| 133 | + border: 1px solid #fff; | ||
| 134 | + padding: 5px 10px; | ||
| 135 | + color: #fff; | ||
| 136 | + font-size: 12px; | ||
| 137 | + } | ||
| 138 | + | ||
| 139 | + .iconfont { | ||
| 140 | + font-size: 12px; | ||
| 141 | + } | ||
| 142 | + | ||
| 143 | + .brand-favor { | ||
| 144 | + margin-right: 0; | ||
| 145 | + } | ||
| 146 | + | ||
| 147 | + .coled { | ||
| 148 | + color: #f00; | ||
| 149 | + } | ||
| 150 | + } | ||
| 151 | + | ||
| 152 | + .shop-entry { | ||
| 153 | + position: relative; | ||
| 154 | + background: #f5f7f6; | ||
| 155 | + border: 1px solid #eaeceb; | ||
| 156 | + padding: 12px 15px; | ||
| 157 | + margin-bottom: 10px; | ||
| 158 | + | ||
| 159 | + .logo { | ||
| 160 | + width: 80px; | ||
| 161 | + height: 50px; | ||
| 162 | + } | ||
| 163 | + | ||
| 164 | + .name { | ||
| 165 | + margin-left: 10px; | ||
| 166 | + } | ||
| 167 | + | ||
| 168 | + .shop-name { | ||
| 169 | + font-size: 16px; | ||
| 170 | + color: #222; | ||
| 171 | + line-height: 26px; | ||
| 172 | + } | ||
| 173 | + | ||
| 174 | + .sorts { | ||
| 175 | + color: #999; | ||
| 176 | + font-size: 12px; | ||
| 177 | + line-height: 18px; | ||
| 178 | + | ||
| 179 | + a { | ||
| 180 | + color: #999; | ||
| 181 | + } | ||
| 182 | + } | ||
| 183 | + | ||
| 184 | + .entry-btn { | ||
| 185 | + position: absolute; | ||
| 186 | + right: 15px; | ||
| 187 | + top: 50%; | ||
| 188 | + width: 110px; | ||
| 189 | + height: 32px; | ||
| 190 | + line-height: 32px; | ||
| 191 | + margin-top: -16px; | ||
| 192 | + background: #222; | ||
| 193 | + text-align: center; | ||
| 194 | + color: #fff; | ||
| 195 | + font-size: 12px; | ||
| 196 | + | ||
| 197 | + .iconfont { | ||
| 198 | + font-size: 12px; | ||
| 199 | + } | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + | ||
| 203 | + .goods-container { | ||
| 204 | + height: auto; | ||
| 205 | + padding: 25px 0 0 0; | ||
| 206 | + position: relative; | ||
| 207 | + width: 970px + 10px;//每列增加右边距 | ||
| 208 | + | ||
| 209 | + .good-info { | ||
| 210 | + width: 235px; | ||
| 211 | + | ||
| 212 | + } | ||
| 213 | + } | ||
| 214 | +} |
web-static/sass/product/_search.scss
0 → 100644
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 | +} |
| @@ -257,6 +257,7 @@ class BoysController extends AbstractAction | @@ -257,6 +257,7 @@ class BoysController extends AbstractAction | ||
| 257 | ); | 257 | ); |
| 258 | $data = array( | 258 | $data = array( |
| 259 | 'headerdata' => $headerdata, | 259 | 'headerdata' => $headerdata, |
| 260 | + 'footerTop' => true, | ||
| 260 | 'boysHomePage' => true, | 261 | 'boysHomePage' => true, |
| 261 | 'boy' => array( | 262 | 'boy' => array( |
| 262 | array( | 263 | array( |
| @@ -6,14 +6,14 @@ use Plugin\Helpers; | @@ -6,14 +6,14 @@ use Plugin\Helpers; | ||
| 6 | class IndexController extends AbstractAction | 6 | class IndexController extends AbstractAction |
| 7 | { | 7 | { |
| 8 | /** | 8 | /** |
| 9 | - * 商品列表 | 9 | + * 商品搜索 |
| 10 | */ | 10 | */ |
| 11 | - public function indexAction() | 11 | + public function searchAction() |
| 12 | { | 12 | { |
| 13 | $data = array( | 13 | $data = array( |
| 14 | 'searchListPage' => true, | 14 | 'searchListPage' => true, |
| 15 | 15 | ||
| 16 | - 'products' => array( | 16 | + 'search' => array( |
| 17 | 'pathNav' => array( | 17 | 'pathNav' => array( |
| 18 | array( | 18 | array( |
| 19 | 'href' => 'm.yohobuy.com', | 19 | 'href' => 'm.yohobuy.com', |
| @@ -373,6 +373,528 @@ class IndexController extends AbstractAction | @@ -373,6 +373,528 @@ class IndexController extends AbstractAction | ||
| 373 | ) | 373 | ) |
| 374 | ) | 374 | ) |
| 375 | ); | 375 | ); |
| 376 | + $this->_view->display('search', $data); | ||
| 377 | + } | ||
| 378 | + | ||
| 379 | + | ||
| 380 | + /** | ||
| 381 | + * 商品列表 | ||
| 382 | + */ | ||
| 383 | + public function listAction() | ||
| 384 | + { | ||
| 385 | + $data = array( | ||
| 386 | + //'searchListPage' => true, | ||
| 387 | + 'productListPage' => true, //初始化js | ||
| 388 | + | ||
| 389 | + 'list' => array( | ||
| 390 | + 'brandBanner' => array( | ||
| 391 | + 'bannerHeight' => 150, | ||
| 392 | + 'coled' => true, | ||
| 393 | + 'banner' => 'http://img11.static.yhbimg.com/brandBanner/2013/01/14/14/011e5ca97c33db0e79ca0a075e7cf0ae1d.jpg' | ||
| 394 | + ), | ||
| 395 | + 'pathNav' => array( | ||
| 396 | + array( | ||
| 397 | + 'href' => 'new.yohobuy.com/girls', | ||
| 398 | + 'name' => 'GRILS首页' | ||
| 399 | + ), | ||
| 400 | + array( | ||
| 401 | + 'href' => '/?sort=1', | ||
| 402 | + 'name' => '包类/装备' | ||
| 403 | + ) | ||
| 404 | + ), | ||
| 405 | + 'shopEntry' => array( | ||
| 406 | + 'home' => 'adidas.yohobuy.com', | ||
| 407 | + 'logo' => 'http://img11.static.yhbimg.com/brandLogo/2013/01/16/09/01f515687de080f94243cb1aa0fedb2fe1.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90', | ||
| 408 | + 'shopName' => 'adidas Originals品牌店', | ||
| 409 | + 'sort' => array( | ||
| 410 | + array( | ||
| 411 | + 'href' => '', | ||
| 412 | + 'name' => 'T恤' | ||
| 413 | + ), | ||
| 414 | + array( | ||
| 415 | + 'href' => '', | ||
| 416 | + 'name' => '卫衣' | ||
| 417 | + ) | ||
| 418 | + ) | ||
| 419 | + ), | ||
| 420 | + 'filters' => array( | ||
| 421 | + 'checkedConditions' => array( | ||
| 422 | + 'conditions' => array( | ||
| 423 | + array( | ||
| 424 | + 'href' => '', | ||
| 425 | + 'name' => '暗黑' | ||
| 426 | + ), | ||
| 427 | + array( | ||
| 428 | + 'href' => '', | ||
| 429 | + 'color' => '#f00' | ||
| 430 | + ), | ||
| 431 | + array( | ||
| 432 | + 'href' => '', | ||
| 433 | + 'name' => 'CLOT' | ||
| 434 | + ) | ||
| 435 | + ), | ||
| 436 | + 'clearUrl' => '' | ||
| 437 | + ), | ||
| 438 | + 'channel' => array( | ||
| 439 | + array( | ||
| 440 | + 'href' => '/?gender=1,3', | ||
| 441 | + 'name' => 'BOYS' | ||
| 442 | + ), | ||
| 443 | + array( | ||
| 444 | + 'href' => '/?gender=2,3', | ||
| 445 | + 'name' => 'GIRLS' | ||
| 446 | + ), | ||
| 447 | + array( | ||
| 448 | + 'href' => '', | ||
| 449 | + 'name' => 'KIDS' | ||
| 450 | + ), | ||
| 451 | + array( | ||
| 452 | + 'href' => '', | ||
| 453 | + 'name' => 'LIFESTYLE' | ||
| 454 | + ) | ||
| 455 | + ), | ||
| 456 | + 'sort' => array( | ||
| 457 | + array( | ||
| 458 | + 'id' => '1', | ||
| 459 | + 'name' => '上衣', | ||
| 460 | + 'sub' => array( | ||
| 461 | + array( | ||
| 462 | + 'href' => '', | ||
| 463 | + 'name' => 'T恤' | ||
| 464 | + ), | ||
| 465 | + array( | ||
| 466 | + 'href' => '', | ||
| 467 | + 'name' => '棉袄' | ||
| 468 | + ), | ||
| 469 | + array( | ||
| 470 | + 'href' => '', | ||
| 471 | + 'name' => '外套' | ||
| 472 | + ) | ||
| 473 | + ) | ||
| 474 | + ), | ||
| 475 | + array( | ||
| 476 | + 'id' => '2', | ||
| 477 | + 'name' => '裤子' | ||
| 478 | + ), | ||
| 479 | + array( | ||
| 480 | + 'id' => '3', | ||
| 481 | + 'name' => '连衣裙' | ||
| 482 | + ), | ||
| 483 | + array( | ||
| 484 | + 'id' => '4', | ||
| 485 | + 'name' => '鞋' | ||
| 486 | + ) | ||
| 487 | + ), | ||
| 488 | + 'brand' => array( | ||
| 489 | + 'default' => array( | ||
| 490 | + array( | ||
| 491 | + 'href' => '', | ||
| 492 | + 'name' => 'CLOT' | ||
| 493 | + ), | ||
| 494 | + array( | ||
| 495 | + 'href' => '', | ||
| 496 | + 'name' => 'ABLE JEANS' | ||
| 497 | + ), | ||
| 498 | + array( | ||
| 499 | + 'href' => '', | ||
| 500 | + 'name' => 'Eight Guys' | ||
| 501 | + ), | ||
| 502 | + array( | ||
| 503 | + 'href' => '', | ||
| 504 | + 'name' => 'FAIRWHALE JEANS' | ||
| 505 | + ), | ||
| 506 | + array( | ||
| 507 | + 'href' => '', | ||
| 508 | + 'name' => '鬼洗' | ||
| 509 | + ), | ||
| 510 | + array( | ||
| 511 | + 'href' => '', | ||
| 512 | + 'name' => '金银帝国Imperial Taels' | ||
| 513 | + ), | ||
| 514 | + array( | ||
| 515 | + 'href' => '', | ||
| 516 | + 'name' => 'F.L.Y.D' | ||
| 517 | + ), | ||
| 518 | + array( | ||
| 519 | + 'href' => '', | ||
| 520 | + 'name' => 'Tapenade特芙娜' | ||
| 521 | + ), | ||
| 522 | + array( | ||
| 523 | + 'href' => '', | ||
| 524 | + 'name' => 'Adidas Originals' | ||
| 525 | + ) | ||
| 526 | + ), | ||
| 527 | + 'brandIndex' => array( | ||
| 528 | + array( | ||
| 529 | + 'index' => 'all', | ||
| 530 | + 'name' => '全部' | ||
| 531 | + ), | ||
| 532 | + array( | ||
| 533 | + 'index' => '0-9', | ||
| 534 | + 'name' => '0 ~ 9' | ||
| 535 | + ), | ||
| 536 | + array( | ||
| 537 | + 'index' => 'a', | ||
| 538 | + 'name' => 'A' | ||
| 539 | + ) | ||
| 540 | + ), | ||
| 541 | + 'brandsShow' => array( | ||
| 542 | + array( | ||
| 543 | + 'id' => '1', | ||
| 544 | + 'href' => '', | ||
| 545 | + 'index' => '0-9', | ||
| 546 | + 'name' => '5cm', | ||
| 547 | + 'key' => '5cm' | ||
| 548 | + ), | ||
| 549 | + array( | ||
| 550 | + 'id' => '2', | ||
| 551 | + 'href' => '', | ||
| 552 | + 'index' => 'k', | ||
| 553 | + 'name' => 'KTZ', | ||
| 554 | + 'key' => 'ktz' | ||
| 555 | + ), | ||
| 556 | + array( | ||
| 557 | + 'id' => '3', | ||
| 558 | + 'href' => '', | ||
| 559 | + 'index' => 't', | ||
| 560 | + 'name' => 'Tapenade特芙娜', | ||
| 561 | + 'key' => 'tapenade特芙娜' | ||
| 562 | + ), | ||
| 563 | + array( | ||
| 564 | + 'id' => '4', | ||
| 565 | + 'href' => '', | ||
| 566 | + 'index' => 'j', | ||
| 567 | + 'name' => '金银帝国Imperial Taels', | ||
| 568 | + 'key' => '金银帝国imperial taels' | ||
| 569 | + ), | ||
| 570 | + array( | ||
| 571 | + 'id' => '5', | ||
| 572 | + 'href' => '', | ||
| 573 | + 'index' => 'a', | ||
| 574 | + 'name' => 'ABLE JEANS', | ||
| 575 | + 'key' => 'able jeans' | ||
| 576 | + ) | ||
| 577 | + ) | ||
| 578 | + ), | ||
| 579 | + 'price' => array( | ||
| 580 | + array( | ||
| 581 | + 'href' => '', | ||
| 582 | + 'name' => '0-239' | ||
| 583 | + ), | ||
| 584 | + array( | ||
| 585 | + 'href' => '', | ||
| 586 | + 'name' => '240-329' | ||
| 587 | + ) | ||
| 588 | + ), | ||
| 589 | + 'color' => array( | ||
| 590 | + array( | ||
| 591 | + 'href' => '', | ||
| 592 | + 'name' => '黑色', | ||
| 593 | + 'rgb' => '#000' | ||
| 594 | + ), | ||
| 595 | + array( | ||
| 596 | + 'href' => '', | ||
| 597 | + 'name' => '红色', | ||
| 598 | + 'rgb' => '#f00' | ||
| 599 | + ) | ||
| 600 | + ), | ||
| 601 | + 'size' => array( | ||
| 602 | + array( | ||
| 603 | + 'href' => '', | ||
| 604 | + 'name' => 'S' | ||
| 605 | + ), | ||
| 606 | + array( | ||
| 607 | + 'href' => '', | ||
| 608 | + 'name' => 'L' | ||
| 609 | + ) | ||
| 610 | + ), | ||
| 611 | + 'seniorChose' => array( | ||
| 612 | + array( | ||
| 613 | + 'attr' => 'style', | ||
| 614 | + 'name' => '风格', | ||
| 615 | + 'showMulti' => true, | ||
| 616 | + 'sub' => array( | ||
| 617 | + array( | ||
| 618 | + 'id' => '1', | ||
| 619 | + 'href' => '', | ||
| 620 | + 'name' => '街头' | ||
| 621 | + ), | ||
| 622 | + array( | ||
| 623 | + 'id' => '2', | ||
| 624 | + 'href' => '', | ||
| 625 | + 'name' => '简约' | ||
| 626 | + ) | ||
| 627 | + ) | ||
| 628 | + ), | ||
| 629 | + array( | ||
| 630 | + 'attr' => 'weather', | ||
| 631 | + 'name' => '适用季节', | ||
| 632 | + 'sub' => array( | ||
| 633 | + array( | ||
| 634 | + 'id' => '1', | ||
| 635 | + 'href' => '', | ||
| 636 | + 'name' => '春天' | ||
| 637 | + ), | ||
| 638 | + array( | ||
| 639 | + 'id' => '2', | ||
| 640 | + 'href' => '', | ||
| 641 | + 'name' => '夏天' | ||
| 642 | + ) | ||
| 643 | + ) | ||
| 644 | + ) | ||
| 645 | + ) | ||
| 646 | + ), | ||
| 647 | + 'opts' => array( | ||
| 648 | + 'sortType' => array( | ||
| 649 | + array( | ||
| 650 | + 'href' => '', | ||
| 651 | + 'name' => '默认' | ||
| 652 | + ), | ||
| 653 | + array( | ||
| 654 | + 'active' => true, | ||
| 655 | + 'href' => '', | ||
| 656 | + 'name' => '最新', | ||
| 657 | + 'hasSortOrient' => true, | ||
| 658 | + 'desc' => true | ||
| 659 | + ), | ||
| 660 | + array( | ||
| 661 | + 'href' => '', | ||
| 662 | + 'name' => '价格', | ||
| 663 | + 'hasSortOrient' => true | ||
| 664 | + ), | ||
| 665 | + array( | ||
| 666 | + 'href' => '', | ||
| 667 | + 'name' => '折扣', | ||
| 668 | + 'hasSortOrient' => true | ||
| 669 | + ) | ||
| 670 | + ), | ||
| 671 | + 'checks' => array( | ||
| 672 | + array( | ||
| 673 | + 'name' => '新品', | ||
| 674 | + 'checked' => true, | ||
| 675 | + 'href' => '' | ||
| 676 | + ), | ||
| 677 | + array( | ||
| 678 | + 'name' => '打折', | ||
| 679 | + 'href' => '' | ||
| 680 | + ), | ||
| 681 | + array( | ||
| 682 | + 'name' => '限量', | ||
| 683 | + 'checked' => true, | ||
| 684 | + 'href' => '' | ||
| 685 | + ) | ||
| 686 | + ), | ||
| 687 | + 'fivePerLine' => true, | ||
| 688 | + 'sixPerLineHref' => '', | ||
| 689 | + 'countPerPage' => '120', | ||
| 690 | + 'pageCounts' => array( | ||
| 691 | + array( | ||
| 692 | + 'href' => '', | ||
| 693 | + 'count' => 60 | ||
| 694 | + ), | ||
| 695 | + array( | ||
| 696 | + 'href' => '', | ||
| 697 | + 'count' => 100 | ||
| 698 | + ), | ||
| 699 | + array( | ||
| 700 | + 'href' => '', | ||
| 701 | + 'count' => 120 | ||
| 702 | + ) | ||
| 703 | + ), | ||
| 704 | + 'curPage' => 1, | ||
| 705 | + 'pageCount' => 30, | ||
| 706 | + 'nextHref' => 'hello' | ||
| 707 | + ), | ||
| 708 | + 'goods' => array( | ||
| 709 | + array( | ||
| 710 | + 'tags' => array( | ||
| 711 | + 'isNew' => true, | ||
| 712 | + 'isYearEndPromotion' => true | ||
| 713 | + ), | ||
| 714 | + 'url' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 715 | + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', | ||
| 716 | + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', | ||
| 717 | + 'salePrice' => '899', | ||
| 718 | + 'isFew' => true | ||
| 719 | + ), | ||
| 720 | + array( | ||
| 721 | + 'tags' => array( | ||
| 722 | + 'isNew' => true, | ||
| 723 | + 'isReNew' => true | ||
| 724 | + ), | ||
| 725 | + 'url' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 726 | + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', | ||
| 727 | + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', | ||
| 728 | + 'salePrice' => '899', | ||
| 729 | + 'showColBtn' => true | ||
| 730 | + ), | ||
| 731 | + array( | ||
| 732 | + 'tags' => array( | ||
| 733 | + 'isNew' => true, | ||
| 734 | + 'isReNew' => true | ||
| 735 | + ), | ||
| 736 | + 'url' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 737 | + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', | ||
| 738 | + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', | ||
| 739 | + 'salePrice' => '899' | ||
| 740 | + ), | ||
| 741 | + array( | ||
| 742 | + 'url' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 743 | + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', | ||
| 744 | + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', | ||
| 745 | + 'salePrice' => '899' | ||
| 746 | + ), | ||
| 747 | + array( | ||
| 748 | + 'tags' => array( | ||
| 749 | + 'isNew' => true, | ||
| 750 | + 'isReNew' => true | ||
| 751 | + ), | ||
| 752 | + 'url' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 753 | + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', | ||
| 754 | + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', | ||
| 755 | + 'salePrice' => '899' | ||
| 756 | + ), | ||
| 757 | + array( | ||
| 758 | + 'tags' => array( | ||
| 759 | + 'isNew' => true, | ||
| 760 | + 'isReNew' => true | ||
| 761 | + ), | ||
| 762 | + 'url' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 763 | + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', | ||
| 764 | + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', | ||
| 765 | + 'salePrice' => '899' | ||
| 766 | + ) | ||
| 767 | + ), | ||
| 768 | + 'allSort' => array( | ||
| 769 | + 'updateNum' => 145, | ||
| 770 | + 'list' => array( | ||
| 771 | + array( | ||
| 772 | + 'name' => '裙装', | ||
| 773 | + 'num' => '10', | ||
| 774 | + 'childList' => array( | ||
| 775 | + array( | ||
| 776 | + 'name' => '全身裙装', | ||
| 777 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 778 | + 'num' => '5' | ||
| 779 | + ), | ||
| 780 | + array( | ||
| 781 | + 'name' => '全身裙装', | ||
| 782 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 783 | + 'num' => '5' | ||
| 784 | + ), | ||
| 785 | + array( | ||
| 786 | + 'name' => '全身裙装', | ||
| 787 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 788 | + 'num' => '5' | ||
| 789 | + ), | ||
| 790 | + array( | ||
| 791 | + 'name' => '全身裙装', | ||
| 792 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 793 | + 'num' => '5' | ||
| 794 | + ) | ||
| 795 | + ) | ||
| 796 | + ), | ||
| 797 | + array( | ||
| 798 | + 'name' => '裙装BBB', | ||
| 799 | + 'num' => '10', | ||
| 800 | + 'childList' => array( | ||
| 801 | + array( | ||
| 802 | + 'name' => '全身裙装', | ||
| 803 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 804 | + 'num' => '5' | ||
| 805 | + ), | ||
| 806 | + array( | ||
| 807 | + 'name' => '全身裙装', | ||
| 808 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 809 | + 'num' => '5' | ||
| 810 | + ), | ||
| 811 | + array( | ||
| 812 | + 'name' => '全身裙装', | ||
| 813 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 814 | + 'num' => '5' | ||
| 815 | + ), | ||
| 816 | + array( | ||
| 817 | + 'name' => '全身裙装', | ||
| 818 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 819 | + 'num' => '5' | ||
| 820 | + ) | ||
| 821 | + ) | ||
| 822 | + ) | ||
| 823 | + ) | ||
| 824 | + ), | ||
| 825 | + 'advNav' => array( | ||
| 826 | + 'advNavTitle' => 'AAAA', | ||
| 827 | + 'list' => array( | ||
| 828 | + array( | ||
| 829 | + 'href' => 'http://adidas.yohobuy.com/?folder=1366', | ||
| 830 | + 'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg' | ||
| 831 | + ), | ||
| 832 | + array( | ||
| 833 | + 'href' => 'http://adidas.yohobuy.com/?folder=1366', | ||
| 834 | + 'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg' | ||
| 835 | + ) | ||
| 836 | + ) | ||
| 837 | + ), | ||
| 838 | + 'advPic' => array( | ||
| 839 | + 'advPicTitle' => false, | ||
| 840 | + 'list' => array( | ||
| 841 | + array( | ||
| 842 | + 'href' => 'http://adidas.yohobuy.com/?folder=1366', | ||
| 843 | + 'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg' | ||
| 844 | + ), | ||
| 845 | + array( | ||
| 846 | + 'href' => 'http://adidas.yohobuy.com/?folder=1366', | ||
| 847 | + 'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg' | ||
| 848 | + ) | ||
| 849 | + ) | ||
| 850 | + ), | ||
| 851 | + 'newSales' => array( | ||
| 852 | + 'updateNum' => 130, | ||
| 853 | + 'list' => array( | ||
| 854 | + array( | ||
| 855 | + 'name' => '12月03日', | ||
| 856 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 857 | + 'num' => '5' | ||
| 858 | + ), | ||
| 859 | + array( | ||
| 860 | + 'name' => '12月03日', | ||
| 861 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 862 | + 'num' => '5' | ||
| 863 | + ), | ||
| 864 | + array( | ||
| 865 | + 'name' => '12月03日', | ||
| 866 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 867 | + 'num' => '5' | ||
| 868 | + ), | ||
| 869 | + array( | ||
| 870 | + 'name' => '12月03日', | ||
| 871 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 872 | + 'num' => '5' | ||
| 873 | + ) | ||
| 874 | + ) | ||
| 875 | + ), | ||
| 876 | + 'allDiscount' => array( | ||
| 877 | + 'updateNum' => 130, | ||
| 878 | + 'list' => array( | ||
| 879 | + array( | ||
| 880 | + 'name' => '1~3折', | ||
| 881 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 882 | + 'num' => '5' | ||
| 883 | + ), | ||
| 884 | + array( | ||
| 885 | + 'name' => '4~6折', | ||
| 886 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 887 | + 'num' => '5' | ||
| 888 | + ), | ||
| 889 | + array( | ||
| 890 | + 'name' => '7折', | ||
| 891 | + 'href' => 'http://adidas.yohobuy.com/?gender=1,3', | ||
| 892 | + 'num' => '5' | ||
| 893 | + ) | ||
| 894 | + ) | ||
| 895 | + ) | ||
| 896 | + ) | ||
| 897 | + ); | ||
| 376 | $this->_view->display('list', $data); | 898 | $this->_view->display('list', $data); |
| 377 | } | 899 | } |
| 378 | 900 |
-
Please register or login to post a comment