From 89aafa7317896902c26a372d309a950a3bd3660d Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Thu, 16 Apr 2026 11:13:57 +0800
Subject: [PATCH] fix: UI

---
 pages/my-wallet/my-wallet.vue | 132 ++++++++++++++++------------------
 1 file changed, 62 insertions(+), 70 deletions(-)

diff --git a/pages/my-wallet/my-wallet.vue b/pages/my-wallet/my-wallet.vue
index 20159d2..013941d 100644
--- a/pages/my-wallet/my-wallet.vue
+++ b/pages/my-wallet/my-wallet.vue
@@ -2,24 +2,17 @@
 	<view class="container">
 		<view class="pd-20">
 		<view class="wallet-card">
-			<view class="balance-section">
-				<view class="balance-header">
-					<view class="balance-label">账户余额(元)</view>
-					<view class="recharge-btn-wrapper">
-						<button class="btn-recharge" @tap="showRechargeModal = true">充值</button>
-					</view>
+			<view class="wallet-header">
+				<view class="header-left">
+					<view class="balance-label">账户余额</view>
+					<view class="balance-amount">¥{{ formatMoney(walletDetail.balance) }}</view>
 				</view>
-				<view class="balance-amount">{{ formatMoney(walletDetail.balance) }}</view>
+				<button class="btn-recharge" @tap="showRechargeModal = true">充值</button>
 			</view>
-			<view class="wallet-footer">
-				<view class="footer-item">
-					<view class="footer-label">冻结金额</view>
-					<view class="footer-value">{{ formatMoney(walletDetail.frozen_balance) }}</view>
-				</view>
-				<view class="footer-divider"></view>
-				<view class="footer-item">
-					<view class="footer-label">更新时间</view>
-					<view class="footer-value">{{ formatDateTime(walletDetail.updated_at) }}</view>
+			<view class="wallet-info">
+				<view class="info-item">
+					<view class="info-label">冻结金额</view>
+					<view class="info-value">¥{{ formatMoney(walletDetail.frozen_balance) }}</view>
 				</view>
 			</view>
 		</view>
@@ -38,7 +31,7 @@
 			<swiper class="tab-swiper" :current="currentTab" @change="onSwiperChange" :circular="false"
 				:acceleration="true">
 				<swiper-item class="swiper-item-content">
-					<scroll-view scroll-y class="list-content">
+					<scroll-view scroll-y class="list-content" @scrolltolower="loadMoreRecharge">
 						<view v-if="rechargeList.length === 0 && !rechargeLoading" class="empty-state">
 							<view class="empty-icon">📋</view>
 							<view class="empty-title">暂无充值订单</view>
@@ -78,14 +71,13 @@
 							<view class="load-more" v-if="rechargeList.length > 0">
 								<text v-if="rechargeLoading">加载中...</text>
 								<text v-else-if="rechargeNoMore">— 没有更多了 —</text>
-								<text v-else @tap="loadMoreRecharge">点击加载更多</text>
 							</view>
 						</view>
 					</scroll-view>
 				</swiper-item>
 
 				<swiper-item class="swiper-item-content">
-					<scroll-view scroll-y class="list-content">
+					<scroll-view scroll-y class="list-content" @scrolltolower="loadMoreTransaction">
 						<view v-if="transactionList.length === 0 && !transactionLoading" class="empty-state">
 							<view class="empty-icon">💰</view>
 							<view class="empty-title">暂无钱包流水</view>
@@ -123,7 +115,6 @@
 							<view class="load-more" v-if="transactionList.length > 0">
 								<text v-if="transactionLoading">加载中...</text>
 								<text v-else-if="transactionNoMore">— 没有更多了 —</text>
-								<text v-else @tap="loadMoreTransaction">点击加载更多</text>
 							</view>
 						</view>
 					</scroll-view>
@@ -601,75 +592,76 @@
 	}
 
 	.wallet-card {
-		background: linear-gradient(135deg, #0A84FF 0%, #5AC8FA 50%, #64D2FF 100%);
-		border-radius: 24rpx;
-		padding: 36rpx;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		border-radius: var(--radius-large);
+		padding: 40rpx;
 		color: #fff;
-		box-shadow: 0 8rpx 32rpx rgba(10, 132, 255, 0.3);
+		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.25);
 
-		.balance-section {
-			margin-bottom: 28rpx;
+		.wallet-header {
+			display: flex;
+			align-items: flex-end;
+			justify-content: space-between;
+			margin-bottom: 32rpx;
 
-			.balance-header {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				margin-bottom: 8rpx;
+			.header-left {
+				flex: 1;
 
 				.balance-label {
-					font-size: 24rpx;
-					opacity: 0.75;
+					font-size: 26rpx;
+					opacity: 0.85;
+					margin-bottom: 12rpx;
+					font-weight: 500;
 				}
 
-				.recharge-btn-wrapper {
-					.btn-recharge {
-						background: #fff;
-						border: none;
-						color: var(--primary);
-						font-size: 26rpx;
-						padding: 12rpx 32rpx;
-						border-radius: 40rpx;
-						font-weight: 600;
-						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-
-						&::after {
-							border: none;
-						}
-					}
+				.balance-amount {
+					font-size: 64rpx;
+					font-weight: 700;
+					letter-spacing: -2rpx;
+					line-height: 1;
 				}
 			}
 
-			.balance-amount {
-				font-size: 72rpx;
-				font-weight: 700;
-				letter-spacing: -2rpx;
+			.btn-recharge {
+				background: rgba(255, 255, 255, 0.2);
+				backdrop-filter: blur(10px);
+				border: 2rpx solid rgba(255, 255, 255, 0.3);
+				color: #fff;
+				font-size: 28rpx;
+				padding: 16rpx 32rpx;
+				border-radius: 50rpx;
+				font-weight: 600;
+				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+				transition: all 0.3s ease;
+
+				&::after {
+					border: none;
+				}
+
+				&:active {
+					background: rgba(255, 255, 255, 0.3);
+					transform: scale(0.95);
+				}
 			}
 		}
 
-		.wallet-footer {
-			display: flex;
-			align-items: center;
+		.wallet-info {
 			padding-top: 24rpx;
 			border-top: 1rpx solid rgba(255, 255, 255, 0.2);
 
-			.footer-divider {
-				width: 1rpx;
-				height: 40rpx;
-				background: rgba(255, 255, 255, 0.3);
-				margin: 0 32rpx;
-			}
+			.info-item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
 
-			.footer-item {
-				flex: 1;
-
-				.footer-label {
-					font-size: 22rpx;
-					opacity: 0.7;
-					margin-bottom: 6rpx;
+				.info-label {
+					font-size: 24rpx;
+					opacity: 0.8;
+					font-weight: 500;
 				}
 
-				.footer-value {
-					font-size: 26rpx;
+				.info-value {
+					font-size: 28rpx;
 					font-weight: 600;
 				}
 			}