wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit b2be84d0f4504e23d2e9596676f34c738287562c 1 parent 9c67f7c3

cart style & invalid goods

Inline Side-by-side
Showing 4 changed files with 78 additions and 54 deletions
... ... @@ -54,6 +54,10 @@
padding-right: 20rem / $pxConvertRem;
}
.fixed-height {
height: 2.7rem;
}
.thumb {
float: left;
width: 180rem / $pxConvertRem;
... ... @@ -65,54 +69,49 @@
.deps {
position: relative;
width: 380rem / $pxConvertRem;
height: 5.3rem;
margin-left: 4.7rem;
border-bottom: 1px solid #e0e0e0;
padding-top: 0.5rem;
padding: 0.5rem 0;
}
.name {
font-size: 18px;
color: #5a5a5a;
width: 80%;
display: inline-block;
width: 80%;
color: #5a5a5a;
font-size: 0.6rem;
}
.color-size-row {
margin: 0.2rem 0;
> span {
margin-right: 15rem / $pxConvertRem;
}
.color-size-row > span {
margin-right: 15rem / $pxConvertRem;
}
.color, .size {
font-size: 16px;
font-size: 0.6rem;
color: #b6b6b6;
}
.appear-date {
float: left;
color: $cartRed;
display: block;
margin-top: 4rem / $pxConvertRem;
font-size: 0.5rem;
}
.price {
font-size: 16px;
font-size: 0.6rem;
color: $cartRed;
}
.count {
font-size: 32rem / $pxConvertRem;
color: #999;
//margin-left: 22rem / $pxConvertRem;
display: inline-block;
width: 19%;
position: absolute;
text-align: center;
}
.sold-out, .low-stocks {
.low-stocks {
display: inline-block;
width: 100rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
... ... @@ -122,20 +121,31 @@
color: #fff;
text-align: center;
float: right;
margin-top: 20rem / $pxConvertRem;
margin-right: 16rem / $pxConvertRem;
border-radius: 20rem / $pxConvertRem;
padding: 4rem / $pxConvertRem;
}
.sold-out {
background: #999;
border-radius: 20rem / $pxConvertRem;
}
.low-stocks {
background: #7f7f7f;
}
.vip {
display: inline-block;
color: #fff;
background: #d1021c;
border: 1px solid #9d0000;
@include border-radius(0.5rem);
padding: 4rem / $pxConvertRem 0.5rem;
margin-left: 0.2rem;
}
.la-tag {
margin-top: 0.3rem;
min-height: 1rem;
}
.icon-del,
.icon-edit {
position: absolute;
... ...
... ... @@ -7,6 +7,11 @@
.shopping-cart-page {
padding-bottom: 120rem / $pxConvertRem;
overflow-x: hidden;
background: #f0f0f0;
.cart-content > * {
background: #fff;
}
.cart-nav {
color: #c6c6c6;
... ... @@ -117,10 +122,16 @@
}
}
.invalid-goods {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin: 0.75rem 0;
}
.freebie-and-advance-buy {
padding: 20rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
//border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
> li {
box-sizing: border-box;
... ...
... ... @@ -2,13 +2,16 @@
{{# goods}}
{{> cart/good}}
{{/ goods}}
{{# notValidGoods}}
{{> cart/good}}
{{/ notValidGoods}}
</div>
{{#if notValidGoods}}
<div class="invalid-goods">
{{# notValidGoods}}
{{> cart/good}}
{{/ notValidGoods}}
</div>
{{/if}}
{{#if freebieOrAdvanceBuy}}
<ul class="freebie-and-advance-buy">
{{# freebie}}
... ...
... ... @@ -19,51 +19,51 @@
{{/if}}
<div class="deps show">
<a href="{{link}}" class="name row">{{name}}</a>
<span class="count">
×{{count}}
</span>
<p class="row color-size-row">
{{#if color}}
<span class="color">
颜色:{{color}}
</span>
{{/if}}
<div class="fixed-height">
<a href="{{link}}" class="name row">{{name}}</a>
<span class="count">
×{{count}}
</span>
<p class="row color-size-row">
{{#if color}}
<span class="color">
颜色:{{color}}
</span>
{{/if}}
{{#if size}}
<span class="size">
尺码:{{size}}
</span>
{{/if}}
{{#if size}}
<span class="size">
尺码:{{size}}
</span>
{{/if}}
</p>
</p>
</div>
<p class="row">
<span class="price">
¥{{price}}
</span>
{{#if soldOut}}
<span class="sold-out">
已售罄
{{#if vip}}
<span class="vip">
VIP
</span>
{{/if}}
<span class="iconfont icon-del" data-count="{{count}}">&#xe621;</span>
</p>
{{#if lowStocks}}
<p class="row">
<p class="la-tag row clearfix">
{{#if lowStocks}}
<span class="low-stocks">
库存不足
</span>
</p>
{{/if}}
{{#if appearDate}}
<p class="row">
{{/if}}
{{#if appearDate}}
<span class="appear-date">
上市期:{{appearDate}}
</span>
</p>
{{/if}}
{{/if}}
</p>
</div>
</div>
</div>
... ...