H5-添加商品到购物车:不可点击样式

htmldev/dashboard/src/views/sell/food/food.vue

@@ -65,7 +65,9 @@
         </div>
       </div>
       <div class="footer">
-        <div class="price">
+        <div
+          :class="{'highlight':price * food.product_num > 0}"
+          class="price">
           <span class="now">￥{{ price * food.product_num | fen2Yuan }}</span>
         </div>
         <transition name="fade">
@@ -382,8 +384,12 @@ export default {
     font-size: 21px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #D32323;
+    color: #999;
     line-height: 29px;
+
+    &.highlight {
+      color: #D32323;
+    }
   }
 
   .buy {
@@ -400,12 +406,12 @@ export default {
     text-align: center;
 
     &.not-enough {
-      color: #CCC6C6;
-      background: #736F6F;
+      color: #999;
+      background: #333;
     }
 
     &.enough {
-      color: #FFFFFF;
+      color: #FFF;
       background: #D32323;
     }
   }

htmldev/dashboard/src/views/sell/shopcart/shopcart.vue

@@ -315,6 +315,7 @@ export default {
     align-items: center;
     font-size: 0;
     height: 68px;
+    padding: 0 20px;
     background: #FFFFFF;
     box-shadow: 0 -2px 4px 0 rgba(13, 13, 13, 0.03);
 
@@ -322,7 +323,6 @@ export default {
       flex: 1;
       display: flex;
       align-items: center;
-      padding: 0 20px;
 
       .logo-wrapper {
         position: relative;
@@ -363,8 +363,12 @@ export default {
         font-size: 21px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
-        color: #D32323;
+        color: #999;
         line-height: 29px;
+
+        &.highlight {
+          color: #D32323;
+        }
       }
     }
 
@@ -384,8 +388,8 @@ export default {
         border-radius: 25px;
 
         &.not-enough {
-          color: #CCC6C6;
-          background: #736F6F;
+          color: #999;
+          background: #333;
         }
 
         &.enough {