fix:修改bug: 虚流量关闭的时候还是显示了

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

@@ -25,7 +25,7 @@
         </div>
       </div>
     </template>
-    <ElDescriptions :column="4" border>
+    <ElDescriptions :column="descriptionsColumn" border>
       <!-- 卡专属字段 -->
       <template v-if="cardInfo?.asset_type === 'card'">
         <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem>
@@ -269,7 +269,7 @@
       <!-- 设备实时信息 -->
       <ElDivider content-position="left">设备实时信息</ElDivider>
       <div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" style="margin-top: 16px">
-        <ElDescriptions :column="4" border>
+        <ElDescriptions :column="descriptionsColumn" border>
           <!-- 基本状态 -->
           <ElDescriptionsItem label="在线状态">
             <ElTag :type="getOnlineStatusType(deviceRealtime?.online_status)" size="small">
@@ -461,6 +461,7 @@
 
 <script setup lang="ts">
   import { computed } from 'vue'
+  import { useWindowSize } from '@vueuse/core'
   import {
     ElCard,
     ElDescriptions,
@@ -585,6 +586,7 @@
 
   const { hasAuth } = useAuth()
   const userStore = useUserStore()
+  const { width } = useWindowSize()
 
   const CARD_MONTH_USAGE_PERMISSION = 'asset_info:view_card_month_usage'
 
@@ -609,6 +611,12 @@
     return ![3, 4].includes(userType) && hasAuth(CARD_MONTH_USAGE_PERMISSION)
   })
 
+  const descriptionsColumn = computed(() => {
+    if (width.value <= 640) return 1
+    if (width.value <= 1024) return 2
+    return 4
+  })
+
   // Emits
   interface Emits {
     (e: 'update:pollingEnabled', value: boolean): void
@@ -786,6 +794,7 @@
 
       .card-header {
         display: flex;
+        gap: 12px;
         align-items: center;
         justify-content: space-between;
 
@@ -808,6 +817,56 @@
           }
         }
       }
+
+      :deep(.el-descriptions__body) {
+        overflow-x: auto;
+      }
+
+      :deep(.el-descriptions__cell) {
+        word-break: break-word;
+      }
+
+      :deep(.el-table) {
+        min-width: 760px;
+      }
+
+      .card-operations,
+      .device-operations {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: flex-end;
+
+        .el-button {
+          margin-left: 0;
+        }
+      }
+
+      @media (width <= 768px) {
+        .card-header {
+          align-items: flex-start;
+          flex-direction: column;
+
+          .card-header-left,
+          .card-header-right {
+            width: 100%;
+          }
+
+          .card-header-right {
+            display: flex;
+            justify-content: flex-start;
+          }
+        }
+
+        .card-operations,
+        .device-operations {
+          justify-content: stretch;
+
+          .el-button {
+            flex: 1 1 120px;
+          }
+        }
+      }
     }
   }
 </style>