fix: ui

pages/switch/switch.vue

@@ -8,14 +8,16 @@
 
 		<view class="card carrier-card" v-for="item in mchList" :key="item.iccid">
 			<view class="carrier-main">
-				<view class="carrier-left">
-					<view class="carrier-logo">
-						<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
-					</view>
+				<view class="carrier-logo">
+					<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
+				</view>
+				<view class="carrier-details">
 					<view class="carrier-name">{{ getCarrier(item.carrier_type).name }}</view>
 					<view class="carrier-iccid">
 						<text class="field-label">ICCID</text>
 						<text class="iccid-value-text">{{ item.iccid }}</text>
+						<image class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
+						<text class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
 					</view>
 					<view class="carrier-statuses">
 						<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">
@@ -23,12 +25,6 @@
 						</up-tag>
 						<up-tag v-if="item.network_status" type="info" size="mini">{{ item.network_status }}</up-tag>
 					</view>
-				</view>
-				<view class="carrier-right">
-					<view class="slot-panel">
-						<image class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
-						<text class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
-					</view>
 					<view class="card-actions">
 						<button v-if="item.is_current" class="btn-apple btn-primary action-button" disabled>当前使用</button>
 						<button v-else class="btn-apple btn-primary action-button" :disabled="switching" @tap="switchOperator(item)">
@@ -59,6 +55,13 @@
 	import { reactive, ref, onMounted } from 'vue';
 	import { assetApi, deviceApi, realnameApi } from '@/api/index.js';
 	import { useUserStore } from '@/store/index.js';
+	import cmccLogo from '@/static/中国移动.png';
+	import cuccLogo from '@/static/中国联通.png';
+	import ctccLogo from '@/static/中国电信.png';
+	import cbnLogo from '@/static/中国广电.png';
+	import slot1Icon from '@/static/卡槽1.png';
+	import slot2Icon from '@/static/卡槽2.png';
+	import slot3Icon from '@/static/卡槽3.png';
 
 	const userStore = useUserStore();
 
@@ -76,16 +79,16 @@
 	};
 
 	const carrierLogoMap = {
-		CMCC: '/static/中国移动.png',
-		CUCC: '/static/中国联通.png',
-		CTCC: '/static/中国电信.png',
-		CBN: '/static/中国广电.png'
+		CMCC: cmccLogo,
+		CUCC: cuccLogo,
+		CTCC: ctccLogo,
+		CBN: cbnLogo
 	};
 
 	const slotIconMap = {
-		1: '/static/卡槽1.png',
-		2: '/static/卡槽2.png',
-		3: '/static/卡槽3.png'
+		1: slot1Icon,
+		2: slot2Icon,
+		3: slot3Icon
 	};
 
 	const getCarrier = (carrierType) => {
@@ -194,22 +197,15 @@
 
 		.carrier-main {
 			display: flex;
-			align-items: stretch;
+			align-items: flex-start;
 			justify-content: space-between;
 			gap: 24rpx;
 		}
 
-		.carrier-left {
-			flex: 1;
-			min-width: 0;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-		}
-
 		.carrier-logo {
 			width: 112rpx;
 			height: 112rpx;
+			flex-shrink: 0;
 			padding: 10rpx;
 			box-sizing: border-box;
 			border-radius: 24rpx;
@@ -217,8 +213,14 @@
 			image { width: 100%; height: 100%; }
 		}
 
+		.carrier-details {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
 		.carrier-name {
-			margin-top: 16rpx;
 			color: var(--text-primary);
 			font-size: 30rpx;
 			font-weight: 600;
@@ -226,17 +228,18 @@
 		}
 
 		.carrier-iccid {
-			width: 100%;
 			display: flex;
-			align-items: flex-start;
+			align-items: center;
 			gap: 12rpx;
 			margin-top: 14rpx;
+			min-width: 0;
 		}
 
 		.field-label,
 		.slot-label {
 			color: var(--text-tertiary);
 			font-size: 24rpx;
+			white-space: nowrap;
 		}
 
 		.iccid-value-text {
@@ -256,30 +259,15 @@
 			margin-top: 14rpx;
 		}
 
-		.carrier-right {
-			width: 190rpx;
-			flex-shrink: 0;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: space-between;
-			gap: 20rpx;
-		}
-
-		.slot-panel {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 8rpx;
-		}
-
 		.slot-icon {
-			width: 96rpx;
-			height: 96rpx;
+			width: 56rpx;
+			height: 56rpx;
+			flex-shrink: 0;
 		}
 
 		.card-actions {
 			width: 100%;
+			margin-top: 20rpx;
 			display: flex;
 			flex-direction: column;
 			gap: 12rpx;