选择口味

app/index/controller/Cart.php

@@ -54,15 +54,22 @@ class Cart extends Controller
             $goodsNum = $item['goods_num'];
             $flavors = json_decode($item['remark_for_one'], true);
             $flavorsAll = $flavors;
-            if (!empty($flavorsAll)){
+            $flavorsArr = [];
+            foreach ($flavorsAll as $k => $v){
+                if (!empty($v)){
+                    $temp1 = bcmul(strval($v), strval($goodsNum), 0);
+                    $flavorsArr[$k] = $temp1;
+                }
+            }
+/*            if (!empty($flavorsAll)){
                 array_walk($flavorsAll, function (&$item, $key) use ($goodsNum) {
                     $item = bcmul(strval($item), strval($goodsNum), 0);
                 });
             }else{
                 $flavorsAll = [];
-            }
+            }*/
 
-            $item['flavors_arr'] = $flavorsAll;
+            $item['flavors_arr'] = $flavorsArr;
         }
 //        pre($list->toArray());
 //        die;

app/index/controller/Index.php

@@ -147,7 +147,7 @@ class Index extends Controller
         $model = new CommentModel;
         $total = $model->rowsTotal($goodsId);
 
-        //$flavors = ['STRAWBERRY-MANGO','BLUE RAZZ-ICE','WATERMELON','GRAPE','KIWI-PASSION-FRUIT-GUAVA','JUICY-PEACH','BLUEBERRY-ICE'];
+        $flavors = ['STRAWBERRY-MANGO', 'BLUE RAZZ-ICE', 'WATERMELON', 'GRAPE', 'KIWI-PASSION-FRUIT-GUAVA', 'JUICY-PEACH', 'BLUEBERRY-ICE'];
 
 
         return view('productDetails', ['goods' => $goods, 'comment_total' => $total, 'key' => $key]);
@@ -202,7 +202,7 @@ class Index extends Controller
 
         $Usps = new Usps();
         // 请求查询接口
-        $res =  $Usps->getItdidaToken();
+        $res = $Usps->getItdidaToken();
         dd($res);
     }
 }

app/index/view/cart/shoppingCart.html

@@ -24,6 +24,11 @@
                         <div class="lfBox">
                             <h2 class="productTitle">{$cart['goods']['goods_name']}</h2>
                             <p class="specs">specs</p>
+                            <p class="tasteBox">
+                                {foreach $cart['flavors_arr'] as $key=>$flavor}
+                                <span>| {$key} × {$flavor}</span>
+                                {/foreach}
+                            </p>
                         </div>
                         <div class="nunberBox">
                             <p class="numberReduce">-</p>
@@ -567,7 +572,7 @@
                 //window.open(data.payment.approval_link, "_blank");
                 let left = (window.innerWidth - 600) / 2;
                 window.open(data.payment.approval_link, "PayPal",
-                'height=300,width=600,top=300,left='+left+',toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no');
+                    'height=300,width=600,top=300,left=' + left + ',toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no');
                 var interId = setInterval(function () {
                     fetchOrder(data.orderId, interId);
                 }, 3000)

app/index/view/index/productDetails.html

@@ -38,6 +38,81 @@
                     </div>
                 </div>
                 <div>
