Authored by 王水玲

活动模版秒杀 价格背景色添加

... ... @@ -10,7 +10,7 @@
</div>
</div>
<div class="product-info">
<div class="seckill-status {{#if over}}status-over{{else if wait}}status-wait{{else}}status-go{{/if}}">
<div class="seckill-status">
<div class="price"
style="{{#if ../productStyle.priceFontColor}}color:{{../productStyle.priceFontColor}};{{/if}}">
<span class="seckill-price">¥{{secKillPrice}}</span>
... ... @@ -25,6 +25,8 @@
立即抢
{{/if}}
</div>
<div class="price-bg" style="{{#if ../productStyle.priceBgColor}}background:{{../productStyle.priceBgColor}};{{/if}}"></div>
<div class="status-bg {{#if over}}status-over{{else if wait}}status-wait{{else}}status-go{{/if}}"></div>
</div>
</div>
</a>
... ...

520 Bytes | W: | H:

448 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

628 Bytes | W: | H:

450 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

480 Bytes | W: | H:

449 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -88,12 +88,31 @@
width: 160px;
height: 30px;
color: #fff;
background-size: cover;
background-repeat: no-repeat;
padding-left: 5px;
box-sizing: border-box;
overflow: hidden;
line-height: 31px;
position: relative;
}
.status-bg {
width: 101px;
height: 30px;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.price-bg {
width: 100%;
height: 29px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.status-over {
... ... @@ -113,6 +132,8 @@
float: left;
width: 83px;
text-align: center;
position: relative;
z-index: 3;
}
.seckill-price {
... ... @@ -136,6 +157,7 @@
left: -2px;
font-weight: bold;
line-height: 30px;
z-index: 3;
}
}
}
... ... @@ -166,6 +188,16 @@
line-height: 37px;
}
.status-bg {
height: 37px;
width: 101px;
}
.price-bg {
width: 100%;
height: 34px;
}
.price {
width: 105px;
font-size: 20px;
... ...