fix: ui

components/FunctionCard.vue

@@ -4,7 +4,7 @@
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'authentication')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/authentication.png" mode="aspectFit" alt="实名认证"></image>
+					<image class="function-image icon-authentication" src="/static/authentication.png" mode="aspectFit" alt="实名认证"></image>
 				</view>
 				<view :class="['function-name', realNameStatus === '已实名' ? 'text-primary' : '']">
 					{{ realNameStatus || '实名认证' }}
@@ -12,21 +12,21 @@
 			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('sync')" role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/data.png" mode="aspectFit" alt="数据同步"></image>
+					<image class="function-image icon-data" src="/static/data.png" mode="aspectFit" alt="数据同步"></image>
 				</view>
 				<view class="function-name">数据同步</view>
 			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'package-order')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
+					<image class="function-image icon-shop" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
 				</view>
 				<view class="function-name">套餐订购</view>
 			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'notifications')" role="button"
 				tabindex="0">
 				<view class="function-icon function-icon-badge">
-					<image src="/static/notification.png" mode="aspectFit" alt="站内通知"></image>
+					<image class="function-image icon-notification" src="/static/notification.png" mode="aspectFit" alt="站内通知"></image>
 					<view v-if="unreadCount > 0" class="unread-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
 				</view>
 				<view class="function-name">站内通知</view>
@@ -34,34 +34,34 @@
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'order-list')" role="button"
 				tabindex="0">
 				<view class="function-icon">
-					<image src="/static/order.png" mode="aspectFit" alt="我的订单"></image>
+					<image class="function-image icon-order" src="/static/order.png" mode="aspectFit" alt="我的订单"></image>
 				</view>
 				<view class="function-name">我的订单</view>
 			</view>
 			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'back')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/back.png" mode="aspectFit" alt="后台管理"></image>
+					<image class="function-image icon-back" src="/static/back.png" mode="aspectFit" alt="后台管理"></image>
 				</view>
 				<view class="function-name">后台管理</view>
 			</view>
 			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'switch')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/change.png" mode="aspectFit" alt="切换运营商"></image>
+					<image class="function-image icon-change" src="/static/change.png" mode="aspectFit" alt="切换运营商"></image>
 				</view>
 				<view class="function-name">切换运营商</view>
 			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'asset-package')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/asset-package-history.png" mode="aspectFit" alt="资产套餐"></image>
+					<image class="function-image icon-asset-package" src="/static/asset-package-history.png" mode="aspectFit" alt="资产套餐"></image>
 				</view>
 				<view class="function-name">资产套餐</view>
 			</view>
 			<view class="function-item interactive card-interactive" @tap="handleBindPhone" role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/bind-phone.png" mode="aspectFit" alt="绑定手机号"></image>
+					<image class="function-image icon-bind-phone" src="/static/bind-phone.png" mode="aspectFit" alt="绑定手机号"></image>
 				</view>
 				<view :class="['function-name', alreadyBindPhone ? 'text-primary' : 'text-danger']">
 					{{ alreadyBindPhone ? '已绑定' : '未绑定' }}
@@ -70,42 +70,42 @@
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'change-phone')" role="button"
 				tabindex="0">
 				<view class="function-icon">
-					<image src="/static/change-phone.png" mode="aspectFit" alt="更换手机号"></image>
+					<image class="function-image icon-change-phone" src="/static/change-phone.png" mode="aspectFit" alt="更换手机号"></image>
 				</view>
 				<view class="function-name">更换手机号</view>
 			</view>
 			<view class="function-item interactive card-interactive"
 				@tap="$emit('enter', 'device-exchange')" role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/change.png" mode="aspectFit" alt="换货"></image>
+					<image class="function-image icon-change" src="/static/change-shop.png" mode="aspectFit" alt="换货"></image>
 				</view>
 				<view class="function-name">换货</view>
 			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'wallet')" role="button"
 				tabindex="0">
 				<view class="function-icon">
-					<image src="/static/wallet.png" mode="aspectFit" alt="钱包"></image>
+					<image class="function-image icon-wallet" src="/static/wallet-home.png" mode="aspectFit" alt="钱包"></image>
 				</view>
 				<view class="function-name">{{ walletText }}</view>
 			</view>
 			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'restart')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/restart.png" mode="aspectFit" alt="重启设备"></image>