+                    <!-- 口味 -->
+                    <!-- 新增开始 -->
+                    <div class="tasteContainer">
+                        <div class="tasteItem" data-id="1">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="STRAWBERRY-MANGO-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">STRAWBERRY-MANGO</p>
+                        </div>
+                        <div class="tasteItem" data-id="2">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="BLUE-RAZZ-ICE-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">BLUE RAZZ-ICE</p>
+                        </div>
+                        <div class="tasteItem" data-id="3">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="WATERMELON-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">WATERMELON</p>
+                        </div>
+                        <div class="tasteItem" data-id="4">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="GRAPE-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">GRAPE</p>
+                        </div>
+                        <div class="tasteItem" data-id="5">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="KIWI-PASSION-FRUIT-GUAVA-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">KIWI-PASSION-FRUIT-GUAVA</p>
+                        </div>
+                        <div class="tasteItem" data-id="6">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="JUICY-PEACH-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">JUICY-PEACH</p>
+                        </div>
+                        <div class="tasteItem" data-id="7">
+                            <div class="tasteNumberBox">
+                                <div class="tasteReduce">-</div>
+                                <input class="tasteInput" id="BLUEBERRY-ICE-NUM" value="0" type="text">
+                                <div class="tasteAdd">+</div>
+                            </div>
+                            <img class="tasteImg lazy" src="/assets/index/asstes/icon/transparent.png"
+                                 data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
+                            <p class="tasteTitle">BLUEBERRY-ICE</p>
+                        </div>
+                    </div>
+                    <!-- 新增结束 -->
                     <!-- 数量 -->
                     <div class="productNContainer">
                         <div class="productNumberBox">
@@ -149,6 +224,9 @@
         if (key != "") {
             localStorage.setItem(VAPES_SHARE_KEY, key);
         }
+        //
+        var needFlavorCnt = {$goods.selling_point};
+        needFlavorCnt = parseInt(needFlavorCnt)
 
         var flavors = {
             'STRAWBERRY-MANGO': 0,
@@ -161,6 +239,7 @@
         };
         flavors["STRAWBERRY-MANGO"] = 2;
 
+        console.log(needFlavorCnt);
         console.log(key);
 
         //富文本处理
@@ -247,7 +326,8 @@
         });
 
         // 输入框禁止为空小于等于0
-        $('#numberInput, #fPrNumberInput').change(function () {
+        //$('#numberInput, #fPrNumberInput').change(function () {
+        $('#numberInput, #fPrNumberInput,.tasteInput').change(function () {
             var inputElement = $(this);
             var currentValue = parseInt(inputElement.val());
             if (currentValue < 1 || isNaN(currentValue)) {
@@ -259,6 +339,51 @@
         //上面的添加按钮
         $(".addToCart").on(tap, function () {
             const number = $('#numberInput').val();
+            // 新增开始
+            var totalValue = 0;
+
+            var STRAWBERRY_MANGO_Num = parseInt($('#STRAWBERRY-MANGO-NUM').val());
+            flavors["STRAWBERRY-MANGO"] = STRAWBERRY_MANGO_Num
+            totalValue += STRAWBERRY_MANGO_Num;
+
+            var BLUE_RAZZ_ICE_Num = parseInt($('#BLUE-RAZZ-ICE-NUM').val());
+            totalValue += BLUE_RAZZ_ICE_Num;
+            flavors["BLUE-RAZZ-ICE"] = BLUE_RAZZ_ICE_Num
+
+            var WATERMELON_Num = parseInt($('#WATERMELON-NUM').val());
+            totalValue += WATERMELON_Num;
+            flavors["WATERMELON"] = WATERMELON_Num
+
+            var KIWI_PASSION_Num = parseInt($('#KIWI-PASSION-FRUIT-GUAVA-NUM').val());
+            totalValue += KIWI_PASSION_Num;
+            flavors["KIWI-PASSION-FRUIT-GUAVA"] = KIWI_PASSION_Num
+
+            var JUICY_PEACH_Num = parseInt($('#JUICY-PEACH-NUM').val());
+            totalValue += JUICY_PEACH_Num;
+            flavors["JUICY-PEACH"] = JUICY_PEACH_Num
+
+            var GRAPE_Num = parseInt($('#GRAPE-NUM').val());
+            totalValue += GRAPE_Num;
+            flavors["GRAPE"] = GRAPE_Num
+
+            var BLUEBERRY_ICE_Num = parseInt($('#BLUEBERRY-ICE-NUM').val());
+            totalValue += BLUEBERRY_ICE_Num;
+            flavors["BLUEBERRY-ICE"] = BLUEBERRY_ICE_Num
+
+            /*            $(".tasteItem").each(function () {
+                            var id = $(this).data("id");
+                            var value = parseInt($(this).find(".tasteInput").val()) || 0;
+                            totalValue += value;
+                            console.log("ID:", id, "Value:", value);
+                        });*/
+            console.log("Total Value:", totalValue);
+            console.log("flavors Value:", flavors);
+
+            if (totalValue !== needFlavorCnt  || totalValue != needFlavorCnt){
+                showToast('You should choose '+ needFlavorCnt +' flavor first')
+                return
+            }
+            // 新增结束
             addCart(number, flavors)
         });
 
@@ -399,6 +524,23 @@
                 }
             });
         }
+        // 新增开始
+        //口味数量减少
+        $(".tasteReduce").on(tap, function () {
+            var inputElement = $(this).siblings('.tasteInput');
+            var currentValue = parseInt(inputElement.val()) || 0;
+            if (currentValue > 1) {
+                inputElement.val(currentValue - 1);
+            }
+        });
+
+        //口味数量增加
+        $(".tasteAdd").on(tap, function () {
+            var inputElement = $(this).siblings('.tasteInput');
+            var currentValue = parseInt(inputElement.val()) || 0;
+            inputElement.val(currentValue + 1);
+        });
+        // 新增结束
     });
 </script>
 

