修改微信小程序的空白区域

pages-subpackage/customer/components/CustomerList.vue

@@ -1,5 +1,8 @@
 <template>
-	<view class="customer-list-container">
+	<scroll-view 
+		class="customer-list-container customer-list" 
+		:style="{ top: contentTop || '160rpx' }"
+		scroll-y>
 		<view class="service-status-toolbar">
 			<text class="toolbar-total">共{{ list.length }}条</text>
 			<input
@@ -27,7 +30,6 @@
 				</view>
 			</view>
 		</view>
-		<scroll-view class="customer-list" scroll-y>
 			<view 
 				class="customer-card" 
 				v-for="(item, index) in list" 
@@ -56,8 +58,7 @@
 					<text class="customer-budget" v-if="item.budget">{{ item.budget }}</text>
 				</view>
 			</view>
-		</scroll-view>
-	</view>
+	</scroll-view>
 </template>
 
 <script>
@@ -67,6 +68,10 @@
 			list: {
 				type: Array,
 				default: () => []
+			},
+			contentTop: {
+				type: String,
+				default: '160rpx'
 			}
 		},
 		data() {
@@ -93,16 +98,21 @@
 <style scoped>
 	.customer-list-container {
 		/* 使用绝对定位，从tab页底部开始，到底部导航栏结束 */
+		/* 直接让 scroll-view 作为绝对定位容器，与标签管理页面保持一致 */
 		position: absolute;
-		top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */
+		/* top值通过内联样式动态设置 */
 		left: 0;
 		right: 0;
-		bottom: 96rpx; /* 底部导航栏高度 */
-		display: flex;
-		flex-direction: column;
 		background-color: #F5F5F5;
-		padding: 24rpx 16rpx;
+		padding: 24rpx 16rpx 0 16rpx;
 		box-sizing: border-box;
+		/* #ifndef MP-WEIXIN */
+		bottom: 96rpx; /* H5环境：底部导航栏高度 */
+		/* #endif */
+		/* #ifdef MP-WEIXIN */
+		/* 微信小程序：底部导航栏是 fixed 定位，不占用文档流，容器可以延伸到视口底部 */
+		bottom: 0 !important;
+		/* #endif */
 	}
 	
 	.service-status-toolbar {
@@ -173,13 +183,7 @@
 		color: #2A68FF;
 	}
 	
-	.customer-list {
-		/* 使用flex填充剩余空间 */
-		flex: 1;
-		background-color: transparent;
-		box-sizing: border-box;
-		overflow-y: auto;
-	}
+	/* .customer-list 现在与 .customer-list-container 是同一个元素，不需要单独样式 */
 	
 	.customer-card {
 		width: 100%;

pages-subpackage/customer/components/ServiceList.vue

@@ -1,5 +1,9 @@
 <template>
-	<view class="service-list-container">
+	<scroll-view 
+		class="service-list-container service-list" 
+		:style="{ top: contentTop || '160rpx' }"
+		scroll-y 
+		@scrolltolower="onReachBottom">
 		<view class="service-status-toolbar">
 			<text class="toolbar-total">共{{ total || list.length }}条</text>
 			<input
@@ -27,7 +31,6 @@
 				</view>
 			</view>
 		</view>
-		<scroll-view class="service-list" scroll-y @scrolltolower="onReachBottom">
 			<view 
 				class="service-item" 
 				v-for="(item, index) in list" 
@@ -75,14 +78,13 @@
 					</view>
 				</view>
 			</view>
-		</scroll-view>
 		<!-- 遮罩层，点击关闭菜单 -->
 		<view 
 			class="service-action-menu-mask" 
 			v-if="showServiceActionMenu"
 			@click="closeServiceActionMenu">
 		</view>
-	</view>
+	</scroll-view>
 </template>
 
 <script>
@@ -96,6 +98,10 @@
 			total: {
 				type: Number,
 				default: 0
+			},
+			contentTop: {
+				type: String,
+				default: '160rpx'
 			}
 		},
 		data() {
@@ -185,16 +191,21 @@
 <style scoped>
 	.service-list-container {
 		/* 使用绝对定位，从tab页底部开始，到底部导航栏结束 */
+		/* 直接让 scroll-view 作为绝对定位容器，与标签管理页面保持一致 */
 		position: absolute;
-		top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */
+		/* top值通过内联样式动态设置 */
 		left: 0;
 		right: 0;
-		bottom: 96rpx; /* 底部导航栏高度 */
-		display: flex;
-		flex-direction: column;
 		background-color: #F5F5F5;
-		padding: 24rpx 16rpx;
+		padding: 24rpx 16rpx 0 16rpx;
 		box-sizing: border-box;
+		/* #ifndef MP-WEIXIN */
+		bottom: 96rpx; /* H5环境：底部导航栏高度 */
+		/* #endif */
+		/* #ifdef MP-WEIXIN */
+		/* 微信小程序：底部导航栏是 fixed 定位，不占用文档流，容器可以延伸到视口底部 */
+		bottom: 0 !important;
+		/* #endif */
 	}
 	
 	.service-status-toolbar {
@@ -208,9 +219,12 @@
 		border-radius: 8rpx;
 		border: 1px solid #EFEFF2;
 		overflow-x: auto;
+		overflow-y: hidden; /* 隐藏垂直滚动 */
 		min-height: 64rpx; /* 设置最小高度，确保搜索区域不被挤压 */
 		box-sizing: border-box;
 		flex-shrink: 0; /* 防止被压缩 */
+		width: 100%; /* 确保宽度不超出容器 */
+		max-width: 100%; /* 防止超出容器宽度 */
 	}
 	
 	.toolbar-total {
@@ -265,13 +279,7 @@
 		color: #2A68FF;
 	}
 	
-	.service-list {
-		/* 使用flex填充剩余空间 */
-		flex: 1;
-		background-color: transparent;
-		box-sizing: border-box;
-		overflow-y: auto;
-	}
+	/* .service-list 现在与 .service-list-container 是同一个元素，不需要单独样式 */
 	
 	.service-item {
 		width: 100%;
@@ -284,6 +292,10 @@
 		position: relative;
 	}
 	
+	.service-item:last-child {
+		margin-bottom: 24rpx; /* 最后一项保留下边距，确保有底部间距 */
+	}
+	
 	.service-header {
 		display: flex;
 		justify-content: space-between;
@@ -357,22 +369,22 @@
 		align-items: center;
 		margin-bottom: 16rpx;
 	}
-	
+
 	.service-date {
 		font-size: 24rpx;
 		color: #999;
 		margin-right: 16rpx;
 	}
-	
+
 	.service-duration {
 		font-size: 24rpx;
 		color: #999;
 	}
-	
+
 	.service-content {
 		margin-bottom: 24rpx;
 	}
-	
+
 	.service-desc {
 		font-size: 28rpx;
 		color: #666;