fix: ui
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 1m10s

This commit is contained in:
luo
2026-07-30 14:35:40 +08:00
parent 49175f8a73
commit 7ecb4709c8
6 changed files with 75 additions and 200 deletions

View File

@@ -8,20 +8,16 @@
<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-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>
</view>
</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>
<image v-if="item.isDevice" class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
<text v-if="item.isDevice" 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>
@@ -48,6 +44,13 @@
import { ref, reactive, onMounted } from 'vue';
import { assetApi, 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();
@@ -65,16 +68,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) => {
@@ -161,22 +164,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;
@@ -184,8 +180,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;
@@ -193,17 +195,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 {
@@ -215,30 +218,15 @@
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;
width: 56rpx;
height: 56rpx;
flex-shrink: 0;
}
.card-actions {
width: 100%;
width: 240rpx;
margin-top: 20rpx;
}
.action-button {