From 49175f8a73d2eebeed6874c726bc0a3863bb6449 Mon Sep 17 00:00:00 2001
From: luo <luo@qq.com>
Date: Thu, 30 Jul 2026 14:22:20 +0800
Subject: [PATCH] fix: ui

---
 pages/auth/auth.vue     | 152 ++++++++++++++++++++++++++------
 pages/switch/switch.vue | 190 ++++++++++++++++++++++++++++++----------
 2 files changed, 272 insertions(+), 70 deletions(-)

diff --git a/pages/auth/auth.vue b/pages/auth/auth.vue
index 8f1f259..8372599 100644
--- a/pages/auth/auth.vue
+++ b/pages/auth/auth.vue
@@ -6,22 +6,29 @@
 			<view class="empty-desc">当前账号下暂无可实名的卡片</view>
 		</view>
 
-		<view class="card" v-for="item in list" :key="item.iccid">
-			<view class="flex-row-g20">
-				<view class="logo">
-					<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
+		<view class="card carrier-card" v-for="item in list" :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-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>
+					</view>
 				</view>
-				<view class="flex-col-g20">
-					<view class="iccid">ICCID: {{ item.iccid }}</view>
-					<view class="operator">运营商: {{ getCarrier(item.carrier_type).name }}</view>
-					<view v-if="item.isDevice" class="slot">卡槽位: {{ item.slot_position || '-' }}</view>
+				<view class="carrier-right">
+					<view v-if="item.isDevice" 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.isRealName" class="btn-apple btn-primary action-button" disabled>已实名</button>
+						<button v-else class="btn-apple btn-primary action-button" @tap="toReal(item)">去实名</button>
+					</view>
 				</view>
 			</view>
-
-			<view class="btn mt-30 flex-col-g20">
-				<up-button class="btn-apple btn-primary" v-if="item.isRealName" type="primary">已实名</up-button>
-				<up-button class="btn-apple btn-success" v-else type="success" @tap="toReal(item)">去实名</up-button>
-			</view>
 		</view>
 
 		<view class="modal-overlay" v-if="showIccidModal" @tap="closeModal">
@@ -58,10 +65,16 @@
 	};
 
 	const carrierLogoMap = {
-		CMCC: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182',
-		CUCC: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
-		CTCC: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500',
-		CBN: 'https://img1.baidu.com/it/u=3160680953,3401650303&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+		CMCC: '/static/中国移动.png',
+		CUCC: '/static/中国联通.png',
+		CTCC: '/static/中国电信.png',
+		CBN: '/static/中国广电.png'
+	};
+
+	const slotIconMap = {
+		1: '/static/卡槽1.png',
+		2: '/static/卡槽2.png',
+		3: '/static/卡槽3.png'
 	};
 
 	const getCarrier = (carrierType) => {
@@ -71,6 +84,8 @@
 		};
 	};
 
