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

feat(cart): 调整购物车页面底部布局及价格展示样式

- 修改购物车页面底部固定定位高度,从 bottom-80rpx 调整为 bottom-60rpx
- 优化价格显示结构,增加配送费说明文本
- 在商品列表页添加背景色配置,统一页面风格
- 为滚动视图添加 box-border 样式以确保布局一致
- 为商品项添加 overflow-hidden 防止内容溢出
zhangtao 1 неделя назад
Родитель
Сommit
1e78c19db4
4 измененных файлов с 22 добавлено и 13 удалено
  1. 3 1
      src/pages.json
  2. 14 9
      src/pages/cart/index.vue
  3. 4 2
      src/subPack-smqjh/goodsList/index.vue
  4. 1 1
      src/subPack-xsb/cart/index.vue

+ 3 - 1
src/pages.json

@@ -278,7 +278,9 @@
           "islogin": false,
           "style": {
             "navigationBarTitleText": "商品列表",
-            "navigationStyle": "custom"
+            "navigationStyle": "custom",
+            "backgroundColor": "#F4FFD1",
+            "backgroundColorTop": "#F4FFD1"
           }
         }
       ]

+ 14 - 9
src/pages/cart/index.vue

@@ -119,7 +119,7 @@ const navList = ref([
       </scroll-view>
     </view>
     <view
-      class="fixedShadow fixed bottom-80rpx left-0 z-99 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx"
+      class="fixedShadow fixed bottom-60rpx left-0 z-99 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx"
     >
       <view class="ios w-full flex items-center justify-between">
         <view class="flex items-center">
@@ -134,15 +134,20 @@ const navList = ref([
           </view>
         </view>
         <view class="flex items-center">
-          <view class="flex items-center font-semibold">
-            <view class="text-22rpx text-#222">
-              总计:
+          <view>
+            <view class="flex items-center font-semibold">
+              <view class="text-22rpx text-#222">
+                总计:
+              </view>
+              <view class="flex items-baseline text-24rpx text-#FF4A39">
+                ¥
+                <text class="text-36rpx">
+                  8.9
+                </text>
+              </view>
             </view>
-            <view class="flex items-baseline text-24rpx text-#FF4A39">
-              ¥
-              <text class="text-36rpx">
-                8.9
-              </text>
+            <view class="text-22rpx text-#AAAAAA">
+              含配送费¥11
             </view>
           </view>
           <view class="ml20rpx w160rpx">

+ 4 - 2
src/subPack-smqjh/goodsList/index.vue

@@ -9,6 +9,8 @@ definePage({
   style: {
     navigationBarTitleText: '商品列表',
     navigationStyle: 'custom',
+    backgroundColor: '#F4FFD1',
+    backgroundColorTop: '#F4FFD1',
   },
 })
 const { name } = storeToRefs(useAddressStore())
@@ -62,7 +64,7 @@ function handleSortList(id: number) {
       </template>
     </wd-navbar>
     <view class="sticky left-0 top-0 z-9 box-border h400rpx bg-#F4FFD1 py20rpx" :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }">
-      <scroll-view scroll-x class="scrollx w-full flex-shrink-0 whitespace-nowrap pl24rpx">
+      <scroll-view scroll-x class="scrollx box-border w-full flex-shrink-0 whitespace-nowrap pl24rpx">
         <view class="flex items-end pb10rpx">
           <view v-for="item, idx in classfiylist" :key="idx" class="mr24rpx flex flex-col items-center justify-center" @click="handleTopNavChange(idx)">
             <image
@@ -81,7 +83,7 @@ function handleSortList(id: number) {
         </view>
       </view>
     </view>
-    <view v-for="item in 10" :key="item" class="mb20rpx box-border w-full flex justify-between bg-white p24rpx">
+    <view v-for="item in 10" :key="item" class="mb20rpx box-border w-full flex justify-between overflow-hidden bg-white p24rpx">
       <image
         :src="`${StaticUrl}/shu.png`"
         class="h160rpx w160rpx flex-shrink-0 rounded-32rpx"

+ 1 - 1
src/subPack-xsb/cart/index.vue

@@ -84,7 +84,7 @@ const selectCatrt = ref()
         </scroll-view>
       </view>
     </view>
-    <view class="fixedShadow fixed bottom-80rpx left-0 z-99 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx">
+    <view class="fixedShadow fixed bottom-60rpx left-0 z-99 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx">
       <view class="ios w-full flex items-center justify-between">
         <view class="flex items-center">
           <image