fe / yohobuy-node · Commits

Go to a project

Authored by 514335620@qq.com
Commit fd9117f7a0e5597a28734bde6d5165a41935bad1 1 parent b400c34e master ... baidu_ocpcapi develop feature/canbuy feature/channelDataMap feature/company-profile feature/contact feature/detail-link feature/home-optimize feature/overseas-edition feature/payment feature/pcurl feature/reduce feature/refactor_alert feature/shoppingPay feature/virtualOrder hotfix/11 hotfix/cart hotfix/changeappversion hotfix/gift hotfix/im hotfix/link hotfix/ocpc hotfix/shop hotfix/upload hotfix/yohobi release/6.9.0 release/6.9.2 2019-12-5 all

其他页面模板

Inline Side-by-side
Showing 33 changed files with 3575 additions and 19 deletions
... ... @@ -65,15 +65,15 @@ exports.discount = (req, res) => {
response.devEnv = true;
// 假数据输出
// res.render('sale/discount', Object.assign(response, simulation.discount()));
return sale.getSaleGoodsListData()
.then(result => {
response.result = result;
response.resultShow = JSON.stringify(result, null, 4);
res.render('sale/discount', response);
});
res.render('sale/discount', Object.assign(response, simulation.discount()));
// return sale.getSaleGoodsListData()
// .then(result => {
// response.result = result;
// response.resultShow = JSON.stringify(result, null, 4);
//
// res.render('sale/discount', response);
// });
})
.catch(() => {
... ...
... ... @@ -218,16 +218,25 @@ 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:
{
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: [
... ... @@ -249,8 +258,42 @@ exports.discount = () => {
}
]
}
},
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 +304,114 @@ 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}}
... ...
<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>
... ...

6.28 KB | W: 0px | H: 0px

4.98 KB | W: 0px | H: 0px

  • 2-up
  • Swipe
  • Onion skin
.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;
}
... ...