Authored by hongweigao

弹出框样式

... ... @@ -582,3 +582,47 @@
})();
</script>
{{/statGoodsInfo}}
<script type="text/html" id="packageDialog">
<div class="pkgDg-header">
<p class="left">潮流搭配</p>
<span class="pkg-close close right"><i class="iconfont"></i></span>
</div>
<div class="pkgDg-prodetal">
<div class="pkg-product clearfix">
<a href="#" class="pkg-proImg"><img src="//img12.static.yhbimg.com/goodsimg/2016/11/02/14/0293f6afc458261c612853b2fb371c9a7a.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90" class="pro-img"/></a>
<div class="type-chose">
<div class="chose-color row clearfix">
<span class="title pull-left">&nbsp;&nbsp;色:</span>
<ul class="colors pull-left clearfix">
<li class="focus pull-left" title="Reshake 男款logo刺绣织带装饰棉服外套 黑色" data-color="黑色" data-total="10">
<img src="//img12.static.yhbimg.com/goodsimg/2016/11/02/14/0293f6afc458261c612853b2fb371c9a7a.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90"><span class="color-name">黑色</span>
</li>
</ul>
</div>
<div class="chose-size row clearfix">
<span class="title pull-left"> &nbsp;&nbsp;码: </span>
<div id="sizes" class="size-wrapper pull-left">
<ul class="size">
<li data-sku="1848512" data-num="1" data-name="46" data-title="">46</li>
<li data-sku="1848514" data-num="4" data-name="48" data-title="">48</li>
<li data-sku="1848516" data-num="4" data-name="50" data-title="">50</li>
<li data-sku="1848518" data-num="1" data-name="52" data-title="">52</li>
<span class="size-warn warn-tip hide"> <i class="iconfont"></i> 请选择尺码 </span>
</ul>
<p class="color-size-tip hide"></p>
</div>
</div>
<div class="chose-done">您已选择:<span>“黑色”</span><span>“M码”</span></div>
</div>
</div>
</div>
<div class="pkgDg-footer clearfix">
<p class="totalMoney left">合计:<em>138.00</em></p>
<span class="buy-product red-color right">
<em>立即购买</em>
</span>
</div>
</script>
... ...
... ... @@ -69,7 +69,7 @@
<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">
<span id="buy-detail" class="buy-product red-color">
<em>立即购买</em>
</span>
</div>
... ...
... ... @@ -14,6 +14,7 @@ var $ = require('yoho-jquery');
var lazyLoad = require('yoho-jquery-lazyload');
var yas = require('../common/data-yas');
var dataLazyLoad = require('../plugins/lazy-load')(document);
var handlebars = require('yoho-handlebars');
var bindEvent = $.Callbacks(); // eslint-disable-line
var clickAcquireCouponEvent = $.Callbacks('unique'); // eslint-disable-line
... ... @@ -48,7 +49,8 @@ var $saleReturn = $('#saleReturn');
var dialogTpl = require('hbs/product/coupon-dialog.hbs');
var $goodsIdArr = [];
var $goodsIdArr = [],
pkgFn = '';
function limitedProductUrl(s) {
return window.location.href + '?openby:yohobuy={"action":"go.limitpurchase","params":{"lp":"' + s + '"}}';
... ... @@ -61,6 +63,9 @@ function isEmpty(el) {
require('../plugins/slider');
require('../common/center-slider');
// handlebars模板
pkgFn = handlebars.compile($('#packageDialog').html() || '');
bindEvent.add(function() {
var $imgShow = $('#img-show'),
$thumbs = $('#thumbs > .thumb-wrap');
... ... @@ -512,6 +517,16 @@ bindEvent.add(function() {
}
});
//套餐
$('#buy-detail').click(function () {
var opt = {
className: 'pkg-dialog',
closeIcon: false,
content: pkgFn({msg: '测试信息!'})
};
new Dialog(opt).show();
});
// 继续购物
$('#keep-shopping').click(function() {
$('#type-chose').slideDown(SLIDETIME);
... ...
... ... @@ -402,73 +402,6 @@
border-top: 1px solid #eaeceb;
}
.chose-color {
font-size: 12px;
.title {
margin-top: 14px;
}
img {
float: left;
display: inline-block;
height: 34px;
width: 34px;
}
li {
margin-right: 10px;
cursor: pointer;
border: 1px solid white;
height: 34px;
&.focus {
border-color: black;
}
}
.color-name {
float:left;
height: 34px;
line-height: 34px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
}
.chose-size,
.chose-ticket {
font-size: 12px;
.title {
margin-top: 6px;
}
li {
float: left;
display: block;
height: 24px;
line-height: 24px;
margin-right: 10px;
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: 380px;
}
... ... @@ -760,7 +693,7 @@
}
.good-info .good-detail-text > a {
height: 35px;
height: 40px;
}
.package-priceList {
... ... @@ -780,13 +713,8 @@
}
.buy-product {
display: inline-block;
margin-top: 40px;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #d42838;
border-color: #d42838;
}
> p {
... ... @@ -2024,3 +1952,165 @@
}
}
.buy-product {
display: inline-block;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid;
cursor: pointer;
}
.chose-color {
font-size: 12px;
.title {
margin-top: 14px;
}
img {
float: left;
display: inline-block;
height: 34px;
width: 34px;
}
li {
margin-right: 10px;
cursor: pointer;
border: 1px solid white;
height: 34px;
&.focus {
border-color: black;
}
}
.color-name {
float:left;
height: 34px;
line-height: 34px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
}
.chose-size,
.chose-ticket {
font-size: 12px;
.title {
margin-top: 6px;
}
li {
float: left;
display: block;
height: 24px;
line-height: 24px;
margin-right: 10px;
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;
}
}
}
/****套餐弹出框***/
.pkg-dialog {
width: 500px;
height: 600px;
border-color: #000;
.pkg-close {
position: relative;
top: 0;
right: 0;
}
.pkg-close .iconfont {
font-size: 35px;
line-height: 40px;
}
.pkgDg-header {
height: 50px;
line-height: 50px;
text-align: left;
}
.pkgDg-prodetal {
width: 100%;
height: 490px;
overflow: auto;
}
.pkg-product {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 15px;
.pkg-proImg {
float: left;
width: 85px;
height: 109px;
> img {
width: 100%;
height:100%;
}
}
.type-chose {
float: left;
width: 350px;
margin-left: 15px;
}
.row {
margin-bottom: 15px;
}
.chose-done {
font-size: 12px;
text-align: left;
}
}
.pkgDg-footer {
height: 80px;
line-height: 80px;
.totalMoney em {
color: #d42838;
font-weight: bold;
}
.buy-product {
margin-top: 25px;
}
}
.pkgDg-footer:before {
position: absolute;
left: 0;
content: '';
display: block;
width: 540px;
border-top: 1px solid #ddd;
}
}
... ...