fix: 资产信息ui

src/views/asset-management/asset-information/components/BasicInfoCard.vue

@@ -40,68 +40,140 @@
         </div>
       </div>
     </template>
-    <ElDescriptions :column="descriptionsColumn" direction="vertical" border size="large">
+    <ElDescriptions
+      class="asset-descriptions"
+      :column="descriptionsColumn"
+      direction="vertical"
+      border
+      size="large"
+    >
       <!-- 卡专属字段 -->
       <template v-if="cardInfo?.asset_type === 'card'">
-        <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="MSISDN">{{ cardInfo?.msisdn || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="运营商账户">{{ carrierAccountDisplay }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="实名状态">
+        <ElDescriptionsItem
+          label="ICCID"
+          label-class-name="asset-label asset-label--identifier-iccid"
+          >{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="MSISDN"
+          label-class-name="asset-label asset-label--identifier-msisdn"
+          >{{ cardInfo?.msisdn || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="运营商账户"
+          label-class-name="asset-label asset-label--operator-account"
+          >{{ carrierAccountDisplay }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="实名状态"
+          label-class-name="asset-label asset-label--realname-status"
+        >
           <ElTag :type="getRealNameStatusType(cardInfo?.real_name_status)" size="small">
             {{ getRealNameStatusName(cardInfo?.real_name_status) }}
           </ElTag>
         </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="canShowSensitiveFields" label="实名认证策略">
+        <ElDescriptionsItem
+          v-if="canShowSensitiveFields"
+          label="实名认证策略"
+          label-class-name="asset-label asset-label--realname-policy"
+        >
           {{ getRealnamePolicyName(cardInfo?.realname_policy) }}
         </ElDescriptionsItem>
 
-        <ElDescriptionsItem label="店铺">{{ cardInfo?.shop_name || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="套餐系列">{{ cardInfo?.series_name || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="虚拟号">{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="网络状态">
+        <ElDescriptionsItem label="店铺" label-class-name="asset-label asset-label--shop">{{
+          cardInfo?.shop_name || '-'
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem
+          label="套餐系列"
+          label-class-name="asset-label asset-label--package-series"
+          >{{ cardInfo?.series_name || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="虚拟号"
+          label-class-name="asset-label asset-label--virtual-number"
+          >{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="网络状态"
+          label-class-name="asset-label asset-label--network-status"
+        >
           <ElTag :type="cardInfo?.network_status === 1 ? 'success' : 'danger'" size="small">
             {{ cardInfo?.network_status === 1 ? '正常' : '停机' }}
           </ElTag>
         </ElDescriptionsItem>
 
-        <ElDescriptionsItem v-if="canShowCardMonthUsage" label="本月已用流量">{{
-          formatDataSize(cardInfo?.current_month_usage_mb || 0)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem v-if="canShowCardMonthUsage" label="运营商周期月内已用流量">{{
-          formatDataSize(cardInfo?.last_gateway_reading_mb || 0)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="实名时间">{{
-          cardInfo?.real_name_at ? formatDateTime(cardInfo.real_name_at) : '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="实名同步时间">{{
-          formatDateTime(cardInfo?.last_real_name_check_at) || '-'
-        }}</ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-if="canShowCardMonthUsage"
+          label="本月已用流量"
+          label-class-name="asset-label asset-label--usage-month"
+          >{{ formatDataSize(cardInfo?.current_month_usage_mb || 0) }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          v-if="canShowCardMonthUsage"
+          label="运营商周期月内已用流量"
+          label-class-name="asset-label asset-label--usage-cycle"
+          >{{ formatDataSize(cardInfo?.last_gateway_reading_mb || 0) }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="实名时间"
+          label-class-name="asset-label asset-label--realname-time"
+          >{{
+            cardInfo?.real_name_at ? formatDateTime(cardInfo.real_name_at) : '-'
+          }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="实名同步时间"
+          label-class-name="asset-label asset-label--realname-sync"
+          >{{ formatDateTime(cardInfo?.last_real_name_check_at) || '-' }}</ElDescriptionsItem
+        >
 
-        <ElDescriptionsItem label="IMEI">{{
-          cardInfo?.gateway_card_imei || '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="资产状态">
+        <ElDescriptionsItem
+          label="IMEI"
+          label-class-name="asset-label asset-label--identifier-imei"
+          >{{ cardInfo?.gateway_card_imei || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="资产状态"
+          label-class-name="asset-label asset-label--asset-status"
+        >
           <ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
             {{ getAssetStatusName(cardInfo?.status) }}
           </ElTag>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="卡状态同步时间">{{
-          formatDateTime(cardInfo?.last_card_status_check_at) || '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="流量同步时间">{{
-          formatDateTime(cardInfo?.last_data_check_at) || '-'
-        }}</ElDescriptionsItem>
+        <ElDescriptionsItem
+          label="卡状态同步时间"
+          label-class-name="asset-label asset-label--card-sync"
+          >{{ formatDateTime(cardInfo?.last_card_status_check_at) || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="流量同步时间"
+          label-class-name="asset-label asset-label--traffic-sync"
+          >{{ formatDateTime(cardInfo?.last_data_check_at) || '-' }}</ElDescriptionsItem
+        >
 
-        <ElDescriptionsItem label="运营商状态" :span="1">
+        <ElDescriptionsItem
+          label="运营商状态"
+          label-class-name="asset-label asset-label--operator-status"
+          :span="1"
+        >
           <span class="gateway-extend-text">{{ cardInfo?.gateway_extend || '-' }}</span>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="所有套餐已用量">
+        <ElDescriptionsItem
+          label="所有套餐已用量"
+          label-class-name="asset-label asset-label--package-used"
+        >
           {{ formatUsageSummaryMb(cardInfo?.total_virtual_used_mb) }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="所有套餐剩余量">
+        <ElDescriptionsItem
+          label="所有套餐剩余量"
+          label-class-name="asset-label asset-label--package-remaining"
+        >
           {{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="预计套餐到期时间">
+        <ElDescriptionsItem
+          label="预计套餐到期时间"
+          label-class-name="asset-label asset-label--package-expire-estimate"
+        >
           <span
             :class="getExpiryEstimateClass(cardInfo)"
             :title="getExpiryEstimateTooltip(cardInfo)"
@@ -111,7 +183,10 @@
         </ElDescriptionsItem>
 
         <template v-if="cardInfo?.bound_device_id">
-          <ElDescriptionsItem label="绑定设备号">
+          <ElDescriptionsItem
+            label="绑定设备号"
+            label-class-name="asset-label asset-label--bound-device-number"
+          >
             <ElButton
               type="primary"
               link
@@ -120,7 +195,10 @@
               {{ cardInfo?.bound_device_no || '-' }}
             </ElButton>
           </ElDescriptionsItem>
-          <ElDescriptionsItem label="绑定设备名称">
+          <ElDescriptionsItem
+            label="绑定设备名称"
+            label-class-name="asset-label asset-label--bound-device-name"
+          >
             {{ cardInfo?.bound_device_name || '-' }}
           </ElDescriptionsItem>
         </template>
@@ -128,15 +206,31 @@
 
       <!-- 设备专属字段 -->
       <template v-if="cardInfo?.asset_type === 'device'">
-        <ElDescriptionsItem label="IMEI">{{ cardInfo?.imei || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="设备名称">{{ cardInfo?.device_name || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="店铺">{{ cardInfo?.shop_name || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="设备状态">
+        <ElDescriptionsItem
+          label="IMEI"
+          label-class-name="asset-label asset-label--identifier-imei"
+          >{{ cardInfo?.imei || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="设备名称"
+          label-class-name="asset-label asset-label--device-name"
+          >{{ cardInfo?.device_name || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem label="店铺" label-class-name="asset-label asset-label--shop">{{
+          cardInfo?.shop_name || '-'
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem
+          label="设备状态"
+          label-class-name="asset-label asset-label--device-status"
+        >
           <ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
             {{ getAssetStatusName(cardInfo?.status) }}
           </ElTag>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="实名状态">
+        <ElDescriptionsItem
+          label="实名状态"
+          label-class-name="asset-label asset-label--realname-status"
+        >
           <ElTag
             v-if="selectedDeviceStatusCard"
             :type="getRealNameStatusType(selectedDeviceStatusCard.real_name_status)"
@@ -146,19 +240,31 @@
           </ElTag>
           <span v-else>-</span>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="激活状态">
+        <ElDescriptionsItem
+          label="激活状态"
+          label-class-name="asset-label asset-label--activation-status"
+        >
           {{ cardInfo?.activation_status_name || '-' }}
         </ElDescriptionsItem>
 
-        <ElDescriptionsItem label="设备型号">{{
-          cardInfo?.device_model || '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="实名时间">{{
-          selectedDeviceStatusCard?.real_name_at
-            ? formatDateTime(selectedDeviceStatusCard.real_name_at)
-            : '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="在线状态">
+        <ElDescriptionsItem
+          label="设备型号"
+          label-class-name="asset-label asset-label--device-model"
+          >{{ cardInfo?.device_model || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="实名时间"
+          label-class-name="asset-label asset-label--realname-time"
+          >{{
+            selectedDeviceStatusCard?.real_name_at
+              ? formatDateTime(selectedDeviceStatusCard.real_name_at)
+              : '-'
+          }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="在线状态"
+          label-class-name="asset-label asset-label--online-status"
+        >
           <ElTag
             v-if="cardInfo?.online_status !== undefined"
             :type="getOnlineStatusType(cardInfo?.online_status)"
@@ -168,34 +274,68 @@
           </ElTag>
           <span v-else>-</span>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="虚拟号">{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="切卡模式">{{
-          getSwitchModeName(cardInfo?.switch_mode)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="已绑定卡数">{{
-          cardInfo?.bound_card_count || 0
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="最大卡槽数">{{
-          cardInfo?.max_sim_slots || '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem v-if="canShowSensitiveFields" label="实名认证策略">
+        <ElDescriptionsItem
+          label="虚拟号"
+          label-class-name="asset-label asset-label--virtual-number"
+          >{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="切卡模式"
+          label-class-name="asset-label asset-label--switch-mode"
+          >{{ getSwitchModeName(cardInfo?.switch_mode) }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="已绑定卡数"
+          label-class-name="asset-label asset-label--bound-card-count"
+          >{{ cardInfo?.bound_card_count || 0 }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="最大卡槽数"
+          label-class-name="asset-label asset-label--max-slots"
+          >{{ cardInfo?.max_sim_slots || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          v-if="canShowSensitiveFields"
+          label="实名认证策略"
+          label-class-name="asset-label asset-label--realname-policy"
+        >
           {{ getRealnamePolicyName(cardInfo?.realname_policy) }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="设备类型">{{ cardInfo?.device_type || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem v-if="canShowSensitiveFields" label="制造商">{{
-          cardInfo?.manufacturer || '-'
+        <ElDescriptionsItem
+          label="设备类型"
+          label-class-name="asset-label asset-label--device-type"
+          >{{ cardInfo?.device_type || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          v-if="canShowSensitiveFields"
+          label="制造商"
+          label-class-name="asset-label asset-label--manufacturer"
+          >{{ cardInfo?.manufacturer || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem
+          label="最后在线时间"
+          label-class-name="asset-label asset-label--last-online"
+          >{{ formatDateTime(cardInfo?.last_online_time) || '-' }}</ElDescriptionsItem
+        >
+        <ElDescriptionsItem label="SN" label-class-name="asset-label asset-label--identifier-sn">{{
+          cardInfo?.sn || '-'
         }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="最后在线时间">{{
-          formatDateTime(cardInfo?.last_online_time) || '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="SN">{{ cardInfo?.sn || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="所有套餐已用量">
+        <ElDescriptionsItem
+          label="所有套餐已用量"
+          label-class-name="asset-label asset-label--package-used"
+        >
           {{ formatUsageSummaryMb(cardInfo?.total_virtual_used_mb) }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="所有套餐剩余量">
+        <ElDescriptionsItem
+          label="所有套餐剩余量"
+          label-class-name="asset-label asset-label--package-remaining"
+        >
           {{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="预计套餐到期时间">
+        <ElDescriptionsItem
+          label="预计套餐到期时间"
+          label-class-name="asset-label asset-label--package-expire-estimate"
+        >
           <span
             :class="getExpiryEstimateClass(cardInfo)"
             :title="getExpiryEstimateTooltip(cardInfo)"
@@ -203,9 +343,11 @@
             {{ getExpiryEstimateText(cardInfo) }}
           </span>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="最后同步时间">{{
-          formatDateTime(deviceRealtime?.last_sync_time) || '-'
-        }}</ElDescriptionsItem>
+        <ElDescriptionsItem
+          label="最后同步时间"
+          label-class-name="asset-label asset-label--last-sync"
+          >{{ formatDateTime(deviceRealtime?.last_sync_time) || '-' }}</ElDescriptionsItem
+        >
       </template>
     </ElDescriptions>
 
@@ -384,6 +526,7 @@
       </ElDivider>
       <div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" class="realtime-section">
         <ElDescriptions
+          class="asset-descriptions"
           :column="descriptionsColumn"
           direction="vertical"
           border
@@ -393,6 +536,7 @@
             v-for="item in realtimeDescriptionItems"
             :key="item.key"
             :label="item.label"
+            :label-class-name="`asset-label asset-label--${item.icon}`"
             :span="item.span ?? 1"
           >
             <ElTag v-if="item.tagType" :type="item.tagType" size="small">
@@ -799,6 +943,7 @@
     key: string
     label: string
     value: string
+    icon: string
     tagType?: 'primary' | 'success' | 'warning' | 'info' | 'danger'
     span?: number
   }
@@ -811,11 +956,13 @@
         key: 'status',
         label: '在线状态',
         value: getOnlineStatusName(realtime?.online_status),
+        icon: 'online-status',
         tagType: getOnlineStatusType(realtime?.online_status)
       },
       {
         key: 'battery',
         label: '电量',
+        icon: 'battery',
         value:
           realtime?.battery_level !== null && realtime?.battery_level !== undefined
             ? `${realtime.battery_level}%`
@@ -824,72 +971,85 @@
       {
         key: 'boot',
         label: '本次开机时长',
-        value: formatDuration(realtime?.run_time)
+        value: formatDuration(realtime?.run_time),
+        icon: 'boot-time'
       },
       {
         key: 'connect',
         label: '本次联网时长',
-        value: formatDuration(realtime?.connect_time)
+        value: formatDuration(realtime?.connect_time),
+        icon: 'connection-time'
       },
       {
         key: 'online',
         label: '最后在线时间',
-        value: formatDateTime(realtime?.last_online_time) || '-'
+        value: formatDateTime(realtime?.last_online_time) || '-',
+        icon: 'last-online'
       },
       {
         key: 'realname',
         label: '实名同步时间',
-        value: formatDateTime(props.cardInfo?.last_real_name_check_at) || '-'
+        value: formatDateTime(props.cardInfo?.last_real_name_check_at) || '-',
+        icon: 'realname-sync'
       },
       {
         key: 'cardSync',
         label: '卡状态同步时间',
-        value: formatDateTime(props.cardInfo?.last_card_status_check_at) || '-'
+        value: formatDateTime(props.cardInfo?.last_card_status_check_at) || '-',
+        icon: 'card-sync'
       },
       {
         key: 'trafficSync',
         label: '流量同步时间',
-        value: formatDateTime(props.cardInfo?.last_data_check_at) || '-'
+        value: formatDateTime(props.cardInfo?.last_data_check_at) || '-',
+        icon: 'traffic-sync'
       },
       {
         key: 'signal',
         label: '信号综合判断',
         value: getSignalQualityText(realtime?.signal_quality),
+        icon: 'signal-quality',
         tagType: getSignalQualityType(realtime?.signal_quality)
       },
       {
         key: 'signalReason',
         label: '信号较弱原因',
-        value: getSignalBadReasonText(realtime?.signal_bad_reason)
+        value: getSignalBadReasonText(realtime?.signal_bad_reason),
+        icon: 'signal-reason'
       },
       {
         key: 'clients',
         label: '已连接设备数',
-        value: `${realtime?.client_number ?? '-'} / ${realtime?.max_clients ?? '-'}`
+        value: `${realtime?.client_number ?? '-'} / ${realtime?.max_clients ?? '-'}`,
+        icon: 'connected-clients'
       },
       {
         key: 'wifi',
         label: 'WiFi 状态',
         value:
           realtime?.wifi_enabled === undefined ? '-' : realtime.wifi_enabled ? '已开启' : '已关闭',
+        icon: 'wifi-status',
         tagType: realtime?.wifi_enabled ? 'success' : 'info'
       },
       {
         key: 'wifiName',
         label: 'WiFi 名称',
-        value: realtime?.ssid || '-'
+        value: realtime?.ssid || '-',
+        icon: 'wifi-name'
       },
       {
         key: 'wifiPassword',
         label: 'WiFi 密码',
-        value: realtime?.wifi_password || '-'
+        value: realtime?.wifi_password || '-',
+        icon: 'wifi-password'
       },
-      { key: 'wan', label: 'WAN IP', value: realtime?.wan_ip || '-' },
-      { key: 'lan', label: 'LAN IP', value: realtime?.lan_ip || '-' },
+      { key: 'wan', label: 'WAN IP', value: realtime?.wan_ip || '-', icon: 'wan-ip' },
+      { key: 'lan', label: 'LAN IP', value: realtime?.lan_ip || '-', icon: 'lan-ip' },
       {
         key: 'mac',
         label: 'MAC 地址',
-        value: realtime?.mac_address || '-'
+        value: realtime?.mac_address || '-',
+        icon: 'mac-address'
       },
       {
         key: 'limit',
@@ -899,28 +1059,34 @@
             ? '-'
             : realtime.limit_speed
               ? `${realtime.limit_speed} KB/s`
-              : '不限速'
+              : '不限速',
+        icon: 'speed-limit'
       },
       {
         key: 'switchMode',
         label: '切卡模式',
-        value: realtime?.switch_mode === '0' ? '自动' : realtime?.switch_mode === '1' ? '手动' : '-'
+        value:
+          realtime?.switch_mode === '0' ? '自动' : realtime?.switch_mode === '1' ? '手动' : '-',
+        icon: 'switch-mode'
       },
       {
         key: 'interval',
         label: '上报周期',
-        value: realtime?.sync_interval ? `${realtime.sync_interval} 秒` : '-'
+        value: realtime?.sync_interval ? `${realtime.sync_interval} 秒` : '-',
+        icon: 'report-interval'
       },
       {
         key: 'firmware',
         label: '固件版本',
         value: realtime?.software_version || '-',
+        icon: 'firmware-version',
         span: descriptionsColumn.value >= 5 ? 2 : 1
       },
       {
         key: 'updated',
         label: '信息更新时间',
-        value: formatDateTime(realtime?.last_update_time) || '-'
+        value: formatDateTime(realtime?.last_update_time) || '-',
+        icon: 'realtime-updated'
       }
     ]
   })
@@ -1170,6 +1336,256 @@
         }
       }
 
+      .asset-descriptions {
+        :deep(.el-descriptions__label.is-vertical-label) {
+          padding: 8px 15px;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 18px;
+          color: var(--el-text-color-secondary);
+          background-color: var(--el-fill-color-extra-light);
+        }
+
+        :deep(.asset-label::before) {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          margin-right: 6px;
+          font-family: iconfont-sys, sans-serif !important;
+          font-size: 16px;
+          line-height: 1;
+          vertical-align: -3px;
+          color: var(--el-color-primary);
+          content: '';
+          opacity: 0.82;
+        }
+
+        :deep(.asset-label--identifier-iccid::before) {
+          content: '\e81a';
+        }
+
+        :deep(.asset-label--identifier-msisdn::before) {
+          content: '\e776';
+        }
+
+        :deep(.asset-label--operator-account::before) {
+          content: '\e70d';
+        }
+
+        :deep(.asset-label--realname-status::before) {
+          color: var(--el-color-success);
+          content: '\e88b';
+        }
+
+        :deep(.asset-label--realname-policy::before) {
+          color: var(--el-color-warning);
+          content: '\e75d';
+        }
+
+        :deep(.asset-label--shop::before) {
+          content: '\e737';
+        }
+
+        :deep(.asset-label--package-series::before) {
+          content: '\e762';
+        }
+
+        :deep(.asset-label--virtual-number::before) {
+          content: '\e7bd';
+        }
+
+        :deep(.asset-label--network-status::before) {
+          content: '\e757';
+        }
+
+        :deep(.asset-label--usage-month::before) {
+          content: '\e812';
+        }
+
+        :deep(.asset-label--usage-cycle::before) {
+          content: '\e82a';
+        }
+
+        :deep(.asset-label--realname-time::before) {
+          content: '\e6f7';
+        }
+
+        :deep(.asset-label--realname-sync::before) {
+          content: '\e793';
+        }
+
+        :deep(.asset-label--identifier-imei::before) {
+          content: '\e8d3';
+        }
+
+        :deep(.asset-label--asset-status::before) {
+          color: var(--el-color-success);
+          content: '\e88c';
+        }
+
+        :deep(.asset-label--card-sync::before) {
+          content: '\e7d3';
+        }
+
+        :deep(.asset-label--traffic-sync::before) {
+          content: '\e7e1';
+        }
+
+        :deep(.asset-label--operator-status::before) {
+          content: '\e871';
+        }
+
+        :deep(.asset-label--package-used::before) {
+          content: '\e742';
+        }
+
+        :deep(.asset-label--package-remaining::before) {
+          content: '\e7d9';
+        }
+
+        :deep(.asset-label--package-expire-estimate::before) {
+          content: '\e6f3';
+        }
+
+        :deep(.asset-label--bound-device-number::before) {
+          content: '\e851';
+        }
+
+        :deep(.asset-label--bound-device-name::before) {
+          content: '\e6ef';
+        }
+
+        :deep(.asset-label--device-name::before) {
+          content: '\e7d8';
+        }
+
+        :deep(.asset-label--device-status::before) {
+          color: var(--el-color-success);
+          content: '\e708';
+        }
+
+        :deep(.asset-label--activation-status::before) {
+          color: var(--el-color-warning);
+          content: '\e81c';
+        }
+
+        :deep(.asset-label--device-model::before) {
+          content: '\e7a7';
+        }
+
+        :deep(.asset-label--online-status::before) {
+          content: '\e6b2';
+        }
+
+        :deep(.asset-label--switch-mode::before) {
+          content: '\e72b';
+        }
+
+        :deep(.asset-label--bound-card-count::before) {
+          content: '\e730';
+        }
+
+        :deep(.asset-label--max-slots::before) {
+          content: '\e620';
+        }
+
+        :deep(.asset-label--device-type::before) {
+          content: '\e740';
+        }
+
+        :deep(.asset-label--manufacturer::before) {
+          content: '\e8a6';
+        }
+
+        :deep(.asset-label--last-online::before) {
+          content: '\e751';
+        }
+
+        :deep(.asset-label--identifier-sn::before) {
+          content: '\e72a';
+        }
+
+        :deep(.asset-label--last-sync::before) {
+          content: '\e614';
+        }
+
+        :deep(.asset-label--battery::before) {
+          color: var(--el-color-success);
+          content: '\e6e5';
+        }
+
+        :deep(.asset-label--boot-time::before) {
+          content: '\e827';
+        }
+
+        :deep(.asset-label--connection-time::before) {
+          content: '\e790';
+        }
+
+        :deep(.asset-label--signal-quality::before) {
+          content: '\e808';
+        }
+
+        :deep(.asset-label--signal-reason::before) {
+          color: var(--el-color-warning);
+          content: '\e600';
+        }
+
+        :deep(.asset-label--connected-clients::before) {
+          content: '\e608';
+        }
+
+        :deep(.asset-label--wifi-status::before) {
+          content: '\e7ee';
+        }
+
+        :deep(.asset-label--wifi-name::before) {
+          content: '\e841';
+        }
+
+        :deep(.asset-label--wifi-password::before) {
+          color: var(--el-color-warning);
+          content: '\e716';
+        }
+
+        :deep(.asset-label--wan-ip::before) {
+          content: '\e611';
+        }
+
+        :deep(.asset-label--lan-ip::before) {
+          content: '\e607';
+        }
+
+        :deep(.asset-label--mac-address::before) {
+          content: '\e68b';
+        }
+
+        :deep(.asset-label--speed-limit::before) {
+          content: '\e827';
+        }
+
+        :deep(.asset-label--report-interval::before) {
+          content: '\e7ac';
+        }
+
+        :deep(.asset-label--firmware-version::before) {
+          content: '\e726';
+        }
+
+        :deep(.asset-label--realtime-updated::before) {
+          content: '\e6b3';
+        }
+
+        :deep(.el-descriptions__content.is-vertical-content) {
+          padding: 8px 15px;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 23px;
+          color: var(--el-text-color-primary);
+          overflow-wrap: anywhere;
+        }
+      }
+
       .binding-card-list {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));