cart style & invalid goods

@@ -54,6 +54,10 @@
         padding-right: 20rem / $pxConvertRem;
         padding-right: 20rem / $pxConvertRem;
     }
     }
 
 
+    .fixed-height {
+        height: 2.7rem;
+    }
+
     .thumb {
     .thumb {
         float: left;
         float: left;
         width: 180rem / $pxConvertRem;
         width: 180rem / $pxConvertRem;
@@ -65,54 +69,49 @@
     .deps {
     .deps {
         position: relative;
         position: relative;
         width: 380rem / $pxConvertRem;
         width: 380rem / $pxConvertRem;
-        height: 5.3rem;
         margin-left: 4.7rem;
         margin-left: 4.7rem;
         border-bottom: 1px solid #e0e0e0;
         border-bottom: 1px solid #e0e0e0;
-        padding-top: 0.5rem;
+        padding: 0.5rem 0;
     }
     }
 
 
     .name {
     .name {
-        font-size: 18px;
-        color: #5a5a5a;
-        width: 80%;
         display: inline-block;
         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 {
     .color, .size {
-        font-size: 16px;
+        font-size: 0.6rem;
         color: #b6b6b6;
         color: #b6b6b6;
     }
     }
 
 
     .appear-date {
     .appear-date {
+        float: left;
         color: $cartRed;
         color: $cartRed;
         display: block;
         display: block;
-        margin-top: 4rem / $pxConvertRem;
+        font-size: 0.5rem;
     }
     }
 
 
     .price {
     .price {
-        font-size: 16px;
+        font-size: 0.6rem;
         color: $cartRed;
         color: $cartRed;
     }
     }
 
 
     .count {
     .count {
         font-size: 32rem / $pxConvertRem;
         font-size: 32rem / $pxConvertRem;
         color: #999;
         color: #999;
-        //margin-left: 22rem / $pxConvertRem;
         display: inline-block;
         display: inline-block;
         width: 19%;
         width: 19%;
         position: absolute;
         position: absolute;
         text-align: center;
         text-align: center;
     }
     }
 
 
-    .sold-out, .low-stocks {
+    .low-stocks {
         display: inline-block;
         display: inline-block;
         width: 100rem / $pxConvertRem;
         width: 100rem / $pxConvertRem;
         height: 30rem / $pxConvertRem;
         height: 30rem / $pxConvertRem;
@@ -122,20 +121,31 @@
         color: #fff;
         color: #fff;
         text-align: center;
         text-align: center;
         float: right;
         float: right;
-        margin-top: 20rem / $pxConvertRem;
         margin-right: 16rem / $pxConvertRem;
         margin-right: 16rem / $pxConvertRem;
-        border-radius: 20rem / $pxConvertRem;
         padding: 4rem / $pxConvertRem;
         padding: 4rem / $pxConvertRem;
-    }
 
 
-    .sold-out {
-        background: #999;
+        border-radius: 20rem / $pxConvertRem;
     }
     }
 
 
     .low-stocks {
     .low-stocks {
         background: #7f7f7f;
         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-del,
     .icon-edit {
     .icon-edit {
         position: absolute;
         position: absolute;

@@ -7,6 +7,11 @@
 .shopping-cart-page {
 .shopping-cart-page {
     padding-bottom: 120rem / $pxConvertRem;
     padding-bottom: 120rem / $pxConvertRem;
     overflow-x: hidden;
     overflow-x: hidden;
+    background: #f0f0f0;
+
+    .cart-content > * {
+        background: #fff;
+    }
 
 
     .cart-nav {
     .cart-nav {
         color: #c6c6c6;
         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 {
     .freebie-and-advance-buy {
         padding: 20rem / $pxConvertRem;
         padding: 20rem / $pxConvertRem;
         font-size: 24rem / $pxConvertRem;
         font-size: 24rem / $pxConvertRem;
-        //border-bottom: 1px solid #e0e0e0;
+        border-top: 1px solid #e0e0e0;
 
 
         > li {
         > li {
             box-sizing: border-box;
             box-sizing: border-box;

@@ -2,13 +2,16 @@
     {{# goods}}
     {{# goods}}
         {{> cart/good}}
         {{> cart/good}}
     {{/ goods}}
     {{/ goods}}
-
-    {{# notValidGoods}}
-       {{> cart/good}}
-    {{/ notValidGoods}}
-
 </div>
 </div>
 
 
+{{#if notValidGoods}}
+    <div class="invalid-goods">
+        {{# notValidGoods}}
+           {{> cart/good}}
+        {{/ notValidGoods}}
+    </div>
+{{/if}}
+
 {{#if freebieOrAdvanceBuy}}
 {{#if freebieOrAdvanceBuy}}
     <ul class="freebie-and-advance-buy">
     <ul class="freebie-and-advance-buy">
         {{# freebie}}
         {{# freebie}}

@@ -19,51 +19,51 @@
         {{/if}}
         {{/if}}
 
 
         <div class="deps show">
         <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">
             <p class="row">
                 <span class="price">
                 <span class="price">
                     ¥{{price}}
                     ¥{{price}}
                 </span>
                 </span>
 
 
-                {{#if soldOut}}
-                    <span class="sold-out">
-                        已售罄
+                {{#if vip}}
+                    <span class="vip">
+                        VIP
                     </span>
                     </span>
                 {{/if}}
                 {{/if}}
 
 
                 <span class="iconfont icon-del" data-count="{{count}}">&#xe621;</span>
                 <span class="iconfont icon-del" data-count="{{count}}">&#xe621;</span>
             </p>
             </p>
-            {{#if lowStocks}}
-                <p class="row">
+            <p class="la-tag row clearfix">
+                {{#if lowStocks}}
                     <span class="low-stocks">
                     <span class="low-stocks">
                         库存不足
                         库存不足
                     </span>
                     </span>
-                </p>
-            {{/if}}
-            {{#if appearDate}}
-                <p class="row">
+                {{/if}}
+                {{#if appearDate}}
                     <span class="appear-date">
                     <span class="appear-date">
                         上市期:{{appearDate}}
                         上市期:{{appearDate}}
                     </span>
                     </span>
-                </p>
-            {{/if}}
+                {{/if}}
+            </p>
         </div>
         </div>
     </div>
     </div>
 </div>
 </div>