fe / yohobuy-node · Commits

Go to a project

Authored by OF1706
Commit 1b8931a731d3a8044e80e7293d4586e4852c0f44 1 parent fe6b49c2

n

Inline Side-by-side
Showing 6 changed files with 621 additions and 73 deletions
<div class="yoho-dialog cart-togetherGoods"
data-role=""
style="margin-top: -374.5px; margin-left: -350px; display:block;">
<span class="close">
<i class="iconfont">&#xe60d;</i>
</span>
<div class="content">
<div class="detail-body">
<div class="detail-goods">
<div class="detail-bigpic">
<div class="bigpic">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="piclist">
<span class="pre"></span>
<div class="con">
<ul>
<li class="active"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<span class="next"></span>
</div>
</div>
<div class="detail-bigpic none">
<div class="bigpic">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="piclist">
<span class="pre"></span>
<div class="con">
<ul>
<li class="active"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<span class="next"></span>
</div>
</div>
<div class="detail-info">
<div class="title">
<h2>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈{{name}}</h2>
</div>
<div class="price">
<span class="newprice">现价：<b class="promotion-price">¥7777{{salePrice}}</b></span>
<span class="activityprice">活动价：<b class="promotion-price">¥5555{{marketPrice}}</b></span>
</div>
<div class="order">
<dl>
<dd class="colorBox">选颜色：</dd>
<dt>
<div class="colorBox">
<ul>
<li class="color active">
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
<span>{{name}}</span>
</li>
<li class="color">
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
<span>{{name}}</span>
</li>
</ul>
</div>
</dt>
</dl>
<dl>
<dd class="showSizeBox">选尺码：</dd>
<dt>
<div class="showSizeBox">
<span data-sku="{{sku}}" data-num="{{num}}" class="disabled">40码{{name}}</span>
<span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
<span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
<span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
</div>
<p>内长&nbsp;25.5com</p>
</dt>
</dl>
<dl>
<dd>选件数：</dd>
<dt>
<div class="amount_wrapper">
<input type="text" id="num" class="num" value="1" readonly="readonly">
<a class="amount cut"><i class="iconfont">&#xe6c0;</i></a>
<a class="amount add"><i class="iconfont">&#xe6c1;</i></a>
</div>
</dt>
</dl>
</div>
<div class="submit">
<button class="btn-red"><i class="addCart iconfont">&#xe600;</i>添加到购物车</button>
<button class="btn-favCount"><i class="favCount iconfont">&#xe68f;</i>收藏商品</button>
</div>
</div>
<div class="detail-size">
<h3>尺码信息（单位：厘米）</h3>
<table>
<thead>
<tr>
<th width="{{width}}">吊牌吃吗</th>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
</tr>
</thead>
<tbody>
<tr>
<td>6666{{.}}</td>
</tr>
<tr>
<td>4444{{.}}</td>
</tr>
</tbody>
</table>
<div class="size-info">
※ 以上尺寸为实物实际测量，因测量方式不同会有略微误差，相关数据仅作参考，以收到实物为准。
</div>
</div>
</div>
</div>
</div>
</div>
... ...
<div class="yoho-dialog cart-togetherGoods"
data-role="cart-gift-win"
style="margin-top: -374.5px; margin-left: -350px; display:none;">
<span class="close">
<i class="iconfont"></i>
</span>
<div class="content">
<div class="detail-body">
<div class="slide-img">
<p>选赠品:<em><span
class="active">1元加价购</span><code>|</code><span>59元加价购</span><code>|</code><span>99元加价购</span></em></p>
<div class="side-img-dd">
<ul class="img-list">
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
<li class="img-item">
<span class="hide goods-id">{{goods_id}}</span>
<div class="good">
<a href="{{url}}" target="_blank">
<img class="lazy" src="{{pic_url}}"/>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="detail-goods">
<div class="detail-bigpic">
<div class="bigpic">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="piclist">
<span class="pre"></span>
<div class="con">
<ul>
<li class="active"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<span class="next"></span>
</div>
</div>
<div class="detail-bigpic none">
<div class="bigpic">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="piclist">
<span class="pre"></span>
<div class="con">
<ul>
<li class="active"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<span class="next"></span>
</div>
</div>
<div class="detail-info">
<div class="title">
<h2>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈{{name}}</h2>
</div>
<div class="price">
<span class="newprice">现价：<b class="promotion-price">¥7777{{salePrice}}</b></span>
<span class="activityprice">活动价：<b class="promotion-price">¥5555{{marketPrice}}</b></span>
</div>
<div class="order">
<dl>
<dd class="colorBox">选颜色：</dd>
<dt>
<div class="colorBox">
<ul>
<li class="color active">
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
<span>{{name}}</span>
</li>
<li class="color">
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
<span>{{name}}</span>
</li>
</ul>
</div>
</dt>
</dl>
<dl>
<dd class="showSizeBox">选尺码：</dd>
<dt>
<div class="showSizeBox">
<span data-sku="{{sku}}" data-num="{{num}}" class="disabled">40码{{name}}</span>
<span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
<span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
<span data-sku="{{sku}}" data-num="{{num}}">40码{{name}}</span>
</div>
<p>内长&nbsp;25.5com</p>
</dt>
</dl>
<dl>
<dd>选件数：</dd>
<dt>
<div class="amount_wrapper">
<input type="text" id="num" class="num" value="1" readonly="readonly">
<a class="amount cut"><i class="iconfont">&#xe6c0;</i></a>
<a class="amount add"><i class="iconfont">&#xe6c1;</i></a>
</div>
</dt>
</dl>
</div>
<div class="submit">
<button class="btn-red"><i class="addCart iconfont">&#xe600;</i>添加到购物车</button>
<button class="btn-favCount"><i class="favCount iconfont">&#xe68f;</i>收藏商品</button>
</div>
</div>
<div class="detail-size">
<h3>尺码信息（单位：厘米）</h3>
<table>
<thead>
<tr>
<th width="{{width}}">吊牌吃吗</th>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
<th width="{{width}}">吊牌吃吗
</td>
</tr>
</thead>
<tbody>
<tr>
<td>6666{{.}}</td>
</tr>
<tr>
<td>4444{{.}}</td>
</tr>
</tbody>
</table>
<div class="size-info">
※ 以上尺寸为实物实际测量，因测量方式不同会有略微误差，相关数据仅作参考，以收到实物为准。
</div>
</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -467,11 +467,32 @@ $paySum.on('click', '.btn-account', function() {
// }
// } else {
new Alert('请至少选择一件商品').show();
// new Alert('请至少选择一件商品').show();
// }
// }
// }
$('.cart-preSell-dialog').show();
// $('.togethor').show();
// $('.cart-togetherGoods').show();
});
var giftBtn = '[data-role=gift-view-btn],[data-role=gift-resel-btn],[data-role=gift-sel-btn]';
$('.shop-cart').on('click', giftBtn, function() {
var $this = $(this);
var $win = $this.closest('[data-role=promotion-wrap]').find('[data-role=cart-gift-win]');
console.log($win.length);
$win.show();
});
$('.shop-cart').on('click', '[data-role="cart-gift-win"] .close', function(){
$(this).closest('[data-role="cart-gift-win"]').hide();
});
require('./cart-action');
... ...
... ... @@ -58,7 +58,7 @@
width: 100%;
height: auto;
}
&.none{
&.none {
display: none;
}
}
... ... @@ -161,6 +161,7 @@
font-size: 13px;
*zoom: 1;
min-height: 145px;
background: none;
&:after {
content: '';
display:block;
... ... @@ -204,13 +205,16 @@
height: auto;
overflow: hidden;
}
&+p{
margin-top: 5px;
margin-bottom: 10px;
}
}
}
.size-p{
margin-top: 5px;
margin-bottom: 10px;
color: #999;
font-size: 13px
}
.colorBox {
&>ul {
zoom: 1;
... ... @@ -224,7 +228,6 @@
li {
width: 40px;
height: 40px;
overflow: hidden;
text-align: center;
margin-right: 5px;
display: inline;
... ... @@ -234,7 +237,6 @@
width: 40px;
height: 40px;
border: 2px #232323 solid;
}
p {
width: 38px;
... ... @@ -323,9 +325,10 @@
}
.submit {
margin-top: 15px;
text-align: left;
button {
float: none;
line-height:40px;
width: 140px;
height: 40px;
font-size: 15px;
... ... @@ -409,17 +412,19 @@
}
.side-img-dd {
width: 415px;
height: 90px;
overflow: hidden;
margin: 0 auto;
.img-brand-switch{
a {
position: absolute;
top: 90px;
top: 96px;
font-size: 22px;
color: #000;
width: 20px;
height: 32px;
padding-top: 8px;
height: 24px;
padding: 0;
text-align: center;
background-color: #fff;
&.prev {
... ... @@ -436,18 +441,26 @@
}
}
.sell-class-title {
font-size: 14px;
color: #444;
text-align: left;
height: 20px;
line-height: 20px;
vertical-align: middle;
margin-bottom: 15px;
strong {
display: inline-block;
margin: 0 3px;
color: #d0021b;
font-weight: 300;
}
}
.slide-img {
margin-bottom: 25px;
p {
font-size: 14px;
color: #444;
text-align: left;
height: 20px;
line-height: 20px;
vertical-align: middle;
margin-bottom: 15px;
}
em {
.slide-img-title {
float: right;
display: inline-block;
... ... @@ -461,7 +474,7 @@
.active {
color: #d0021b;
}
code {
.spacing{
font-size: 18px;
font-weight: 300;
color: #000;
... ... @@ -493,7 +506,7 @@
}
.checked {
position: absolute;
top: 4px;
top: 0;
right: 4px;
font-size: 15px;
color: #3a3a3a;
... ... @@ -501,17 +514,98 @@
.good {
float: left;
width: 63px;
a {
cursor: pointer;
border: none;
display: block;
}
img {
display: block;
width: 65px;
height: 90px;
}
}
.good-cont{
cursor: pointer;
border: none;
display: block;
color: transparent;
margin: 0;
}
}
.incentive {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
display: block;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
color: #fff;
cursor: pointer;
background: #3a3a3a;
color: #fff;
}
}
.cart-preSell-dialog {
background-color: #fff;
.detail-body{
padding: 10px 10px 20px;
.sell-class-title {
padding-top: 10px;
}
}
.slide-img {
width: 434px;
.sell-class-title {
border-top: 1px solid #e0e0e0;
padding-left: 13px;
}
&:nth-child(1) {
.sell-class-title {
border-top: none;
}
}
}
.btn-account {
display: inline-block;
color: #000;
width: 130px;
height: 30px;
line-height: 30px;
margin-bottom: 25px;
font-size: 15px;
border: 1px solid #000;
box-sizing: border-box;
background-color: #fff;
cursor: pointer;
}
.btn-account-black {
background-color: #000;
color: #fff;
}
.pre-sell-tip{
font-size: 14px;
color: #444;
text-after-overflow: center;
}
.side-img-dd {
position: relative;
overflow: visible;
.img-brand-switch {
a {
top: 32px;
}
a.prev {
left: -20px;
}
a.next {
right: -20px;
}
}
}
.side-img-container {
width: 409px;
height: 90px;
overflow: hidden;
margin: 0 auto;
}
}
... ...
... ... @@ -237,13 +237,13 @@
line-height: 32px;
}
}
.incentive {
background: #000100;
color: #fff;
&.red {
background: #ff575c;
}
}
/*.incentive {*/
/*background: #000100;*/
/*color: #fff;*/
/*&.red {*/
/*background: #ff575c;*/
/*}*/
/*}*/
}
.cart-add-btn{
... ... @@ -494,7 +494,7 @@
.gift-sell {
border: 1px solid #e0e0e0;
padding:20px 30px 20px 55px;
code {
.order-pay-mark{
width: 70px;
height: 20px;
line-height: 20px;
... ... @@ -511,22 +511,19 @@
box-sizing: border-box;
}
}
p{
.gift-sell-info{
font-size: 14px;
color: #444;
line-height: 1;
margin-bottom: 8px;
&:last-child{
margin-bottom: 0;
}
}
a {
.order-pay-link{
display: inline-block;
color: #ff575c;
margin-left: 20px;
cursor: pointer;
}
button {
.btn-clear {
float: right;
height: 20px;
line-height: 20px;
... ... @@ -761,33 +758,6 @@
cursor: pointer;
}
.pay-pro-icon {
float: left;
width: 70px;
height: 90px;
overflow: hidden;
display: block;
position: relative;
img {
max-width: 70px;
}
span {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
display: block;
height: 16px;
line-height: 16px;
font-size:12px;
text-align: center;
color: #fff;
cursor: pointer;
background: #000100;
color: #fff;
}
}
.pay-pro-info {
float: left;
text-align: left;
... ... @@ -945,7 +915,9 @@
margin-bottom: 10px;
}
.active {
border-color: #000;
border-color: #444;
background-color: #444;
color: #fff;
}
.disabled {
color: #e8e8e8;
... ... @@ -1163,6 +1135,37 @@
}
}
.pay-pro-icon {
float: left;
width: 70px;
height: 90px;
overflow: hidden;
display: block;
position: relative;
img {
max-width: 70px;
}
.incentive {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
display: block;
height: 16px;
line-height: 16px;
font-size:12px;
text-align: center;
color: #fff;
cursor: pointer;
background: #000100;
color: #fff;
&.red {
background-color: #ff575c;
}
}
}
.yoho-coin {
width: 14px;
height: 14px;
... ...
... ... @@ -11,7 +11,7 @@
border-radius: 5px;
background: #fff;
display: none;
.magnify{
.magnify {
position: absolute;
width: 12px;
height: 12px;
... ... @@ -20,7 +20,7 @@
right: 2px;
}
.detail-header{
.detail-header {
display: block;
font-size: 12px;
line-height: 16px;
... ...