fix: ui

pages/auth/auth.vue

@@ -1,6 +1,9 @@
 <template>
 	<view class="container">
-		<view v-if="list.length === 0 && !loading" class="empty-state">
+		<view v-if="!cardsLoaded || (loading && list.length === 0)" class="loading-state">
+			<up-loading-icon text="加载中" size="30"></up-loading-icon>
+		</view>
+		<view v-else-if="list.length === 0" class="empty-state">
 			<image class="empty-icon" src="/static/authentication.png" mode="aspectFit" alt="实名认证"></image>
 			<view class="empty-title">认证列表为空</view>
 			<view class="empty-desc">当前账号下暂无可实名的卡片</view>
@@ -18,10 +21,8 @@
 					</view>
 					<view class="carrier-iccid">
 						<text class="iccid-value-text">{{ item.iccid }}</text>
-						<view class="copy-icon" @tap.stop="copyIccid(item.iccid)" aria-label="复制ICCID">
-							<view class="copy-back"></view>
-							<view class="copy-front"></view>
-						</view>
+						<image class="copy-icon" src="/static/复制.png" mode="aspectFit"
+							@tap.stop="copyIccid(item.iccid)" aria-label="复制ICCID"></image>
 					</view>
 					<view class="card-actions">
 						<button v-if="item.isRealName" class="btn-apple btn-primary action-button" disabled>已实名</button>
@@ -60,6 +61,7 @@
 
 	let list = reactive([]);
 	let loading = ref(false);
+	let cardsLoaded = ref(false);
 	let showIccidModal = ref(false);
 	let currentModalIccid = ref('');
 	let currentCard = ref(null);
@@ -127,6 +129,7 @@
 			console.error('加载卡列表失败', e);
 		}
 		loading.value = false;
+		cardsLoaded.value = true;
 	};
 
 	const toReal = async (card) => {
@@ -195,8 +198,8 @@
 		}
 
 		.slot-badge {
-			width: 40rpx;
-			height: 40rpx;
+			width: 32rpx;
+			height: 32rpx;
 			flex-shrink: 0;
 		}
 
@@ -238,26 +241,12 @@
 		}
 
 		.copy-icon {
-			position: relative;
 			width: 30rpx;
 			height: 30rpx;
 			flex-shrink: 0;
 			cursor: pointer;
 		}
 
-		.copy-back,
-		.copy-front {
-			position: absolute;
-			width: 15rpx;
-			height: 15rpx;
-			border: 3rpx solid var(--text-tertiary);
-			border-radius: 4rpx;
-			box-sizing: border-box;
-		}
-
-		.copy-back { top: 3rpx; left: 3rpx; }
-		.copy-front { right: 2rpx; bottom: 2rpx; background: var(--bg-primary); }
-
 		.card-actions {
 			width: 100%;
 			margin-top: 20rpx;
@@ -369,4 +358,11 @@
 		.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
 		.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
 	}
+
+	.loading-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 500rpx;
+	}
 </style>