购物车促销

src/main/resources/static/css/base/base.pc.css

@@ -264,13 +264,49 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .priceTag .tag{display:inline-block;height:24px;line-height:24px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer;background:#fff;padding:0 24px 0 10px;position:relative;font-style:normal}
 .priceTag .tag:before{width:24px;height:24px;background-position:-88px 3px;position:absolute;right:0;top:0}
 .priceTag .tag.on:before{background-position:-117px 3px}
-.priceTag .ladder{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:25px;z-index:9;transition:all .8s;display:none}
+.priceTag .ladder,.priceTag .promotion{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:28px;z-index:9;transition:all .8s;display:none}
 .priceTag .ladder>span{padding:0 20px 20px;}
 .priceTag .ladder em{white-space:nowrap}
 .priceTag .ladder i{font-style:normal;display:inline-block;width:120px;text-align:center}
 .priceTag .ladder .t{color:#627386}
 .priceTag .ladder .p{color:#f94b4b}
 .priceTag .ladder .close{background:#E15616;color:#fff;border-radius:2px;cursor:pointer;display:inline-block;padding:0 20px;height:30px;line-height:30px}
+.priceTag .promotion{
+    text-align: left;
+    font-size: 14px;
+    line-height: 30px;
+    padding: 8px 15px;
+    display: block;
+    width: 320px;
+}
+.priceTag .promotion p>em{
+    color:#E15616;
+    font-style: normal;
+}
+.priceTag .promotion .p{
+    display: block;
+    height:40px;
+    padding:10px 0 10px 50px;
+    position: relative;
+    line-height: 20px;
+}
+.priceTag .promotion .p img{
+    width:40px;
+    position: absolute;
+    left:0;
+    top:10px;
+}
+.priceTag .promotion .p span{
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+
+
+
+
 
 
 

src/main/resources/static/css/shopping/cart.css

@@ -63,8 +63,8 @@ li{list-style:none}
     .listWrap .del:hover{color:#f94b4b}
     .listWrap .del:hover .tips{opacity:1}
     .listWrap .price{position:relative;display:inline-block;line-height:24px;}
-    .listWrap .price em{font-style:normal;font-size:16px;display:inline-block;width:100%;}
-    .listWrap .price del{font-size:16px;display:inline-block;width:100%;}
+    .listWrap .price>em{font-style:normal;font-size:16px;display:inline-block;width:100%;}
+    .listWrap .price>del{font-size:16px;display:inline-block;width:100%;}
     .invalidTit{height:44px;line-height:44px;padding-top:16px;font-size:16px}
     .invalidTit .tit{color:#22272e;float:left}
     .invalidTit .delAll{color:#e15616;float:right;cursor:pointer;}

src/main/resources/templates/shopping/cart.html

@@ -68,7 +68,7 @@
                         </a>
                     </div>
                     <div class="c4">
-                        <span class="price">
+                        <div class="price">
                             <template v-if="cart.actStatus==1 && cart.promotions && cart.promotions.type==1 && cart.promotions.mode==1">
                                 <del v-text="'¥'+toFloat(cart.originalPrice)"></del>
                             </template>
@@ -76,17 +76,31 @@
                                 <em v-text="'¥'+toFloat(cart.price)"></em>
                             </template>
                             <!-- 促销活动 -->
-                            <span v-if="cart.actStatus==1 && cart.promotions" class="priceTag">
+                            <div v-if="cart.actStatus==1 && cart.promotions" class="priceTag">
                                 <i v-if="cart.promotions.type==1 && cart.promotions.mode==1" class="tag icon mIcon" v-text="cart.promotions.name+'：¥'+toFloat(cart.price)"></i>
                                 <i v-else class="tag icon mIcon" v-text="cart.promotions?cart.promotions.name:''"></i>
-                                <span class="promotion mFixed">
-
-                                </span>
-                            </span>
+                                <div class="promotion mFixed">
+                                    <p class="t"><em>全店铺满减：满1000.00，减500.00</em></p>
+                                    <p>促销时间：2020-06-12 ~ 2020-09-30</p>
+                                    <p>赠品：</p>
+                                    <p>
+                                        <a class="p" href="">
+                                            <img src="https://img.caimei365.com/group1/M00/00/FD/Cmis21sxr2CAA8qRAAHtVLDfGCs96.JPEG">
+                                            <span>夜猫子1一剪时光SOD金茯苓保湿塑颜面膜</span>
+                                            <span>× 1</span>
+                                        </a>
+                                        <a class="p" href="">
+                                            <img src="https://img.caimei365.com/group1/M00/00/FD/Cmis21sxr2CAA8qRAAHtVLDfGCs96.JPEG">
+                                            <span>夜猫子1一剪时光SOD金茯苓保湿塑颜面膜</span>
+                                            <span>× 1</span>
+                                        </a>
+                                    </p>
+                                </div>
+                            </div>
                             <!-- 阶梯价 -->
-                            <span v-else-if="cart.ladderFlag" class="priceTag">
+                            <div v-else-if="cart.ladderFlag" class="priceTag">
                                 <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
-                                <span class="ladder mFixed">
+                                <div class="ladder mFixed">
                                     <span>
                                         <em class="t"><i>价格</i><i>起订量</i></em>
                                         <em v-for="l in cart.ladderPrices">
@@ -95,9 +109,9 @@
                                         </em>
                                         <em @click="hideThisLadder($event)" class="close">了解</em>
                                     </span>
-                                </span>
-                            </span>
-                        </span>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     <div class="c5">
                         <span class="number">
@@ -108,7 +122,7 @@
                         <input type="hidden" :value="cart.step"></div>
                         <div v-if="isPC" class="c6"><span v-text="'¥'+toFloat(cart.price*cart.number)"></span></div>
                         <div v-if="isPC" class="c7"><span class="del" @click="deleteCart(cart.id)">×<em class="tips">删除</em></span></div>
-                </div>
+                    </div>
                 <div class="supplierBtn">
                     <span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span>
                 </div>