Authored by 王水玲

活动秒杀楼层

... ... @@ -10,7 +10,7 @@
</div>
</div>
<div class="out-product-list">
<div class="out-product-list less-than-3">
<div class="product-list">
<div class="product">
<a href="">
... ... @@ -19,12 +19,12 @@
<div class="product-brand">MADNESS</div>
</div>
<div class="product-info">
<div class="seckill-status" style="background: url()">
<div class="seckill-status status-0">
<div class="price">
<span class="seckill-price">9元</span>
<span class="market-price">¥199</span>
</div>
<span class="status">立即抢</span>
<div class="status-type">立即抢</div>
</div>
</div>
</a>
... ... @@ -41,7 +41,7 @@
<span class="seckill-price">9元</span>
<span class="market-price">¥199</span>
</div>
<span class="status">立即抢</span>
<div class="status-type">立即抢</div>
</div>
</div>
</a>
... ... @@ -53,17 +53,17 @@
<div class="product-brand">MADNESS</div>
</div>
<div class="product-info">
<div class="seckill-status" style="background: url()">
<div class="seckill-status status-0">
<div class="price">
<span class="seckill-price">9元</span>
<span class="market-price">¥199</span>
</div>
<span class="status">立即抢</span>
<div class="status-type">立即抢</div>
</div>
</div>
</a>
</div>
<div class="product">
{{!-- <div class="product">
<a href="">
<div class="img-box">
<img src="//img13.static.yhbimg.com/goodsimg/2011/07/28/09/02489383d3937a4ee4706ab7f516482e7b.jpg?imageMogr2/thumbnail/160x216/position/center/quality/85/format/webp" alt="">
... ... @@ -75,12 +75,11 @@
<span class="seckill-price">9元</span>
<span class="market-price">¥199</span>
</div>
<span class="status">立即抢</span>
<div class="status-type">立即抢</div>
</div>
</div>
</a>
</div> --}}
</div>
</div>
</div>
</div>
\ No newline at end of file
... ...

412 Bytes | W: | H:

614 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

528 Bytes | W: | H:

465 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -700,6 +700,26 @@ function miniProgramHandleInit() {
}
}
function loadSeckillList() {
$.ajax({
url: '/product/seckill/list'
}).done(function(result) {
console.log(result);
}).error(function() {
}).always(function() {
});
}
function seckillInit() {
loadSeckillList();
$(document).on('click', '.seckill-tab .tab-item', function() {
$(this).addClass('actived').siblings().removeClass('actived');
});
}
$(function() {
if ($('.over').length) {
// 过期/删除 状态的 活动
... ... @@ -758,6 +778,9 @@ $(function() {
// 点赞楼层
likedActivityInit();
// 秒杀
seckillInit();
// 小程序相关处理
if (!window.WeixinJSBridge || !window.WeixinJSBridge.invoke) {
document.addEventListener('WeixinJSBridgeReady', miniProgramHandleInit, false);
... ...
... ... @@ -5,7 +5,7 @@
width: 100%;
overflow-x: scroll;
white-space: nowrap;
height: 48px;
height: 58px;
.tab-item {
background: #ef8e88;
... ... @@ -47,10 +47,10 @@
.out-product-list {
height: 248px;
overflow: hidden;
margin-top: 15px;
}
.product-list {
margin-top: 15px;
overflow-x: scroll;
white-space: nowrap;
height: 258px;
... ... @@ -89,11 +89,20 @@
.seckill-status {
height: 28px;
color: #fff;
background-size: contain;
background-repeat: no-repeat;
padding-left: 7px;
box-sizing: border-box;
}
.status-0 {
background-image: url("img/activity/seckill/seckill-0.png");
}
.price {
display: inline-block;
font-size: 12px;
float: left;
width: 50%;
}
.market-price {
... ... @@ -101,6 +110,40 @@
transform: scale(0.9);
display: inline-block;
}
.status-type {
width: 50%;
text-align: center;
display: inline-block;
border: none;
}
}
}
.less-than-3 {
height: 280px;
.product-list {
height: 280px;
}
.product {
width: 192px;
margin-right: 7px;
&:last-child {
margin-right: 0;
}
.img-box {
width: 192px;
height: 244px;
}
.seckill-status {
height: 36px;
line-height: 36px;
}
}
}
}
... ...