diff --git a/pages/bill/bill.vue b/pages/bill/bill.vue
index 15a24da..e6eaa01 100644
--- a/pages/bill/bill.vue
+++ b/pages/bill/bill.vue
@@ -5,21 +5,53 @@
       title="我的账单"
     ></customNavbar>
 
-    <!-- Tab 按钮 -->
-    <view class="tab-bar">
-      <view
-        class="tab-item"
-        :class="{ active: currentTab === 'out' }"
-        @click="switchTab('out')"
-      >
-        支
+    <!-- 筛选栏 -->
+    <view class="filter-bar">
+      <!-- 年份筛选点击区域 -->
+      <view class="year-filter" @click="toggleYearPicker">
+        <text class="year-text">{{ currentYear }}年</text>
+        <u-icon name="arrow-down" size="24" color="#666"></u-icon>
       </view>
-      <view
-        class="tab-item"
-        :class="{ active: currentTab === 'in' }"
-        @click="switchTab('in')"
-      >
-        收
+      
+      <!-- 自定义年份选择器弹窗 -->
+      <u-popup v-model="showYearPicker" mode="bottom" border-radius="20rpx" :closeable="true">
+        <view class="year-picker-popup">
+          <!-- 弹窗标题 -->
+          <view class="popup-header">
+            <text class="popup-title">选择年份</text>
+          </view>
+          
+          <!-- 年份列表 -->
+          <view class="year-list">
+            <view 
+              class="year-item" 
+              v-for="year in years" 
+              :key="year"
+              :class="{ active: currentYear === year }"
+              @click="selectYear(year)"
+            >
+              {{ year }}年
+            </view>
+          </view>
+        </view>
+      </u-popup>
+      
+      <!-- 支出/收入切换 -->
+      <view class="tab-bar">
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 'out' }"
+          @click="switchTab('out')"
+        >
+          支出
+        </view>
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 'in' }"
+          @click="switchTab('in')"
+        >
+          收入
+        </view>
       </view>
     </view>
 
