Authored by xuqi
Commit 0f2f2aec69bfcf03ccca09e3ba53f2f250aa9872 2 parents 373a425d 291db45a master ... develop feature/4LevelAddr feature/birthCoupon feature/cartEvent feature/colorLength feature/commentImgShow feature/deleteMark feature/favShopDelAll feature/help feature/jitTip feature/paySuccess feature/seoUrl feature/shoppingCart feature/wholesaleFrom5.3 gray hotfix/firefoxCart hotfix/govLink hotfix/newPy hotfix/serviceSwitch hotfix/studentSwitch hotfix/yas2.1.2 release/5.3.1 release/5.4 release/5.4.1 release/5.5 5.4.3 5.4.2 5.4.1 5.4.0 5.3.8 5.3.7 5.3.6 5.3.5 5.3.4 5.3.3 5.3.2 5.3.1 5.3.0 5.2.4 5.2.3 5.2.2 5.2.1 5.2.0 5.1.5 5.1.4 5.1.2 5.1.1 5.1.0 5.0.4 5.0.3 5.0.2 5.0.1 5.0.0.before 4.9.24 4.9.23 4.9.22 4.9.21 4.9.20 4.9.19 4.9.18 4.9.17.encryBugsFenliu 4.9.16 4.9.15 4.9.15.pinyou 4.9.14 4.9.14.icon 4.9.13 4.9.12 4.9.11 4.9.10 4.9.1.1 4.9.1.0 4.9.1 4.8.15 4.8.13 4.8.12 4.8.8.2 4.8.8.1 4.8.8 4.8.5 4.8.3 4.8.2 4.8.bak 4.7.2 4.6.2.1 4.6.2 4.6 4 1.3.22 1.3.21 1.3.20 1.3.19 1.3.18 wap.3.2.5 wap.1.4.22 wap.1.4.21 wap.1.4.20 wap.1.4.19 wap.1.4.18 wap.1.4.17 wap.1.4.16.3 wap.1.4.16.2 wap.1.4.16.1 wap.1.4.16 wap.1.4.15 wap.1.4.14 wap.1.4.13 wap.1.4.12 wap.1.4.11 wap.1.4.10 wap.1.4.9 wap.1.4.8 wap.1.4.7 wap.1.4.6 wap.1.4.5 wap.1.4.4 wap.1.4.3 wap.1.4.2 wap.1.4.1 wap.1.4.0 pchttps pc4.8.9 pc4.5 pc.1.4.24 pc.1.4.23 pc.1.4.22 pc.1.4.21 pc.1.4.20 pc.1.4.19 pc.1.4.18 pc.1.4.17 pc.1.4.16 pc.1.4.15 pc.1.4.14 pc.1.4.13 pc.1.4.12 pc.1.4.11 pc.1.4.10 pc.1.4.9 pc.1.4.8 pc.1.4.7 pc.1.4.6 pc.1.0.7 pc.1.0.6 pc.1.0.5 pc.1.0.4 pc.1.0.3 pc.1.0.2 pc.1.0.1 pc.1.0.0 list fix-ip-login-limit fix-ip-limit

Merge branch 'web' into feature/passport

