优化，完善代码

pages/center/center.vue

@@ -87,6 +87,15 @@
 						</view>
 						<view class="service-name">租金待付</view>
 					</view>
+					<view class="service-item" @click="clickNav('/pages-biz/unpaid/unpaidMargin')">
+						<view class="service-icon badge-wrapper">
+							<image :src="staticHost + '/public' + '/static/icon/unpaidMargin.png'"></image>
+							<view v-if="unpaidMargin > 0" class="badge">
+										{{ unpaidMargin > 99 ? '99+' : unpaidMargin }}
+									</view>
+						</view>
+						<view class="service-name">保证金待付</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -129,6 +138,7 @@
 					unreadMsgCount: 0,      // 未读消息
 					unpaidWaeCount: 0,      // 水电费待付
 					unpaidRentCount: 0,     // 租金待付
+					unpaidMargin: 0,//保证金待付
 				navbarStyle: {
 					isTransparent: true,
 					bgColor: '#ffffff',
@@ -176,6 +186,7 @@
 			this.countUnpayRentBills()
 			this.countUnpayWaeBills()
 			this.countUnreadMsg()
+			this.countUnpaidRentMargin()
 		},
 
 		methods: {
@@ -272,6 +283,15 @@
 					}
 				})
 			},
+			countUnpaidRentMargin(){
+				this.$u.get(`/bill/countUnpaidMargin`, {},{
+				  WT: this.$getToken()
+				}).then(res => {
+					if(res.flag){
+						this.unpaidMargin = res.data
+					}
+				})
+			},
 			countUnpayWaeBills(){
 				this.$u.get(`/bill/countUnpayWaeBills`, {},{
 				  WT: this.$getToken()
@@ -414,11 +434,12 @@
 
 	.service-list {
 		display: flex;
+		flex-wrap: wrap; /* 关键：自动换行 */
 		gap: 60rpx;
 	}
 
 	.service-item {
-		flex: 1;
+		width: 18%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;