H5-点单

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

@@ -9,24 +9,51 @@
           </div>
         </div>
         <div class="content">
-          <h1 class="title">{{food.name}}</h1>
-          <div class="detail">
-            <span class="sell-count">月售{{food.sellCount}}份</span>
-            <span class="rating">好评率{{food.rating}}%</span>
+          <div class="title-wrap">
+            <h1 class="title">曼哈顿</h1>
+            <p>2人推荐</p>
           </div>
-          <div class="price">
-            <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
+          <div class="detail">
+            <div class="subtitle-wrap">
+              <h1 class="title">选配</h1>
+              <p>（最多选4个）</p>
+            </div>
+            <p class="options">
+              <span v-for="(item, index) in ['可口可乐', '雪碧', '汤力水', '苏打水']" :class="{'active': index === 1}">{{
+                  item
+                }}</span>
+            </p>
           </div>
-          <div class="cartcontrol-wrapper">
-            <cartcontrol @add="addFood" :food="food"></cartcontrol>
+          <div class="detail">
+            <div class="subtitle-wrap">
+              <h1 class="title">附加选项</h1>
+              <p>（单选）</p>
+            </div>
+            <p class="options">
+              <span v-for="(item, index) in ['可口可乐', '雪碧', '汤力水', '苏打水']">{{ item }}</span>
+            </p>
           </div>
-          <transition name="fade">
-            <div @click.stop.prevent="addFirst" class="buy" v-show="!food.count || food.count===0">
-              加入购物车
+          <div class="detail">
+            <div class="subtitle-wrap">
+              <h1 class="title">商品详情</h1>
             </div>
-          </transition>
+            <div class=""></div>
+          </div>
         </div>
       </div>
+      <div class="footer">
+        <div class="price">
+          <span class="now">￥{{food.price}}</span><span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
+        </div>
+        <div class="cartcontrol-wrapper">
+          <cartcontrol :food="food" @add="addFood"></cartcontrol>
+        </div>
+        <transition name="fade">
+          <div v-show="!food.count || food.count===0" class="buy" @click.stop.prevent="addFirst">
+            加入购物车
+          </div>
+        </transition>
+      </div>
     </div>
   </transition>
 </template>
@@ -138,9 +165,7 @@ export default {
   .image-header {
     position: relative;
     width: 100%;
-    height: 0;
-    padding-top: 100%;
-    background: #FFFFFF;
+    height: 210px;
     border-radius: 16px 16px 0 0;
     box-shadow: 0 -2px 4px 0 rgba(13, 13, 13, 0.37);
     overflow: hidden;
@@ -163,99 +188,74 @@ export default {
   }
 
   .content {
-    position: relative;
-    padding: 18px;
+    padding-bottom: 68px;
 
     .title {
-      line-height: 14px;
-      margin-bottom: 8px;
-      font-size: 14px;
-      font-weight: 700;
-      color: rgb(7, 17, 27);
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #1F1E1E;
+      line-height: 25px;
+      letter-spacing: 1px;
     }
 
-    .detail {
-      margin-bottom: 18px;
-      line-height: 10px;
-      height: 10px;
-      font-size: 0;
-
-      .sell-count, .rating {
-        font-size: 10px;
-        color: rgb(147, 153, 159);
-      }
+    .title-wrap {
+      padding: 13px 0 11px 20px;
+      border-bottom: 1px solid #F2F2F2;
 
-      .sell-count {
-        margin-right: 12px;
+      p {
+        margin-top: 2px;
+        font-size: 12px;
+        color: #736F6F;
+        line-height: 17px;
       }
     }
+  }
+}
 
-    .price {
-      font-weight: 700;
-      line-height: 24px;
-    }
+.detail {
+  padding: 20px 0 0 20px;
 
-    .now {
-      margin-right: 8px;
-      font-size: 14px;
-      color: rgb(240, 20, 20);
-    }
+  .subtitle-wrap {
+    display: flex;
+    align-items: center;
 
-    .old {
-      text-decoration: line-through;
-      font-size: 10px;
-      color: rgb(147, 153, 159);
+    p {
+      margin-left: 4px;
+      font-size: 14px;
+      color: #D32323;
+      line-height: 20px;
     }
+  }
 
-    .cartcontrol-wrapper {
-      position: absolute;
-      right: 12px;
-      bottom: 12px;
-    }
+  .options {
+    display: flex;
+    flex-flow: row wrap;
 
-    .buy {
-      position: absolute;
-      right: 18px;
-      bottom: 18px;
-      z-index: 10;
-      height: 24px;
-      line-height: 24px;
-      padding: 0 12px;
-      box-sizing: border-box;
-      border-radius: 12px;
-      font-size: 10px;
-      color: #fff;
-      background: rgb(0, 160, 220);
-      opacity: 1;
+    span {
+      width: 98px;
+      height: 32px;
+      border-radius: 16px;
+      border: 1px solid #F2F2F2;
+      margin-left: 20px;
+      margin-top: 14px;
+      font-size: 14px;
+      color: #1F1E1E;
+      line-height: 32px;
+      text-align: center;
 
-      &.fade-enter-active, &.fade-leave-active {
-        transition: all 0.2s;
+      &:nth-of-type(3n+1) {
+        margin-left: 0;
       }
 
-      &.fade-enter, &.fade-leave-active {
-        opacity: 0;
-        z-index: -1;
+      &.active {
+        border: none;
+        color: #FFFFFF;
+        background: #D32323;
+        box-shadow: 0 2px 4px 0 rgba(210, 199, 199, 0.31);
       }
     }
   }
-
-  .info {
-    padding: 18px;
-
-    .title {
-      line-height: 14px;
-      margin-bottom: 6px;
-      font-size: 14px;
-      color: rgb(7, 17, 27);
-    }
-
-    .text {
-      line-height: 24px;
-      padding: 0 8px;
-      font-size: 12px;
-      color: rgb(77, 85, 93);
-    }
-  }
 }
 
 .footer {
@@ -279,5 +279,21 @@ export default {
     color: #D32323;
     line-height: 29px;
   }
+
+  .buy {
+    position: absolute;
+    right: 20px;
+    top: 18px;
+    width: 110px;
+    height: 32px;
+    background: #D32323;
+    border-radius: 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 32px;
+    text-align: center;
+  }
 }
 </style>