Showing 50 changed files with 4019 additions and 157 deletions
... ... @@ -2,7 +2,7 @@
* @Author: Targaryen
* @Date: 2016-05-19 16:48:43
* @Last Modified by: Targaryen
* @Last Modified time: 2016-05-19 17:02:34
* @Last Modified time: 2016-05-20 13:56:26
*/
'use strict';
... ... @@ -218,39 +218,68 @@ exports.discount = () => {
return {
module: 'product',
page: 'discount',
saleBanner:
{
bannerHeight: 170,
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/378/h/500'
},
saleList:
{
saleList: {
saleBanner: {
bannerHeight: 500,
list: [{
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500'
}, {
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500'
}]
},
saleTitle: {
title: 'stage 精品上装店',
up: true,
discount: '5折',
time: '12313'
},
sort: [
{
name: '全部',
number: 10
},
{
name: '上装',
number: 20
},
{
name: '夏装',
number: 5
},
{
name: '衣服',
number: 20
sort: [{
name: '全部',
number: 10
}, {
name: '上装',
number: 20
}, {
name: '夏装',
number: 5
}, {
name: '衣服',
number: 20
}]
},
filters: {
checkedConditions: {
conditions: {
price: {
href: 'www.baidu.com',
name: '低价',
customPrice: {
min: '120',
max: '200'
}
}
}
]
}
},
}
opts: {
sortType: [{
href: 'www.baidu.com'
}, {
name: '合适'
}, {
hasSortOrient: {
active: {
desc: {
}
}
}
}]
}
};
... ... @@ -261,5 +290,95 @@ exports.discount = () => {
* @return {[type]} [description]
*/
exports.other = () => {
return {};
return {
saleList: {
saleBanner: {
bannerHeight: 500,
list: [{
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500'
}, {
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500'
}]
},
saleTitle: {
name: '所有商品',
count: '12313'
},
leftContent: {
allDiscount: {
list: [{
href: 'www.1',
name: '水货',
num: '123'
}, {
href: 'www.1',
name: '水货',
num: '123'
}, {
href: 'www.1',
name: '水货',
num: '123'
}
]
},
allSort: {
all: {
href: '123',
name: '全部商品',
updateNum: '1423'
},
list: [{
name: '大衣',
num: '123',
childList: [{
name: '小内衣',
num: '10',
href: 'www'
}, {
name: '中内衣',
num: '10',
href: 'www'
}, {
name: '大内衣',
num: '10',
href: 'www'
}]
}]
}
},
goods: [{
tags: {
isNew: true
},
url: 'www.',
thumb: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500',
name: '123123货物',
brand: {
url: '123',
name: '1231'
},
marketPrice: '231'
}, {
tags: {
isNew: true
},
url: 'www.',
thumb: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500',
name: '123123货物',
brand: {
url: '123',
name: '1231'
},
marketPrice: '231'
}]
}
};
};
... ...
<div class="sale-discount-page yoho-page center-content">
<div class="sale-discount-page yoho-page center-content .new-sale-page">
{{# saleList}}
{{> sale/sale-banner}}
... ...
... ... @@ -15,25 +15,25 @@
<ul class="two-dim clearfix">
<li class="left">
{{#if devEnv}}
<img class="dim-img lazy" data-original="http://webstatic.dev.yohobuy.com/img/index/qr-app.png">
<img class="dim-img lazy" data-original="http://localhost:3000/img/layout/qr-app.png">
{{^}}
<img class="dim-img lazy" data-original="http://cdn.yoho.cn/yohobuy/assets/img/index/qr-app.png">
<img class="dim-img lazy" data-original="http://cdn.yoho.cn/m-yohobuy-node/img/layout/qr-app.png">
{{/if}}
<p>YOHO!有货</p>
</li>
<li class="left">
{{#if devEnv}}
<img class="dim-img lazy" data-original="http://webstatic.dev.yohobuy.com/img/index/qr-weixin.png">
<img class="dim-img lazy" data-original="http://localhost:3000/img/layout/qr-weixin.png">
{{^}}
<img class="dim-img lazy" data-original="http://cdn.yoho.cn/yohobuy/assets/img/index/qr-app.png">
<img class="dim-img lazy" data-original="http://cdn.yoho.cn/m-yohobuy-node/img/layout/qr-app.png">
{{/if}}
<p>微信</p>
</li>
<li class="left">
{{#if devEnv}}
<img class="dim-img lazy" data-original="http://webstatic.dev.yohobuy.com/img/index/qr-weibo.png">
<img class="dim-img lazy" data-original="http://localhost:3000/img/layout/qr-weibo.png">
{{^}}
<img class="dim-img lazy" data-original="http://cdn.yoho.cn/yohobuy/assets/img/index/qr-app.png">
<img class="dim-img lazy" data-original="http://cdn.yoho.cn/m-yohobuy-node/img/layout/qr-app.png">
{{/if}}
<p>微博</p>
</li>
... ... @@ -41,7 +41,7 @@
</div>
</div>
<p class="item-nav center">
<span class="iconfont cur" key="0">&#xe619;</span>
<span class="iconfont cur" key="0">&#xe606;</span>
</p>
</dd>
<dd>
... ... @@ -121,9 +121,9 @@
</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>
<span class="iconfont cur">&#xe606;</span>
<span class="iconfont ">&#xe606;</span>
<span class="iconfont ">&#xe606;</span>
</p>
</dd>
<dd class="last">
... ... @@ -139,27 +139,27 @@
<li>
<a href="http://www.yohomars.com/" target="_blank">
{{#if devEnv}}
<img class="lazy" data-original="http://webstatic.dev.yohobuy.com/img/index/mars.png">
<img class="lazy" data-original="http://localhost:3000/img/layout/mars.png">
{{^}}
<img class="lazy" data-original="http://cdn.yoho.cn/yohobuy/assets/img/index/mars.png">
<img class="lazy" data-original="http://cdn.yoho.cn/m-yohobuy-node/img/layout/mars.png">
{{/if}}
</a>
</li>
<li>
<a href="http://app.yohoshow.com/" target="_blank">
{{#if devEnv}}
<img class="lazy" data-original="http://webstatic.dev.yohobuy.com/img/index/show.png">
<img class="lazy" data-original="http://localhost:3000/img/layout/show.png">
{{^}}
<img class="lazy" data-original="http://cdn.yoho.cn/yohobuy/assets/img/index/show.png">
<img class="lazy" data-original="http://cdn.yoho.cn/m-yohobuy-node/img/layout/show.png">
{{/if}}
</a>
</li>
<li>
<a href="http://www.yoho.cn/product#yoho" target="_blank">
{{#if devEnv}}
<img class="lazy" data-original="http://webstatic.dev.yohobuy.com/img/index/yoho.png">
<img class="lazy" data-original="http://localhost:3000/img/layout/yoho.png">
{{^}}
<img class="lazy" data-original="http://cdn.yoho.cn/yohobuy/assets/img/index/yoho.png">
<img class="lazy" data-original="http://cdn.yoho.cn/m-yohobuy-node/img/layout/yoho.png">
{{/if}}
</a>
</li>
... ... @@ -167,7 +167,7 @@
</div>
</div>
<p class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
<span class="iconfont cur">&#xe606;</span>
</p>
</dd>
</dl>
... ...
{{# headerData}}
<div class="yoho-header {{headType}}">
<div class="yoho-header {{headtype}}">
<div class="tool-wrapper clearfix">
<div class="center-content">
<div class="yoho-group-map left">
... ... @@ -84,8 +84,10 @@
</form>
</div>
<div class="go-cart">
<span class="iconfont ">&#xe600;</span>
<span class="goods-num-tip">0</span>
<a href="http://www.yohobuy.com/shopping/cart">
<span class="iconfont ">&#xe600;</span>
<span class="goods-num-tip">0</span>
</a>
<div class="mini-cart-wrapper">
<div class="loading-cart">
<h3>加载中,请稍后</h3>
... ...
<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 {{#if checked}}checked{{/if}}" href="{{href}}">
{{name}}
</a>
{{/each}}
</div>
</div>
{{/if}}
{{#if gender}}
<div class="channel section">
<span class="title">性别:</span>
<div class="attr-content clearfix">
{{#each gender}}
<a class="attr {{#if checked}}checked{{/if}}" 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 data-id="{{id}}">
<span class="attr {{#if checked}}checked{{/if}}">
{{name}}
<div class="sort-up-icon"></div>
</span>
</li>
{{/each}}
</ul>
<div class="sort-sub-wrap">
{{#each sort}}
<ul class="sort-sub clearfix hide">
{{#each sub}}
<li class="attr {{#if checked}}checked{{/if}}">
<a href="{{href}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{! 小分类}}
{{#if misort}}
<div class="misort section">
<span class="title">品类:</span>
<div class="attr-content clearfix">
{{#each misort}}
<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">
{{name}}
</a>
{{/each}}
</div>
</div>
{{/if}}
{{# brand}}
<div class="brand section">
<span class="title">品牌:</span>
<div class="attr-content">
<ul class="default clearfix">
{{# default}}
<li class="attr {{#if checked}}checked{{/if}}">
<a href="{{href}}" title="{{name}}">{{name}}</a>
</li>
{{/ default}}
</ul>
<div class="brand-opt">
{{#if showMore}}
<span id="brand-more" class="brand-more">
<em>更多</em>
<i class="iconfont">&#xe600;</i>
</span>
{{/if}}
{{#if showMulti}}
<span id="brand-multi" class="multi-select">多选 +</span>
{{/if}}
</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>
<div class="panel-body">
<div class="ul-scroll">
<ul class="check-container clearfix">
{{# brandsShow}}
<li class="attr {{#if checked}}checked{{/if}}" data-index="{{index}}" data-key="{{key}}">
<a href="{{href}}">
<span class="iconfont checkbox {{#if checked}}checked{{/if}}" data-id="{{id}}">
{{#if checked}}
&#xe636;
{{else}}
&#xe635;
{{/if}}
</span>
<span title="{{name}}">{{name}}</span>
</a>
</li>
{{/ brandsShow}}
</ul>
</div>
</div>
<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{{#if checked}} checked{{/if}}" href="{{href}}">¥{{name}}</a>
{{/ price}}
<div class="ud-price-range">
¥
<input type="text" class="min limit" value="{{customPrice.min}}">
<span class="price-sep">-</span>
<input type="text" class="max limit" value="{{customPrice.max}}">
<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{{#if checked}} checked{{/if}}" href="{{href}}">
{{#if checked}}
<span class="color-block">
<i class="sub-color-block" style="background: {{rgb}}"></i>
</span>
{{^}}
<i class="color-block" style="background: {{rgb}}"></i>
{{/if}}
{{name}}
</a>
{{/ color}}
</div>
</div>
{{/if}}
<div class="size section {{#unless size}}hide{{/unless}}" {{#if size}}data-load="true"{{/if}}>
<span class="title">尺码:</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
</div>
{{#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{{#unless sub}} no-sub{{/unless}}">
{{#if sub}}
{{name}}
<span class="iconfont">&#xe600;</span>
<div class="senior-up-icon"></div>
{{^}}
<a href="{{url}}">{{name}}</a>
{{/if}}
</li>
{{/each}}
</ul>
<div class="senior-sub-wrap">
{{#each seniorChose}}
{{#if sub}}
<div class="senior-sub hide" data-attr="{{attr}}">
<div class="senior-baffle"></div>
<div class="senior-content">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr {{#if checked}}checked{{/if}}">
<a href="{{href}}">
{{#if checked}}
<span class="iconfont checkbox checked" data-id="{{id}}">&#xe636;</span>
{{^}}
<span class="iconfont checkbox" data-id="{{id}}">&#xe635;</span>
{{/if}}
<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>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
{{/if}}
</div>
... ...
<div class="good-info" data-skn="{{skn}}" data-from="{{from}}">
<div class="tag-container clearfix">
{{# tags}}
{{# isNew}}
<span class="good-tag new-tag">NEW</span>
{{/ isNew}}
{{# isReNew}}
<span class="good-tag renew-tag">再到着</span>
{{/ isReNew}}
{{# isSale}}
<span class="good-tag sale-tag">SALE</span>
{{/ isSale}}
{{# isNewFestival}}
<span class="good-tag new-festival-tag">新品节</span>
{{/ isNewFestival}}
{{# isLimit}}
<span class="good-tag limit-tag">限量商品</span>
{{/ isLimit}}
{{# isYearEndPromotion}}
<span class="good-tag yep-tag">年终大促</span>
{{/ isYearEndPromotion}}
{{# isYearMidPromotion}}
<span class="good-tag ymp-tag">年中热促</span>
{{/ isYearMidPromotion}}
{{/ tags}}
</div>
<div class="good-detail-img">
<a class="good-thumb" href="{{url}}" target="_blank">
<img class="lazy" data-original="{{thumb}}">
</a>
{{# isFew}}
<p class="few-tag">即将售罄</p>
{{/ isFew}}
{{#if showColBtn}}
<span class="col-btn iconfont{{#if coled}} coled{{/if}}">&#xe616;</span>
{{/if}}
</div>
<div class="good-detail-text">
<a href="{{url}}" target="_blank">{{{name}}}</a>
{{#brand}}
<p class="brand">
<a href="{{url}}">{{name}}</a>
</p>
{{/brand}}
<p class="price">
{{# marketPrice}}
<span class="market-price">¥{{.}}</span>
{{/ marketPrice}}
<span class="sale-price{{#unless marketPrice}}prime-cost{{/unless}}">
¥{{salePrice}}
</span>
</p>
</div>
</div>
... ...
No preview for this file type
... ... @@ -2,11 +2,11 @@
<!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 Tue May 3 14:50:34 2016
Created by FontForge 20120731 at Wed May 11 14:40:20 2016
By admin
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1048" >
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
... ... @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Tue May 3 14:50:34 2016
bbox="0 -212 1158 896"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E604"
unicode-range="U+0078-E606"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -33,13 +33,13 @@ d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="uniE600" unicode="&#xe600;"
<glyph glyph-name="uniE600" unicode="&#xe600;" horiz-adv-x="1048"
d="M832 -126.5q0 -35.5 -25 -60.5t-60.5 -25t-60.5 25t-25 60.5t25 60.5t60.5 25t60.5 -25t25 -60.5zM533 -126.5q0 -35.5 -25 -60.5t-60 -25t-60 25t-25 60.5t25 60.5t60 25t60 -25t25 -60.5zM277 620l-35 159q-3 14 -15 23.5t-27 9.5h-147q-22 0 -37.5 -15.5t-15.5 -37.5
t15.5 -38t37.5 -16h54l157 -627q6 -25 25.5 -40t44.5 -15h527q25 0 44.5 15t25.5 40l113 452q9 34 -13 62t-57 28h-697z" />
<glyph glyph-name="uniE601" unicode="&#xe601;" horiz-adv-x="1024"
<glyph glyph-name="uniE601" unicode="&#xe601;"
d="M505 337l2 -2q2 -1 3.5 -1t3.5 1l430 364q2 2 1 5.5t-5 3.5h-435h-424q-4 0 -5 -3.5t1 -5.5zM72 669q-3 2 -6 0.5t-3 -4.5v-584q0 -4 3.5 -5t5.5 1l288 346zM953 669.5q-3 1.5 -5 -0.5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4.5zM641 406l-131 -111l-5 5
l-125 103l-275 -328q-2 -3 -1 -6t5 -3h396h407q4 0 5 3t-1 6z" />
<glyph glyph-name="uniE602" unicode="&#xe602;"
<glyph glyph-name="uniE602" unicode="&#xe602;" horiz-adv-x="1048"
d="M297.5 528q-20.5 0 -35 -14.5t-14.5 -35t14.5 -35.5t35 -15t35.5 15t15 35.5t-15 35t-35.5 14.5zM381 251q0 96 84 164t202 68t202 -68t84 -163.5t-84 -163.5t-202 -68t-202 68t-84 163zM286 251q0 -17 2 -35v1q-88 42 -140.5 114t-52.5 157t51.5 157t139.5 114t192 42
q142 0 249.5 -76.5t128.5 -189.5q-88 43 -189 43q-104 0 -191.5 -43.5t-138.5 -119t-51 -164.5zM953 36q95 93 95 215t-94 214q2 20 2 23q0 111 -64 205t-174.5 148.5t-240 54.5t-239.5 -54.5t-174 -148.5t-64 -205q0 -78 33 -148.5t93 -125.5l-77 -123q-8 -12 -6.5 -26
t10.5 -25q13 -15 32 -15q9 0 18 4l180 80q4 2 7 4q20 -7 39 -12q48 -80 138.5 -128t199.5 -48q75 0 145 25q1 -1 2 -1l140 -62q8 -4 17 -4q20 0 32 15q10 10 11 24t-7 26zM527 282q-16 0 -27.5 -11t-11.5 -27t11.5 -27.5t27.5 -11.5t27.5 11.5t11.5 27.5t-11.5 27t-27.5 11z
... ... @@ -47,8 +47,12 @@ M667 282q-16 0 -27.5 -11t-11.5 -27t11.5 -27.5t27.5 -11.5t27.5 11.5t11.5 27.5t-11
<glyph glyph-name="uniE603" unicode="&#xe603;" horiz-adv-x="1158"
d="M1069 181h-245v378h132l113 -169v-209zM1158 417l-155 231h-268v-467h-45v508q0 20 -14 34t-34 14h-63l-67 -89h89v-467h-512v467h45l22 89h-108q-20 0 -34 -14t-14 -34v-549q0 -20 14 -34t34 -14h139q-33 -37 -33 -87q0 -53 37.5 -91t91 -38t91.5 38t38 91q0 50 -34 87
h264h191q-34 -37 -34 -87q0 -53 38 -91t91.5 -38t91 38t37.5 91q0 50 -33 87h134v325zM326 668q-89 -153 -94 -296v-12h129v12q0 43 17 112q17 68 39 116q27 61 67.5 118t62.5 79l4 3v96h-390l-2 -114h245q-33 -40 -78 -114z" />
<glyph glyph-name="uniE604" unicode="&#xe604;" horiz-adv-x="1024"
<glyph glyph-name="uniE604" unicode="&#xe604;"
d="M875 126l-363 -164l-363 164v610q247 75 363 75t363 -75v-610zM930 808q-34 11 -84.5 26t-159.5 38.5t-174 23.5t-174 -23.5t-159.5 -38.5t-84.5 -26q-14 -4 -22 -15.5t-8 -25.5v-669q0 -27 25 -39l405 -183q9 -3 18 -3t18 3l405 183q25 12 25 39v669q0 14 -8 25.5
t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" />
<glyph glyph-name="uniE605" unicode="&#xe605;"
d="M903 577l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" />
<glyph glyph-name="uniE606" unicode="&#xe606;"
d="M512 599q47 0 88 -18t72 -49t49 -72t18 -89q0 -46 -18 -87t-49 -72t-72 -49t-88 -18t-88 18t-72 49t-49 72t-18 87q0 48 18 89t49 72t72 49t88 18v0zM512 599z" />
</font>
</defs></svg>
... ...
No preview for this file type
No preview for this file type

6.28 KB | W: | H:

4.98 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
/**
* 页面公共逻辑和接口
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/11/23
*/
var $ = require('yoho-jquery');
var $body = $('body');
function cookie(name) {
var re = new RegExp(name + '=([^;$]*)', 'i'),
matchPattern = '$1';
return re.test(decodeURIComponent(document.cookie)) ? RegExp[matchPattern] : '';
}
function setCookie(name, value, options) {
var expires = '',
path,
domain,
secure,
date;
if (typeof value !== 'undefined') {
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
if (options.expires &&
(typeof options.expires === 'number' || options.expires.toUTCString)) {
if (typeof options.expires === 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
path = options.path ? '; path=' + options.path : '';
domain = options.domain ? '; domain=' + options.domain : '';
secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
}
}
function getUser() {
var c = cookie('_UID'),
user;
if (typeof c === 'undefined') {
return 0;
}
user = c.split('::');
if (typeof user === 'undefined' || user.length < 4) {
return 0;
}
return user;
}
function getUid() {
var user = getUser();
if (user === 0) {
return 0;
}
return user[1];
}
function getShoppingKey() {
var c = cookie('_g');
if (typeof c === 'undefined') {
return '';
}
return JSON.parse(c).k;
}
// YAS统计代码
(function(w, d, s, j, f) {
var a = d.createElement(s);
var m = d.getElementsByTagName(s)[0];
w.YohoAcquisitionObject = f;
w[f] = function() {
w[f].p = arguments;
};
a.async = 1;
a.src = j;
m.parentNode.insertBefore(a, m);
}(window, document, 'script', 'http://cdn.yoho.cn/yas-jssdk/1.0.14/yas.js', '_yas'));
(function() {
var uid = getUid();
uid = uid === 0 ? '' : uid;
window._ozuid = uid; // 暴露ozuid
if (window._yas) {
window._yas(1 * new Date(), '1.0.14', 'yohobuy_web', uid, '', '');
}
}());
// window.resize在width<1180时适配成990
$(window).on('resize', function() {
var w = $(this).width();
// return top
if (w < 1360) {
$('.return-top').addClass('min');
} else {
$('.return-top').removeClass('min');
}
// body
if (w < 1180) {
$body.addClass('min-screen');
} else {
$body.removeClass('min-screen');
}
}).trigger('resize');
function queryString() {
var vars = {},
hash,
i,
search = window.location.search,
hashes = search ? decodeURIComponent(search).slice(1).split('&') : [];
for (i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
}
// 个人中心左侧栏头像加载失败后,显示默认头像
(function() {
$(window).load(function() {
var thumb = document.getElementById('user-thumb');
var img;
if (!thumb) {
return;
}
img = new Image();
img.src = thumb.src;
img.onerror = function() {
$(thumb).parent().append('<div class="default-user-thumb"></div>').end().remove();
};
});
}());
window.cookie = cookie;
window.setCookie = setCookie;
window.getUser = getUser;
window.getUid = getUid;
window.getShoppingKey = getShoppingKey;
window.queryString = queryString;
require('./header');
require('./footer');
... ...
/**
* 尾部
* @author: wangqing<robin.wang@yoho.cn>
* @date: 2015/12/01
*/
var $ = require('yoho-jquery');
var $returnTop = $('.return-top');
/**
* 订阅
* @return {[type]} [description]
*/
function actionSubscription() {
var $subscriberBox = $('#subscriber-box'),
$subscriberBtn = $('#subscriber-btn'),
emailReg = /^[.\-_a-zA-Z0-9]+@[\-_a-zA-Z0-9]+\.[a-zA-Z0-9]/;
var iconCode = {
mail: '&#xe601;',
tick: '&#xe605;'
};
$subscriberBox.focus(function() {
$(this).val('').css('color', '');
$subscriberBtn.removeClass('done').html(iconCode.mail);
});
$subscriberBtn.click(function() {
var email = $.trim($subscriberBox.val());
if (email !== '' && emailReg.test(email)) {
try {
$.ajax({
url: 'http://new.yohobuy.com/common/emailsubscriber',
dataType: 'jsonp',
data: {
email: email,
tmp: Math.random(),
uid: window.getUid()
},
success: function(data) {
if (data.data.result === 1) {
$subscriberBox.val('已订阅到:' + email);
$subscriberBtn.addClass('done').html(iconCode.tick);
} else {
$subscriberBox.css('color', 'red');
}
}
});
} catch (e) {
console.log(e.message);
}
} else {
$subscriberBox.css('color', 'red');
}
});
}
function actionhomeFootChange() {
var $vote = $('.vote'),
$feedBackPage = $('#feed-back-page'),
count = $vote.children('li').length;
// 意见反馈
$feedBackPage.on('click', 'span', function() {
var $this = $(this);
if ($this.hasClass('cur')) {
return;
}
$this.siblings('.cur').removeClass('cur');
$this.addClass('cur');
$vote.children().not('.hide').addClass('hide')
.end()
.eq($this.index()).removeClass('hide');
});
$vote.on('click', '.feed-back-btn', function() {
var $this = $(this),
$li = $this.closest('li'),
index = $li.index(),
_solution = [];
var _answer = $li.find('.feedback-answer').val(),
_feedback = $li.find('.feedback-id').val(),
_question = $li.find('.question-id').val();
$li.find(':checked').each(function() {
_solution.push($(this).val());
});
$.ajax({
url: 'http://new.yohobuy.com/common/suggestfeedback',
dataType: 'jsonp',
data: {
feedback_id: _feedback || 0,
question_id: _question || 0,
answer: _answer || '',
solution: _solution.join(',')
},
success: function(data) {
var next = index + 1;
if (~~data.data.result === 1) {
if (index === count - 1) {
alert('感谢您的参与!'); // eslint-disable-line
return;
}
$li.addClass('hide');
$vote.children(':eq(' + (index + 1) + ')').removeClass('hide');
$feedBackPage.children('.cur').removeClass('cur');
$feedBackPage.children(':eq(' + next + ')').addClass('cur');
}
}
});
});
}
function rePosReturn() {
if ($(window).height() > $(document).height()) {
$returnTop.addClass('hide');
}
// 只在窗口高度大于文档高度的时候,隐藏返回顶部
// else {
// $returnTop.removeClass('hide');
// }
}
// 返回顶部
$returnTop.click(function() {
$('html,body').animate({
scrollTop: 0
}, 500);
});
$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$returnTop.addClass('hide');
} else {
$returnTop.removeClass('hide');
}
});
// 如果初始是隐藏的,监听图片加载,重新确定return-top的高度
if ($returnTop.hasClass('hide')) {
$('img').load(rePosReturn);
}
// 初始化
actionSubscription();
actionhomeFootChange();
// 暴露给有可能通AJAX改变内容的页面去用
window.rePosReturnTop = rePosReturn;
... ...
... ... @@ -3,10 +3,8 @@
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/5/9
*/
/* eslint-disable */
var $ = require('yoho-jquery');
// handlebars = require('yoho.handlebars'),
// json2 = require('json2');
var $ = require('yoho-jquery'),
handlebars = require('yoho-handlebars');
var $tool = $('.tool-wrapper'),
$yohoGroup = $tool.find('.yoho-group'),
... ... @@ -21,29 +19,25 @@ var $head = $('.head-wrapper'),
var $subNav = $('.sub-nav-list .contain-third');
var apiDomain = $('#api-domain').val(), // 获取登陆状态的地址
apiBanner = 'http://new.yohobuy.com/common/getbanner',
thirdLineNum = 9,
var thirdLineNum = 9,
delayer,
centerFn,
loginFn,
cartFn;
$('#api-domain').remove(); // 删除地址信息
// handlebars模板
// centerFn = handlebars.compile($('#simple-account-info-tpl').html());
// loginFn = handlebars.compile($('#header-login-info-tpl').html());
// cartFn = handlebars.compile($('#mini-cart-tpl').html());
centerFn = handlebars.compile($('#simple-account-info-tpl').html());
loginFn = handlebars.compile($('#header-login-info-tpl').html());
cartFn = handlebars.compile($('#mini-cart-tpl').html());
// handlebars helper
// handlebars.registerHelper('notzero', function(v1, options) {
// if (v1 !== '0') {
// return options.fn(this);
// } else {
// return options.inverse(this);
// }
// });
handlebars.registerHelper('notzero', function(v1, options) {
if (v1 !== '0') {
return options.fn(this);
} else {
return options.inverse(this);
}
});
// 格式化三级菜单
function formatThirdMenu() {
... ... @@ -91,7 +85,7 @@ function syncLoginInfo() {
method: 'open.passport.get'
};
$.getJSON(apiDomain + '/?callback=?', param, function(jsonData) {
$.getJSON('http://www.yohobuy.com/common/passport/?callback=?', param, function(jsonData) {
if (jsonData && jsonData.data && jsonData.data.result !== -1) {
updateLoginInfo(jsonData.data.data);
} else {
... ... @@ -110,7 +104,7 @@ function searchSuggest(key) {
query: key
};
$.getJSON('http://search.yohobuy.com/api/suggest/?callback=?', param, function(jsonData) {
$.getJSON('http://search.yohobuy.com/api/suggest?callback=?', param, function(jsonData) {
if (jsonData.code === 200) {
if (jsonData.data && jsonData.data.length) {
$searchSug.html(jsonData.data).show();
... ... @@ -123,72 +117,72 @@ function searchSuggest(key) {
// 同步mini购物车数据
function syncCratInfo(strG) {
// var info, total;
//
// if (strG) {
// window.setCookie('_g', strG, {
// path: '/',
// domain: '.yohobuy.com'
// });
// }
// if (window.cookie('_g')) {
// info = json2.parse(window.cookie('_g'));
// total = parseInt(info._nac) + parseInt(info._ac);
// total = total > 0 ? total : 0;
// $goCart.data({
// key: info._k,
// num: total
// });
// $goodsNum.text(total);
// }
var info, total;
if (strG) {
window.setCookie('_g', strG, {
path: '/',
domain: '.yohobuy.com'
});
}
if (window.cookie('_g')) {
info = $.parseJSON(window.cookie('_g'));
total = parseInt(info._nac, 10) + parseInt(info._ac, 10);
total = total > 0 ? total : 0;
$goCart.data({
key: info._k,
num: total
});
$goodsNum.text(total);
}
}
function loadCartDetail(key) {
// var param = {
// return_type: 'jsonp',
// method: 'open.Shoppingcart.getCartData',
// shopping_key: key
// };
//
// $.getJSON(apiDomain + '/?callback=?', param, function(jsonData) {
// var totalGoods, data;
//
// if (jsonData.code === 200) {
// data = jsonData.data;
// totalGoods = $.merge(data.main_goods, data.advance_goods);
// totalGoods = $.merge(totalGoods, data.outlet_goods);
// totalGoods = $.merge(totalGoods, data.gift_goods);
// totalGoods = $.merge(totalGoods, data.need_pay_gifts);
// if (totalGoods && totalGoods.length) {
// data.totalGoods = totalGoods;
// $miniCart.html(cartFn({
// carData: data
// }));
// } else {
// $miniCart.html('<div class="empty-cart"><h3>您的购物车暂无商品</h3></div>');
// }
// }
// });
var param = {
return_type: 'jsonp',
method: 'open.Shoppingcart.getCartData',
shopping_key: key
};
$.getJSON('http://www.yohobuy.com/common/shoppingCart/?callback=?', param, function(jsonData) {
var totalGoods, data;
if (jsonData.code === 200) {
data = jsonData.data;
totalGoods = $.merge(data.main_goods, data.advance_goods);
totalGoods = $.merge(totalGoods, data.outlet_goods);
totalGoods = $.merge(totalGoods, data.gift_goods);
totalGoods = $.merge(totalGoods, data.need_pay_gifts);
if (totalGoods && totalGoods.length) {
data.totalGoods = totalGoods;
$miniCart.html(cartFn({
carData: data
}));
} else {
$miniCart.html('<div class="empty-cart"><h3>您的购物车暂无商品</h3></div>');
}
}
});
}
function delCartGoods(data, callback) {
// var param = {
// return_type: 'jsonp',
// method: 'open.Shoppingcart.delone',
// shopping_key: data.key,
// id: data.id,
// isreduce: data.isreduce
// };
//
// $.getJSON(apiDomain + '/?callback=?', param, function(jsonData) {
// var strG = '';
//
// if (jsonData.code === 200) {
// callback();
// strG = '{"_k":"' + data.key + '","_nac":' + jsonData.data.total_goods_num + ',"_ac":0,"_r":0}';
// syncCratInfo(strG);
// }
// });
var param = {
return_type: 'jsonp',
method: 'open.Shoppingcart.delone',
shopping_key: data.key,
id: data.id,
isreduce: data.isreduce
};
$.getJSON('http://www.yohobuy.com/common/shoppingCart/?callback=?', param, function(jsonData) {
var strG = '';
if (jsonData.code === 200) {
strG = '{"_k":"' + data.key + '","_nac":' + jsonData.data.total_goods_num + ',"_ac":0,"_r":0}';
syncCratInfo(strG);
return callback();
}
});
}
syncLoginInfo();
... ... @@ -240,9 +234,10 @@ $searchForm.on('keyup', '.search-key', function(e) {
$(this).val(val);
searchSuggest(val);
}
// http://search.yohobuy.com/api/suggest
// searchSuggest
}).on('blur', '.search-key', function() {
setTimeout(function() {
$searchSug.hide();
}, 200);
});
$goCart.hover(function() {
... ... @@ -265,7 +260,7 @@ $goCart.hover(function() {
$goCart.removeClass('on-hover');
});
$goCart.on('click', '.cart-goods-del', function(e) {
$goCart.on('click', '.cart-goods-del', function() {
var $dom = $(this),
data = $dom.data(),
callback;
... ... @@ -297,14 +292,14 @@ $subNav.on({
param.width = 174;
param.height = 155;
param._ = new Date();
// $.getJSON(apiBanner + '/?callback=?', param, function(JsonData) {
// if (JsonData.code === 200) {
// $show.addClass('show');
// $show.find('img').attr('src', JsonData.data.src);
// $show.find('a').attr('href', JsonData.data.url);
// $show.find('.title').text(JsonData.data.title);
// }
// });
$.getJSON('http://new.yohobuy.com/common/getbanner?callback=?', param, function(JsonData) {
if (JsonData.code === 200) {
$show.addClass('show');
$show.find('img').attr('src', JsonData.data.src);
$show.find('a').attr('href', JsonData.data.url);
$show.find('.title').text(JsonData.data.title);
}
});
},
mouseleave: function() {
var $thirdNav = $(this).children('.third-nav-wrapper');
... ... @@ -315,6 +310,3 @@ $subNav.on({
$thirdNav.hide();
}
});
/* eslint-ensable */
... ...
require('../header');
require('../common');
... ...
... ... @@ -387,4 +387,4 @@
.footer-help li {
width: 150px;
}
}
}
... ...
... ... @@ -48,6 +48,7 @@
span {
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
.hi {
... ... @@ -343,7 +344,7 @@
border: none;
background: #fff;
box-sizing: border-box;
padding: 7px 0 7px 10px;
padding: 7px 0 9px 10px;
}
.search-btn {
... ... @@ -415,7 +416,7 @@
top: 30px;
right: -14px;
width: 378px;
background: #f8f8f8 reslove('layout/empty_car.png') no-repeat 106px 132px;
background: #f8f8f8 resolve('layout/empty_car.png') no-repeat 106px 132px;
z-index: 1000;
display: none;
... ...
.product-detail-page {
.brand-banner {
height: 45px;
width: 100%;
img {
display: block;
height: 45px;
}
.opt {
margin-top: 5px;
}
.home, .brand-fav {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
border: 1px solid #fff;
text-align: center;
color: #fff;
cursor: pointer;
}
.home {
margin-right: 5px;
.iconfont {
font-size: 14px;
}
}
.brand-fav .iconfont {
font-size: 13px;
}
.coled {
color: #ee0014;
}
}
.path-nav {
border: none;
margin-bottom: 0;
}
.main {
width: 990px;
margin: 0 auto;
.infos {
width: 465px;
}
.img {
position: relative;
width: 420px;
height: 560px;
}
.img-show {
display: block;
width: 100%;
height: 100%;
}
.tags {
position: absolute;
top: 0;
left: 0;
}
.good-tag {
float: left;
box-sizing: border-box;
height: 22px;
line-height: 22px;
color: #fff;
padding: 0 7px;
margin-right: 5px;
font-size: 12px;
}
.new-tag {
background: #78dc7d;
}
.renew-tag {
background: #78dc7e;
}
.new-festival-tag {
background: #000;
}
.yep-tag, .ymp-tag, .sale-tag {
background: #ff565b;
}
.few-tag {
background: #ffac5b;
}
.limit-tag {
border: 1px solid #4e4e4e;
color: #4e4e4e;
background: #fff;
}
.thumbs {
width: 75px;
height: 510px;
margin-left: 2px;
overflow: hidden;
}
.thumb {
display: block;
width: 75px;
cursor: pointer;
margin-bottom: 2px;
}
.name {
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
.sale-tip {
color: #ee0014;
padding-left: 3px;
}
.brand-name {
color: #666;
font-size: 12px;
}
.title {
color: #999;
font-size: 12px;
}
.market-price {
margin-top: 8px;
}
.price {
color: #000;
font-size: 22px;
line-height: 24px;
font-weight: bold;
}
.has-other-price {
color: #999;
text-decoration: line-through;
font-size: 12px;
}
.arrival-date {
color: #ee0014;
font-size: 14px;
font-weight: bold;
margin-left: 24px;
}
.vip-price {
line-height: 14px;
color: #222;
margin-top: 5px;
background: resolve("product/vip-price-icon.png") no-repeat;
padding-left: calc(5px + width("product/vip-price-icon.png"));
font-size: 12px;
.login-url,
.cur {
color: #f02200;
}
.vip-price-item {
margin-left: 5px;
}
.vip-schedual {
color: #999;
text-decoration: underline;
margin-left: 5px;
}
}
.activity {
margin-top: 12px;
li {
line-height: 20px;
}
}
.ac-type {
display: inline-block;
width: 60px;
height: 16px;
line-height: 16px;
margin-right: 5px;
text-align: center;
background: #999;
color: #fff;
font-size: 12px;
}
.ac-des {
font-size: 12px;
}
.row {
margin-top: 10px;
}
.trade-content {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #eaeceb;
}
.chose-color {
font-size: 12px;
.title {
margin-top: 14px;
}
img {
display: block;
height: 36px;
width: 36px;
border: 2px solid #fff;
}
.focus img {
border-color: #222;
}
li {
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
}
.chose-size {
font-size: 12px;
.title {
margin-top: 6px;
}
li {
float: left;
display: block;
height: 22px;
line-height: 22px;
margin-right: 5px;
margin-bottom: 5px;
padding: 0 5px;
border: 1px solid #eaeceb;
text-align: center;
cursor: pointer;
min-width: 28px;
&.disable {
opacity: 0.5;
}
&.focus {
color: #fff;
background: #222;
}
}
}
.size-wrapper {
width: 415px;
}
.size {
float: left;
color: #666;
}
.size-ruler {
float: left;
display: block;
width: 57px;
height: 24px;
background: resolve('product/size-ruler.jpg');
margin-bottom: 5px;
cursor: pointer;
}
.size-warn, .num-warn {
float: left;
height: 24px;
line-height: 24px;
}
.color-size-tip {
color: #999;
clear: both;
line-height: 18px;
}
.chose-count .title {
margin-top: 6px;
}
.num {
display: block;
width: 38px;
height: 23px;
line-height: 23px;
text-align: center;
border: 1px solid #eaeceb;
color: #333;
font-size: 12px;
background: #ebebe4;
}
.minus-plus {
display: block;
width: 14px;
height: 23px;
border: 1px solid #eaeceb;
border-left: none;
text-align: center;
cursor: pointer;
i {
display: block;
width: 13px;
height: 11px;
line-height: 8px;
font-size: 12px;
-moz-user-select: none;
}
.dis {
color: #999;
}
}
.minus {
border-top: 1px solid #eaeceb;
font-size: 13px;
}
.lc-btn {
float: left;
display: block;
width: 80px;
height: 25px;
line-height: 25px;
color: #fff;
background: #222;
margin-left: 10px;
font-size: 12px;
text-align: center;
cursor: default;
&.had-lc, &.lc-sold-out {
background: #ccc;
}
&.dis {
background: #ccc;
}
}
.num-wraper {
position: relative;
}
$arrowTop: 40px;
$arrow: product/arrow.png;
$contentW: 220px;
.lc-container {
position: absolute;
top: calc(-($arrowTop - 1px));
right: calc(-(width($arrow) + $contentW));
z-index: 1;
}
.lc-arrow {
position: absolute;
top: $arrowTop;
left: calc(-(width($arrow) - 1px));
width: width($arrow);
height: height($arrow);
background: resolve($arrow);
}
.lc-content {
box-sizing: border-box;
width: $contentW;
height: 285px;
text-align: center;
background: #f8f8f8;
border: 1px solid #cecece;
padding: 40px 25px 0;
.qr-code {
width: 137px;
height: 137px;
background: resolve("product/top-good-qr.png");
margin: 0 auto;
}
.title {
font-size: 18px;
color: #000;
margin: 12px 0;
line-height: 24px;
}
.sub-title {
font-size: 14px;
color: #939290;
}
}
.buy-btn {
display: inline-block;
margin-right: 10px;
height: 48px;
line-height: 48px;
width: 197px;
text-align: center;
color: #fff;
background: #e92601;
font-size: 14px;
cursor: pointer;
&.hover {
background: #eb3b19;
background: rgba(233, 38, 1, .8);
}
&.dis {
background: #ccc;
}
}
.collect-product, .keep-shopping {
display: inline-block;
width: 127px;
height: 48px;
text-align: center;
line-height: 48px;
background: #fff;
color: #222;
border: 1px solid #ccc;
font-weight: bold;
font-size: 12px;
cursor: pointer;
.iconfont {
color: #ccc;
font-size: 14px;
}
&.coled .iconfont{
color: #fa5252;
}
}
.share-row {
margin-top: 20px;
.title {
margin-top: 2px;
}
}
.balance {
display: none;
.success-tip {
color: #222;
font-size: 18px;
margin-bottom: 10px;
}
.cart-total {
color: #999;
font-size: 12px;
}
.balance-btns {
margin-top: 20px;
}
}
}
.other-infos {
padding-bottom: 30px;
}
.info-block {
margin-top: 30px;
color: #999;
border-top: 2px solid #eaeceb;
font-size: 12px;
.basic {
width: 640px;
margin: 0 auto;
li {
float: left;
width: 25%;
line-height: 20px;
}
}
.comfort {
width: 470px;
border: 1px solid #eaeceb;
margin: 17px auto 0;
padding-bottom: 15px;
li {
margin: 12px 20px 0;
}
}
.comfort-block {
display: inline-block;
width: 14px;
height: 10px;
border: 1px solid #eaeceb;
margin-right: 2px;
&.cur {
background: #999;
border: 1px solid #999;
}
}
}
.block-title {
margin-bottom: 25px;
text-align: center;
.title {
display: inline-block;
padding-top: 15px;
font-weight: bold;
cursor: pointer;
&.cur {
color: #222;
border-top: 2px solid #222;
margin-top: -2px;
}
}
.sep {
display: inline-block;
margin: 0 30px;
color: #eaeceb;
font-size: 14px;
cursor: default;
font-weight: bold;
}
}
.description-content {
overflow: hidden;
}
.material-content {
display: none;
overflow: hidden;
}
.material-detail li {
width: 860px;
padding-bottom: 20px;
border-bottom: 1px dotted #eaeceb;
margin: 0 auto 20px;
img {
float: left;
width: 125px;
height: 50px;
}
.name {
float: left;
width: 100px;
line-height: 25px;
border-right: 1px dotted #eaeceb;
color: #666;
font-weight: bold;
text-align: center;
font-size: 14px;
}
.text {
float: left;
width: 614px;
padding-left: 20px;
line-height: 18px;
}
}
.wash {
text-align: center;
li {
display: inline-block;
padding: 0 20px;
color: #666;
border-right: 1px solid #eaeceb;
}
}
.size-info {
text-align: center;
}
.size-table,
.reference-table,
.fitting-report-table {
text-align: center;
margin: 0 auto;
th {
width: 110px;
text-align: center;
}
tr {
height: 30px;
}
tr,
td {
text-align: center;
}
thead {
background: #f5f7f6;
color: #999;
}
tbody {
color: #222;
}
.avatar {
width: 26px;
height: 26px;
border-radius: 50px;
}
.avatar-col {
width: 26px;
padding-left: 20px;
padding-right: 20px;
}
.model-col {
width: 90px;
}
.remark-col {
width: 200px;
}
}
.fr-img-wrap {
width: 100%;
text-align: center;
img {
max-width: 100%;
}
}
.ref-model {
padding-top: 10px;
.model {
width: 444px;
height: 35px;
padding-top: 47px;
padding-left: 316px;
color: #666;
overflow: hidden;
margin: 10px auto 0;
em {
margin-left: 5px;
}
}
}
.size-tip {
color: #999;
margin-top: 15px;
text-align: center;
}
.details {
text-align: center;
font-size: 12px;
color: #999;
line-height: 18px;
}
.details-html {
width: 750px;
text-align: center;
margin: 0 auto;
b {
font-weight: bold;
}
i {
font-style: italic;
}
}
.consults {
display: none;
}
.consult-comment .title {
color: #666;
&.cur {
color: #666;
}
}
.cc-content {
background: #f5f7f6;
padding: 20px 20px 0 20px;
font-size: 12px;
h2 {
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
color: #000;
}
li {
border-top: 1px solid #eaeceb;
padding: 20px 0;
}
.user-info {
color: #999;
line-height: 16px;
> * {
float: left;
}
.name {
color: #666;
}
.date {
color: #bbb;
}
.question {
color: #222;
}
}
.user-avatar {
width: 30px;
height: 30px;
margin-right: 5px;
}
.more-wrap {
text-align: center;
color: #666;
border-top: 1px solid #eaeceb;
padding: 20px 0;
font-size: 14px;
font-weight: bold;
color: #666;
}
.btn-wrap {
padding: 20px 0;
border-top: 1px solid #eaeceb;
}
.load-more {
cursor: pointer;
}
.btn {
display: block;
width: 140px;
height: 32px;
line-height: 32px;
color: #fff;
background: #222;
text-align: center;
font-size: 12px;
margin: 0 auto;
cursor: pointer;
.iconfont {
font-size: 14px;
}
}
.comment, .consult {
margin-top: 10px;
}
.consults {
display: none;
}
}
.new-consult {
padding: 20px 0;
border-top: 1px solid #eaeceb;
textarea {
width: 590px;
height: 80px;
padding: 5px;
outline: none;
resize: none;
}
.submit-consult {
display: block;
width: 140px;
height: 32px;
line-height: 32px;
margin: 8px 0 0;
}
.error {
border-color: #e01;
}
}
.consult-success {
border-top: 1px solid #eaeceb;
margin-top: 30px;
text-align: center;
padding: 20px 0;
p {
width: 295px;
height: 55px;
line-height: 55px;
margin: 0 auto;
border: 2px solid #222;
display: block;
color: #222;
font-weight: bold;
}
}
.after-service {
text-align: center;
margin-top: 30px;
.after-service-content {
display: none;
}
.after-service-switch {
height: 44px;
line-height: 44px;
background: #eaeceb;
text-align: center;
font-size: 12px;
cursor: pointer;
.iconfont {
font-size: 12px;
}
}
.text {
padding: 20px 15px;
color: #666;
background: #f5f7f6;
text-align: left;
color: #666;
line-height: 18px;
}
.orange {
color: #f9761a;
}
h4 {
font-weight: bold;
font-size: 14px;
line-height: 24px;
color: #222;
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
.img-1 {
width: 715px;
height: 259px;
margin: 0 auto;
background: resolve('product/after-service-1.png');
}
.img-2 {
width: 715px;
height: 230px;
margin: 0 auto;
background: resolve('product/after-service-2.png');
}
a {
color: #666;
}
}
.service {
$service: product/service.png;
width: width($service);
height: height($service);
margin: 45px auto;
background: resolve($service);
}
.latest-walk {
overflow: inherit;
.goods {
width: 1010px;
margin: 0 auto;
height: auto;
> div {
float: left;
width: 180px;
margin-right: 22px;
}
}
img {
height: 240px;
width: 180px;
display: block;
}
.name {
display: block;
margin-top: 5px;
color: #222;
line-height: 16px;
}
.price {
color: #222;
font-weight: bold;
margin-top: 5px;
}
.market-price {
margin-right: 5px;
}
.has-sale {
text-decoration: line-through;
color: #999;
}
}
.warn-tip {
display: inline-block;
color: #e01;
margin-left: 7px;
font-size: 12px;
i {
font-size: 14px;
}
}
.hot-point-wrap {
position: relative;
margin: 0 auto;
.hot-point {
position: absolute;
background: #fff\9;
/*IE8 Hack*/
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
&.hover .pointer{
background-position: 0 -25px;
}
&.hover .hp-good {
display: block;
}
}
.pointer {
position: absolute;
display: block;
background: resolve("product/hp-num.png") no-repeat 0 0;
color: #fff;
cursor: pointer;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
left: 0;
top: 0;
font-size: 18px;
}
.hp-good {
display: none;
position: absolute;
left: 30px;
top: 0;
width: 210px;
background: #000;
height: 60px;
padding: 10px;
.pic {
display: block;
float: left;
width: 60px;
height: 60px;
margin-right: 10px;
}
.info {
position: relative;
float: left;
color: #fff;
font-size: 12px;
width: 140px;
height: 60px;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.check-btn {
display: block;
position: absolute;
height: 18px;
width: 40px;
text-decoration: none;
right: 0;
bottom: 0;
text-align: center;
background: #e8e8e8;
border-radius: 2px;
}
}
}
}
... ...
.filter-box {
border: 1px solid #dfdfdf;
.section {
padding: 10px 15px;
font-size: 12px;
border-top: 1px solid #dfdfdf;
&:first-child {
border-top: none;
padding: 5px 15px;
}
}
.title {
float: left;
width: 75px;
line-height: 30px;
font-weight: bold;
}
.attr-content {
margin-left: 75px;
}
.multi-select {
display: inline-block;
width: 60px;
height: 18px;
line-height: 18px;
border: 1px solid #555;
color: #555;
text-align: center;
cursor: pointer;
}
.attr {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
line-height: 30px;
cursor: pointer;
color: #666;
a {
color: #666;
}
&:first-child {
margin-left: 0;
}
&.checked {
color: #e01;
a {
color: #e01;
}
}
&:hover {
text-decoration: underline;
}
-moz-user-select: none;
}
.color .attr {
margin-right: 0;
}
.checked .color-block {
width: 16px;
height: 16px;
border: 2px solid #222;
padding: 2px;
background-size: 100% !important;
.sub-color-block {
display: block;
width: 16px;
height: 16px;
background-position: center !important;
}
}
.checked-conditions {
line-height: 30px;
background: #eaeceb;
.title {
margin-top: 5px;
}
.tag {
display: block;
float: left;
padding: 0 10px;
margin: 5px 30px 5px 0;
background: #000;
color: #fff;
cursor: pointer;
}
.color-block {
height: 14px;
width: 14px;
border: 1px solid #fff;
margin-bottom: -3px;
background-size: 100% !important;
background-position: center !important;
}
.clear-checked {
margin-top: 5px;
color: #999;
float: right;
&:hover {
color: #468fa2;
}
}
.close {
font-size: 14px;
}
}
.sort-pre .active .attr {
border: 1px solid #000;
}
.sort-pre {
.attr {
position: relative;
}
}
.active {
.sort-up-icon {
visibility: visible;
}
}
.sort-up-icon {
position: absolute;
width: 15px;
height: 9px;
left: 50%;
margin-left: -7px;
bottom: -17px;
z-index: 3;
visibility: hidden;
background: resolve('product/senior-up.png') no-repeat;
background-position: 50% 0;
}
.sort-sub-wrap {
width: 100%;
.sort-sub {
border-top: 1px solid #eaeceb;
margin-top: 15px;
padding: 0 0 15px;
.attr {
padding-top: 15px;
}
}
}
.brand {
position: relative;
.attr {
box-sizing: border-box;
width: 20%;
height: 30px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attr-content {
max-width: 900px;
}
.brand-opt {
position: absolute;
right: 20px;
top: 15px;
color: #555;
}
.multi .attr.checked {
color: #000;
a {
color: #000;
}
}
.brand-more {
margin-right: 10px;
cursor: pointer;
}
.brands-index {
float: left;
line-height: 30px;
margin-right: 5px;
cursor: pointer;
span {
margin: 0 3px;
-moz-user-select: none;
&:first-child {
margin-left: 10px;
}
&.hover {
color: #f00;
}
}
}
.brand-search {
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 10px;
input {
float: left;
border: none;
width: 100px;
height: 18px;
padding: 0;
}
.btn {
position: relative;
display: inline-block;
top: -1px;
width: 55px;
height: 20px;
line-height: 20px;
background: #3a3a3a;
color: #fff;
text-align: center;
cursor: default;
}
}
.panel-body {
padding: 15px 20px;
background: #f4f7f6;
margin-top: 5px;
margin-left: 10px;
.ul-scroll {
overflow: auto;
min-height: 30px;
max-height: 150px;
}
}
}
.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: 14px;
margin-right: 20px;
cursor: pointer;
outline: none;
font-family: Microsoft YaHei;
&.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;
background: #333;
color: #fff;
margin-left: 10px;
outline: none;
border: none;
font-size: 12px;
cursor: pointer;
}
.color-block {
display: inline-block;
height: 22px;
width: 22px;
border: 1px solid #ccc;
margin-bottom: -6px;
margin-right: 5px;
background-size: 100% !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.senior {
padding-bottom: 6px;
.attr-content {
position: relative;
}
.senior-attr-wrap > .attr:hover {
text-decoration: none;
}
}
.senior-attr-wrap {
position: relative;
}
.senior-attr-wrap > .attr:hover,
.senior-attr-wrap > .attr.hover {
font-weight: bold;
> .iconfont {
visibility: hidden;
}
.senior-up-icon {
visibility: visible;
}
}
.senior-sub {
box-sizing: border-box;
position: absolute;
padding: 0 15px 15px 91px;
left: -91px;
right: -16px;
top: 39px;
background: #fff;
border: 1px solid #dfdfdf;
border-top: 0;
z-index: 2;
ul {
max-width: 950px;
}
&.multi .multi-select {
display: none;
}
.multi-select {
position: absolute;
top: 20px;
right: 15px;
}
.attr {
height: 30px;
}
}
.senior-baffle {
height: 18px;
margin-top: -18px;
background: none;
}
.senior-content {
padding-top: 15px;
border-top: 1px solid #eaeceb;
}
.senior-up-icon {
position: relative;
width: 100%;
height: 9px;
z-index: 3;
margin-left: -11px;
visibility: hidden;
background: resolve('product/senior-up.png') no-repeat;
background-position: 50% 0;
top: -1px;
top: 1px\9;
}
.checkbox {
display: none;
float: left;
}
.multi .checkbox {
display: block;
color: #ccc;
font-size: 12px;
margin-right: 3px;
&.checked {
color: #000;
}
&.checked + span {
color: #000;
font-weight: bold;
}
}
}
.min-screen .filter-box .brand .attr {
width: 25%;
}
/*高级选项箭头位置IE11Hack*/
_:-ms-fullscreen, :root .senior-up-icon {
top: 1px;
}
\ No newline at end of file
... ...
.good-info {
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: left;
overflow: hidden;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
@mixin ellipsis;
}
> .price {
margin-top: 5px;
}
.brand {
a {
color: #666;
line-height: 1.5;
}
}
.market-price {
text-decoration: line-through;
color: #999;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
&.coled {
color: #f95b4f;
}
}
.tag-container {
font-size: 12px;
height: 22px;
line-height: 22px;
.good-tag {
float: left;
box-sizing: border-box;
display: block;
height: 22px;
padding: 0 7px;
margin-right: 3px;
color: #fff;
&:nth-last-of-type(1) {
margin-right: 0;
}
}
.new-tag {
background: #78dc7d;
}
.renew-tag {
background: #78dc7e;
}
.new-festival-tag {
background: #000000;
}
.yep-tag, .ymp-tag, .sale-tag {
background: #ff565b;
}
.limit-tag {
color: #4e4e4e;
border: 1px solid #4e4e4e;
}
}
}
@keyframes slideRight {
from {
max-width: 0;
}
to {
max-width: 150px;
}
}
.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 {
cursor: pointer;
}
}
.good-select-color {
float: left;
margin-top: 22px;
overflow: hidden;
animation: slideRight 600ms 1;
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;
}
}
.block-next-page {
width: 222px;
height: 297px;
padding-top: 22px;
margin-bottom: 35px;
margin-right: 10px;
float: left;
cursor: pointer;
a {
display: block;
img {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
}
}
... ...
.hotrank-page {
.popular-list {
width: 1160px;
li {
position: relative;
float: left;
width: 378px;
height: 596px;
overflow: hidden;
list-style: none;
margin: 0 8px 0 0;
.item-img {
width: 100%;
height: 506px;
line-height: 506px;
text-align: center;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
.polular-icon {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 60px;
background: #ffc513 resolve("product/hotrank/popular-icon.png") no-repeat center center;
text-align: center;
color: #ffc513;
font-weight: bold;
}
.item-content {
width: 100%;
padding: 14px 0 0 0;
height: 77px;
overflow: hidden;
text-align: center;
color: #222;
line-height: 18px;
h2 {
max-height: 36px;
font-size: 12px;
color: #000;
line-height: 18px;
text-align: center;
overflow: hidden;
}
p {
display: inline-block;
margin: 3px 0 0 0;
font-size: 12px;
text-align: center;
line-height: 20px;
color: #000;
span {
text-decoration: line-through;
margin: 0 10px 0 0;
color: #999;
}
}
}
.popular-item6,
.popular-item7,
.popular-item8,
.popular-item9 {
width: 280px;
height: 464px;
margin: 0 10px 0 0;
overflow: hidden;
.item-img {
height: 374px;
line-height: 374px;
}
}
}
.hot-week {
position: relative;
padding: 0 0 40px;
}
.hot-cate {
height: 45px;
background: #f5f7f6;
overflow: hidden;
li {
float: left;
height: 45px;
line-height: 45px;
display: table-cell;
a {
vertical-align: middle;
padding: 0 26px;
font-size: 14px;
color: #777;
border-left: 1px solid #999;
}
}
li:first-child {
a {
border: none;
}
}
li.current {
a {
font-size: 16px;
color: #000;
}
}
}
.hot-week-list {
width: 1160px;
.good-info {
width: 280px;
height: 464px;
margin: 10px 10px 0 0;
.tag-container {
display: none;
}
.good-detail-img {
height: 374px;
line-height: 374px;
text-align: center;
font-size: 0;
img {
vertical-align: middle;
}
}
.good-detail-text {
height: 77px;
overflow: hidden;
text-align: center;
color: #222;
line-height: 18px;
a {
max-height: 36px;
font-size: 12px;
color: #000;
line-height: 18px;
text-align: center;
overflow: hidden;
}
p {
display: inline-block;
margin: 3px 0 0 0;
font-size: 12px;
text-align: center;
line-height: 20px;
color: #000;
.sale-price {
margin: 0 10px 0 0;
}
}
}
}
}
.floatlayer {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin: 0 0 0 575px;
opacity: 0;
li {
width: 42px;
height: 42px;
border: 2px solid #555;
border-top: none;
border-bottom-width: 1px;
text-align: center;
a {
position: relative;
display: table-cell;
width: 42px;
height: 42px;
vertical-align: middle;
color: #555;
font-size: 12px;
span {
display: inline-block;
vertical-align: middle;
width: 28px;
word-wrap: break-word;
}
}
}
li:first-child {
border-top: 1px solid #555;
}
li.current, li:hover {
background: #555;
a {
color: #fff;
}
}
}
}
.min-screen .hotrank-page {
width: 990px;
.popular-list {
li {
width: 324px;
height: 521px;
.item-img {
height: 434px;
line-height: 434px;
}
}
.popular-item6,
.popular-item7,
.popular-item8,
.popular-item9 {
width: 240px;
height: 408px;
.item-img {
height: 320px;
line-height: 320px;
}
}
}
.hot-week-list {
.good-info {
width: 240px;
height: 408px;
.good-detail-img {
height: 320px;
line-height: 320px;
}
}
}
}
... ...
@import "sale/index";
@import "search";
@import "list";
@import "new-sale";
@import "filter-box";
@import "sort-pager";
@import "good";
@import "latest-walk";
@import "left-content";
@import "no-result";
@import "hot-rank";
@import "shop-entry";
@import "detail";
@import "sale/_index.css";
.product-page {
/*分页*/
.product-pager {
padding: 20px 0;
font-size: 12px;
color: #6a6a6a;
border-top: 2px solid #eaeceb;
.pager {
float: right;
}
}
/*分页 END*/
.list-left {
width: 160px;
}
.list-right {
width: 970px;
}
}
.product-list-page, .new-sale-page {
.goods-container {
height: auto;
padding-top: 25px;
position: relative;
width: calc(970px + 10px);/*每列增加右边距*/
.good-info {
width: 235px;
.good-detail-img {
height: 315px;
}
}
.block-next-page {
width: 235px;
height: 315px;
}
}
.filter-box .brand .attr-content {
max-width: 730px;
}
}
/*990px*/
.min-screen .product-list-page,
.min-screen .new-sale-page {
.list-right {
width: 810px;
}
.goods-container {
height: auto;
padding-top: 25px;
position: relative;
width: calc(810px + 10px);/*每列增加右边距*/
.good-info {
width: 195px;
.good-detail-img {
height: 261px;
}
}
.block-next-page {
width: 195px;
height: 261px;
}
}
.filter-box .brand .attr-content {
max-width: 570px;
}
}
... ...
.latest-walk {
overflow: hidden;
border-top: 2px solid #eaeceb;
font-size: 12px;
h2 {
padding-top: 15px;
font-size: 14px;
}
.goods {
min-width: 984px;
height: 241px;
margin: 30px 0;
overflow: hidden;
}
.good {
float: left;
margin-right: 14px;
width: 150px;
}
img {
display: block;
width: 150px;
height: 201px;
}
.name {
display: block;
height: 18px;
line-height: 18px;
max-width: 150px;
margin: 5px 0;
@mixin ellipsis;
}
.market-price {
color: #999;
margin-right: 5px;
text-decoration: line-through;
}
.sale-price {
color: #000;
font-weight: bold;
}
}
.min-screen .latest-walk {
.goods {
width: 820px;
min-width: 820px;
height: 301px;
}
.good {
margin-right: 10px;
width: 195px;
}
img {
width: 195px;
height: 261px;
}
}
... ...
.product-page {
.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;
transition: transform .3s;
}
}
}
&.active .icon-triangle {
transform: rotate(90deg);
}
&.active .sort-child-list {
display: block;
}
}
.sort-child-list {
display: none;
&.new-sale {
display: block;
}
li {
color: #bbb;
&.active {
background: #333;
color: #fff;
a {
color: #fff;
}
}
span {
padding-left: 5px;
color: #bbb;
}
}
a {
display: block;
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 {
margin-bottom: 10px;
}
li, img {
display: block;
width: 100%;
overflow: hidden;
}
}
.brand-card img,
.brand-ad img {
max-width: 100%;
}
}
\ No newline at end of file
... ...
.product-list-page {
&.search-page .path-nav .last {
font-weight: normal;
span {
font-weight: bold;
}
}
.list-left {
width: 160px;
}
.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: 13px;
}
.brand-favor {
margin-right: 0;
cursor: pointer;
}
.coled {
color: #f00;
}
}
.brand-about {
font-size: 12px;
line-height: 150%;
}
.sort-intro {
margin-bottom: 20px;
.texts {
width: 386px;
height: 298px;
padding: 0 50px;
border: 1px solid #eaeceb;
text-align: center;
overflow: hidden;
}
.name {
font-size: 30px;
font-weight: bold;
margin-top: 60px;
}
.en-name {
font-size: 14px;
font-weight: bold;
}
.desc {
margin-top: 15px;
color: #666;
margin-top: 15px;
font-size: 12px;
line-height: 150%;
}
.img {
width: 480px;
height: 300px;
}
.key-entry {
width: 330px;
margin: 30px auto 0;
a {
float: left;
display: block;
width: 110px;
line-height: 20px;
font-size: 12px;
color: #069;
text-decoration: underline;
}
}
}
}
.min-screen .product-list-page .sort-intro {
.texts {
width: 346px;
height: 248px;
padding: 0 30px;
}
.name {
margin-top: 30px;
}
.img {
width: 400px;
height: 250px;
}
}
... ...
.new-sale-page {
.sale-list-banner {
width: 100%;
position: relative;
ul {
overflow: hidden;
width: 100%;
position: relative;
z-index: 1;
li {
width: 100%;
height: 100%;
display: block;
float: left;
position: absolute;
top: 0;
left: 0;
}
}
}
.sale-list-pagation {
z-index: 2;
position: absolute;
left: 0;
bottom: 50px;
width: 100%;
height: 20px;
text-align: center;
div {
display: inline-block;
}
span {
display: block;
width: 20px;
height: 20px;
background: resolve('product/default-normal.png');
float: left;
margin: 0 10px;
cursor: pointer;
&.active {
background: resolve('product/default-active.png');
}
}
}
.header-title {
position: relative;
width: 100%;
height: 42px;
margin: 20px 0;
text-align: center;
font-size: 20px;
.count-wrap {
position: relative;
}
.count {
background: #fff;
padding: 0 5px;
color: #999;
font-size: 12px;
margin-top: 6px;
}
.line-through {
position: absolute;
bottom: 9px;
left: 0;
right: 0;
height: 1px;
border-top: 1px dotted #999;
}
}
.new-banner img {
display: block;
width: 100%;
}
.new-brands {
position: relative;
width: 100%;
margin-top: 25px;
> * {
float: left;
}
.pre, .next {
position: absolute;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
background: #e0e0e0;
text-align: center;
top: 50%;
margin-top: -20px;
cursor: pointer;
opacity: 0.8;
&:hover {
opacity: 0.9;
}
}
.pre {
left: 0;
}
.next {
right: 0;
}
.brands-wrap {
position: relative;
overflow: hidden;
width: 890px;
height: 76px;
margin-left: 40px;
}
.brands {
position: absolute;
width: auto;
height: 76px;
}
.brands li {
float: left;
margin-left: 14px;
a {
display: block;
width: 164px;
height: 76px;
line-height: 76px;
vertical-align: middle;
text-align: center;
}
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
border: none;
}
}
}
.new-floor-title {
position: relative;
margin: 35px auto;
width: 300px;
height: 31px;
line-height: 31px;
font-size: 18px;
border: 1px solid #000;
.date {
position: absolute;
left: -1px;
top: -1px;
width: 155px;
height: 33px;
color: #fff;
text-align: center;
background: resolve('product/floor-title.png');
}
.title {
float: right;
margin-right: 40px;
}
}
}
.min-screen .new-sale-page .new-brands .brands-wrap {
width: 730px;
}
\ No newline at end of file
... ...
.product-page .no-result {
border: 1px solid #eaeceb;
padding: 60px 0;
text-align: center;
margin-bottom: 20px;
.no-title {
font-size: 16px;
}
.keyword {
color: #ee0011;
}
.search-again {
width: 490px;
margin: 15px auto;
input {
float: left;
width: 380px;
height: 18px;
padding: 15px 5px;
border: 10px solid #343434;
color: #333;
outline: none;
box-sizing: content-box;
}
.search-again-btn {
float: left;
width: 80px;
height: 68px;
line-height: 68px;
background: #343434;
vertical-align: middle;
color: #fff;
cursor: pointer;
outline: none;
border: none;
}
.iconfont {
font-size: 30px;
}
}
.no-tip {
font-size: 12px;
color: #999;
}
}
\ No newline at end of file
... ...
.product-search-page {
.goods-container {
height: auto;
padding: 25px 0 0 0;
position: relative;
width: calc(1150px + 10px);/*每列增加右边距*/
.good-info {
width: 222px;
}
}
.path-nav .last {
font-weight: normal;
span {
font-weight: bold;
}
}
}
.min-screen .product-search-page {
.goods-container {
height: auto;
padding-top: 25px;
position: relative;
width: calc(990px + 10px); /*每列增加右边距*/
.good-info {
width: 190px;
.good-detail-img {
height: 255px;
}
}
.block-next-page {
width: 190px;
height: 255px;
}
}
.filter-box .brand .attr-content {
max-width: 750px;
}
}
... ...
.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: calc(970px + 10px);/*每列增加右边距*/
.good-info {
width: 235px;
}
}
... ...
.sort-pager {
height: 48px;
background: #f5f7f6;
line-height: 48px;
margin: 10px 0;
.sort-type,
.checks {
color: #999;
font-size: 12px;
padding: 0 10px;
.iconfont {
font-size: 12px;
}
&.active,
&.checked {
color: #000;
font-weight: bold;
.iconfont {
font-weight: 100;
}
}
}
.checks .iconfont {
background: #fff;
}
.sort-type:first-child .iconfont {
display: none;
}
.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;
background: #fff;
}
.iconfont {
font-size: 14px;
color: #ccc;
float: right;
}
> ul {
position: absolute;
display: none;
width: 48px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fff;
z-index: 1;
}
li {
padding: 0 3px;
border-bottom: 1px solid #ccc;
&:hover {
background: #376cf7;
color: #fff;
}
}
a {
display: block;
width: 100%;
}
}
.page-orient {
float: left;
font-size: 14px;
line-height: 15px;
margin: 0 20px;
.dis-icon {
color: #e6e6e6;
}
i {
color: #f00;
}
}
}
... ...
@import "_new-sale.css";
.center-content {
width: 1150px;
margin-left: auto;
... ... @@ -292,7 +293,7 @@
top: 10px;
right: 10px;
line-height: 60px;
background: url('../assets/images/furniture/top-tag-bg.png?1450667948');
background: url("furniture/top-tag-bg.png?1450667948");
font-size: 20px;
color: #fff;
}
... ...
.sale-discount-page {
.sale-list-banner {
width: 100%;
position: relative;
ul {
overflow: hidden;
width: 100%;
position: relative;
z-index: 1;
li {
width: 100%;
height: 100%;
display: block;
float: left;
position: absolute;
top: 0;
left: 0;
}
}
}
.sale-list-pagation {
z-index: 2;
position: absolute;
left: 0;
bottom: 50px;
width: 100%;
height: 20px;
text-align: center;
div {
display: inline-block;
}
span {
display: block;
width: 20px;
height: 20px;
background: resolve('product/default-normal.png');
float: left;
margin: 0 10px;
cursor: pointer;
&.active {
background: resolve('product/default-active.png');
}
}
}
.header-title {
position: relative;
width: 100%;
height: 42px;
margin: 20px 0;
text-align: center;
font-size: 20px;
.count-wrap {
position: relative;
}
.count {
background: #fff;
padding: 0 5px;
color: #999;
font-size: 12px;
margin-top: 6px;
}
.line-through {
position: absolute;
bottom: 9px;
left: 0;
right: 0;
height: 1px;
border-top: 1px dotted #999;
}
}
.new-banner img {
display: block;
width: 100%;
}
.new-brands {
position: relative;
width: 100%;
margin-top: 25px;
> * {
float: left;
}
.pre, .next {
position: absolute;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
background: #e0e0e0;
text-align: center;
top: 50%;
margin-top: -20px;
cursor: pointer;
opacity: 0.8;
&:hover {
opacity: 0.9;
}
}
.pre {
left: 0;
}
.next {
right: 0;
}
.brands-wrap {
position: relative;
overflow: hidden;
width: 890px;
height: 76px;
margin-left: 40px;
}
.brands {
position: absolute;
width: auto;
height: 76px;
}
.brands li {
float: left;
margin-left: 14px;
a {
display: block;
width: 164px;
height: 76px;
line-height: 76px;
vertical-align: middle;
text-align: center;
}
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
border: none;
}
}
}
.new-floor-title {
position: relative;
margin: 35px auto;
width: 300px;
height: 31px;
line-height: 31px;
font-size: 18px;
border: 1px solid #000;
.date {
position: absolute;
left: -1px;
top: -1px;
width: 155px;
height: 33px;
color: #fff;
text-align: center;
background: resolve('product/floor-title.png');
}
.title {
float: right;
margin-right: 40px;
}
}
}
.min-screen .new-sale-page .new-brands .brands-wrap {
width: 730px;
}
... ...