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

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

@@ -8,15 +8,15 @@
             {{ walletInfo.status_text || '-' }}
           </ElTag>
           <template v-if="walletInfo">
-            <ElDivider direction="vertical" />
+            <ElDivider class="wallet-divider" direction="vertical" />
             <span class="balance-item"
               >💰 总余额 <strong>{{ formatAmount(walletInfo.balance) }}</strong></span
             >
-            <ElDivider direction="vertical" />
+            <ElDivider class="wallet-divider" direction="vertical" />
             <span class="balance-item"
               >✅ 可用 <strong>{{ formatAmount(walletInfo.available_balance) }}</strong></span
             >
-            <ElDivider direction="vertical" />
+            <ElDivider class="wallet-divider" direction="vertical" />
             <span class="balance-item"
               >🔒 冻结 <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong></span
             >
@@ -27,7 +27,7 @@
             v-model="filterForm.transaction_type"
             placeholder="交易类型"
             clearable
-            style="width: 150px"
+            class="transaction-type-select"
             @change="handleFilterChange"
           >
             <ElOption label="充值" value="recharge" />
@@ -40,7 +40,7 @@
             range-separator="至"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
-            style="width: 360px"
+            class="date-range-picker"
           />
           <ElButton type="primary" @click="handleQuery">查询</ElButton>
           <ElButton @click="handleReset()">重置</ElButton>
@@ -356,6 +356,10 @@
             font-weight: 500;
           }
 
+          .wallet-divider {
+            flex-shrink: 0;
+          }
+
           .balance-item {
             font-size: 13px;
             color: var(--el-text-color-regular);
@@ -372,10 +376,22 @@
           flex-wrap: wrap;
           gap: 10px;
           align-items: center;
+          justify-content: flex-end;
+          min-width: 0;
+
+          .transaction-type-select {
+            width: 150px;
+          }
+
+          .date-range-picker {
+            width: min(360px, 100%);
+          }
         }
       }
 
       .wallet-table-wrapper {
+        overflow-x: auto;
+
         .wallet-empty-state {
           display: flex;
           align-items: center;
@@ -384,6 +400,9 @@
         }
 
         .wallet-table {
+          width: max-content;
+          min-width: 900px;
+
           :deep(.el-table__header) {
             th {
               font-weight: 600;
@@ -396,6 +415,84 @@
           display: flex;
           justify-content: flex-end;
           margin-top: 16px;
+          overflow-x: auto;
+        }
+      }
+
+      @media (width <= 1200px) {
+        .wallet-header {
+          align-items: flex-start;
+          flex-direction: column;
+
+          .header-left,
+          .filter-section {
+            width: 100%;
+          }
+
+          .filter-section {
+            justify-content: flex-start;
+          }
+        }
+      }
+
+      @media (width <= 768px) {
+        .wallet-header {
+          align-items: stretch;
+          flex-direction: column;
+
+          .header-left,
+          .filter-section {
+            width: 100%;
+          }
+
+          .filter-section {
+            align-items: stretch;
+            flex-direction: column;
+
+            :deep(.el-select),
+            :deep(.el-date-editor),
+            .el-button,
+            .el-tag {
+              width: 100% !important;
+            }
+
+            .el-button {
+              margin-left: 0;
+            }
+          }
+
+          .header-left {
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 6px;
+
+            .wallet-divider {
+              display: none;
+            }
+
+            .balance-item {
+              width: 100%;
+            }
+          }
+        }
+
+        .wallet-table-wrapper {
+          .wallet-table {
+            min-width: 900px;
+          }
+
+          .pagination-wrapper {
+            justify-content: flex-start;
+            overflow-x: auto;
+          }
+        }
+      }
+
+      @media (width <= 480px) {
+        .wallet-table-wrapper {
+          margin-right: -12px;
+          margin-left: -12px;
+          padding: 0 12px;
         }
       }
     }