商品详情: 调整UIl, 按UI验收要求

@@ -68,8 +68,8 @@ export default {
     span {
       font-size: 0.7em;
       line-height: 1.4;
-      border: 1px solid #f00;;
-      color: #f00;
+      border: 1px solid #feabac;
+      color: #feabac;
       text-align: center;
       padding: 0 0.9em;
       margin-right: 0.8em;

@@ -206,6 +206,7 @@ export default {
       align-items: baseline;
       font-size: 40px;
       letter-spacing: 0;
+      font-family: $num-font;
 
       span:nth-child(2) {
         font-size: 0.8em;

@@ -200,7 +200,7 @@ export default {
 
   li {
     box-sizing: border-box;
-    width: 25%;
+    width: 25%; // 当前固定为4列
     float: left;
     border: 1px solid #ddd;
     margin-right: -1px;
@@ -245,6 +245,7 @@ export default {
 
   .size-info {
     color: #000;
+    font-family: $num-font;
     font-weight: bold;
     font-size: 40px;
     display: inline-block;

@@ -225,6 +225,7 @@ export default {
 
     i {
       float: right;
+      color: #999;
     }
   }
 
@@ -232,7 +233,8 @@ export default {
     padding: 0 40px 16px;
   }
 
-  .select-size, .select-type {
+  .select-size,
+  .select-type {
     display: flex;
     flex-direction: column;
     height: 60vh;
@@ -254,7 +256,6 @@ export default {
         padding-top: 30px;
         font-size: 32px;
         color: #000;
-        font-family: "Alte DIN 1451 Mittelschrift";
       }
     }
   }
@@ -335,6 +336,10 @@ export default {
     overflow: scroll;
   }
 
+  .crash-info {
+    font-family: $num-font;
+  }
+
   .footer {
     padding: 16px 0;
     display: flex;
@@ -344,9 +349,9 @@ export default {
 
     span {
       font-size: 28px;
+      margin-left: 8px;
 
       i {
-        font-family: "Alte DIN 1451 Mittelschrift";
         font-size: 20px;
         font-style: normal;
       }

@@ -5,12 +5,12 @@
       <div @click="onAllClick">全部 <i class="cubeic-arrow"></i></div>
     </div>
     <div class="row">
-      <div class="col" v-for="(product, idx) in list" :key="idx">
-        <div class="product-item" @click="onItemClick(product)">
+      <div class="col" v-for="(product, idx) in list" :key="idx" @click="onItemClick(product)">
+        <div class="product-item">
           <square-img :src="product.default_images" :width="300" :height="300" />
-          <div class="name"><span>{{product.product_name}}</span></div>
-          <div class="price"><i>¥</i>{{product.price}}</div>
         </div>
+        <div class="name"><span>{{product.product_name}}</span></div>
+        <div class="price"><i>¥</i>{{product.price}}</div>
       </div>
     </div>
   </div>
@@ -61,26 +61,30 @@ export default {
       font-size: 36px;
       font-weight: bold;
       color: #000;
+      font-weight: bold;
     }
 
     .row {
       overflow: hidden;
-      margin: 0 -8px;
+      margin: 0 -6px;
 
       .col {
-        width: 33.3333%;
+        width: 222px;
         padding: 0 8px;
         float: left;
       }
     }
 
     .product-item {
-      margin-top: 10px;
+      margin: 10px auto 0;
+      width: 180px;
       text-align: center;
       overflow: hidden;
     }
 
     .name {
+      width: 200px;
+      margin: 0 auto 8px;
       height: 64px;
       display: flex;
       flex-direction: column;
@@ -98,13 +102,15 @@ export default {
     }
 
     .price {
+      font-family: $num-font;
       font-weight: bold;
-      font-size: 24px;
+      font-size: 32px;
       color: #d0021b;
+      text-align: center;
 
       i {
         font-style: normal;
-        font-size: 0.9em;
+        font-size: 24px;
         vertical-align: baseline;
       }
     }

 $primary-color : #08304b;
 $sub-color : #64ad88;
+$num-font: "DINAlternate-Bold", "din alternate", "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
 
 @mixin cube-ufo-btn {
   [type="button"] {

@@ -19,8 +19,8 @@
 
         <div class="info">
           <div class="info-price">
-            <template v-if="productDetail.least_price >= 0"> ¥{{productDetail.least_price}}</template>
-            <template v-else>&nbsp;</template>
+            <template v-if="productDetail.least_price == null">{{'\u200E'}}</template>
+            <template v-else><i>¥</i>{{productDetail.least_price}}</template>
           </div>
           <div class="info-name">{{productDetail.product_name}}</div>
         </div>
@@ -407,6 +407,8 @@ export default {
   }
 
   .slide {
+    height: 520px;
+
     .square-img-container {
       display: block;
       width: 520px;
@@ -467,8 +469,8 @@ export default {
 
     span {
       display: inline-block;
-      border: 1px solid #f00;
-      color: #f00;
+      border: 1px solid #feabac;
+      color: #feabac;
       line-height: 1.8;
       margin-right: 15px;
       font-size: 0.8em;
@@ -486,8 +488,10 @@ export default {
     &-price {
       color: #d0021b;
       font-size: 48px;
+      font-family: $num-font;
       font-weight: bold;
       text-align: center;
+      letter-spacing: 0;
 
       i {
         font-style: normal;