@@ -75,6 +107,10 @@ export default {
       bills: [],
       isRefreshing: false,
       loadStatus: 'more', // u-loadmore 状态
+      // 年份筛选相关
+      currentYear: 2025,
+      years: [2025, 2024, 2023, 2022, 2021],
+      showYearPicker: false
     };
   },
   onLoad(options) {
@@ -86,6 +122,19 @@ export default {
       this.currentTab = tab;
       this.loadBills();
     },
+    
+    // 切换年份选择器显示
+    toggleYearPicker() {
+      this.showYearPicker = !this.showYearPicker;
+    },
+    
+    // 选择年份
+    selectYear(year) {
+      this.currentYear = year;
+      this.showYearPicker = false;
+      // 重新加载账单数据
+      this.loadBills();
+    },
 
     loadBills() {
       // 模拟数据加载
@@ -160,24 +209,90 @@ export default {
   padding-top: 120rpx; /* 给导航栏留空间 */
 }
 
+.filter-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 24rpx 30rpx;
+  margin: 20rpx;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+}
+
+/* 年份筛选 */
+.year-filter {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 32rpx;
+  color: #333;
+  cursor: pointer;
+}
+
+/* 支出/收入切换 */
 .tab-bar {
   display: flex;
-  background: #fff;
-  margin: 0 20rpx;
-  border-radius: 12rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+  gap: 20rpx;
+}
 
-  .tab-item {
-    flex: 1;
-    text-align: center;
-    padding: 20rpx 0;
-    font-size: 28rpx;
-    color: #666;
-    &.active {
-      color: #fff;
-      background: #007aff;
-    }
+.tab-item {
+  padding: 12rpx 32rpx;
+  font-size: 28rpx;
+  border-radius: 24rpx;
+  color: #333;
+  background-color: #f5f5f5;
+  transition: all 0.2s ease;
+  &.active {
+    color: #fff;
+    background: #ff3b30;
+  }
+}
+
+/* 自定义年份选择器样式 */
+.year-picker-popup {
+  background: #fff;
+  padding: 30rpx 0;
+}
+
+.popup-header {
+  text-align: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.popup-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.year-list {
+  padding: 20rpx;
+}
+
+.year-item {
+  font-size: 32rpx;
+  color: #666;
+  text-align: center;
+  padding: 24rpx;
+  border-radius: 12rpx;
+  margin-bottom: 16rpx;
+  background: #f5f5f5;
+  transition: all 0.2s ease;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  &.active {
+    background: #ff3b30;
+    color: #fff;
+  }
+  
+  &:hover {
+    background: #ff5252;
+    color: #fff;
   }
 }
 
@@ -201,7 +316,7 @@ export default {
   flex-direction: column;
 
   .bill-name {
-    font-size: 30rpx;
+    font-size: 28rpx;
     color: #2D2B2C;
     font-weight: 500;
   }
@@ -219,7 +334,7 @@ export default {
   align-items: center;
 
   .amount {
-    font-size: 30rpx;
+    font-size: 28rpx;
     color: #F34038;
     margin-right: 10rpx;
   }
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 188c0d9..d79ae78 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -64,25 +64,25 @@
 				<view class="service-list">
 					<view class="service-item" @click="clickNav('pages/bill/bill')">
 						<view class="service-icon">
-							<image src="/static/icon/账单.png" mode="widthFix"></image>
+							<image src="/static/icon/账单.png"></image>
 						</view>
 						<view class="service-name">账单</view>
 					</view>
 					<view class="service-item" @click="clickNav('pages/center/myLease')">
 						<view class="service-icon">
-							<image src="/static/icon/租赁资产.png" mode="widthFix"></image>
+							<image src="/static/icon/租赁资产.png"></image>
 						</view>
 						<view class="service-name">租赁资产</view>
 					</view>
 					<view class="service-item" @click="clickNav('pages/wae/wae')">
 						<view class="service-icon">
-							<image src="/static/icon/水电费.png" mode="widthFix"></image>
+							<image src="/static/icon/水电费.png"></image>
 						</view>
 						<view class="service-name">水电缴费</view>
 					</view>
 					<view class="service-item" @click="clickNav('pages/unpaid/unpaid')">
 						<view class="service-icon">
-							<image src="/static/icon/待付款.png" mode="widthFix"></image>
+							<image src="/static/icon/待付款.png"></image>
 						</view>
 						<view class="service-name">待付</view>
 					</view>
diff --git a/pages/center/myLease.vue b/pages/center/myLease.vue
index 9f5f64f..2fa0403 100644
--- a/pages/center/myLease.vue
+++ b/pages/center/myLease.vue
@@ -119,7 +119,7 @@ export default {
   flex-direction: column;
   height: 100vh;
   background: #f7f8fa;
-  padding-top: 175rpx;
+  padding-top: 120rpx;
 }
 
 .filter-bar {
diff --git a/pages/unpaid/unpaid.vue b/pages/unpaid/unpaid.vue
index e801ccd..c5b9c2d 100644
--- a/pages/unpaid/unpaid.vue
+++ b/pages/unpaid/unpaid.vue
@@ -1,335 +1,352 @@
 <template>
-  <view class="pending-bill-page">
-    <!-- 自定义导航栏 -->
-    <custom-navbar title="我的待付" />
+	<view class="pending-bill-page">
+		<!-- 自定义导航栏 -->
+		<custom-navbar title="我的待付" />
 
-    <scroll-view
-      scroll-y
-      class="scroll-content"
-      :refresher-enabled="true"
-      :refresher-triggered="isRefreshing"
-      @refresherrefresh="refresh"
-      @scrolltolower="loadMore"
-    >
-      <view v-if="bills.length > 0">
-        <view
-          class="bill-item"
-          v-for="item in bills"
-          :key="item.id"
-        >
-          <!-- 左侧勾选 + 信息 -->
-          <view class="bill-left">
-			<u-checkbox
-                      v-model="item.checked"
-                      @change="toggleCheck(item)"
-                      size="32"
-                      active-color="#007aff"
-                    />
-            <view class="bill-info">
-              <text class="bill-name">{{ item.feeName }}</text>
-              <text class="bill-date">缴费截止：{{ item.dueDate }}</text>
-            </view>
-          </view>
+		<scroll-view scroll-y class="scroll-content" :refresher-enabled="true" :refresher-triggered="isRefreshing"
+			@refresherrefresh="refresh" @scrolltolower="loadMore">
+			<view v-if="bills.length > 0">
+				<view class="bill-item" v-for="item in bills" :key="item.id">
+					<!-- 左侧勾选 + 信息 -->
+					<view class="bill-left">
+						<u-checkbox v-model="item.checked" @change="toggleCheck(item)" size="32"
+							active-color="#EA414A" />
+						<view class="bill-info">
+							<text class="bill-name">{{ item.feeName }}</text>
+							<text class="bill-date">缴费截止：<text class="date">{{ item.dueDate }}</text></text>
+						</view>
+					</view>
 
-          <!-- 右侧金额 + 支付按钮 -->
-          <view class="bill-right">
-            <text class="amount">{{ formatMoney(item.amount) }}</text>
-            <button
-              class="pay-btn"
-              @click="goPayTest([item])"
-            >去支付
-			</button>
-          </view>
-        </view>
+					<!-- 右侧金额 + 支付按钮 -->
+					<view class="bill-right">
+						<text class="amount">{{ formatMoney(item.amount) }}</text>
+						<button class="pay-btn" @click="goPayTest([item])">去支付
+						</button>
+					</view>
+				</view>
+			</view>
+
+			<view v-else class="empty">
+				<u-empty mode="list" text="暂无待支付账单" />
+			</view>
+
+			<u-loadmore :status="loadStatus" />
+		</scroll-view>
+
+		<!-- 底部批量支付栏 -->
+		<view v-if="selectedBills.length > 0" class="batch-pay-bar">
+			<view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
+			<view class="batch-pay-bar-center">
+				合计：<text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
       </view>
-
-      <view v-else class="empty">
-        <u-empty mode="list" text="暂无待支付账单" />
-      </view>
-
-      <u-loadmore :status="loadStatus" />
-    </scroll-view>
-
-   <!-- 底部批量支付栏 -->
-   <view v-if="selectedBills.length > 0" class="batch-pay-bar">
-     <view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
       <view class="batch-pay-bar-right">
-		  <text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
-		  <button  class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
-		    批量支付
-		  </button>
-	  </view>
-   </view>
-  </view>
+				<button class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary"
+					size="small" @click="goPayTest(selectedBills)">
+					批量支付
+				</button>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      bills: [],
-      isRefreshing: false,
-      loadStatus: 'more',
-	  sumAmount: 0,
-      selectedBills: [], // 勾选的账单集合
-    };
-  },
-  onLoad() {
-    this.loadBills();
-  },
-  onShow(){
-  },
-  methods: {
-    loadBills() {
-      this.bills = [
-        {
-          id: 'p101',
-          feeName: '第一期租金（2024.12.01-2024.12.31）',
-          dueDate: '2024-12-15',
-          amount: 300000,
-          checked: false,
-        },
-        {
-          id: 'p102',
-          feeName: '第二期物业费（2025.01.01-2025.01.31）',
-          dueDate: '2025-01-15',
-          amount: 500,
-          checked: false,
-        },
-      ];
-	  this.updateSelected();
-    },
-    refresh() {
-      this.isRefreshing = true;
-      setTimeout(() => {
-        this.loadBills();
-        this.isRefreshing = false;
-      }, 1000);
-    },
+	export default {
+		data() {
+			return {
+				bills: [],
+				isRefreshing: false,
+				loadStatus: 'more',
+				sumAmount: 0,
+				selectedBills: [], // 勾选的账单集合
+			};
+		},
+		onLoad() {
+			this.loadBills();
+		},
+		onShow() {},
+		methods: {
+			loadBills() {
+				this.bills = [{
+						id: 'p101',
+						feeName: '第一期租金（2024.12.01-2024.12.31）',
+						dueDate: '2024-12-15',
+						amount: 300000,
+						checked: false,
+					},
+					{
+						id: 'p102',
+						feeName: '第二期物业费（2025.01.01-2025.01.31）',
+						dueDate: '2025-01-15',
+						amount: 500,
+						checked: false,
+					},
+				];
+				this.updateSelected();
+			},
+			refresh() {
+				this.isRefreshing = true;
+				setTimeout(() => {
+					this.loadBills();
+					this.isRefreshing = false;
+				}, 1000);
+			},
 
-    loadMore() {
-      this.loadStatus = 'noMore';
-    },
+			loadMore() {
+				this.loadStatus = 'noMore';
+			},
 
-   formatMoney(val) {
-     if (val === null || val === undefined || isNaN(val)) return '—';
-   
-     val = Number(val);
-   
-     if (val >= 10000) {
-       return '¥' + (val / 10000).toFixed(2) + '万';
-     }
-   
-     return '¥' + val.toFixed(2);
-   },
-    toggleCheck(item) {
-	  item.checked = !item.checked;
-	  if(item.checked && !this.selectedBills.some(b => b.id === item.id)) {
-		  this.selectedBills.push(item);
-	  }else{
-		  // 取消勾选时从已选数组移除
-		  this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
-	  } 
-	      let sumFee = 0;
-		  this.selectedBills.forEach(b => sumFee += b.amount);
-		  this.sumAmount = sumFee;
-	},   
-	   updateSelected() {
-         if (!Array.isArray(this.bills)) return;
-         this.selectedBills = this.bills.filter(b => b.checked);
-       },
-    goPayTest(billList) {
-   if (!billList || billList.length === 0) return;
+			formatMoney(val) {
+				if (val === null || val === undefined || isNaN(val)) return '—';
 
-  // 模拟后台生成订单返回
-  const order = {
-    timeStamp: String(Date.now()),          // 时间戳
-    nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
-    package: 'prepay_id=TEST1234567890',    // 模拟预支付ID
-    signType: 'MD5',
-    paySign: 'TEST_SIGN',                   // 模拟签名
-  };
+				val = Number(val);
 
-  // 调用微信支付接口（测试）
-  uni.requestPayment({
-    ...order,
-    success: () => {
-      uni.showToast({ title: '支付成功（测试）', icon: 'success' });
-      // 清空勾选状态
-      billList.forEach(b => b.checked = false);
-      this.updateSelected();
-      // 刷新列表（可选）
-      this.loadBills();
-    },
-    fail: () => {
-      uni.showToast({ title: '支付失败（测试）', icon: 'none' });
-    }
-  });
- },
-   async goPay(billList) {
-  if (!billList || billList.length === 0) return;
+				if (val >= 10000) {
+					return '¥' + (val / 10000).toFixed(2) + '万';
+				}
 
-  try {
-    // 1. 请求后台生成订单
-    const res = await uni.request({
-      url: 'https://api.example.com/payments/create',
-      method: 'POST',
-      data: {
-        userId: this.userId,
-        bills: billList.map(b => b.id),
-      }
-    });
+				return '¥' + val.toFixed(2);
+			},
+			toggleCheck(item) {
+				item.checked = !item.checked;
+				if (item.checked && !this.selectedBills.some(b => b.id === item.id)) {
+					this.selectedBills.push(item);
+				} else {
+					// 取消勾选时从已选数组移除
+					this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
+				}
+				let sumFee = 0;
+				this.selectedBills.forEach(b => sumFee += b.amount);
+				this.sumAmount = sumFee;
+			},
+			updateSelected() {
+				if (!Array.isArray(this.bills)) return;
+				this.selectedBills = this.bills.filter(b => b.checked);
+			},
+			goPayTest(billList) {
+				if (!billList || billList.length === 0) return;
 
-    if (res[1].data.code !== 0) {
-      uni.showToast({ title: res[1].data.msg, icon: 'none' });
-      return;
-    }
+				// 模拟后台生成订单返回
+				const order = {
+					timeStamp: String(Date.now()), // 时间戳
+					nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
+					package: 'prepay_id=TEST1234567890', // 模拟预支付ID
+					signType: 'MD5',
+					paySign: 'TEST_SIGN', // 模拟签名
+				};
 
-    const order = res[1].data.data; // 后台返回的支付参数
+				// 调用微信支付接口（测试）
+				uni.requestPayment({
+					...order,
+					success: () => {
+						uni.showToast({
+							title: '支付成功（测试）',
+							icon: 'success'
+						});
+						// 清空勾选状态
+						billList.forEach(b => b.checked = false);
+						this.updateSelected();
+						// 刷新列表（可选）
+						this.loadBills();
+					},
+					fail: () => {
+						uni.showToast({
+							title: '支付失败（测试）',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			async goPay(billList) {
+				if (!billList || billList.length === 0) return;
 
-    // 2. 调用微信支付
-    uni.requestPayment({
-      timeStamp: order.timeStamp,
-      nonceStr: order.nonceStr,
-      package: order.package,
-      signType: order.signType,
-      paySign: order.paySign,
-      success: () => {
-        uni.showToast({ title: '支付成功', icon: 'success' });
-        // 更新勾选状态
-        billList.forEach(b => b.checked = false);
-        this.updateSelected();
-        // 刷新列表
-        this.loadBills();
-      },
-      fail: () => {
-        uni.showToast({ title: '支付失败', icon: 'none' });
-      }
-    });
+				try {
+					// 1. 请求后台生成订单
+					const res = await uni.request({
+						url: 'https://api.example.com/payments/create',
+						method: 'POST',
+						data: {
+							userId: this.userId,
+							bills: billList.map(b => b.id),
+						}
+					});
 
-  } catch (error) {
-    console.error('支付请求失败', error);
-    uni.showToast({ title: '支付请求失败', icon: 'none' });
-  }
-},
-  }
-};
+					if (res[1].data.code !== 0) {
+						uni.showToast({
+							title: res[1].data.msg,
+							icon: 'none'
+						});
+						return;
+					}
+
+					const order = res[1].data.data; // 后台返回的支付参数
+
+					// 2. 调用微信支付
+					uni.requestPayment({
+						timeStamp: order.timeStamp,
+						nonceStr: order.nonceStr,
+						package: order.package,
+						signType: order.signType,
+						paySign: order.paySign,
+						success: () => {
+							uni.showToast({
+								title: '支付成功',
+								icon: 'success'
+							});
+							// 更新勾选状态
+							billList.forEach(b => b.checked = false);
+							this.updateSelected();
+							// 刷新列表
+							this.loadBills();
+						},
+						fail: () => {
+							uni.showToast({
+								title: '支付失败',
+								icon: 'none'
+							});
+						}
+					});
+
+				} catch (error) {
+					console.error('支付请求失败', error);
+					uni.showToast({
+						title: '支付请求失败',
+						icon: 'none'
+					});
+				}
+			},
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-.pending-bill-page {
-  background: #f7f8fa;
-  min-height: 100vh;
-  padding-top: 175rpx; /* 自定义导航栏高度 */
-}
-
-.scroll-content {
-  padding: 20rpx;
-  box-sizing: border-box;
-}
-
-.bill-item {
-  display: flex;
-  justify-content: space-between;
-  background: #fff;
-  margin-bottom: 20rpx;
-  border-radius: 12rpx;
-  padding: 20rpx;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
-}
-
-.bill-left {
-  display: flex;
-  align-items: center;
-
-  .bill-info {
-    display: flex;
-    flex-direction: column;
-
-    .bill-name {
-      font-size: 28rpx;
-      color: #333;
-      font-weight: bold;
-    }
-
-    .bill-date {
-      font-size: 24rpx;
-      color: #666;
-      margin-top: 6rpx;
-    }
-  }
-}
-
-.bill-right {
-  flex-direction: column;
-  align-items: flex-end;
-  width: 30%;
-  .amount {
-	text-align: center;
-    font-size: 28rpx;
-	height: 28rpx;
-	line-height: 28rpx;
-    color: #ff7f00;
-  }
-
-  .pay-btn {
-    margin-top: 12rpx;
-    padding: 0 40rpx;
-    height: 60rpx;
-    line-height: 60rpx;
-    border-radius: 30rpx; // 圆角
-    font-size: 28rpx;
-    color: #fff;
-	background: linear-gradient(90deg, #007aff, #00aaff);
-    text-align: center;
-  }
-  .btn-text{
-	  padding-top: 13rpx;
-  }
-}
-
-.batch-pay-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 170rpx;
-  padding: 0 30rpx;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
-  z-index: 999;
-  .batch-pay-bar-left{
-	  font-size: 28rpx;
-	  color: #333;
-  }
- 
-  .batch-pay-bar-right{
-	  flex-direction: column;
-	  align-items: flex-end;
-	  .sumAmount{
-	  	  font-size: 28rpx;
-	  	  color: #ff7f00;
-	  }
-	.bottomPayBtn {
-		    margin-top: 12rpx;
-		    height: 60rpx;
-		    line-height: 60rpx;
-		    padding: 0 40rpx;
-		    border-radius: 30rpx;
-		    font-size: 28rpx;
-		    font-weight: bold;
-		    text-align: center;
-			background: linear-gradient(90deg, #007aff, #00aaff);
+	.pending-bill-page {
+		background: #f7f8fa;
+		min-height: 100vh;
+		padding-top: 120rpx;
+		/* 自定义导航栏高度 */
+	}
+
+	.scroll-content {
+		padding: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.bill-item {
+		display: flex;
+		justify-content: space-between;
+		background: #fff;
+		margin-bottom: 20rpx;
+		border-radius: 12rpx;
+		padding: 20rpx;
+		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.bill-left {
+		display: flex;
+		align-items: center;
+
+		.bill-info {
+			display: flex;
+			flex-direction: column;
+
+			.bill-name {
+				font-size: 30rpx;
+				color: #2D2B2C;
+				font-weight: 500;
+			}
+
+			.bill-date {
+				font-size: 26rpx;
+				color: #86868C;
+				margin-top: 6rpx;
+
+				.date{
+					font-size: 24rpx;
+					color: #2D2B2C;
+				}
+			}
+		}
+	}
+
+	.bill-right {
+		flex-direction: column;
+		align-items: flex-end;
+		width: 30%;
+
+		.amount {
+			text-align: center;
+			font-size: 30rpx;
+			height: 28rpx;
+			line-height: 28rpx;
+			color: #EF8849;
+		}
+
+		.pay-btn {
+			margin-top: 12rpx;
+			padding: 0 40rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			border-radius: 6rpx; // 圆角
+			font-size: 30rpx;
+			color: #fff;
+			background-color: #F34038;
+			text-align: center;
+		}
+
+		.btn-text {
+			padding-top: 13rpx;
+		}
+	}
+
+	.batch-pay-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 170rpx;
+		padding: 0 30rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
+		z-index: 999;
+
+		.batch-pay-bar-left {
+			font-size: 28rpx;
+			color: #86868C;
+		}
+
+    .batch-pay-bar-center {
+      font-size: 28rpx;
+      color: #222222;
+
+			.sumAmount {
+				font-size: 28rpx;
+				color: #ff7f00;
+			}
+    }
+
+		.batch-pay-bar-right {
+			flex-direction: column;
+			align-items: flex-end;
+
+			.bottomPayBtn {
+				height: 60rpx;
+				line-height: 60rpx;
+				padding: 0 40rpx;
+				border-radius: 6rpx;
+				font-size: 30rpx;
+				font-weight: bold;
+				text-align: center;
+				background: #F34038;
+			}
+		}
 	}
-  }
-}
 
 
-.empty {
-  margin-top: 200rpx;
-  text-align: center;
-}
-</style>
+	.empty {
+		margin-top: 200rpx;
+		text-align: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/wae/wae.vue b/pages/wae/wae.vue
index 9420fe9..1a73b08 100644
--- a/pages/wae/wae.vue
+++ b/pages/wae/wae.vue
@@ -1,336 +1,352 @@
 <template>
-  <view class="pending-bill-page">
-    <!-- 自定义导航栏 -->
-    <custom-navbar title="水电缴费" />
+	<view class="pending-bill-page">
+		<!-- 自定义导航栏 -->
+		<custom-navbar title="水电缴费" />
 
-    <scroll-view
-      scroll-y
-      class="scroll-content"
-      :refresher-enabled="true"
-      :refresher-triggered="isRefreshing"
-      @refresherrefresh="refresh"
-      @scrolltolower="loadMore"
-    >
-      <view v-if="bills.length > 0">
-        <view
-          class="bill-item"
-          v-for="item in bills"
-          :key="item.id"
-        >
-          <!-- 左侧勾选 + 信息 -->
-          <view class="bill-left">
-			<u-checkbox
-                      v-model="item.checked"
-                      @change="toggleCheck(item)"
-                      size="32"
-                      active-color="#007aff"
-                    />
-            <view class="bill-info">
-              <text class="bill-name">{{ item.feeName }}</text>
-              <text class="bill-date">缴费截止：{{ item.dueDate }}</text>
-            </view>
-          </view>
+		<scroll-view scroll-y class="scroll-content" :refresher-enabled="true" :refresher-triggered="isRefreshing"
+			@refresherrefresh="refresh" @scrolltolower="loadMore">
+			<view v-if="bills.length > 0">
+				<view class="bill-item" v-for="item in bills" :key="item.id">
+					<!-- 左侧勾选 + 信息 -->
+					<view class="bill-left">
+						<u-checkbox v-model="item.checked" @change="toggleCheck(item)" size="32"
+							active-color="#EA414A" />
+						<view class="bill-info">
+							<text class="bill-name">{{ item.feeName }}</text>
+							<text class="bill-date">缴费截止：<text class="date">{{ item.dueDate }}</text></text>
+						</view>
+					</view>
 
-          <!-- 右侧金额 + 支付按钮 -->
-          <view class="bill-right">
-            <text class="amount">{{ formatMoney(item.amount) }}</text>
-            <button
-              class="pay-btn"
-              @click="goPayTest([item])"
-            >去支付
-			</button>
-          </view>
-        </view>
+					<!-- 右侧金额 + 支付按钮 -->
+					<view class="bill-right">
+						<text class="amount">{{ formatMoney(item.amount) }}</text>
+						<button class="pay-btn" @click="goPayTest([item])">去支付
+						</button>
+					</view>
+				</view>
+			</view>
+
+			<view v-else class="empty">
+				<u-empty mode="list" text="暂无水电费账单" />
+			</view>
+
+			<u-loadmore :status="loadStatus" />
+		</scroll-view>
+
+		<!-- 底部批量支付栏 -->
+		<view v-if="selectedBills.length > 0" class="batch-pay-bar">
+			<view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
+			<view class="batch-pay-bar-center">
+				合计：<text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
       </view>
-
-      <view v-else class="empty">
-        <u-empty mode="list" text="暂无水电费账单" />
-      </view>
-
-      <u-loadmore :status="loadStatus" />
-    </scroll-view>
-
-   <!-- 底部批量支付栏 -->
-   <view v-if="selectedBills.length > 0" class="batch-pay-bar">
-     <view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
       <view class="batch-pay-bar-right">
-		  <text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
-		  <button  class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
-		    批量缴费
-		  </button>
-	  </view>
-   </view>
-  </view>
+				<button class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary"
+					size="small" @click="goPayTest(selectedBills)">
+					批量缴费
+				</button>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      bills: [],
-      isRefreshing: false,
-      loadStatus: 'more',
-	  sumAmount: 0,
-      selectedBills: [], // 勾选的账单集合
-    };
-  },
-  onLoad() {
-    this.loadBills();
-  },
-  onShow(){
-  },
-  methods: {
-    loadBills() {
-      this.bills = [
-    {
-            id: 1,
-            feeName: '电费（2025.10）',
-            dueDate: '2025-11-20',
-            amount: 120.5,
-  		  checked: false
-          },
-          {
-            id: 2,
-            feeName: '水费（2025.10）',
-            dueDate: '2025-11-22',
-            amount: 60.2,
-  		  checked: false
-          }
-      ];
-	  this.updateSelected();
-    },
-    refresh() {
-      this.isRefreshing = true;
-      setTimeout(() => {
-        this.loadBills();
-        this.isRefreshing = false;
-      }, 1000);
-    },
+	export default {
+		data() {
+			return {
+				bills: [],
+				isRefreshing: false,
+				loadStatus: 'more',
+				sumAmount: 0,
+				selectedBills: [], // 勾选的账单集合
+			};
+		},
+		onLoad() {
+			this.loadBills();
+		},
+		onShow() {},
+		methods: {
+			loadBills() {
+				this.bills = [{
+						id: 1,
+						feeName: '电费（2025.10）',
+						dueDate: '2025-11-20',
+						amount: 120.5,
+						checked: false
+					},
+					{
+						id: 2,
+						feeName: '水费（2025.10）',
+						dueDate: '2025-11-22',
+						amount: 60.2,
+						checked: false
+					}
+				];
+				this.updateSelected();
+			},
+			refresh() {
+				this.isRefreshing = true;
+				setTimeout(() => {
+					this.loadBills();
+					this.isRefreshing = false;
+				}, 1000);
+			},
 
-    loadMore() {
-      this.loadStatus = 'noMore';
-    },
+			loadMore() {
+				this.loadStatus = 'noMore';
+			},
 
-   formatMoney(val) {
-     if (val === null || val === undefined || isNaN(val)) return '—';
-   
-     val = Number(val);
-   
-     if (val >= 10000) {
-       return '¥' + (val / 10000).toFixed(2) + '万';
-     }
-   
-     return '¥' + val.toFixed(2);
-   },
-    toggleCheck(item) {
-	  item.checked = !item.checked;
-	  if(item.checked && !this.selectedBills.some(b => b.id === item.id)) {
-		  this.selectedBills.push(item);
-	  }else{
-		  // 取消勾选时从已选数组移除
-		  this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
-	  } 
-	      let sumFee = 0;
-		  this.selectedBills.forEach(b => sumFee += b.amount);
-		  this.sumAmount = sumFee;
-	},   
-	   updateSelected() {
-         if (!Array.isArray(this.bills)) return;
-         this.selectedBills = this.bills.filter(b => b.checked);
-       },
-    goPayTest(billList) {
-   if (!billList || billList.length === 0) return;
+			formatMoney(val) {
+				if (val === null || val === undefined || isNaN(val)) return '—';
 
-  // 模拟后台生成订单返回
-  const order = {
-    timeStamp: String(Date.now()),          // 时间戳
-    nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
-    package: 'prepay_id=TEST1234567890',    // 模拟预支付ID
-    signType: 'MD5',
-    paySign: 'TEST_SIGN',                   // 模拟签名
-  };
+				val = Number(val);
 
-  // 调用微信支付接口（测试）
-  uni.requestPayment({
-    ...order,
-    success: () => {
-      uni.showToast({ title: '支付成功（测试）', icon: 'success' });
-      // 清空勾选状态
-      billList.forEach(b => b.checked = false);
-      this.updateSelected();
-      // 刷新列表（可选）
-      this.loadBills();
-    },
-    fail: () => {
-      uni.showToast({ title: '支付失败（测试）', icon: 'none' });
-    }
-  });
- },
-   async goPay(billList) {
-  if (!billList || billList.length === 0) return;
+				if (val >= 10000) {
+					return '¥' + (val / 10000).toFixed(2) + '万';
+				}
 
-  try {
-    // 1. 请求后台生成订单
-    const res = await uni.request({
-      url: 'https://api.example.com/payments/create',
-      method: 'POST',
-      data: {
-        userId: this.userId,
-        bills: billList.map(b => b.id),
-      }
-    });
+				return '¥' + val.toFixed(2);
+			},
+			toggleCheck(item) {
+				item.checked = !item.checked;
+				if (item.checked && !this.selectedBills.some(b => b.id === item.id)) {
+					this.selectedBills.push(item);
+				} else {
+					// 取消勾选时从已选数组移除
+					this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
+				}
+				let sumFee = 0;
+				this.selectedBills.forEach(b => sumFee += b.amount);
+				this.sumAmount = sumFee;
+			},
+			updateSelected() {
+				if (!Array.isArray(this.bills)) return;
+				this.selectedBills = this.bills.filter(b => b.checked);
+			},
+			goPayTest(billList) {
+				if (!billList || billList.length === 0) return;
 
-    if (res[1].data.code !== 0) {
-      uni.showToast({ title: res[1].data.msg, icon: 'none' });
-      return;
-    }
+				// 模拟后台生成订单返回
+				const order = {
+					timeStamp: String(Date.now()), // 时间戳
+					nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
+					package: 'prepay_id=TEST1234567890', // 模拟预支付ID
+					signType: 'MD5',
+					paySign: 'TEST_SIGN', // 模拟签名
+				};
 
-    const order = res[1].data.data; // 后台返回的支付参数
+				// 调用微信支付接口（测试）
+				uni.requestPayment({
+					...order,
+					success: () => {
+						uni.showToast({
+							title: '支付成功（测试）',
+							icon: 'success'
+						});
+						// 清空勾选状态
+						billList.forEach(b => b.checked = false);
+						this.updateSelected();
+						// 刷新列表（可选）
+						this.loadBills();
+					},
+					fail: () => {
+						uni.showToast({
+							title: '支付失败（测试）',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			async goPay(billList) {
+				if (!billList || billList.length === 0) return;
 
-    // 2. 调用微信支付
-    uni.requestPayment({
-      timeStamp: order.timeStamp,
-      nonceStr: order.nonceStr,
-      package: order.package,
-      signType: order.signType,
-      paySign: order.paySign,
-      success: () => {
-        uni.showToast({ title: '支付成功', icon: 'success' });
-        // 更新勾选状态
-        billList.forEach(b => b.checked = false);
-        this.updateSelected();
-        // 刷新列表
-        this.loadBills();
-      },
-      fail: () => {
-        uni.showToast({ title: '支付失败', icon: 'none' });
-      }
-    });
+				try {
+					// 1. 请求后台生成订单
+					const res = await uni.request({
+						url: 'https://api.example.com/payments/create',
+						method: 'POST',
+						data: {
+							userId: this.userId,
+							bills: billList.map(b => b.id),
+						}
+					});
 
-  } catch (error) {
-    console.error('支付请求失败', error);
-    uni.showToast({ title: '支付请求失败', icon: 'none' });
-  }
-},
-  }
-};
+					if (res[1].data.code !== 0) {
+						uni.showToast({
+							title: res[1].data.msg,
+							icon: 'none'
+						});
+						return;
+					}
+
+					const order = res[1].data.data; // 后台返回的支付参数
+
+					// 2. 调用微信支付
+					uni.requestPayment({
+						timeStamp: order.timeStamp,
+						nonceStr: order.nonceStr,
+						package: order.package,
+						signType: order.signType,
+						paySign: order.paySign,
+						success: () => {
+							uni.showToast({
+								title: '支付成功',
+								icon: 'success'
+							});
+							// 更新勾选状态
+							billList.forEach(b => b.checked = false);
+							this.updateSelected();
+							// 刷新列表
+							this.loadBills();
+						},
+						fail: () => {
+							uni.showToast({
+								title: '支付失败',
+								icon: 'none'
+							});
+						}
+					});
+
+				} catch (error) {
+					console.error('支付请求失败', error);
+					uni.showToast({
+						title: '支付请求失败',
+						icon: 'none'
+					});
+				}
+			},
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-.pending-bill-page {
-  background: #f7f8fa;
-  min-height: 100vh;
-  padding-top: 175rpx; /* 自定义导航栏高度 */
-}
-
-.scroll-content {
-  padding: 20rpx;
-  box-sizing: border-box;
-}
-
-.bill-item {
-  display: flex;
-  justify-content: space-between;
-  background: #fff;
-  margin-bottom: 20rpx;
-  border-radius: 12rpx;
-  padding: 20rpx;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
-}
-
-.bill-left {
-  display: flex;
-  align-items: center;
-
-  .bill-info {
-    display: flex;
-    flex-direction: column;
-
-    .bill-name {
-      font-size: 28rpx;
-      color: #333;
-      font-weight: bold;
-    }
-
-    .bill-date {
-      font-size: 24rpx;
-      color: #666;
-      margin-top: 6rpx;
-    }
-  }
-}
-
-.bill-right {
-  flex-direction: column;
-  align-items: flex-end;
-  width: 30%;
-   .amount {
-	text-align: center;
-	font-size: 28rpx;
-	height: 28rpx;
-	line-height: 28rpx;
-    font-size: 28rpx;
-    color: #ff7f00;
-  }
-
-  .pay-btn {
-    margin-top: 12rpx;
-    padding: 0 40rpx;
-    height: 60rpx;
-    line-height: 60rpx;
-    border-radius: 30rpx; // 圆角
-    font-size: 28rpx;
-    color: #fff;
-	background: linear-gradient(90deg, #007aff, #00aaff);
-    text-align: center;
-  }
-  .btn-text{
-	  padding-top: 13rpx;
-  }
-}
-
-.batch-pay-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 170rpx;
-  padding: 0 30rpx;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
-  z-index: 999;
-  .batch-pay-bar-left{
-	  font-size: 28rpx;
-	  color: #333;
-  }
- 
-  .batch-pay-bar-right{
-	  flex-direction: column;
-	  align-items: flex-end;
-	  .sumAmount{
-	  	  font-size: 28rpx;
-	  	  color: #ff7f00;
-	  }
-	.bottomPayBtn {
-		    margin-top: 12rpx;
-		    height: 60rpx;
-		    line-height: 60rpx;
-		    padding: 0 40rpx;
-		    border-radius: 30rpx;
-		    font-size: 28rpx;
-		    font-weight: bold;
-		    text-align: center;
-			background: linear-gradient(90deg, #007aff, #00aaff);
+	.pending-bill-page {
+		background: #f7f8fa;
+		min-height: 100vh;
+		padding-top: 120rpx;
+		/* 自定义导航栏高度 */
+	}
+
+	.scroll-content {
+		padding: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.bill-item {
+		display: flex;
+		justify-content: space-between;
+		background: #fff;
+		margin-bottom: 20rpx;
+		border-radius: 12rpx;
+		padding: 20rpx;
+		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.bill-left {
+		display: flex;
+		align-items: center;
+
+		.bill-info {
+			display: flex;
+			flex-direction: column;
+
+			.bill-name {
+				font-size: 30rpx;
+				color: #2D2B2C;
+				font-weight: 500;
+			}
+
+			.bill-date {
+				font-size: 24rpx;
+				color: #86868C;
+				margin-top: 6rpx;
+				
+				.date{
+					font-size: 24rpx;
+					color: #2D2B2C;
+				}
+			}
+		}
+	}
+
+	.bill-right {
+		flex-direction: column;
+		align-items: flex-end;
+		width: 30%;
+
+		.amount {
+			text-align: center;
+			height: 28rpx;
+			line-height: 28rpx;
+			font-size: 30rpx;
+			color: #EF8849;
+		}
+
+		.pay-btn {
+			margin-top: 12rpx;
+			padding: 0 40rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			border-radius: 6rpx; // 圆角
+			font-size: 30rpx;
+			color: #fff;
+			background-color: #F34038;
+			text-align: center;
+		}
+
+		.btn-text {
+			padding-top: 13rpx;
+		}
+	}
+
+	.batch-pay-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 170rpx;
+		padding: 0 30rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
+		z-index: 999;
+
+		.batch-pay-bar-left {
+			font-size: 28rpx;
+			color: #86868C;
+		}
+
+    .batch-pay-bar-center {
+      font-size: 28rpx;
+      color: #222222;
+
+			.sumAmount {
+				font-size: 28rpx;
+				color: #ff7f00;
+			}
+    }
+
+		.batch-pay-bar-right {
+			flex-direction: column;
+			align-items: flex-end;
+
+			.bottomPayBtn {
+				height: 60rpx;
+				line-height: 60rpx;
+				padding: 0 40rpx;
+				border-radius: 6rpx;
+				font-size: 30rpx;
+				font-weight: bold;
+				text-align: center;
+				background: #F34038;
+			}
+		}
 	}
-  }
-}
 
 
-.empty {
-  margin-top: 200rpx;
-  text-align: center;
-}
-</style>
+	.empty {
+		margin-top: 200rpx;
+		text-align: center;
+	}
+</style>
\ No newline at end of file