+					<image class="function-image icon-restart" src="/static/restart.png" mode="aspectFit" alt="重启设备"></image>
 				</view>
 				<view class="function-name">重启设备</view>
 			</view>
 			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'recover')"
 				role="button" tabindex="0">
 				<view class="function-icon">
-					<image src="/static/recover.png" mode="aspectFit" alt="恢复出厂"></image>
+					<image class="function-image icon-recover" src="/static/recover.png" mode="aspectFit" alt="恢复出厂"></image>
 				</view>
 				<view class="function-name">恢复出厂</view>
 			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'out')" role="button"
 				tabindex="0">
 				<view class="function-icon">
-					<image src="/static/out.png" mode="aspectFit" alt="退出登录"></image>
+					<image class="function-image icon-out" src="/static/out.png" mode="aspectFit" alt="退出登录"></image>
 				</view>
 				<view class="function-name">退出登录</view>
 			</view>
@@ -192,6 +192,28 @@
 						width: 100%;
 						height: 100%;
 					}
+
+					.function-image {
+						transform-origin: center;
+					}
+
+					.icon-authentication,
+					.icon-shop,
+					.icon-back,
+					.icon-change-phone,
+					.icon-wallet,
+					.icon-restart {
+						transform: scale(0.9);
+					}
+
+					.icon-data { transform: scale(1.1); }
+					.icon-notification,
+					.icon-change,
+					.icon-asset-package { transform: scale(1.05); }
+					.icon-order,
+					.icon-recover { transform: scale(0.97); }
+					.icon-bind-phone { transform: scale(0.99); }
+					.icon-out { transform: scale(1.01); }
 				}
 
 				.function-icon-badge { position: relative; }

pages/device-exchange/device-exchange.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="container">
 		<view v-if="!exchangeData && !loading" class="empty-state">
-			<image class="empty-icon" src="/static/change.png" mode="aspectFit" alt="换货"></image>
+			<image class="empty-icon" src="/static/change-shop.png" mode="aspectFit" alt="换货"></image>
 			<view class="empty-title">暂无换货记录</view>
 			<view class="empty-desc">当前账号下暂无换货记录</view>
 		</view>

pages/order-list/order-list.vue

@@ -296,8 +296,11 @@
 	}
 
 	.scroll-container {
-		flex: 1;
-		height: 100%;
+		flex: 1 1 0;
+		height: auto;
+		min-height: 0;
+		width: 100%;
+		box-sizing: border-box;
 	}
 
 	.empty-state {
@@ -471,6 +474,8 @@
 	.container {
 		top: var(--window-top);
 		background: #f8f9fb;
+		padding: 0;
+		gap: 0;
 		padding-top: 0;
 	}
 
@@ -514,8 +519,11 @@
 	}
 
 	.scroll-container {
-		height: 0;
+		flex: 1 1 0;
+		height: auto;
 		min-height: 0;
+		width: 100%;
+		box-sizing: border-box;
 	}
 
 	.order-list {
@@ -629,28 +637,30 @@
 
 	.order-card .card-footer {
 		display: flex;
-		align-items: center;
+		align-items: stretch;
 		justify-content: flex-start;
 		gap: 16rpx;
 		margin-top: 0;
 		padding: 0 0 28rpx;
 		border-top: 0;
-		flex-direction: row;
+		flex-direction: column;
 	}
 
 	.order-card .card-body .card-footer {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
+		flex-direction: column;
+		align-items: stretch;
 		justify-content: flex-start;
+		gap: 16rpx;
 		margin-top: 0;
 		padding: 0 0 28rpx;
 		border-top: 0;
 	}
 
 	.created-time {
+		width: 100%;
 		min-width: 0;
-		flex: 1;
+		flex: none;
 		color: #777b84;
 		font-size: 24rpx;
 		line-height: 1.3;
@@ -665,6 +675,7 @@
 		align-items: center;
 		gap: 16rpx;
 		margin-left: auto;
+		align-self: flex-end;
 		flex-shrink: 0;
 	}