+	const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
+
 	const loadCards = async () => {
 		loading.value = true;
 		try {
@@ -140,15 +155,100 @@
 
 <style lang="scss" scoped>
 	.container {
-		.card {
-			.logo {
-				width: 80rpx;
-				height: 80rpx;
-				border-radius: 120rpx;
-				border: 1rpx solid var(--primary);
-				overflow: hidden;
-				image { width: 100%; height: 100%; }
-			}
+		.carrier-card {
+			padding: 28rpx;
+		}
+
+		.carrier-main {
+			display: flex;
+			align-items: stretch;
+			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;
+			padding: 10rpx;
+			box-sizing: border-box;
+			border-radius: 24rpx;
+			background: var(--up-primary-light);
+			image { width: 100%; height: 100%; }
+		}
+
+		.carrier-name {
+			margin-top: 16rpx;
+			color: var(--text-primary);
+			font-size: 30rpx;
+			font-weight: 600;
+			line-height: 1.3;
+		}
+
+		.carrier-iccid {
+			width: 100%;
+			display: flex;
+			align-items: flex-start;
+			gap: 12rpx;
+			margin-top: 14rpx;
+		}
+
+		.field-label,
+		.slot-label {
+			color: var(--text-tertiary);
+			font-size: 24rpx;
+		}
+
+		.iccid-value-text {
+			flex: 1;
+			min-width: 0;
+			color: var(--text-secondary);
+			font-size: 24rpx;
+			line-height: 1.35;
+			word-break: break-all;
+		}
+
+		.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;
+		}
+
+		.card-actions {
+			width: 100%;
+		}
+
+		.action-button {
+			width: 100%;
+			height: 64rpx;
+			padding: 0 16rpx;
+			font-size: 26rpx;
+			line-height: 64rpx;
+			box-sizing: border-box;
+			&::after { border: none; }
 		}
 	}
 
diff --git a/pages/switch/switch.vue b/pages/switch/switch.vue
index 9af269e..c58553a 100644
--- a/pages/switch/switch.vue
+++ b/pages/switch/switch.vue
@@ -6,41 +6,39 @@
 			<view class="empty-desc">当前设备暂无可切换的运营商</view>
 		</view>
 
-		<view class="card" v-for="item in mchList" :key="item.iccid">
-			<view class="flex-row-sb mt-30">
-				<view class="flex-row-g20">
-					<view class="logo">
+		<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="flex-col-g20">
-						<view class="flex-row-g20">
-							<view class="iccid">{{ item.iccid }}</view>
-							<view class="operator">
-								<up-tag type="success" size="mini">{{ getCarrier(item.carrier_type).name }}</up-tag>
-							</view>
-						</view>
-						<view class="flex-row-g20">
-							<view class="operator">
-								<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">{{ item.real_name_status === 1 ? '已实名' : '未实名' }}</up-tag>
-							</view>
-							<view v-if="item.network_status" class="operator">
-								<up-tag type="info" size="mini">{{ item.network_status }}</up-tag>
-							</view>
-						</view>
-						<view class="slot">卡槽位: {{ item.slot_position || '-' }}</view>
+					<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>
+					</view>
+					<view class="carrier-statuses">
+						<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">
+							{{ item.real_name_status === 1 ? '已实名' : '未实名' }}
+						</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)">
+							切换此运营商
+						</button>
+						<button v-if="item.real_name_status !== 1" class="btn-apple btn-secondary action-button" @tap="toReal(item)">
+							去实名
+						</button>
 					</view>
 				</view>
-			</view>
-			<view class="btn flex-row-g20 mt-30">
-				<up-button class="btn-apple btn-primary" v-if="item.is_current" type="primary" disabled>
-					当前使用
-				</up-button>
-				<up-button class="btn-apple btn-success" v-else type="success" @tap="switchOperator(item)" :loading="switching">
-					切换此运营商
-				</up-button>
-				<up-button class="btn-apple btn-success" v-if="item.real_name_status !== 1" type="success" @tap="toReal(item)">
-					去实名
-				</up-button>
 			</view>
 		</view>
 
@@ -78,10 +76,16 @@
 	};
 
 	const carrierLogoMap = {
-		CMCC: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182',
-		CUCC: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
-		CTCC: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500',
-		CBN: 'https://img1.baidu.com/it/u=3160680953,3401650303&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+		CMCC: '/static/中国移动.png',
+		CUCC: '/static/中国联通.png',
+		CTCC: '/static/中国电信.png',
+		CBN: '/static/中国广电.png'
+	};
+
+	const slotIconMap = {
+		1: '/static/卡槽1.png',
+		2: '/static/卡槽2.png',
+		3: '/static/卡槽3.png'
 	};
 
 	const getCarrier = (carrierType) => {
@@ -91,6 +95,8 @@
 		};
 	};
 
+	const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
+
 	const loadCards = async () => {
 		loading.value = true;
 		try {
@@ -182,15 +188,111 @@
 
 <style lang="scss" scoped>
 	.container {
-		.card {
-			.logo {
-				width: 80rpx;
-				height: 80rpx;
-				border-radius: 120rpx;
-				border: 1rpx solid var(--primary);
-				overflow: hidden;
-				image { width: 100%; height: 100%; }
-			}
+		.carrier-card {
+			padding: 28rpx;
+		}
+
+		.carrier-main {
+			display: flex;
+			align-items: stretch;
+			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;
+			padding: 10rpx;
+			box-sizing: border-box;
+			border-radius: 24rpx;
+			background: var(--up-primary-light);
+			image { width: 100%; height: 100%; }
+		}
+
+		.carrier-name {
+			margin-top: 16rpx;
+			color: var(--text-primary);
+			font-size: 30rpx;
+			font-weight: 600;
+			line-height: 1.3;
+		}
+
+		.carrier-iccid {
+			width: 100%;
+			display: flex;
+			align-items: flex-start;
+			gap: 12rpx;
+			margin-top: 14rpx;
+		}
+
+		.field-label,
+		.slot-label {
+			color: var(--text-tertiary);
+			font-size: 24rpx;
+		}
+
+		.iccid-value-text {
+			flex: 1;
+			min-width: 0;
+			color: var(--text-secondary);
+			font-size: 24rpx;
+			line-height: 1.35;
+			word-break: break-all;
+		}
+
+		.carrier-statuses {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 10rpx;
+			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;
+		}
+
+		.card-actions {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			gap: 12rpx;
+		}
+
+		.action-button {
+			width: 100%;
+			height: 64rpx;
+			padding: 0 12rpx;
+			font-size: 24rpx;
+			line-height: 64rpx;
+			box-sizing: border-box;
+			&::after { border: none; }
 		}
 	}