Przeglądaj źródła

优化:H5端商品详情页显示购物车按钮

萤火科技 4 lat temu
rodzic
commit
8ccea036f3
2 zmienionych plików z 13 dodań i 18 usunięć
  1. 12 15
      pages/goods/detail.scss
  2. 1 3
      pages/goods/detail.vue

+ 12 - 15
pages/goods/detail.scss

@@ -139,28 +139,23 @@
 // 快捷菜单
 .foo-item-fast {
   box-sizing: border-box;
-  width: 256rpx;
+  min-width: 214rpx;
   line-height: 1;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: space-evenly;
+  margin-right: 12rpx;
 
   .fast-item {
     position: relative;
-    padding: 4rpx 10rpx;
+    padding: 4rpx 0;
     line-height: 1;
-    // text-align: center;
+    text-align: center;
+    width: 84rpx;
 
-    .fast-icon {
-      margin-bottom: 6rpx;
-    }
-
-    &--home {
-      margin-right: 30rpx;
-    }
-    
     &--cart {
-      .fast-icon { padding-left: 3px; }
+      margin-left: 6rpx;
+      .fast-icon { margin-left: -12rpx; }
     }
     
     // 角标
@@ -179,6 +174,7 @@
       border: 1px solid #fff;
       border-radius: 999px;
     }
+
     .fast-badge--fixed {
       position: absolute;
       top: 0;
@@ -187,11 +183,12 @@
     }
 
     .fast-icon {
-      font-size: 46rpx;
+      font-size: 44rpx;
+      margin-bottom: 8rpx;
     }
 
     .fast-text {
-      font-size: 24rpx;
+      font-size: 22rpx;
     }
   }
 }

+ 1 - 3
pages/goods/detail.vue

@@ -108,8 +108,7 @@
             </view>
           </button>
           <!-- #endif -->
-          <!-- 购物车 (非微信小程序端显示) -->
-          <!-- #ifndef MP-WEIXIN -->
+          <!-- 购物车 -->
           <view class="fast-item fast-item--cart" @click="onTargetCart">
             <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
             </view>
@@ -120,7 +119,6 @@
               <text>购物车</text>
             </view>
           </view>
-          <!-- #endif -->
         </view>
         <!-- 操作按钮 -->
         <view class="foo-item-btn">