Просмотр исходного кода

零售端-公告、金刚区样式优化

ouyang 20 часов назад
Родитель
Сommit
b2b42bde3d

+ 11 - 9
mallApp/src/components/home/navGrid.vue

@@ -82,7 +82,8 @@ export default {
 .home-nav-grid {
   display: flex;
   flex-wrap: wrap;
-  padding: 20upx 12upx;
+  /* 相对原尺寸放大 1/3(×4/3),首页菜单更易点按 */
+  padding: 27upx 16upx;
   background: #fff;
 }
 .home-nav-grid.cols-4 .nav-item {
@@ -95,29 +96,30 @@ export default {
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin-bottom: 20upx;
+  margin-bottom: 27upx;
   box-sizing: border-box;
-  padding: 0 8upx;
+  padding: 0 11upx;
 }
 .nav-icon-wrap {
-  width: 88upx;
-  height: 88upx;
+  width: 117upx;
+  height: 117upx;
   border-radius: 50%;
   background: #FFF3F5;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 10upx;
+  margin-bottom: 13upx;
 }
 .nav-emoji {
-  font-size: 40upx;
+  font-size: 53upx;
 }
 .nav-icon-img {
-  width: 60upx;
-  height: 60upx;
+  width: 80upx;
+  height: 80upx;
 }
 .nav-name {
   font-size: 24upx;
+  font-weight: 600;
   color: #333;
   text-align: center;
   overflow: hidden;

+ 8 - 11
mallApp/src/pages/home/cart.vue

@@ -93,8 +93,6 @@
         <view class="cart-empty-btn" @tap="goCategory">去逛逛</view>
       </view>
 
-      <view class="cart-scroll-placeholder"></view>
-
     <!-- 底部结算栏 -->
     <view class="cart-footer" v-if="displayCartList.length">
       <view class="checkout-bar">
@@ -727,21 +725,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page {
+  background: $backColor;
+}
+
 .cart-page {
-  min-height: 100vh;
   background: $backColor;
   box-sizing: border-box;
-  padding-bottom: $shopTabBarTotalHeight;
+  padding-bottom: calc(#{$shopTabBarContentHeight} + #{$shopTabBarSafeInset});
 }
 
 .cart-page--has-checkout {
-  /* 有结算栏时额外预留高度,避免最后一项被挡住 */
-  padding-bottom: calc(#{$shopTabBarTotalHeight} + #{$shopCartCheckoutHeight});
+  /* 展开嵌套 calc,只加结算栏一行高度,避免底部留白过大 */
+  padding-bottom: calc(#{$shopTabBarContentHeight} + 88upx + #{$shopTabBarSafeInset});
 }
 
 /* 公告条左右 24upx 与 store-card 对齐,上边距与导航栏分开 */
 .cart-notice {
-  padding: 16upx 24upx 12upx;
+  padding: 16upx 24upx 0upx 12upx;
   box-sizing: border-box;
 }
 
@@ -1043,10 +1044,6 @@ export default {
   border-radius: 36upx;
 }
 
-.cart-scroll-placeholder {
-  height: 40upx;
-}
-
 .cart-footer {
   position: fixed;
   left: 0;

+ 1 - 0
mallApp/src/pages/home/components/shop-tab-bar.vue

@@ -140,6 +140,7 @@ export default {
   align-items: center;
   justify-content: space-around;
   box-sizing: border-box;
+  /* border-box:height 已含安全区,不再和 padding-bottom 叠成双倍 */
   height: $shopTabBarTotalHeight;
   padding-bottom: $shopTabBarSafeInset;
   background: #fff;

+ 6 - 5
mallApp/src/pages/home/index.vue

@@ -345,8 +345,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page {
+  background: #f5f5f5;
+}
 .app-content {
-  min-height: 100vh;
   background: #f5f5f5;
 }
 /* 轮播图与公告条区域:白底;flex 阻断子元素 margin 塌陷,加大公告下边距时仍露白底而非页面灰底 */
@@ -356,7 +358,7 @@ export default {
   background: #ffffff;
 }
 .home-notice-wrap {
-  padding: 16upx 24upx 16upx;
+  padding: 16upx 24upx 0upx 16upx;
   box-sizing: border-box;
 }
 .home-loading {
@@ -365,9 +367,8 @@ export default {
   font-size: 26upx;
   color: #999;
 }
-/* 为固定底部 Tab 栏预留滚动空间(高度与 shop-tab-bar 一致) */
+/* 只预留固定底栏高度,避免再加安全区 padding 造成双倍空白 */
 .home-bottom-space {
-  height: 180upx;
-  padding-bottom: env(safe-area-inset-bottom);
+  height: $shopTabBarTotalHeight;
 }
 </style>