适配

src/pages/finance/Transactions.vue

@@ -79,20 +79,21 @@
       </div>
 
       <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="transactions"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px',
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b',
-          }"
-        >
+        <div class="table-container">
+          <el-table
+            :data="transactions"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px',
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b',
+            }"
+          >
           <el-table-column prop="transaction_id" label="交易ID" min-width="180">
             <template #default="{ row }">
               <span class="font-mono text-sm text-gray-700">{{ row.transaction_id }}</span>
@@ -120,20 +121,23 @@
             </template>
           </el-table-column>
         </el-table>
+        </div>
       </div>
     </template>
 
     <template #pagination>
-      <el-pagination
-        v-if="total > 0"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-if="total > 0"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </template>
 
     <template #extra>
@@ -462,6 +466,19 @@ const handleViewDetail = (transaction) => {
   background: #f8fafc !important;
 }
 
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 分页器包装器 */
+.pagination-wrapper {
+  padding: 16px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .stat-item {
@@ -488,5 +505,136 @@ const handleViewDetail = (transaction) => {
   .detail-value {
     font-size: 14px;
   }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 800px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+    justify-content: flex-start;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__jump) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+    font-size: 12px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+
+  /* 对话框在移动端优化 */
+  .detail-dialog :deep(.el-dialog) {
+    margin: 20px;
+    width: calc(100% - 40px) !important;
+    max-width: none;
+  }
+
+  .detail-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  .detail-dialog :deep(.grid-cols-2) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  /* 金额范围输入框在移动端优化 */
+  .flex.gap-2 {
+    flex-wrap: wrap;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .stat-item {
+    padding: 10px 12px;
+    min-width: 80px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
 }
 </style>