cart style & invalid goods

@@ -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 {
+    .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,12 +2,15 @@
     {{# goods}}
         {{> cart/good}}
     {{/ goods}}
+</div>
 
+{{#if notValidGoods}}
+    <div class="invalid-goods">
         {{# notValidGoods}}
            {{> cart/good}}
         {{/ notValidGoods}}
-
-</div>
+    </div>
+{{/if}}
 
 {{#if freebieOrAdvanceBuy}}
     <ul class="freebie-and-advance-buy">

@@ -19,6 +19,7 @@
         {{/if}}
 
         <div class="deps show">
+            <div class="fixed-height">
                 <a href="{{link}}" class="name row">{{name}}</a>
                 <span class="count">
                     ×{{count}}
@@ -37,33 +38,32 @@
                     {{/if}}
 
                 </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>
+            <p class="la-tag row clearfix">
                 {{#if lowStocks}}
-                <p class="row">
                     <span class="low-stocks">
                         库存不足
                     </span>
-                </p>
                 {{/if}}
                 {{#if appearDate}}
-                <p class="row">
                     <span class="appear-date">
                         上市期:{{appearDate}}
                     </span>
-                </p>
                 {{/if}}
+            </p>
         </div>
     </div>
 </div>