public/assets/index/css/productDetails.css

@@ -119,6 +119,61 @@ body{
     padding-right: .02rem;
   }
 
+/* 新增开始 */
+.tasteContainer{
+  padding-top: .32rem;
+}
+.tasteItem{
+  display: flex;
+  align-items: center;
+  gap: .16rem;
+  margin-bottom: .12rem;
+}
+.tasteInput{
+  height: 100%;
+  flex: 1;
+  font-size: .16rem;
+  border: none;
+  width: .3rem;
+  text-align: center;
+}
+.tasteNumberBox{
+  display: flex;
+  align-items: center;
+  height: .4rem;
+  box-sizing: border-box;
+  border: .01rem solid rgba(0, 0, 0, .1);
+  cursor: pointer;
+}
+.tasteReduce,.tasteAdd{
+  height: 100%;
+  width: .28rem;
+  border-right: .01rem solid rgba(0, 0, 0, .1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: .18rem;
+}
+.tasteAdd{
+  border-right: none;
+  border-left: .01rem solid rgba(0, 0, 0, .1);
+}
+.tasteImg{
+  width: .3rem;
+  height: .3rem;
+  border-radius: .02rem;
+  object-fit: cover;
+}
+.tasteTitle{
+  font-size: .14rem;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 3rem;
+}
+/* 新增结束 */
+
   .productNContainer{
     display: flex;
     align-items: center;
@@ -608,6 +663,28 @@ body{
         height: .6rem;
         font-size: .2rem;
     }
+    /* 新增开始 */
+    .tasteNumberBox{
+      height: .5rem;
+    }
+    .tasteInput{
+      width: .5rem;
+      font-size: .2rem;
+    }
+    .tasteReduce,.tasteAdd{
+      width: .5rem;
+      font-size: .2rem;
+    }
+    .tasteImg{
+      width: .5rem;
+      height: .5rem;
+    }
+    .tasteTitle{
+      max-width: 4rem;
+      font-size: .18rem;
+    }
+    /* 新增结束 */
+
   }
   @media (max-width: 750px) {
     .prViewImgBox{
@@ -636,6 +713,26 @@ body{
       padding-bottom: .24rem;
       margin-bottom: .24rem;
     }
+    /* 新增开始 */
+    .tasteNumberBox{
+      height: .6rem;
+    }
+    .tasteInput{
+      width: .6rem;
+      font-size: .22rem;
+    }
+    .tasteReduce,.tasteAdd{
+      width: .6rem;
+      font-size: .22rem;
+    }
+    .tasteImg{
+      width: .6rem;
+      height: .6rem;
+    }
+    .tasteTitle{
+      font-size: .2rem;
+    }
+    /* 新增结束 */
     #prevPage,#nextPage{
       font-size: .22rem;
       height: .52rem;

public/assets/index/css/shoppingCart.css

@@ -1,77 +1,92 @@
-body{
+body {
     /* background-color: #F8F8F8; */
 }
-#main{
+
+#main {
     padding: 0 .24rem;
 }
-.sectionContainer{
+
+.sectionContainer {
     display: flex;
     justify-content: center;
 }
-.elementorContainer{
-    max-width: 13.2rem; 
+
+.elementorContainer {
+    max-width: 13.2rem;
     flex: 1;
     -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box; 
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
-.pageContainer{
+
+.pageContainer {
     max-width: 18.8rem;
     margin: 0 auto;
     padding-bottom: 1rem;
 }
-.pageTitle{
+
+.pageTitle {
     color: #333;
     font-weight: bold;
     font-size: .34rem;
     padding-top: .6rem;
 }
-.pageDataBox{
+
+.pageDataBox {
     padding-top: .6rem;
     display: flex;
     justify-content: space-between;
 }
-.productConatiner{
+
+.productConatiner {
     flex: 1;
 }
-.productModelTitle{
+
+.productModelTitle {
     color: #333;
     font-size: .2rem;
     font-weight: bold;
     margin-bottom: .2rem;
 }
-.productList{
+
+.productList {
     border-top: .02rem solid rgba(0, 0, 0, .2);
     border-bottom: .02rem solid rgba(0, 0, 0, .2);
     padding-top: .36rem;
 }
-.productItem{
+
+.productItem {
     margin-bottom: .24rem;
     height: 1.4rem;
-    display: flex; 
+    display: flex;
     align-items: center;
     position: relative;
 }
-.productImgBox{
+
+.productImgBox {
     width: 1.4rem;
     height: 100%;
 }
-.productImgBox img{
+
+.productImgBox img {
     width: 100%;
     height: 100%;
 }
-.productInfo{
+
+.productInfo {
     padding-left: .22rem;
     flex: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
-.lfBox{
+
+.lfBox {
     flex: 1;
     padding-right: .12rem;
 }
-.lfBox .productTitle{
+
+.lfBox .productTitle {
     font-size: .24rem;
     font-weight: bold;
     color: #434343;
@@ -82,29 +97,43 @@ body{
     overflow: hidden;
     word-break: break-all;
 }
-.lfBox .specs{
+
+.lfBox .specs {
     font-size: .2rem;
     color: #999999;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.nunberBox{
+
+.tasteBox {
+    color: #999999;
+    padding-top: .06rem;
     display: flex;
-    align-items: center;   
+    gap: .04rem;
+    flex-wrap: wrap;
+    font-size: .12rem;
+}
+
+.nunberBox {
+    display: flex;
+    align-items: center;
     color: #666666;
 }
-.numberInput{
+
+.numberInput {
     font-size: .24rem;
     font-weight: bold;
 }
-.numberReduce,.numberAdd{
-    cursor: pointer;       
+
+.numberReduce, .numberAdd {
+    cursor: pointer;
     padding: .12rem .24rem;
     font-size: .24rem;
     vertical-align: middle;
 }
-.productPrice{
+
+.productPrice {
     color: #434343;
     font-weight: bold;
     font-size: .28rem;
@@ -112,18 +141,22 @@ body{
     text-align: center;
     word-break: break-all;
 }
-.productDelete{
+
+.productDelete {
     padding: 0 .36rem;
     cursor: pointer;
 }
-.productDelete img{
+
+.productDelete img {
     width: .24rem;
 }
-.windContainer{
+
+.windContainer {
     width: 4.8rem;
     margin-left: 1rem;
 }
-.windTBox{
+
+.windTBox {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -131,23 +164,28 @@ body{
     margin-bottom: .2rem;
     padding-right: .36rem;
 }
-.windTBox .lt{
+
+.windTBox .lt {
     flex: 1;
     color: #434343;
 }
-.windTBox .cartTotals{
+
+.windTBox .cartTotals {
     color: #666666;
 }
-.linkItem{
+
+.linkItem {
     border-top: .02rem solid rgba(0, 0, 0, .2);
     border-bottom: .02rem solid rgba(0, 0, 0, .2);
     padding: .24rem 0 .16rem 0;
 }
-.mbItem{
+
+.mbItem {
     padding: .12rem 0;
     margin-bottom: .4rem;
 }
-.windInfoBox{
+
+.windInfoBox {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -157,37 +195,44 @@ body{
     margin-bottom: .08rem;
     padding-right: .36rem;
 }
-.windInfoBox .key{
+
+.windInfoBox .key {
     flex: 1;
     word-break: break-all;
 }
-.keyItem{
+
+.keyItem {
     margin-bottom: .1rem;
 }
-.windInfoBox .val{
+
+.windInfoBox .val {
     padding-left: .12rem;
     word-break: break-all;
     max-width: 1.2rem;
 }
-.windInfoBox.freeshipping .key{
+
+.windInfoBox.freeshipping .key {
     color: rgba(79, 73, 222, 1);
 }
 
 /* new start------------------------ */
-#selectABox{
+#selectABox {
     display: none;
 }
-#selectAddress{
+
+#selectAddress {
     cursor: pointer;
     color: rgba(79, 73, 222, 1);
     padding: .04rem 0;
     margin-bottom: .08rem;
 }
-#addressListBox{
-    padding-bottom: .24rem;   
+
+#addressListBox {
+    padding-bottom: .24rem;
     display: none;
 }
-#addressList{
+
+#addressList {
     border: .02rem solid rgba(0, 0, 0, .05);
     padding: .08rem;
     border-radius: .08rem;
@@ -200,13 +245,15 @@ body{
 #addressList::-webkit-scrollbar {
     display: none;
 }
-.addressItem{
+
+.addressItem {
     display: flex;
     align-items: center;
     cursor: pointer;
     padding: .06rem 0;
 }
-.addressItem .iconBox{
+
+.addressItem .iconBox {
     font-size: 0;
     font-size: 0;
     display: flex;
@@ -216,24 +263,29 @@ body{
     height: .24rem;
     position: relative;
 }
-.addressItem .iconBox img{
+
+.addressItem .iconBox img {
     width: .2rem;
     height: .2rem;
     position: absolute;
     display: block;
 }
-.addressItem .iconBox img.sel{
+
+.addressItem .iconBox img.sel {
     width: .22rem;
     height: .22rem;
     display: none;
 }
-.addressItem.active .iconBox img.noSel{
+
+.addressItem.active .iconBox img.noSel {
     display: none;
 }
-.addressItem.active .iconBox img.sel{
+
+.addressItem.active .iconBox img.sel {
     display: block;
 }
-.itAddInfo{
+
+.itAddInfo {
     flex: 1;
     padding: 0 .12rem;
     font-size: .15rem;
@@ -241,19 +293,21 @@ body{
     word-break: break-all;
     line-height: 1.4;
 }
-.addressDelete{
+
+.addressDelete {
     color: rgba(79, 73, 222, 1);
     font-size: .14rem;
 }
 
-.selAddressButtonBox{
+.selAddressButtonBox {
     display: flex;
     align-items: center;
     gap: .16rem;
     justify-content: flex-end;
     padding-top: .24rem;
 }
-#selCancel,#selSave{
+
+#selCancel, #selSave {
     background-color: rgba(79, 73, 222, 1);
     color: #FFF;
     font-size: .15rem;
@@ -265,15 +319,17 @@ body{
     width: 1.2rem;
     cursor: pointer;
     -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box; 
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
-#selCancel{
+
+#selCancel {
     border: .02rem solid rgba(0, 0, 0, .2);
     background: transparent;
     color: #434343;
 }
-#deleteAddressModal{
+
+#deleteAddressModal {
     position: fixed;
     z-index: 999;
     top: 0;
@@ -283,7 +339,8 @@ body{
     background-color: rgba(0, 0, 0, .5);
     display: none;
 }
-#deleteAddressModal .deleteAddressBox{
+
+#deleteAddressModal .deleteAddressBox {
     border-radius: .06rem;
     overflow: hidden;
     margin: 25% auto 0 auto;
@@ -292,24 +349,28 @@ body{
     background-color: #fff;
     border-radius: .12rem;
 }
-.deteTips{
+
+.deteTips {
     font-size: .24rem;
     font-weight: bold;
     word-break: break-all;
     text-align: center;
     padding: .12rem 0;
     line-height: 1.5;
-} 
-.deteTips #daleteAddInfo{
+}
+
+.deteTips #daleteAddInfo {
     color: rgba(79, 73, 222, 1);
-}  
-.deteButtonBox{
+}
+
+.deteButtonBox {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: .24rem;
 }
-#cancelDelete,#confirmDelete{
+
+#cancelDelete, #confirmDelete {
     background-color: rgba(79, 73, 222, 1);
     color: #FFF;
     font-size: .2rem;
@@ -322,22 +383,25 @@ body{
     width: 1.3rem;
     cursor: pointer;
     -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box; 
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
-#cancelDelete{
+
+#cancelDelete {
     border: .02rem solid rgba(0, 0, 0, .2);
     background: transparent;
     color: #434343;
 }
+
 /* new end------------------------ */
 
 
-#changeAddress{
+#changeAddress {
     cursor: pointer;
     color: rgba(79, 73, 222, 1);
 }
-.totalBox{
+
+.totalBox {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -346,19 +410,22 @@ body{
     padding-top: .32rem;
     margin-bottom: .48rem;
 }
-.totalBox .totalT{
+
+.totalBox .totalT {
     color: #333333;
     flex: 1;
     word-break: break-all;
     font-weight: bold;
 }
-.totalBox .totalVal{
+
+.totalBox .totalVal {
     color: #999999;
     max-width: 1.2rem;
     word-break: break-all;
 }
-.payPalButton,.checkoutButton{
-    background-color:  rgba(79, 73, 222, 1);
+
+.payPalButton, .checkoutButton {
+    background-color: rgba(79, 73, 222, 1);
     color: #FFF;
     font-weight: bold;
     font-size: .22rem;
@@ -370,43 +437,51 @@ body{
     cursor: pointer;
     margin-bottom: .2rem;
 }
-.checkoutButton{
-    background-color:  rgba(51, 55, 59, 1);
+
+.checkoutButton {
+    background-color: rgba(51, 55, 59, 1);
 }
-.orBox{
+
+.orBox {
     display: flex;
-    align-items: center;   
+    align-items: center;
     padding: .06rem .24rem 0 .24rem;
     margin-bottom: .26rem;
 }
-.orBox .link{
+
+.orBox .link {
     flex: 1;
     height: .02rem;
     background-color: rgba(0, 0, 0, .1);
 }
-.orBox .or{
+
+.orBox .or {
     padding: 0 .12rem;
     font-size: .18rem;
     font-weight: bold;
     color: #999999;
 }
-#addressContainer{
+
+#addressContainer {
     margin-bottom: .24rem;
     display: none;
 }
-.addressItem{
+
+.addressItem {
     display: flex;
     align-items: center;
     padding: .06rem 0;
 }
-.addItmeTitle{
+
+.addItmeTitle {
     width: 1.4rem;
     text-align: right;
     font-size: .16rem;
     color: #999999;
     padding-right: .08rem;
 }
-#areaSelect{
+
+#areaSelect {
     height: .4rem;
     font-size: .16rem;
     border: .02rem solid rgba(0, 0, 0, .05);
@@ -414,7 +489,8 @@ body{
     color: #434343;
     padding: 0 .12rem;
 }
-.addInput{
+
+.addInput {
     flex: 1;
     height: .45rem;
     font-size: .15rem;
@@ -423,17 +499,20 @@ body{
     padding: 0 .12rem;
     color: #434343;
 }
-#addressButModel{
+
+#addressButModel {
     display: none;
 }
-.addressButtonBox{
+
+.addressButtonBox {
     display: flex;
     align-items: center;
     gap: .16rem;
     justify-content: flex-end;
     padding-top: .24rem;
 }
-#addCancel,#addSave{
+
+#addCancel, #addSave {
     background-color: rgba(79, 73, 222, 1);
     color: #FFF;
     font-size: .15rem;
@@ -445,15 +524,17 @@ body{
     width: 1.2rem;
     cursor: pointer;
     -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box; 
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
-#addCancel{
+
+#addCancel {
     border: .02rem solid rgba(0, 0, 0, .2);
     background: transparent;
     color: #434343;
 }
-#loadingModel{
+
+#loadingModel {
     position: fixed;
     z-index: 999;
     top: 0;
@@ -463,230 +544,292 @@ body{
     background-color: rgba(0, 0, 0, .5);
     display: none;
 }
-#loadingModel .loadingBox{
+
+#loadingModel .loadingBox {
     border-radius: .06rem;
     overflow: hidden;
-    font-size: 0; 
+    font-size: 0;
     margin: 25% auto 0 auto;
     width: 1rem;
 }
-#loadingModel .loadingBox img{
+
+#loadingModel .loadingBox img {
     width: 1rem;
 }
+
 @media (max-width: 1680px) {
-    .productPrice{
+    .productPrice {
         width: 2rem;
         font-size: .24rem;
     }
-    .windContainer{
+
+    .windContainer {
         margin-left: .6rem;
     }
-    .productDelete img{
+
+    .productDelete img {
         width: .2rem;
     }
-    .numberInput{
+
+    .numberInput {
         font-size: .2rem;
     }
-    .lfBox .productTitle{
+
+    .lfBox .productTitle {
         font-size: .22rem;
     }
-    .lfBox .specs{
+
+    .lfBox .specs {
         font-size: .18rem;
     }
 }
+
 @media (max-width: 1499px) {
-    .productPrice{
+    .productPrice {
         width: 1.8rem;
         font-size: .22rem;
     }
-    .lfBox .productTitle{
+
+    .lfBox .productTitle {
         font-size: .2rem;
     }
-    .windContainer{
+
+    .windContainer {
         width: 4rem;
     }
-    .windTBox{
+
+    .windTBox {
         font-size: .18rem;
     }
-    .windInfoBox{
+
+    .windInfoBox {
         font-size: .18rem;
     }
-    .totalBox{
+
+    .totalBox {
         font-size: .2rem;
     }
-    .payPalButton,.checkoutButton{
+
+    .payPalButton, .checkoutButton {
         font-size: .2rem;
         height: .52rem;
     }
-    .mbItem{
+
+    .mbItem {
         margin-bottom: .3rem;
     }
-    .pageTitle{
+
+    .pageTitle {
         font-size: .3rem;
     }
 }
+
 @media (max-width: 1299px) {
-    .pageDataBox{
+    .pageDataBox {
         flex-direction: column;
         align-items: flex-end;
     }
-    .productConatiner{
+
+    .productConatiner {
         width: 100%;
     }
-    .productList{
+
+    .productList {
         padding-left: .12rem;
     }
-    .windContainer{
+
+    .windContainer {
         margin-left: 0;
         padding-top: .8rem;
     }
 }
+
 @media (max-width: 1199px) {
-    .productDelete{
+    .productDelete {
         position: absolute;
         top: 0;
         right: 0;
         padding: 0 .12rem .12rem .12rem;
     }
-    .addItmeTitle{
+
+    .addItmeTitle {
         font-size: .2rem;
     }
-    #areaSelect{
+
+    #areaSelect {
         font-size: .2rem;
         height: .5rem;
     }
-    .addInput{
+
+    .addInput {
         font-size: .2rem;
         height: .55rem;
     }
-    #addCancel,#addSave{
+
+    #addCancel, #addSave {
         font-size: .2rem;
         height: .5rem;
     }
 
 
     /* new start------------------------ */
-    .windContainer{
+    .windContainer {
         width: auto;
         padding-left: .52rem;
         padding-right: .52rem;
     }
-    #addressList{
+
+    #addressList {
         padding: .12rem;
         max-height: 4rem;
     }
-    .addressItem{
+
+    .addressItem {
         display: flex;
         align-items: center;
         cursor: pointer;
         padding: .12rem 0;
     }
-    .addressItem .iconBox{
+
+    .addressItem .iconBox {
         width: .26rem;
         height: .26rem;
     }
-    .addressItem .iconBox img{
+
+    .addressItem .iconBox img {
         width: .24rem;
         height: .24rem;
     }
-    .addressItem .iconBox img.sel{
+
+    .addressItem .iconBox img.sel {
         width: .26rem;
         height: .26rem;
     }
-    .itAddInfo{
+
+    .itAddInfo {
         font-size: .22rem;
     }
-    .addressDelete{
+
+    .addressDelete {
         color: rgba(79, 73, 222, 1);
         font-size: .22rem;
     }
-    #selCancel,#selSave{
+
+    #selCancel, #selSave {
         font-size: .2rem;
         height: .5rem;
     }
-    #deleteAddressModal .deleteAddressBox{
+
+    #deleteAddressModal .deleteAddressBox {
         width: 5rem;
         padding: .36rem .24rem;
     }
-    .deteTips{
+
+    .deteTips {
         font-size: .28rem;
         line-height: 1.5;
-    }   
-    #cancelDelete,#confirmDelete{
+    }
+
+    #cancelDelete, #confirmDelete {
         font-size: .22rem;
         height: .56rem;
     }
-/* new end------------------------ */
+
+    /* new end------------------------ */
 }
+
 @media (max-width: 750px) {
-    .pageDataBox{
+    .pageDataBox {
         display: block;
     }
-    .windContainer{
+
+    .windContainer {
         width: auto;
         padding-left: .52rem;
         padding-right: .52rem;
     }
-    .pageTitle{
+
+    .pageTitle {
         font-size: .3rem;
     }
-    .productModelTitle{
+
+    .productModelTitle {
         font-size: .24rem;
     }
-    .productItem{
+
+    .productItem {
         height: auto;
         min-height: 1.2rem;
         padding: .12rem 0;
         margin-bottom: 0;
         margin-bottom: .12rem;
     }
-    .productImgBox{
+
+    .productImgBox {
         width: 1.2rem;
         height: 1.2rem;
     }
-    .lfBox .productTitle{
+
+    .lfBox .productTitle {
         font-size: .22rem;
     }
-    .lfBox .specs{
+
+    .lfBox .specs {
         font-size: .2rem;
     }
-    .productPrice{
+
+    .productPrice {
         text-align: right;
         font-size: .26rem;
     }
-    .numberInput{
+
+    .numberInput {
         font-size: .24rem;
     }
-    .numberReduce,.numberAdd{
+
+    .numberReduce, .numberAdd {
         font-size: .26rem;
     }
-    .windTBox{
+
+    .windTBox {
         font-size: .24rem;
     }
-    .windInfoBox{
+
+    .windInfoBox {
         font-size: .24rem;
     }
-    .totalBox{
+
+    .totalBox {
         font-size: .26rem;
     }
-    .payPalButton,.checkoutButton{
+
+    .payPalButton, .checkoutButton {
         font-size: .26rem;
         height: .76rem;
     }
-    .orBox .or{
+
+    .orBox .or {
         font-size: .2rem;
     }
-    .totalBox .totalVal{
+
+    .totalBox .totalVal {
         max-width: 2rem;
     }
-    .windInfoBox .val{
+
+    .windInfoBox .val {
         max-width: 2rem;
     }
-    #loadingModel .loadingBox{
+
+    #loadingModel .loadingBox {
         margin: 50% auto 0 auto;
         width: 1.5rem;
     }
-    #loadingModel .loadingBox img{
-        width:  1.5rem;
+
+    #loadingModel .loadingBox img {
+        width: 1.5rem;
+    }
+
+    .tasteBox {
+        font-size: .14rem;
     }
 }