... ... @@ -2,8 +2,49 @@
## 公共定义
### 公共底部
{
footerTop: true //是否显示足部有货services,意见反馈和更多YOHO产品等模块
}
### 商品
{
skn: 1,
thumb: 'path/to/goods/img',
url: '',
name: '',
salePrice: 500, //售价
marketPrice: 1000, //市场价
tags: [
{
isNew: true //NEW
},
{
isSale: true //SALE
},
{
isLimit: false //限量商品
},
{
isNewFestival: true //新品节
},
{
isReNew: true //再到着
},
{
isYearEndPromotion: true //年终大促
},
{
isYearMidPromotion: true // 年中大促
}
],
isFew: true, //即将售罄
showColBtn: true, //是否显示收藏按钮
coled: true //已收藏
}
### 路径导航
{
... ... @@ -195,7 +236,7 @@
## 搜索页
{
products: {
search: {
//路径导航
pathNav: [...],
... ... @@ -381,6 +422,66 @@
preHref: '', //若当前为第一页,不传此参数
nexHref: '' //若当前为最后一页,不传此参数
},
// 商品导航列表
allSort: {
//全部品类
updateNum: 2, //更新总数
list: [
{
name: 'AA', //一级分类
num: 12 //一级分类更新数目
childList: [
{
name: 'AAA', //二级分类
href: '##', //二级分类跳转链接
num: 12 //二级分类更新数目
}
]
}
]
},
advNav: {
//图片导航
advNavTitle: 'AA', 图片导航标题
list: [
{
href: '',
src: '' // 图片地址
}
]
},
advPic: {
//图片banner
advPicTitle: 'AA', 图片banner标题
list: [
{
href: '',
src: '' // 图片地址
}
]
},
newSales: {
//一周新品上架
updateNum: 123,
list: [
{
name: 'AAA',
href: '',
num: 12,
}
]
},
allDiscount: {
//全部折扣
updateNum: 111,
list: [
{
name: 'VVV',
href: '##',
num: 11
}
]
}
//商品列表
goods: [
//商品信息
... ...
{{> layout/header}}
<div class="products-page yoho-page">
{{# products}}
{{> layout/path-nav}}
<div class="filter-box">
{{# filters}}
{{# checkedConditions}}
<div class="checked-conditions section">
<span class="title">已选条件:</span>
<div class="product-list-page yoho-page">
{{# list}}
{{# brandBanner}}
<div class="brand-banner">
<div class="banner-img" style="height: {{bannerHeight}}px;background: url({{banner}})"></div>
<div class="opt-wrap">
<p class="opt center-content">
<a href="{{brandHome}}">
<i class="iconfont">&#xe617;</i>
品牌首页
</a>
<a href="{{brandIntro}}">
<i class="iconfont">&#xe618;</i>
品牌介绍
</a>
<span id="brand-favor" class="brand-favor">
<i class="iconfont{{#if coled}} coled{{/if}}">&#xe616;</i>
</span>
</p>
</div>
</div>
{{/ brandBanner}}
<div class="attr-content clearfix">
{{#each conditions}}
<a class="tag" href="{{href}}">
{{#if name}}
{{name}}
{{^}}
<i class="color-block" style="background: {{color}}"></i>
{{/if}}
<i class="close iconfont">&#xe602;</i>
</a>
{{/each}}
<div class="center-content clearfix">
{{> layout/path-nav}}
<a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>
</div>
{{# brandAbout}}
<div class="brand-about">
{{{brandIntro}}}
</div>
{{^}}
<div class="list-left pull-left">
{{# allDiscount}}
<div class="sort-container">
<ul class="sort-child-list new-sale">
<li><a href="{{href}}">全部折扣</a><span>{{updateNum}}</span></li>
{{#each list}}
<li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
{{/each}}
</ul>
</div>
{{/ checkedConditions}}
{{#if channel}}
<div class="channel section">
<span class="title">频道:</span>
<div class="attr-content clearfix">
{{#each channel}}
<a class="attr" href="{{href}}">
{{name}}
</a>
{{/ allDiscount}}
{{# newSales}}
<div class="sort-container">
<h2>一周新品上架<span>{{updateNum}}</span></h2>
<ul class="sort-child-list new-sale">
{{#each list}}
<li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
{{/each}}
</div>
</ul>
</div>
{{/if}}
{{#if sort}}
<div class="sort section">
<span class="title">分类:</span>
{{/ newSales}}
<div class="attr-content">
<ul class="sort-pre clearfix">
{{#each sort}}
<li>
<span class="attr">
{{name}}
</span>
</li>
{{/each}}
</ul>
<div class="sort-sub-wrap">
{{#each sort}}
<ul class="sort-sub clearfix hide">
{{#each sub}}
<li class="attr">
{{# allSort}}
<div class="sort-container">
<h2>全部品类<span>{{updateNum}}</span></h2>
<ul>
{{#each list}}
<li class="product-list-nav">
<h3>
<span class="icon-triangle"></span>
{{name}}<span>{{num}}</span>
</h3>
<ul class="sort-child-list">
{{#each childList}}
<li>
<a href="{{href}}">{{name}}</a>
<span>{{num}}</span>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{# brand}}
<div class="brand section">
<span class="title">品牌:</span>
<div class="attr-content">
<ul class="default clearfix">
{{# default}}
<li class="attr">
<a href="{{href}}" title="{{name}}">{{name}}</a>
</li>
{{/ default}}
</ul>
<div class="brand-opt">
<span id="brand-more" class="brand-more">
<em>更多</em>
<i class="iconfont">&#xe600;</i>
</span>
<span id="brand-multi" class="multi-select">多选 +</span>
</div>
<div class="brand-panel hide">
<div class="panel-head clearfix">
<p class="brands-index">
{{#each brandIndex}}
<span data-index="{{index}}">{{name}}</span>
{{/each}}
</p>
<div class="brand-search">
<input id="brand-search-input" type="text">
<span class="btn">
<i class="iconfont">&#xe611;</i>
</span>
</div>
</div>
<ul class="panel-body check-container clearfix">
{{# brandsShow}}
<li class="attr" data-index="{{index}}" data-key="{{key}}">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span title="{{name}}">{{name}}</span>
</a>
</li>
{{/ brandsShow}}
</ul>
<div class="btns">
<button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
</div>
</div>
{{/ brand}}
{{#if price}}
<div class="price section">
<span class="title">价格:</span>
<div class="attr-content clearfix">
{{# price}}
<a class="attr" href="{{href}}"{{name}}</a>
{{/ price}}
<div class="ud-price-range">
¥
<input type="text" class="min limit">
<span class="price-sep">-</span>
<input type="text" class="max limit">
<button class="price-sure hide">确定</button>
</div>
</div>
</div>
{{/if}}
{{#if color}}
<div class="color section">
<span class="title">颜色:</span>
<div class="attr-content clearfix">
{{# color}}
<a class="attr" href="{{href}}">
<i class="color-block" style="background: {{rgb}}"></i>
{{name}}
</a>
{{/ color}}
</div>
</div>
{{/if}}
{{#if size}}
<div class="size section">
<span class="title">尺码:</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
</div>
{{/if}}
{{#if seniorChose}}
<div class="senior section">
<span class="title">高级选项:</span>
<div class="attr-content">
<ul class="clearfix senior-attr-wrap">
{{#each seniorChose}}
<li class="attr">
{{name}}
<span class="iconfont">&#xe600;</span>
<div class="senior-up-icon"></div>
</li>
{{/each}}
</ul>
<div class="senior-sub-wrap">
{{#each seniorChose}}
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{/ filters}}
</div>
<div class="opt-banner">
{{# opts}}
{{# sortType}}
<a class="sort-type{{#if active}} active{{/if}}" href="{{href}}">
{{name}}
{{#if hasSortOrient}}
{{#if active}}
{{#if desc}}
<span class="active-icon iconfont">&#xe603;</span>
{{^}}
<span class="active-icon iconfont">&#xe604;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe614;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe604;</span>
{{/if}}
</a>
{{/ sortType}}
{{# checks}}
<a class="checks{{#if checked}} checked{{/if}}" href="{{href}}">
{{#if checked}}
<span class="iconfont">&#xe612;</span>
{{^}}
<span class="iconfont">&#xe613;</span>
{{/if}}
{{name}}
</a>
{{/ checks}}
<div class="pager-wrap">
{{#if fivePerLine}}
<div class="line-count active">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a class="line-count" href="{{sixPerLineHref}}">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
{{^}}
<a class="line-count" href="{{fivePerLineHref}}">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<div class="line-count active">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
{{/if}}
<div class="page-count">
<span id="count-per-page">
{{countPerPage}}
<i class="iconfont">&#xe604;</i>
</span>
每页
<ul>
{{# pageCounts}}
<li>
<a href="{{href}}">{{count}}</a>
</li>
{{/ pageCounts}}
{{/each}}
</ul>
</div>
<p class="pager">
{{#if preHref}}
<a href="{{preHref}}">
<span class="iconfont">&#xe615;</span>
{{/ allSort}}
{{# advNav}}
{{# advNavTitle}}
<h2 class="nav-pic-title">{{.}}</h2>
{{/advNavTitle}}
<ul class="pic-nav">
{{#each list}}
<li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
{{/each}}
</ul>
{{/advNav}}
{{#advPic}}
{{# advPicTitle}}
<h2 class="nav-pic-title">{{.}}</h2>
{{/ advPicTitle}}
<ul class="pic-nav">
{{#each list}}
<li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
{{/each}}
</ul>
{{/advPic}}
</div>
<div class="list-right pull-right">
{{# shopEntry}}
<div class="shop-entry clearfix">
<a class="pull-left" href="{{home}}">
<img class="logo" src="{{logo}}">
</a>
{{^}}
<span class="dis-icon iconfont">&#xe615;</span>
{{/if}}
<span>
<i>{{curPage}}</i>/{{pageCount}}
</span>
<div class="name pull-left">
<a class="shop-name" href="{{home}}">{{shopName}}</a>
<p class="sorts">
{{#each sort}}
<a href="{{href}}">{{name}}</a>
{{#unless @last}}
/
{{/unless}}
{{/each}}
</p>
</div>
{{#if nextHref}}
<a href="{{nextHref}}">
<a class="entry-btn pull-right" href="{{home}}">
进入品牌店铺
<span class="iconfont">&#xe601;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe601;</span>
{{/if}}
</p>
</div>
{{/ shopEntry}}
{{# filters}}
{{> product/filter-box}}
{{/ filters}}
{{# opts}}
{{> product/sort-pager}}
{{/ opts}}
<div class="goods-container clearfix">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
</div>
</div>
{{/opts}}
</div>
<div class="goods-container clearfix{{#if opts.sixPerLine}} six-per-line{{/if}}">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
{{/ brandAbout}}
</div>
{{/ products}}
{{/ list}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="product-search-page yoho-page center-content">
{{# search}}
{{> layout/path-nav}}
{{# filters}}
{{> product/filter-box}}
{{/ filters}}
{{# opts}}
{{> product/sort-pager}}
{{/ opts}}
<div class="goods-container clearfix">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
</div>
{{/ search}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<div class="yoho-footer">
<div class="footertop">
<div class="index-foot">
<dl class="center-content clearfix">
<dd>
<div class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>有货SERVICES</span>
{{#if footerTop}}
<div class="footertop">
<div class="index-foot">
<dl class="center-content clearfix">
<dd>
<div class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>有货SERVICES</span>
</div>
</div>
<div id="foot-services">
<ul class="two-dim clearfix">
<li class="left">
<img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png">
<p>YOHO!有货</p>
</li>
<li class="left">
<img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg">
<p>微信</p>
</li>
<li class="left">
<img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png">
<p>微博</p>
</li>
</ul>
</div>
</div>
<div id="foot-services">
<ul class="two-dim clearfix">
<li class="left">
<img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png">
<p>YOHO!有货</p>
<p class="item-nav center">
<span class="iconfont cur" key="0">&#xe619;</span>
</p>
</dd>
<dd>
<div id="feed-back-box-list" class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>意见反馈</span>
</div>
</div>
<ul class="vote clearfix">
<li key="0">
<form class="feed-back-form" action="#">
<div>您喜欢有货的新版吗?</div>
<div class="vote-item clearfix">
<p>
<input type="radio" name="solution" value="33">非常喜欢
</p>
<p>
<input type="radio" name="solution" value="34">喜欢
</p>
<p>
<input type="radio" name="solution" value="35">一般般
</p>
<p>
<input type="radio" name="solution" value="36">不喜欢
</p>
<p>
<input type="radio" name="solution" value="37">非常不喜欢
</p>
</div>
<div>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" name="question_id" value="38">
<input class="feedback-id" type="hidden" name="feedback_id" value="5">
</form>
</li>
<li class="left">
<img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg">
<p>微信</p>
<li class="hide" key="1">
<form class="feed-back-form" action="#">
<div>您可以方便的找到想查看的内容吗?</div>
<div class="vote-item clearfix">
<p>
<input type="radio" name="solution" value="38">非常方便
</p>
<p>
<input type="radio" name="solution" value="39">方便
</p>
<p>
<input type="radio" name="solution" value="40">一般般
</p>
<p>
<input type="radio" name="solution" value="41">不方便
</p>
<p>
<input type="radio" name="solution" value="42">非常不方便
</p>
</div>
<div>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" value="39">
<input class="feedback-id" type="hidden" value="5">
</form>
</li>
<li class="left">
<img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png">
<p>微博</p>
<li class="hide" key="2">
<form class="feed-back-form" action="#">
<div>您对新版还有哪些意见或建议?</div>
<textarea name="answer" id="feedback-answer"></textarea>
<div>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" value="37">
<input class="feedback-id" type="hidden" value="5">
</form>
</li>
</ul>
</div>
</div>
<p class="item-nav center">
<span class="iconfont cur" key="0">&#xe619;</span>
</p>
</dd>
<dd>
<div id="feed-back-box-list" class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>意见反馈</span>
<p id="feed-back-page" class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
<span class="iconfont ">&#xe619;</span>
<span class="iconfont ">&#xe619;</span>
</p>
</dd>
<dd class="last">
<div class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>更多 YOHO!产品</span>
</div>
</div>
</div>
<ul class="vote clearfix">
<li key="0">
<form class="feed-back-form" action="#">
<div>您喜欢有货的新版吗?</div>
<div class="vote-item clearfix">
<p>
<input type="radio" name="solution" value="33">非常喜欢
</p>
<p>
<input type="radio" name="solution" value="34">喜欢
</p>
<p>
<input type="radio" name="solution" value="35">一般般
</p>
<p>
<input type="radio" name="solution" value="36">不喜欢
</p>
<p>
<input type="radio" name="solution" value="37">非常不喜欢
</p>
</div>
<div>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" name="question_id" value="38">
<input class="feedback-id" type="hidden" name="feedback_id" value="5">
</form>
</li>
<li class="hide" key="1">
<form class="feed-back-form" action="#">
<div>您可以方便的找到想查看的内容吗?</div>
<div class="vote-item clearfix">
<p>
<input type="radio" name="solution" value="38">非常方便
</p>
<p>
<input type="radio" name="solution" value="39">方便
</p>
<p>
<input type="radio" name="solution" value="40">一般般
</p>
<p>
<input type="radio" name="solution" value="41">不方便
</p>
<p>
<input type="radio" name="solution" value="42">非常不方便
</p>
</div>
<div>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" value="39">
<input class="feedback-id" type="hidden" value="5">
</form>
</li>
<li class="hide" key="2">
<form class="feed-back-form" action="#">
<div>您对新版还有哪些意见或建议?</div>
<textarea name="answer" id="feedback-answer"></textarea>
<div>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" value="37">
<input class="feedback-id" type="hidden" value="5">
</form>
</li>
</ul>
</div>
<p id="feed-back-page" class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
<span class="iconfont ">&#xe619;</span>
<span class="iconfont ">&#xe619;</span>
</p>
</dd>
<dd class="last">
<div class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>更多 YOHO!产品</span>
<div id="foot-mobile">
<ul class="mobile clearfix">
<li>
<a href="http://app.yohoshow.com/" target="_blank">
<img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg">
</a>
</li>
<li>
<a href="http://www.yohoboys.com/" target="_blank">
<img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg">
</a>
</li>
<li>
<a href="http://www.yohogirls.com/" target="_blank">
<img class="lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg">
</a>
</li>
</ul>
</div>
</div>
<div id="foot-mobile">
<ul class="mobile clearfix">
<li>
<a href="http://app.yohoshow.com/" target="_blank">
<img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg">
</a>
</li>
<li>
<a href="http://www.yohoboys.com/" target="_blank">
<img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg">
</a>
</li>
<li>
<a href="http://www.yohogirls.com/" target="_blank">
<img class="lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg">
</a>
</li>
</ul>
</div>
</div>
<p class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
</p>
</dd>
</dl>
<p class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
</p>
</dd>
</dl>
</div>
</div>
</div>
{{/if}}
<div class="footerbottom">
<div class="promise">
<div class="center-content clearfix">
... ...
... ... @@ -270,9 +270,9 @@
<span class="activity-name">活动</span>
<h3 class="activity-content">
\{\{fit_outlet_promotion \}\}购outlet商品,满¥1999再享9折\}\}
{{#equalone has_other_promotion\}\}
\{\{#equalone has_other_promotion\}\}
<span class="mycart_i_down" title="更多" ></span>
{{/equalone\}\}
\{\{/equalone\}\}
\{\{#equalone has_first_promotion\}\}
\{\{first_promotions.promotion_title\}\}
\{\{/equalone\}\}
... ...
... ... @@ -11,10 +11,21 @@
{{!-- 搜索 --}}
{{#if searchListPage}}
<script>
seajs.use('js/product/list');
seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
product.init(5);
});
</script>
{{/if}}
{{!-- 列表 --}}
{{#if productListPage}}
<script>
seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
product.init(4);
});
</script>
{{/if}}
{{!-- 登录注册找回密码--}}
{{#if loginPage}}
<script>
... ...
<div class="filter-box">
{{# checkedConditions}}
<div class="checked-conditions section">
<span class="title">已选条件:</span>
<div class="attr-content clearfix">
{{#each conditions}}
<a class="tag" href="{{href}}">
{{#if name}}
{{name}}
{{^}}
<i class="color-block" style="background: {{color}}"></i>
{{/if}}
<i class="close iconfont">&#xe602;</i>
</a>
{{/each}}
<a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>
</div>
</div>
{{/ checkedConditions}}
{{#if channel}}
<div class="channel section">
<span class="title">频道:</span>
<div class="attr-content clearfix">
{{#each channel}}
<a class="attr" href="{{href}}">
{{name}}
</a>
{{/each}}
</div>
</div>
{{/if}}
{{#if sort}}
<div class="sort section">
<span class="title">分类:</span>
<div class="attr-content">
<ul class="sort-pre clearfix">
{{#each sort}}
<li>
<span class="attr">
{{name}}
</span>
</li>
{{/each}}
</ul>
<div class="sort-sub-wrap">
{{#each sort}}
<ul class="sort-sub clearfix hide">
{{#each sub}}
<li class="attr">
<a href="{{href}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{# brand}}
<div class="brand section">
<span class="title">品牌:</span>
<div class="attr-content">
<ul class="default clearfix">
{{# default}}
<li class="attr">
<a href="{{href}}" title="{{name}}">{{name}}</a>
</li>
{{/ default}}
</ul>
<div class="brand-opt">
<span id="brand-more" class="brand-more">
<em>更多</em>
<i class="iconfont">&#xe600;</i>
</span>
<span id="brand-multi" class="multi-select">多选 +</span>
</div>
<div class="brand-panel hide">
<div class="panel-head clearfix">
<p class="brands-index">
{{#each brandIndex}}
<span data-index="{{index}}">{{name}}</span>
{{/each}}
</p>
<div class="brand-search">
<input id="brand-search-input" type="text">
<span class="btn">
<i class="iconfont">&#xe611;</i>
</span>
</div>
</div>
<ul class="panel-body check-container clearfix">
{{# brandsShow}}
<li class="attr" data-index="{{index}}" data-key="{{key}}">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span title="{{name}}">{{name}}</span>
</a>
</li>
{{/ brandsShow}}
</ul>
<div class="btns">
<button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
</div>
</div>
{{/ brand}}
{{#if price}}
<div class="price section">
<span class="title">价格:</span>
<div class="attr-content clearfix">
{{# price}}
<a class="attr" href="{{href}}">¥{{name}}</a>
{{/ price}}
<div class="ud-price-range">
¥
<input type="text" class="min limit">
<span class="price-sep">-</span>
<input type="text" class="max limit">
<button class="price-sure hide">确定</button>
</div>
</div>
</div>
{{/if}}
{{#if color}}
<div class="color section">
<span class="title">颜色:</span>
<div class="attr-content clearfix">
{{# color}}
<a class="attr" href="{{href}}">
<i class="color-block" style="background: {{rgb}}"></i>
{{name}}
</a>
{{/ color}}
</div>
</div>
{{/if}}
{{#if size}}
<div class="size section">
<span class="title">尺码:</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
</div>
{{/if}}
{{#if seniorChose}}
<div class="senior section">
<span class="title">高级选项:</span>
<div class="attr-content">
<ul class="clearfix senior-attr-wrap">
{{#each seniorChose}}
<li class="attr">
{{name}}
<span class="iconfont">&#xe600;</span>
<div class="senior-up-icon"></div>
</li>
{{/each}}
</ul>
<div class="senior-sub-wrap">
{{#each seniorChose}}
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
</div>
\ No newline at end of file
... ...
<div class="sort-pager">
{{# sortType}}
<a class="sort-type{{#if active}} active{{/if}}" href="{{href}}">
{{name}}
{{#if hasSortOrient}}
{{#if active}}
{{#if desc}}
<span class="active-icon iconfont">&#xe603;</span>
{{^}}
<span class="active-icon iconfont">&#xe604;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe614;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe604;</span>
{{/if}}
</a>
{{/ sortType}}
{{# checks}}
<a class="checks{{#if checked}} checked{{/if}}" href="{{href}}">
{{#if checked}}
<span class="iconfont">&#xe612;</span>
{{^}}
<span class="iconfont">&#xe613;</span>
{{/if}}
{{name}}
</a>
{{/ checks}}
<div class="pager-wrap">
<div class="page-count">
<span id="count-per-page">
{{countPerPage}}
<i class="iconfont">&#xe604;</i>
</span>
每页
<ul>
{{# pageCounts}}
<li>
<a href="{{href}}">{{count}}</a>
</li>
{{/ pageCounts}}
</ul>
</div>
<p class="pager">
{{#if preHref}}
<a href="{{preHref}}">
<span class="iconfont">&#xe615;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe615;</span>
{{/if}}
<span>
<i>{{curPage}}</i>/{{pageCount}}
</span>
{{#if nextHref}}
<a href="{{nextHref}}">
<span class="iconfont">&#xe601;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe601;</span>
{{/if}}
</p>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -14,7 +14,7 @@ fonts_dir = "font"
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# sourcemap = true
sourcemap = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
... ...
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015
Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015
By Ads
</metadata>
<defs>
... ... @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015
bbox="0 -214 1172.1 864"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E619"
unicode-range="U+0078-E61B"
/>
<missing-glyph horiz-adv-x="374"
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
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" />
<glyph glyph-name="uniE619" unicode="&#xe619;"
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" />
<glyph glyph-name="uniE61A" unicode="&#xe61a;"
d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" />
<glyph glyph-name="uniE61B" unicode="&#xe61b;"
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
q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" />
</font>
</defs></svg>
... ...
... ... @@ -4,5 +4,6 @@ require('./js/common');
require('./js/home/home');
require('./js/product/list');
require('./js/product/product');
module.exports = webYohobuy;
... ...
/**
*Description: 商品自定义事件
*Author: chenglong.wang@yoho.cn
*Date: 2015/12/3
*/
var $ = require('yoho.jquery');
function ProductEvent() {
this.handlers = {};
}
ProductEvent.prototype = {
constructor: ProductEvent,
addHandler: function(type, handler) {
if (typeof this.handlers[type] === 'undefined') {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function(event) {
var handlers,
i;
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
handlers = this.handlers[event.type];
for (i = 0; i < handlers.length; i++) {
handlers[i](event);
}
}
},
removeHandler: function(type, handler) {
var handlers,
i;
if (this.handlers[type] instanceof Array) {
handlers = this.handlers[type];
for (i = 0; i < handlers.length; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i, 1);
}
}
};
module.exports = function($o, rowWidth) {
var pMouseHover = new ProductEvent();
var targetWidth = $o.eq(0).width(),
targetHeight = $o.eq(0).height(),
winW = $(window).width();
function handleEvent(event) {
var $target,
targetX = 0,
targetY = 0,
rowW = rowWidth,
activeIndex = 0,
$targetDuplicate = '',
offsetL = 0,
offsetR = 0;
switch (event.type) {
case 'mouseenter':
$target = $(this);
$targetDuplicate = $target.clone();
activeIndex = $target.index() + 1;
targetX = (activeIndex % rowW) === 0 ? rowW : activeIndex % rowW;
targetY = Math.ceil(activeIndex / rowW);
offsetL = $target.offset().left;
offsetR = winW - (offsetL + targetWidth);
pMouseHover.fire({
type: 'MouseEnter',
target: $target,
targetWidth: targetWidth,
targetHeight: targetHeight,
targetX: targetX,
targetY: targetY,
rowWidth: rowW,
activeIndex: activeIndex,
targetDuplicate: $targetDuplicate,
offsetL: offsetL,
offsetR: offsetR
});
break;
case 'mouseleave':
pMouseHover.fire({
type: 'MouseLeave'
});
break;
}
}
$o.bind('mouseenter', handleEvent);
//$o.bind('mouseleave', handleEvent);
return pMouseHover;
};
\ No newline at end of file
... ...
/**
* 商品筛选逻辑
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/12/4
*/
var $ = require('yoho.jquery');
var checkUnicode = {
unchecked: '&#xe613;',
checked: '&#xe612;'
},
moreUnicode = {
up: '&#xe610;',
down: '&#xe600;'
};
//品牌相关变量
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandAttrs = $('.brand .attr'),
$brandMore = $('#brand-more'),
$brandMulti = $('#brand-multi');
var $brandMoreTxt, $brandMoreIcon;
//价格相关变量
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
//分类相关变量
var $sortSub = $('.sort-sub-wrap');
//高级选项相关变量
var $seniorSubWrap = $('.senior-sub-wrap'),
$seniorAttrWrap = $('.senior-attr-wrap');
var seniorHoverTime, hoveredIndex;
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
}
//显示更多品牌面板
function brandShowMore() {
$brandDefault.addClass('hide');
$brandPanel.removeClass('hide');
}
//隐藏更多品牌面板
function brandHideMore() {
$brandPanel.addClass('hide');
$brandDefault.removeClass('hide');
}
//url构造&跳转
function uriLoc(attr, val) {
var href = decodeURIComponent(window.location.search),
query = attr + '=' + val,
newHref;
if (href === '') {
newHref = '?' + query;
} else {
newHref = href + '&' + query;
}
window.location.href = newHref;
}
//隐藏高级选项面板
function hideSeniorPanel(index) {
$seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
$seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
hoveredIndex = -1;
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
return false;
});
//【分类】
$('.sort-pre').on('click', 'li', function() {
var $this = $(this),
index = $this.index();
$this.siblings('.active').removeClass('active');
$this.addClass('active');
$sortSub.children(':not(.hide)').addClass('hide');
$sortSub.children(':eq(' + index + ')').removeClass('hide');
});
//【品牌】
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//【品牌】多选
$brandMulti.click(function() {
if ($brandPanel.css('display') === 'none') {
//显示品牌面板
brandShowMore();
}
$brandPanel.addClass('multi'); //显示出checkbox
$(this).addClass('hide');
});
//【品牌】更多
$brandMore.click(function() {
var $this = $(this);
if ($this.hasClass('more')) {
brandHideMore();
$brandMoreTxt.text('更多');
$brandMoreIcon.html(moreUnicode.down);
} else {
brandShowMore();
$brandMoreTxt.text('收起');
$brandMoreIcon.html(moreUnicode.up);
}
$(this).toggleClass('more');
});
//【品牌】索引
$('.brands-index').on('click', 'span', function() {
var $this = $(this),
index = $this.data('index');
if ($this.index() === 0) {
//全部
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
}
});
//【品牌】搜索
$('#brand-search-input').keyup(function() {
var val = $(this).val().toLowerCase();
if (val === '') {
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
}
});
//【品牌】多选确定
$('#brand-multi-ok').click(function() {
var val = '';
if ($(this).hasClass('dis')) {
return;
}
$brandPanel.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc('brand', val);
});
//【品牌/高级选项】多选取消
$('.multi-select-cancel').click(function() {
var $panel = $(this).closest('.multi');
if ($panel.hasClass('brand-panel')) {
brandHideMore();
$brandMulti.removeClass('hide'); //显示多选按钮
}
$panel.removeClass('multi');
clearChecked($panel.find('.checkbox.checked')); //清除选中状态
});
//【品牌/高级选项】checkbox
$('.check-container').on('click', '.attr', function() {
var $this = $(this),
$check = $this.find('.checkbox'),
$btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
$check.toggleClass('checked');
if ($check.hasClass('checked')) {
$check.html(checkUnicode.checked);
} else {
$check.html(checkUnicode.unchecked);
}
//更新按钮状态
if ($check.hasClass('checked') ||
$this.siblings('.attr').find('.checked').length > 0) {
$btnOk.removeClass('dis');
} else {
$btnOk.addClass('dis');
}
});
//【品牌/高级选项】当多选时阻止链接默认跳转
$('.brand, .senior').on('click', '.attr > a', function(e) {
if ($(this).closest('.multi').length > 0) {
e.preventDefault();
}
});
//【价格】用户定义价格处理
if ($udPrice.length > 0) {
$limit = $udPrice.find('.limit');
$min = $limit.filter('.min');
$max = $limit.filter('.max');
$btn = $udPrice.find('.price-sure');
//【价格】输入
$limit.keyup(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
isMinInt = interReg.test(min),
isMaxInt = interReg.test(max);
if (isMaxInt && (min === '' || isMinInt) ||
isMinInt && (max === '' || isMaxInt)
) {
$btn.removeClass('hide');
} else {
$btn.addClass('hide');
}
});
//【价格】多项查询
$btn.click(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
tmp;
//对于min大于max的情况,交换位置
if (min !== '' && max !== '' && +min > +max) {
tmp = max;
max = min;
min = tmp;
}
uriLoc('price', min + ',' + max);
});
}
//【高级选项】鼠标移入显示子项
$seniorAttrWrap.on('mouseenter', '.attr', function() {
var index = $(this).addClass('hover').index();
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
}).on('mouseleave', '.attr', function() {
var $this = $(this),
index = $this.index();
hoveredIndex = index;
seniorHoverTime = setTimeout(function() {
hideSeniorPanel();
}, 100);
});
//【高级选项】多选
$('.senior-sub').on('click', '.multi-select', function() {
$(this).closest('.senior-sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.senior-sub'),
val = '';
if ($btn.hasClass('dis')) {
return;
}
$sub.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc($sub.data('attr'), val);
}).on('mouseenter', function() {
clearTimeout(seniorHoverTime);
}).on('mouseleave', function() {
hideSeniorPanel();
});
\ No newline at end of file
... ...
... ... @@ -4,420 +4,8 @@
* @date: 2015/11/23
*/
var $ = require('yoho.jquery');
require('./filter');
var checkUnicode = {
unchecked: '&#xe613;',
checked: '&#xe612;'
},
moreUnicode = {
up: '&#xe610;',
down: '&#xe600;'
};
require('./sort-pager');
//品牌相关变量
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandAttrs = $('.brand .attr'),
$brandMore = $('#brand-more'),
$brandMulti = $('#brand-multi');
var $brandMoreTxt, $brandMoreIcon;
//商品相关变量
var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
$goodSelectColor = $goodsContainer.find('.good-select-color');
//价格相关变量
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
//分类相关变量
var $sortSub = $('.sort-sub-wrap');
//高级选项相关变量
var $seniorSubWrap = $('.senior-sub-wrap'),
$seniorAttrWrap = $('.senior-attr-wrap');
var seniorHoverTime, hoveredIndex;
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
}
//显示更多品牌面板
function brandShowMore() {
$brandDefault.addClass('hide');
$brandPanel.removeClass('hide');
}
//隐藏更多品牌面板
function brandHideMore() {
$brandPanel.addClass('hide');
$brandDefault.removeClass('hide');
}
//url构造&跳转
function uriLoc(attr, val) {
var href = decodeURIComponent(window.location.search),
query = attr + '=' + val,
newHref;
if (href === '') {
newHref = '?' + query;
} else {
newHref = href + '&' + query;
}
window.location.href = newHref;
}
//隐藏高级选项面板
function hideSeniorPanel(index) {
$seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
$seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
hoveredIndex = -1;
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
return false;
});
//【分类】
$('.sort-pre').on('click', 'li', function() {
var index = $(this).index();
$sortSub.children(':not(.hide)').addClass('hide');
$sortSub.children(':eq(' + index + ')').removeClass('hide');
});
//【品牌】
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//【品牌】多选
$brandMulti.click(function() {
if ($brandPanel.css('display') === 'none') {
//显示品牌面板
brandShowMore();
}
$brandPanel.addClass('multi'); //显示出checkbox
$(this).addClass('hide');
});
//【品牌】更多
$brandMore.click(function() {
var $this = $(this);
if ($this.hasClass('more')) {
brandHideMore();
$brandMoreTxt.text('更多');
$brandMoreIcon.html(moreUnicode.down);
} else {
brandShowMore();
$brandMoreTxt.text('收起');
$brandMoreIcon.html(moreUnicode.up);
}
$(this).toggleClass('more');
});
//【品牌】索引
$('.brands-index').on('click', 'span', function() {
var $this = $(this),
index = $this.data('index');
if ($this.index() === 0) {
//全部
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
}
});
//【品牌】搜索
$('#brand-search-input').keyup(function() {
var val = $(this).val().toLowerCase();
if (val === '') {
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
}
});
//【品牌】多选确定
$('#brand-multi-ok').click(function() {
var val = '';
if ($(this).hasClass('dis')) {
return;
}
$brandPanel.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc('brand', val);
});
//【品牌/高级选项】多选取消
$('.multi-select-cancel').click(function() {
var $panel = $(this).closest('.multi');
if ($panel.hasClass('brand-panel')) {
brandHideMore();
$brandMulti.removeClass('hide'); //显示多选按钮
}
$panel.removeClass('multi');
clearChecked($panel.find('.checkbox.checked')); //清除选中状态
});
//【品牌/高级选项】checkbox
$('.check-container').on('click', '.attr', function() {
var $this = $(this),
$check = $this.find('.checkbox'),
$btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
$check.toggleClass('checked');
if ($check.hasClass('checked')) {
$check.html(checkUnicode.checked);
} else {
$check.html(checkUnicode.unchecked);
}
//更新按钮状态
if ($check.hasClass('checked') ||
$this.siblings('.attr').find('.checked').length > 0) {
$btnOk.removeClass('dis');
} else {
$btnOk.addClass('dis');
}
});
//【品牌/高级选项】当多选时阻止链接默认跳转
$('.brand, .senior').on('click', '.attr > a', function(e) {
if ($(this).closest('.multi').length > 0) {
e.preventDefault();
}
});
//【价格】用户定义价格处理
if ($udPrice.length > 0) {
$limit = $udPrice.find('.limit');
$min = $limit.filter('.min');
$max = $limit.filter('.max');
$btn = $udPrice.find('.price-sure');
//【价格】输入
$limit.keyup(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
isMinInt = interReg.test(min),
isMaxInt = interReg.test(max);
if (isMaxInt && (min === '' || isMinInt) ||
isMinInt && (max === '' || isMaxInt)
) {
$btn.removeClass('hide');
} else {
$btn.addClass('hide');
}
});
//【价格】多项查询
$btn.click(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
tmp;
//对于min大于max的情况,交换位置
if (min !== '' && max !== '' && +min > +max) {
tmp = max;
max = min;
min = tmp;
}
uriLoc('price', min + ',' + max);
});
}
//【高级选项】鼠标移入显示子项
$seniorAttrWrap.on('mouseenter', '.attr', function() {
var index = $(this).addClass('hover').index();
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
}).on('mouseleave', '.attr', function() {
var $this = $(this),
index = $this.index();
hoveredIndex = index;
seniorHoverTime = setTimeout(function() {
hideSeniorPanel();
}, 100);
});
//【高级选项】多选
$('.senior-sub').on('click', '.multi-select', function() {
$(this).closest('.senior-sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.senior-sub'),
val = '';
if ($btn.hasClass('dis')) {
return;
}
$sub.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc($sub.data('attr'), val);
}).on('mouseenter', function() {
clearTimeout(seniorHoverTime);
}).on('mouseleave', function() {
hideSeniorPanel();
});
//操作栏
(function() {
var $countPerPage = $('#count-per-page'),
$countChose = $countPerPage.next('ul');
var SLIDETIME = 200;
$(document).click(function(e) {
if ($(e.target).closest('.page-count').length > 0) {
return;
}
$countChose && $countChose.slideUp(SLIDETIME);
});
$countPerPage.click(function() {
if ($countChose.css('display') === 'none') {
$countChose.slideDown(SLIDETIME);
} else {
$countChose.slideUp(SLIDETIME);
}
});
}());
/*
* Description: 商品列表移入效果
* Added by wangchenglong at 2015/12/1
*/
// 构造html
function createColorList(data) {
var colorListStr = '',
len = data.length,
row = 4, //每列ul放4个li
col = Math.ceil(len / row), //需要几**列**ul
i,
j,
index,
ulNum = 0;
for (i = 0; i < col; i++) {
colorListStr += '<ul>';
for (j = 0; j < row; j++) {
index = i * row + j;
if (index === len) {
break;
}
colorListStr +=
'<li>' +
'<a href="' + data[i * row + j].url + '">' +
'<img src="' + data[i * row + j].src + '" />' +
'</a>' +
'</li>';
if (j === row - 1) {
colorListStr += '</ul>';
ulNum++;
}
}
}
if (ulNum < col) {
colorListStr += '</ul>';
}
return colorListStr;
}
//todo
$goodItem.mouseenter(function() {
var $cloneStr,
activeIndex,
X,
left,
Y,
top,
colNum = 5,
itemW = 222,
itemH = 400,
itemMr = 10,
itemMb = 35;
activeIndex = $(this).index() + 1;
X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum;
Y = Math.ceil(activeIndex / colNum);
left = (X - 1) * (itemW + itemMr) + 15 - 21;
top = (Y - 1) * (itemH + itemMb) + 25 - 19;
$cloneStr = $(this).clone();
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
$.ajax({
type: 'GET',
url: '/product/index/productColor',
dataType: 'json'
}).then(function(data) {
$goodInfoMain.append($cloneStr);
$goodSelectColor.append($(createColorList(data)));
});
$goodItemWrapper.css({
left: left,
top: top,
display: 'inline-block'
});
});
$goodItemWrapper.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
});
\ No newline at end of file
require('./product');
\ No newline at end of file
... ...
/**
*Description: 商品列表页
*Author: chenglong.wang@yoho.cn
*Date: 2015/12/2
*/
var $ = require('yoho.jquery'),
productEvent = require('../common/product-event');
var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
$goodSelectColor = $goodsContainer.find('.good-select-color'),
$productListNav = $('.product-list-nav'),
productList;
/**
* @description 初始化鼠标移入商品列表弹层效果
* @num 每列存放商品的个数
*/
exports.init = function(num) {
productList = productEvent($goodItem, num);
/**
* @description 构造商品颜色列表的html结构
* @param data 商品颜色的数组,[url: '',src: '']
* @return json {'colorListStr': '', 'ulNum': ''}
* */
function createColorList(data) {
var colorListStr = '',
len = data.length,
row = 4, //每列ul放4个li
col = Math.ceil(len / row), //需要几**列**ul
i,
j,
index,
ulNum = 0;
for (i = 0; i < col; i++) {
colorListStr += '<ul>';
for (j = 0; j < row; j++) {
index = i * row + j;
if (index === len) {
break;
}
colorListStr +=
'<li>' +
'<a href="' + data[i * row + j].url + '">' +
'<img src="' + data[i * row + j].src + '" />' +
'</a>' +
'</li>';
if (j === row - 1) {
colorListStr += '</ul>';
ulNum++;
}
}
}
if (ulNum < col) {
colorListStr += '</ul>';
}
return {
colorListStr: colorListStr,
ulNum: col
};
}
productList.addHandler('MouseEnter', function(event) {
var itemMr = 10, //list的右边距
itemMb = 35, //list的下边距
ulStr = '',
ulNum,
wrapperWidth,
diffWidth,
wrapperX,
wrapperY,
wrapperPl, //鼠标移入时弹层的左内边距
wrapperPt, //鼠标移入时弹层的上内边距
containerPt; //商品列表容器的上内边距
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
$.ajax({
type: 'GET',
url: '/product/index/productColor',
dataType: 'json'
}).then(function(data) {
ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表
ulNum = createColorList(data).ulNum;//ajax请求的颜色的数量
$goodInfoMain.append(event.targetDuplicate);
$goodSelectColor.append($(ulStr));
wrapperPl = $goodItemWrapper.css('paddingLeft');
wrapperPt = $goodItemWrapper.css('paddingTop');
containerPt = $goodsContainer.css('paddingTop');
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
wrapperY = (event.targetY - 1) *
(event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
//todo
diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
if (diffWidth <= 0) {
wrapperX = wrapperX + diffWidth;
}
$goodItemWrapper.css({
width: wrapperWidth,
left: wrapperX,
top: wrapperY,
display: 'inline-block'
});
});
});
$goodItemWrapper.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
});
// 左侧导航
$productListNav.click(function() {
if ($(this).hasClass('active')) {
$(this).find('.sort-child-list').stop(true, true).slideUp();
} else {
$(this).find('.sort-child-list').stop(true, true).slideDown();
}
$(this).toggleClass('active');
});
};
\ No newline at end of file
... ...
/**
* 筛选页和列表页操作banner中的每页N个商品选择逻辑
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/12/4
*/
var $ = require('yoho.jquery');
var $countPerPage = $('#count-per-page'),
$countChose = $countPerPage.next('ul');
var SLIDETIME = 200;
$(document).click(function(e) {
if ($(e.target).closest('.page-count').length > 0) {
return;
}
$countChose && $countChose.slideUp(SLIDETIME);
});
$countPerPage.click(function() {
if ($countChose.css('display') === 'none') {
$countChose.slideDown(SLIDETIME);
} else {
$countChose.slideUp(SLIDETIME);
}
});
\ No newline at end of file
... ...
... ... @@ -56,6 +56,14 @@ a {
display: none !important;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
a:focus {
outline: none;
}
... ... @@ -71,4 +79,5 @@ a:focus {
width: 990px;
}
}
@import "home/index", "product/index", "passport/index";
\ No newline at end of file
@import "home/index", "product/index", "passport/index";
... ...
.filter-box {
border: 1px solid #dfdfdf;
.section {
padding: 10px 15px;
font-size: 14px;
border-top: 1px solid #dfdfdf;
&:first-child {
border-top: none;
background: #eaeceb;
}
}
.title {
float: left;
width: 90px;
line-height: 30px;
}
.attr-content {
margin-left: 90px;
}
.multi-select {
display: inline-block;
width: 60px;
height: 18px;
line-height: 18px;
border: 1px solid #000;
text-align: center;
cursor: pointer;
}
.attr {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
line-height: 30px;
cursor: pointer;
&:first-child {
margin-left: 0;
}
-moz-user-select: none;
}
.checked-conditions {
line-height: 30px;
.tag {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
background: #000;
color: #fff;
cursor: pointer;
}
.color-block {
height: 14px;
width: 14px;
border: 1px solid #fff;
margin-bottom: -3px;
}
.clear-checked {
color: #999;
float: right;
}
}
.sort-pre .active .attr {
border: 1px solid #000;
}
.sort-sub-wrap {
width: 100%;
.sort-sub {
padding: 15px 0;
}
}
.brand {
position: relative;
.attr {
box-sizing: border-box;
width: 20%;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attr-content {
max-width: 900px;
}
.brand-opt {
position: absolute;
right: 20px;
top: 15px;
}
.brand-more {
margin-right: 20px;
cursor: pointer;
}
.brands-index {
float: left;
line-height: 30px;
span {
margin: 0 5px;
cursor: pointer;
-moz-user-select: none;
&:first-child {
margin-left: 10px;
}
}
}
.brand-search {
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 15px;
input {
float: left;
border: none;
width: 100px;
height: 18px;
padding: 0;
}
.btn {
display: inline-block;
width: 55px;
height: 18px;
background: #b0b0b0;
color: #fff;
text-align: center;
cursor: default;
}
}
.panel-body {
padding: 15px 20px;
margin-top: 5px;
background: #f4f7f6;
min-height: 30px;
border: 1px solid #000;
}
}
.btns {
display: none;
margin-top: 10px;
text-align: center;
}
.multi .btns {
display: block;
}
.multi-select-ok, .multi-select-cancel {
width: 55px;
height: 24px;
border: none;
background: #000;
color: #fff;
font-size: 15px;
margin-right: 15px;
cursor: pointer;
&.dis {
background: #ccc;
}
}
.ud-price-range {
margin-top: 2px;
}
.limit {
height: 22px;
width: 42px;
border: 1px solid #ccc;
padding: 0;
}
.price-sep {
margin: 0 5px;
}
.price-sure {
height: 24px;
width: 44px;
border: 1px solid #e0e0e0;
background: #fff;
color: #666;
margin-left: 10px;
}
.color-block {
display: inline-block;
height: 22px;
width: 22px;
border: 1px solid #ccc;
margin-bottom: -6px;
margin-right: 5px;
}
.senior {
padding-bottom: 6px;
.attr-content {
position: relative;
}
}
.senior-attr-wrap {
position: relative;
}
.senior-attr-wrap > .attr:hover,
.senior-attr-wrap > .attr.hover {
> .iconfont {
visibility: hidden;
}
.senior-up-icon {
visibility: visible;
}
}
.senior-sub {
box-sizing: border-box;
position: absolute;
padding: 15px 0;
left: 0;
right: 0;
top: 39px;
background: #fff;
border: 1px solid #eaeceb;
ul {
max-width: 950px;
}
&.multi .multi-select {
display: none;
}
.multi-select {
position: absolute;
top: 20px;
right: 15px;
}
}
.senior-up-icon {
width: 100%;
height: 9px;
z-index: 1;
margin-left: -11px;
visibility: hidden;
background: image-url('product/senior-up.png') no-repeat;
background-position-x: 50%;
}
.checkbox {
display: none;
}
.multi .checkbox {
display: inline;
}
}
\ No newline at end of file
... ...
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
margin-right: 10px;
float: left;
//图片
.good-detail-img {
width: 100%;
/*height: 300px;*/
position: relative;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.few-tag {
width: 100%;
position: absolute;
left: 0;
height: 16px;
line-height: 16px;
background: #ffac5b;
color: #fff;
font-size: 12px;
text-align: center;
bottom: 0;
}
}
//文本
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
> .price {
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
.tag-container {
font-size: 12px;
height: 22px;
line-height: 22px;
.good-tag {
padding: 0 7px;
display: block;
float: left;
margin-right: 3px;
&:nth-last-of-type(1) {
margin-right: 0;
}
@each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
(renew-tag, #fff, #78dc7e),
(new-festival-tag, #fff, #000000),
(yep-tag, #fff, #ff565b),
(ymp-tag, #fff, #ff565b),
(sale-tag, #fff, #ff565b) {
&.#{$tag} {
color: $tagColor;
background: $tagBackground;
}
}
&.limit-tag {
color: #4e4e4e;
border: 1px solid #4e4e4e;
}
}
}
}
//弹层
.good-item-wrapper {
border: 1px solid #dddddd;
padding-left: 20px;
padding-top: 18px;
padding-right: 20px;
position: absolute;
background: #fff;
display: none;
.good-info-main{
float: left;
.col-btn {
display: block;
&:hover {
color: #f95b4f;
cursor: pointer;
}
}
}
.good-select-color {
float: left;
margin-top: 22px;
ul {
display: block;
float: left;
margin-left: 15px;
}
li {
width: 50px;
margin-bottom: 15px;
a, img {
display: block;
overflow: hidden;
width: 100%;
}
}
}
.good-info {
margin-right: 10px;
}
}
\ No newline at end of file
... ...
.products-page {
.filter-box {
border: 1px solid #dfdfdf;
}
.section {
padding: 10px 15px;
font-size: 14px;
border-top: 1px solid #dfdfdf;
&:first-child {
border-top: none;
background: #eaeceb;
}
}
.title {
float: left;
width: 90px;
line-height: 30px;
}
.attr-content {
margin-left: 90px;
}
.multi-select {
display: inline-block;
width: 60px;
height: 18px;
line-height: 18px;
border: 1px solid #000;
text-align: center;
cursor: pointer;
}
.attr {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
line-height: 30px;
cursor: pointer;
&:first-child {
margin-left: 0;
}
-moz-user-select: none;
}
.checked-conditions {
line-height: 30px;
.tag {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
background: #000;
color: #fff;
cursor: pointer;
}
.color-block {
height: 14px;
width: 14px;
border: 1px solid #fff;
margin-bottom: -3px;
}
.clear-checked {
color: #999;
float: right;
}
}
.sort-sub-wrap {
width: 100%;
.sort-sub {
padding: 15px 0;
}
}
.brand {
position: relative;
.attr {
box-sizing: border-box;
width: 20%;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attr-content {
max-width: 900px;
}
.brand-opt {
position: absolute;
right: 20px;
top: 15px;
}
.brand-more {
margin-right: 20px;
cursor: pointer;
}
.brands-index {
float: left;
line-height: 30px;
span {
margin: 0 5px;
cursor: pointer;
-moz-user-select: none;
&:first-child {
margin-left: 10px;
}
}
}
.brand-search {
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 15px;
input {
float: left;
border: none;
width: 100px;
height: 18px;
padding: 0;
}
.btn {
display: inline-block;
width: 55px;
height: 18px;
background: #b0b0b0;
color: #fff;
text-align: center;
cursor: default;
}
}
.panel-body {
padding: 15px 20px;
margin-top: 5px;
background: #f4f7f6;
min-height: 30px;
border: 1px solid #000;
}
}
.btns {
display: none;
margin-top: 10px;
text-align: center;
}
.multi .btns {
display: block;
}
.multi-select-ok, .multi-select-cancel {
width: 55px;
height: 24px;
border: none;
background: #000;
color: #fff;
font-size: 15px;
margin-right: 15px;
cursor: pointer;
&.dis {
background: #ccc;
}
}
.ud-price-range {
margin-top: 2px;
}
.limit {
height: 22px;
width: 42px;
border: 1px solid #ccc;
padding: 0;
}
.price-sep {
margin: 0 5px;
}
.price-sure {
height: 24px;
width: 44px;
border: 1px solid #e0e0e0;
background: #fff;
color: #666;
margin-left: 10px;
}
.color-block {
display: inline-block;
height: 22px;
width: 22px;
border: 1px solid #ccc;
margin-bottom: -6px;
margin-right: 5px;
}
.senior {
padding-bottom: 6px;
.attr-content {
position: relative;
}
}
.senior-attr-wrap {
position: relative;
}
.senior-attr-wrap > .attr:hover,
.senior-attr-wrap > .attr.hover {
> .iconfont {
visibility: hidden;
}
.senior-up-icon {
visibility: visible;
}
}
.senior-sub {
box-sizing: border-box;
position: absolute;
padding: 15px 0;
left: 0;
right: 0;
top: 39px;
background: #fff;
border: 1px solid #eaeceb;
ul {
max-width: 950px;
}
&.multi .multi-select {
display: none;
}
.multi-select {
position: absolute;
top: 20px;
right: 15px;
}
}
.senior-up-icon {
width: 100%;
height: 9px;
z-index: 1;
margin-left: -11px;
visibility: hidden;
background: image-url('product/senior-up.png') no-repeat;
background-position-x: 50%;
}
.checkbox {
display: none;
}
.multi .checkbox {
display: inline;
}
/*商品列表
*Added by wangchenglong at 2015/12/1
*/
.goods-container {
height: auto;
padding: 25px 15px 0 15px;
overflow: hidden;
position: relative;
width: 1150px + 10px;
//标签
.tag-container {
font-size: 12px;
height: 22px;
line-height: 22px;
.good-tag {
padding: 0 7px;
display: block;
float: left;
margin-right: 3px;
&:nth-last-of-type(1) {
margin-right: 0;
}
@each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
(renew-tag, #fff, #78dc7e),
(new-festival-tag, #fff, #000000),
(yep-tag, #fff, #ff565b),
(ymp-tag, #fff, #ff565b),
(sale-tag, #fff, #ff565b) {
&.#{$tag} {
color: $tagColor;
background: $tagBackground;
}
}
&.limit-tag {
color: #4e4e4e;
border: 1px solid #4e4e4e;
}
}
}
//商品列表
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
margin-right: 10px;
float: left;
//图片
.good-detail-img {
width: 100%;
height: 300px;
position: relative;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.few-tag {
width: 100%;
position: absolute;
left: 0;
height: 16px;
line-height: 16px;
background: #ffac5b;
color: #fff;
font-size: 12px;
text-align: center;
bottom: 0;
}
}
//文本
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
> .price {
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
}
//弹层
.good-item-wrapper {
border: 1px solid #dddddd;
padding-left: 20px;
padding-top: 18px;
padding-right: 20px;
position: absolute;
background: #fff;
display: none;
.good-info-main{
float: left;
.col-btn {
display: block;
&:hover {
color: #f95b4f;
cursor: pointer;
}
}
}
.good-select-color {
float: left;
margin-top: 22px;
ul {
display: block;
float: left;
margin-left: 15px;
}
li {
width: 50px;
margin-bottom: 15px;
a, img {
display: block;
overflow: hidden;
width: 100%;
}
}
}
.good-info {
margin-right: 10px;
}
}
//每行六个商品
&.six-per-line {
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
//图片
.good-detail-img {
width: 100%;
height: 300px;
position: relative;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.few-tag {
width: 100%;
position: absolute;
left: 0;
height: 16px;
line-height: 16px;
background: #ffac5b;
color: #fff;
font-size: 12px;
text-align: center;
bottom: 0;
}
}
//文本
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
> .price {
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
}
}
}
//商品列表END
.opt-banner {
height: 48px;
background: #f5f7f6;
line-height: 48px;
margin: 10px 0;
.sort-type,
.checks {
color: #ccc;
font-size: 14px;
padding: 0 10px;
.iconfont {
font-size: 14px;
}
&.active,
&.checked {
color: #000;
}
}
.pager-wrap {
float: right;
padding: 15px 0;
}
.line-count {
float: left;
padding: 3px 1px 3px 3px;
border: 1px solid #ccc;
margin-right: 10px;
span {
float: left;
width: 5px;
height: 10px;
background: #ccc;
margin-right: 2px;
}
&.active {
border-color: #222;
span {
background: #222;
}
}
}
.page-count {
position: relative;
height: 18px;
float: left;
font-size: 12px;
line-height: 18px;
> span {
float: left;
display: block;
width: 42px;
height: 10px;
line-height: 10px;
padding: 3px;
border: 1px solid #ccc;
color: #222;
cursor: pointer;
margin-right: 10px;
}
.iconfont {
font-size: 14px;
color: #ccc;
float: right;
}
> ul {
position: absolute;
display: none;
width: 42px;
padding: 0 3px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
li {
border-bottom: 1px solid #ccc;
}
a {
display: block;
width: 100%;
}
}
.pager {
float: left;
font-size: 14px;
line-height: 15px;
margin: 0 20px;
.dis-icon {
color: #e6e6e6;
}
i {
color: #f00;
}
}
}
}
\ No newline at end of file
@import "search", "list", "filter-box", "sort-pager", "good";
\ No newline at end of file
... ...
.product-list-page {
.list-left {
width: 160px;
.sort-container {
width: 100%;
font-size: 12px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 10px;
h2 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
span {
color: #bbb;
padding-left: 5px;
}
}
.product-list-nav {
h3 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
text-indent: 10px;
cursor: pointer;
span {
color: #bbb;
padding-left: 5px;
&.icon-triangle {
display: inline-block;
padding-left: 0;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 6px solid #000;
border-bottom: 6px solid #fff;
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
@include transition(transform .3s)
}
}
}
&.active {
h3 {
span {
&.icon-triangle {
@include rotate(90deg)
}
}
}
/*ul.sort-child-list {
display: block;
}*/
}
}
ul.sort-child-list {
display: none;
&.new-sale {
display: block;
}
li {
color: #bbb;
span {
padding-left: 5px;
}
}
a {
color: #666;
padding-left: 10px;
height: 22px;
line-height: 22px;
}
}
}
.nav-pic-title {
height: 35px;
line-height: 35px;
color: #000;
font-weight: bold;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
}
.pic-nav {
display: block;
li, img {
display: block;
width: 100%;
overflow: hidden;
}
}
}
.list-right {
width: 970px;
}
.brand-banner {
position: relative;
.opt-wrap {
position: absolute;
width: 100%;
height: 32px;
top: 50%;
margin-top: -16px;
text-align: right;
}
a, span {
display: inline-block;
height: 20px;
margin-right: 5px;
line-height: 20px;
border: 1px solid #fff;
padding: 5px 10px;
color: #fff;
font-size: 12px;
}
.iconfont {
font-size: 12px;
}
.brand-favor {
margin-right: 0;
}
.coled {
color: #f00;
}
}
.shop-entry {
position: relative;
background: #f5f7f6;
border: 1px solid #eaeceb;
padding: 12px 15px;
margin-bottom: 10px;
.logo {
width: 80px;
height: 50px;
}
.name {
margin-left: 10px;
}
.shop-name {
font-size: 16px;
color: #222;
line-height: 26px;
}
.sorts {
color: #999;
font-size: 12px;
line-height: 18px;
a {
color: #999;
}
}
.entry-btn {
position: absolute;
right: 15px;
top: 50%;
width: 110px;
height: 32px;
line-height: 32px;
margin-top: -16px;
background: #222;
text-align: center;
color: #fff;
font-size: 12px;
.iconfont {
font-size: 12px;
}
}
}
.goods-container {
height: auto;
padding: 25px 0 0 0;
position: relative;
width: 970px + 10px;//每列增加右边距
.good-info {
width: 235px;
}
}
}
\ No newline at end of file
... ...
/*
*Description: 商品列表
*Author: chenglong.wang@yoho.cn
*Date: 2015/12/1
*/
.product-search-page {
//todo
.goods-container {
height: auto;
padding: 25px 0 0 0;
position: relative;
width: 1150px + 10px;//每列增加右边距
}
}
\ No newline at end of file
... ...
.sort-pager {
height: 48px;
background: #f5f7f6;
line-height: 48px;
margin: 10px 0;
.sort-type,
.checks {
color: #ccc;
font-size: 14px;
padding: 0 10px;
.iconfont {
font-size: 14px;
}
&.active,
&.checked {
color: #000;
}
}
.pager-wrap {
float: right;
padding: 15px 0;
}
.page-count {
position: relative;
height: 18px;
float: left;
font-size: 12px;
line-height: 18px;
> span {
float: left;
display: block;
width: 42px;
height: 10px;
line-height: 10px;
padding: 3px;
border: 1px solid #ccc;
color: #222;
cursor: pointer;
margin-right: 10px;
}
.iconfont {
font-size: 14px;
color: #ccc;
float: right;
}
> ul {
position: absolute;
display: none;
width: 42px;
padding: 0 3px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
li {
border-bottom: 1px solid #ccc;
}
a {
display: block;
width: 100%;
}
}
.pager {
float: left;
font-size: 14px;
line-height: 15px;
margin: 0 20px;
.dis-icon {
color: #e6e6e6;
}
i {
color: #f00;
}
}
}
\ No newline at end of file
... ...
... ... @@ -257,6 +257,7 @@ class BoysController extends AbstractAction
);
$data = array(
'headerdata' => $headerdata,
'footerTop' => true,
'boysHomePage' => true,
'boy' => array(
array(
... ...
... ... @@ -6,14 +6,14 @@ use Plugin\Helpers;
class IndexController extends AbstractAction
{
/**
* 商品列表
* 商品搜索
*/
public function indexAction()
public function searchAction()
{
$data = array(
'searchListPage' => true,
'products' => array(
'search' => array(
'pathNav' => array(
array(
'href' => 'm.yohobuy.com',
... ... @@ -373,6 +373,528 @@ class IndexController extends AbstractAction
)
)
);
$this->_view->display('search', $data);
}
/**
* 商品列表
*/
public function listAction()
{
$data = array(
//'searchListPage' => true,
'productListPage' => true, //初始化js
'list' => array(
'brandBanner' => array(
'bannerHeight' => 150,
'coled' => true,
'banner' => 'http://img11.static.yhbimg.com/brandBanner/2013/01/14/14/011e5ca97c33db0e79ca0a075e7cf0ae1d.jpg'
),
'pathNav' => array(
array(
'href' => 'new.yohobuy.com/girls',
'name' => 'GRILS首页'
),
array(
'href' => '/?sort=1',
'name' => '包类/装备'
)
),
'shopEntry' => array(
'home' => 'adidas.yohobuy.com',
'logo' => 'http://img11.static.yhbimg.com/brandLogo/2013/01/16/09/01f515687de080f94243cb1aa0fedb2fe1.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90',
'shopName' => 'adidas Originals品牌店',
'sort' => array(
array(
'href' => '',
'name' => 'T恤'
),
array(
'href' => '',
'name' => '卫衣'
)
)
),
'filters' => array(
'checkedConditions' => array(
'conditions' => array(
array(
'href' => '',
'name' => '暗黑'
),
array(
'href' => '',
'color' => '#f00'
),
array(
'href' => '',
'name' => 'CLOT'
)
),
'clearUrl' => ''
),
'channel' => array(
array(
'href' => '/?gender=1,3',
'name' => 'BOYS'
),
array(
'href' => '/?gender=2,3',
'name' => 'GIRLS'
),
array(
'href' => '',
'name' => 'KIDS'
),
array(
'href' => '',
'name' => 'LIFESTYLE'
)
),
'sort' => array(
array(
'id' => '1',
'name' => '上衣',
'sub' => array(
array(
'href' => '',
'name' => 'T恤'
),
array(
'href' => '',
'name' => '棉袄'
),
array(
'href' => '',
'name' => '外套'
)
)
),
array(
'id' => '2',
'name' => '裤子'
),
array(
'id' => '3',
'name' => '连衣裙'
),
array(
'id' => '4',
'name' => '鞋'
)
),
'brand' => array(
'default' => array(
array(
'href' => '',
'name' => 'CLOT'
),
array(
'href' => '',
'name' => 'ABLE JEANS'
),
array(
'href' => '',
'name' => 'Eight Guys'
),
array(
'href' => '',
'name' => 'FAIRWHALE JEANS'
),
array(
'href' => '',
'name' => '鬼洗'
),
array(
'href' => '',
'name' => '金银帝国Imperial Taels'
),
array(
'href' => '',
'name' => 'F.L.Y.D'
),
array(
'href' => '',
'name' => 'Tapenade特芙娜'
),
array(
'href' => '',
'name' => 'Adidas Originals'
)
),
'brandIndex' => array(
array(
'index' => 'all',
'name' => '全部'
),
array(
'index' => '0-9',
'name' => '0 ~ 9'
),
array(
'index' => 'a',
'name' => 'A'
)
),
'brandsShow' => array(
array(
'id' => '1',
'href' => '',
'index' => '0-9',
'name' => '5cm',
'key' => '5cm'
),
array(
'id' => '2',
'href' => '',
'index' => 'k',
'name' => 'KTZ',
'key' => 'ktz'
),
array(
'id' => '3',
'href' => '',
'index' => 't',
'name' => 'Tapenade特芙娜',
'key' => 'tapenade特芙娜'
),
array(
'id' => '4',
'href' => '',
'index' => 'j',
'name' => '金银帝国Imperial Taels',
'key' => '金银帝国imperial taels'
),
array(
'id' => '5',
'href' => '',
'index' => 'a',
'name' => 'ABLE JEANS',
'key' => 'able jeans'
)
)
),
'price' => array(
array(
'href' => '',
'name' => '0-239'
),
array(
'href' => '',
'name' => '240-329'
)
),
'color' => array(
array(
'href' => '',
'name' => '黑色',
'rgb' => '#000'
),
array(
'href' => '',
'name' => '红色',
'rgb' => '#f00'
)
),
'size' => array(
array(
'href' => '',
'name' => 'S'
),
array(
'href' => '',
'name' => 'L'
)
),
'seniorChose' => array(
array(
'attr' => 'style',
'name' => '风格',
'showMulti' => true,
'sub' => array(
array(
'id' => '1',
'href' => '',
'name' => '街头'
),
array(
'id' => '2',
'href' => '',
'name' => '简约'
)
)
),
array(
'attr' => 'weather',
'name' => '适用季节',
'sub' => array(
array(
'id' => '1',
'href' => '',
'name' => '春天'
),
array(
'id' => '2',
'href' => '',
'name' => '夏天'
)
)
)
)
),
'opts' => array(
'sortType' => array(
array(
'href' => '',
'name' => '默认'
),
array(
'active' => true,
'href' => '',
'name' => '最新',
'hasSortOrient' => true,
'desc' => true
),
array(
'href' => '',
'name' => '价格',
'hasSortOrient' => true
),
array(
'href' => '',
'name' => '折扣',
'hasSortOrient' => true
)
),
'checks' => array(
array(
'name' => '新品',
'checked' => true,
'href' => ''
),
array(
'name' => '打折',
'href' => ''
),
array(
'name' => '限量',
'checked' => true,
'href' => ''
)
),
'fivePerLine' => true,
'sixPerLineHref' => '',
'countPerPage' => '120',
'pageCounts' => array(
array(
'href' => '',
'count' => 60
),
array(
'href' => '',
'count' => 100
),
array(
'href' => '',
'count' => 120
)
),
'curPage' => 1,
'pageCount' => 30,
'nextHref' => 'hello'
),
'goods' => array(
array(
'tags' => array(
'isNew' => true,
'isYearEndPromotion' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'isFew' => true
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'showColBtn' => true
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
),
array(
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
)
),
'allSort' => array(
'updateNum' => 145,
'list' => array(
array(
'name' => '裙装',
'num' => '10',
'childList' => array(
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
),
array(
'name' => '裙装BBB',
'num' => '10',
'childList' => array(
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
)
)
),
'advNav' => array(
'advNavTitle' => 'AAAA',
'list' => array(
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
),
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
)
)
),
'advPic' => array(
'advPicTitle' => false,
'list' => array(
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
),
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
)
)
),
'newSales' => array(
'updateNum' => 130,
'list' => array(
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
),
'allDiscount' => array(
'updateNum' => 130,
'list' => array(
array(
'name' => '1~3折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '4~6折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '7折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
)
)
);
$this->_view->display('list', $data);
}
... ...