Merge branch 'fix/cart' into 'feature/cart'

购物车样式修改

1. 新增实效、赠品、加价购标签
2. 订购数字位置调整
3. 整体样式优化

See merge request !34

@@ -7,6 +7,7 @@
         position: absolute;
         top: 50%;
         margin-top: -14rem / $pxConvertRem;
+        margin-left: 20rem / $pxConvertRem;
         font-size: 28rem / $pxConvertRem;
         color: #f0f0f0;
 
@@ -15,9 +16,40 @@
         }
     }
 
+    .few-tag{
+        width: 132rem / $pxConvertRem;
+        position: absolute;
+        left: 100rem / $pxConvertRem;
+        text-align: center;
+        top: 75%;
+        color: #fff;
+    }
+
+    .gift-tag {
+        background-color: #88BE51;
+    }
+
+    .plus-tag {
+        background-color: #FC1264;
+    }
+
+    .few-tag-expire {
+        position: absolute;
+        top: 40%;
+        left: 20rem / $pxConvertRem;
+        background-color: #7f7f7f;
+        display: inline-block;
+        color: #fff;
+        border-radius: 12rem / $pxConvertRem;
+        padding: 4rem / $pxConvertRem;
+        font-size: 20rem / $pxConvertRem;
+        width: 48rem / $pxConvertRem;
+        text-align: center;
+    }
+
     .info {
         float: left;
-        margin-left: 30rem / $pxConvertRem;
+        margin-left: 60rem / $pxConvertRem;
         padding: 16rem / $pxConvertRem 0;
         padding-right: 20rem / $pxConvertRem;
     }
@@ -32,13 +64,18 @@
 
     .deps {
         margin-left: 173rem / $pxConvertRem;
-        padding-bottom: 60rem / $pxConvertRem;
+        padding-bottom: 72rem / $pxConvertRem;
         border-bottom: 1px solid #e0e0e0;
+        width: 380rem / $pxConvertRem;
+        position: relative;
+        min-height: 140rem / $pxConvertRem;
     }
 
     .name {
         font-size: 28rem / $pxConvertRem;
         color: #5a5a5a;
+        width: 80%;
+        display: inline-block;
     }
 
     .row:nth-child(2) {
@@ -71,9 +108,13 @@
     }
 
     .count {
-        font-size: 20rem / $pxConvertRem;
+        font-size: 32rem / $pxConvertRem;
         color: #999;
-        margin-left: 22rem / $pxConvertRem;
+        //margin-left: 22rem / $pxConvertRem;
+        display: inline-block;
+        width: 19%;
+        position: absolute;
+        text-align: center;
     }
 
     .sold-out, .low-stocks {
@@ -181,15 +222,15 @@
                     font-size: 40rem / $pxConvertRem;
                     line-height: 60rem / $pxConvertRem;
                     text-align: center;
-                    
+
                 }
                 &:last-child {
                     span{
                         width: 168rem / $pxConvertRem;
                         overflow: hidden;
                         font-size: 48em / $pxConvertRem;
-                        text-overflow:ellipsis; 
-                        white-space:nowrap; 
+                        text-overflow:ellipsis;
+                        white-space:nowrap;
                     }
                 }
             }
@@ -205,7 +246,6 @@
             top: 20rem / $pxConvertRem;;
             font-size: 52em / $pxConvertRem;
         }
-
     }
 }
 

 <div class="shopping-cart-good clearfix" data-id={{id}}>
-    <span class="checkbox icon-cb-checked iconfont"></span>
-    <!--    {{#if isSoldOut}}
-<p class="">失效</p>
-        {{^}}
-        {{#if isGift}}
-        {{^}}
-<span class="checkbox icon-cb-checked iconfont"></span>
-        {{/if}}
+    {{#if isSoldOut}}
+        <span class="few-tag-expire">失效</span>
+    {{^}}
+        <span class="checkbox icon-cb-checked iconfont"></span>
+    {{/if}}
 
-        {{/if}}-->
     <div class="info">
         <img class="thumb lazy" data-original={{thumb}}>
-        <!--
-         <a class="" href="{{url}}">
-            <img class="thumb lazy" data-original="{{thumb}}">
-        </a>
         {{#if isAdvanceBuy}}
-            <p class="few-tag">加价购</p>
+            <p class="few-tag plus-tag">加价购</p>
         {{^}}
             {{#if isGift}}
-            <p class="few-tag">赠品</p>
+            <p class="few-tag gift-tag">赠品</p>
             {{/if}}
         {{/if}}
-        {{#if isSoldOut}}
-        <p class="few-tag">失效</p>
-        {{/if}}
-
-        -->
+        </a>
 
         <div class="deps show">
             <p class="name row">{{name}}</p>
+            <span class="count">
+                ×{{count}}
+            </span>
             <p class="row">
                 {{#if color}}
                     <span class="color">
@@ -48,9 +39,7 @@
                 <span class="price">
                     ¥{{price}}
                 </span>
-                <span class="count">
-                    ×{{count}}
-                </span>
+
                 {{#if soldOut}}
                     <span class="sold-out">
                         已售罄