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

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

@@ -12,7 +12,7 @@
           v-model="searchIccid"
           placeholder="请输入虚拟号、ICCID、IMEI、SN或MSISDN"
           clearable
-          style="width: 500px"
+          class="asset-search-input"
           @focus="iccidInputFocused = true"
           @blur="iccidInputFocused = false"
           @keyup.enter="handleSearch"
@@ -27,7 +27,7 @@
           </div>
         </Transition>
       </div>
-      <ElButton type="primary" @click="handleSearch" :icon="Search" style="margin-left: 16px">
+      <ElButton class="search-action-button" type="primary" @click="handleSearch" :icon="Search">
         查询
       </ElButton>
 
@@ -141,6 +141,7 @@
 
       .card-header {
         display: flex;
+        gap: 12px;
         align-items: center;
         justify-content: space-between;
       }
@@ -159,6 +160,12 @@
 
       .iccid-input-wrapper {
         position: relative;
+        flex: 1 1 360px;
+        min-width: 240px;
+
+        .asset-search-input {
+          width: 100%;
+        }
 
         .iccid-magnifier {
           position: absolute;
@@ -182,6 +189,7 @@
 
           // 内容区域
           .magnifier-content {
+            max-width: min(720px, calc(100vw - 48px));
             padding: 16px 24px;
             font-family: 'Courier New', Consolas, monospace;
             font-size: 28px;
@@ -189,6 +197,8 @@
             line-height: 1.4;
             color: var(--el-text-color-primary);
             letter-spacing: 3px;
+            overflow-wrap: anywhere;
+            white-space: normal;
             background-color: var(--el-bg-color, #fff);
             border: 2px solid var(--el-color-primary);
             border-radius: 8px;
@@ -239,6 +249,56 @@
       :deep(.el-card__body) {
         padding: 12px 16px;
       }
+
+      :deep(.el-card__header) .card-header {
+        align-items: stretch;
+        flex-direction: column;
+
+        .el-button {
+          width: 100%;
+          margin-left: 0;
+        }
+      }
+
+      .iccid-search {
+        align-items: stretch;
+        flex-direction: column;
+
+        .iccid-input-wrapper {
+          flex-basis: auto;
+          min-width: 0;
+          width: 100%;
+
+          .iccid-magnifier {
+            right: 0;
+            left: 0;
+            white-space: normal;
+
+            .magnifier-arrow {
+              left: 24px;
+            }
+
+            .magnifier-content {
+              display: block;
+              width: 100%;
+              padding: 12px 14px;
+              font-size: 18px;
+              letter-spacing: 1px;
+            }
+          }
+        }
+
+        .search-action-button,
+        .operation-button-group,
+        .operation-button-group .el-button {
+          width: 100%;
+          margin-left: 0;
+        }
+
+        .operation-button-group {
+          margin-left: 0;
+        }
+      }
     }
   }
 </style>