fix: ui

pages/switch/switch.vue

@@ -1,6 +1,9 @@
 <template>
 	<view class="container">
-		<view v-if="mchList.length === 0 && !loading" class="empty-state">
+		<view v-if="!cardsLoaded || (loading && mchList.length === 0)" class="loading-state">
+			<up-loading-icon text="加载中" size="30"></up-loading-icon>
+		</view>
+		<view v-else-if="mchList.length === 0" class="empty-state">
 			<image class="empty-icon" src="/static/change.png" mode="aspectFit" alt="切换运营商"></image>
 			<view class="empty-title">运营商列表为空</view>
 			<view class="empty-desc">当前设备暂无可切换的运营商</view>
@@ -24,10 +27,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.is_current" class="btn-apple btn-primary action-button" disabled>当前使用</button>
@@ -71,6 +72,7 @@
 
 	let mchList = reactive([]);
 	let loading = ref(false);
+	let cardsLoaded = ref(false);
 	let switching = ref(false);
 	let showIccidModal = ref(false);
 	let currentModalIccid = ref('');
@@ -151,6 +153,7 @@
 			console.error('加载卡列表失败', e);
 		}
 		loading.value = false;
+		cardsLoaded.value = true;
 	};
 
 	const switchOperator = (item) => {
@@ -284,8 +287,8 @@
 		}
 
 		.slot-badge {
-			width: 40rpx;
-			height: 40rpx;
+			width: 32rpx;
+			height: 32rpx;
 			flex-shrink: 0;
 		}
 
@@ -328,26 +331,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); }
-
 		.carrier-statuses {
 			display: flex;
 			align-items: center;
@@ -479,4 +468,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>