fe / yohobuy-node · Commits

Go to a project

Authored by hongweigao
Commit c60f1d7ec9d591284e173481b7101fd31708b106 1 parent 8c3437ac

详情页套餐区样式

Inline Side-by-side
Showing 4 changed files with 168 additions and 1 deletions
... ... @@ -29,11 +29,13 @@
</div>
{{/if}}
<div class="share-row"><span class="title pull-left">分享商品：</span> {{> common/share }} </div>
<div class="share-row clearfix"><span class="title pull-left">分享商品：</span> {{> common/share }} </div>
{{!-- 因接口原因，暂存size的title的值 --}}
<div id="size-title-json" style="display: none;">{{sizeTitleJson}}</div>
{{> product/package}}
<div class="other-infos">
<div class="description-material info-block">
<p class="block-title"id="block-title-head">
... ...
<div class="package-box clearfix">
<div class="title-header">优惠套装</div>
<div class="package-pro clearfix">
<div class="good-info" data-skn="" data-from="">
<div class="good-detail-img">
<a class="good-thumb" href="" target="_blank">
<img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
</a>
</div>
<div class="good-detail-text stu-good-detail ">
<a href="" target="_blank">PALLADIUM Pampa Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
<p class="price ">
<span class="sale-price red-color">
¥1078.20
</span>
</p>
</div>
</div>
<div class="spliter">+</div>
<div class="good-info" data-skn="" data-from="">
<div class="good-detail-img">
<a class="good-thumb" href="" target="_blank">
<img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
</a>
</div>
<div class="good-detail-text stu-good-detail ">
<a href="" target="_blank">PALLADIUM Pampa Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
<p class="price ">
<span class="sale-price red-color">
¥1078.20
</span>
</p>
</div>
</div>
<div class="spliter">+</div>
<div class="good-info" data-skn="" data-from="">
<div class="good-detail-img">
<a class="good-thumb" href="" target="_blank">
<img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
</a>
</div>
<div class="good-detail-text stu-good-detail ">
<a href="" target="_blank">PALLADIUM Pampa Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
<p class="price ">
<span class="sale-price red-color">
¥1078.20
</span>
</p>
</div>
</div>
<div class="spliter">+</div>
<div class="good-info" data-skn="" data-from="">
<div class="good-detail-img">
<a class="good-thumb" href="" target="_blank">
<img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
</a>
</div>
<div class="good-detail-text stu-good-detail ">
<a href="" target="_blank">PALLADIUM Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
<p class="price ">
<span class="sale-price red-color">
¥1078.20
</span>
</p>
</div>
</div>
<div class="spliter">=</div>
<div class="package-priceList">
<p>销售价:<em class="sale-price">¥633.00</em></p>
<p>套餐价:<em class="package-price red-color">¥520.00</em></p>
<p class="save-text red-color">立省<em class="save-price">¥113.00</em>元</p>
<span class="buy-product red-color">
<em>立即购买</em>
</span>
</div>
</div>
</div>
... ...
... ... @@ -742,6 +742,10 @@ $('#brand-favour').click(function() {
// $modelContent.slideDown(SLIDETIME);
// }
// });
//详情页套餐区
$('.good-info .good-detail-text > a').dotdotdot({
wrap: 'letter'
});
// 售后服务
$('.after-service-switch').click(function() {
... ...
... ... @@ -716,6 +716,90 @@
}
/**套餐**/
.package-box {
margin-top: 30px;
border: 1px solid #eaeceb;
.title-header {
line-height: 45px;
background-color: #f5f5f5;
border-bottom: 1px solid #eaeceb;
text-indent: 20px;
}
.package-pro {
width: 990px;
margin: 0 auto;
}
.spliter {
width: 50px;
float: left;
margin: 0 25px;
color: #b0b0b0;
text-align: center;
font-size: 25px;
line-height: 196px;
}
.good-info {
margin: 25px 0;
width: 110px;
}
.good-info .good-detail-img {
width: 100px;
height: 135px;
margin: 0 auto;
}
.good-info .good-detail-text > .price {
text-align: center;
font-weight: bold;
}
.good-info .good-detail-text > a {
height: 35px;
}
.package-priceList {
float: left;
margin-top: 25px;
.sale-price {
text-decoration: line-through;
}
.package-price {
font-weight: bold;
}
.save-text {
margin-top: 10px;
}
.buy-product {
display: inline-block;
margin-top: 40px;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #d42838;
}
> p {
line-height: 25px;
font-size: 14px;
}
}
.red-color {
color: #d42838;
}
}
.video-wrap {
}
... ...