适配

src/components/common/ExportDialog.vue

@@ -2,8 +2,9 @@
   <el-dialog
     v-model="visible"
     :title="title"
-    width="600px"
+    :width="isMobile ? '90%' : '600px'"
     :close-on-click-modal="false"
+    class="export-dialog"
   >
     <div class="space-y-4">
       <!-- 企业选择 -->
@@ -119,12 +120,13 @@
     </div>
 
     <template #footer>
-      <div class="flex justify-end gap-3">
+      <div :class="['flex justify-end gap-3', isMobile ? 'flex-col' : '']">
-        <el-button @click="handleCancel">取消</el-button>
+        <el-button @click="handleCancel" :class="isMobile ? 'w-full' : ''">取消</el-button>
         <el-button
           type="primary"
           :loading="loading"
           @click="handleConfirm"
+          :class="isMobile ? 'w-full' : ''"
         >
           确认导出
         </el-button>
@@ -135,8 +137,12 @@
 
 <script setup>
 import { productApi, userApi } from '@/api'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { reactive, ref, watch } from 'vue'
 
+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // Props
 const props = defineProps({
   modelValue: {
@@ -302,3 +308,14 @@ defineExpose({
 <style scoped>
 /* 样式保持简洁，主要依赖Tailwind CSS */
 </style>
+
+<style>
+/* 导出弹窗移动端优化 */
+@media (max-width: 768px) {
+  .export-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+</style>

src/pages/admin/transactions/index.vue

@@ -5,29 +5,31 @@
   >
     <!-- 单用户模式显示 -->
     <template #stats v-if="singleUserMode">
-      <div class="flex items-center gap-2 text-sm text-gray-600">
+      <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'flex-wrap' : '']">
-        <User class="w-4 h-4" />
+        <User class="w-4 h-4 flex-shrink-0" />
-        <span>当前用户：{{ currentUser?.company_name || currentUser?.phone }}</span>
+        <span class="truncate">当前用户：{{ currentUser?.company_name || currentUser?.phone }}</span>
-        <span class="text-gray-400">(仅显示当前用户)</span>
+        <span :class="['text-gray-400', isMobile ? 'w-full text-xs' : '']">(仅显示当前用户)</span>
       </div>
     </template>
 
     <!-- 单用户模式操作按钮 -->
     <template #actions v-if="singleUserMode">
-      <div class="flex items-center gap-3">
+      <div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
-        <div class="flex items-center gap-2 text-sm text-gray-600">
+        <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
           <User class="w-4 h-4" />
-          <span>{{ currentUser?.company_name || currentUser?.phone }}</span>
+          <span class="truncate">{{ currentUser?.company_name || currentUser?.phone }}</span>
         </div>
-        <el-button size="small" @click="exitSingleUserMode">
+        <div :class="['flex gap-2', isMobile ? 'w-full' : '']">
+          <el-button :size="isMobile ? 'small' : 'default'" @click="exitSingleUserMode" :class="isMobile ? 'flex-1' : ''">
             <Close class="w-4 h-4 mr-1" />
             取消
           </el-button>
-        <el-button size="small" type="primary" @click="goBackToUsers">
+          <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="goBackToUsers" :class="isMobile ? 'flex-1' : ''">
             <Back class="w-4 h-4 mr-1" />
             返回用户管理
           </el-button>
         </div>
+      </div>
     </template>
 
     <!-- 筛选区域 -->
@@ -79,21 +81,21 @@
           </FilterItem>
 
           <FilterItem label="金额范围">
-            <div class="flex gap-2">
+            <div :class="['flex gap-2', isMobile ? 'flex-col' : '']">
               <el-input
                 v-model="filters.min_amount"
                 placeholder="最小金额"
                 clearable
                 @input="handleFilterChange"
-                class="flex-1"
+                :class="isMobile ? 'w-full' : 'flex-1'"
               />
-              <span class="text-gray-400 self-center">-</span>
+              <span :class="['text-gray-400 self-center', isMobile ? 'hidden' : '']">-</span>
               <el-input
                 v-model="filters.max_amount"
                 placeholder="最大金额"
                 clearable
                 @input="handleFilterChange"
-                class="flex-1"
+                :class="isMobile ? 'w-full' : 'flex-1'"
               />
             </div>
           </FilterItem>
@@ -104,12 +106,18 @@
         </template>
 
         <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
-          <el-button type="primary" @click="loadTransactions">应用筛选</el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
-          <el-button type="success" @click="showExportDialog">
+              重置筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadTransactions" :class="isMobile ? 'flex-1' : ''">
+              应用筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="success" @click="showExportDialog" :class="isMobile ? 'flex-1' : ''">
               <Download class="w-4 h-4 mr-1" />
               导出数据
             </el-button>
+          </div>
         </template>
       </FilterSection>
     </template>
@@ -120,7 +128,57 @@
         <el-loading size="large" />
       </div>
 
-      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && transactions.length > 0" class="transaction-cards">
+        <div
+          v-for="transaction in transactions"
+          :key="transaction.id"
+          class="transaction-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-mono text-sm text-gray-600 truncate">{{ transaction.transaction_id }}</span>
+              </div>
+              <div v-if="!singleUserMode && transaction.company_name" class="text-xs text-gray-500 truncate">
+                {{ transaction.company_name }}
+              </div>
+            </div>
+            <span class="font-semibold text-red-600 text-lg">¥{{ formatPrice(transaction.amount) }}</span>
+          </div>
+          <div class="card-body">
+            <div v-if="!singleUserMode && transaction.user?.phone" class="card-row">
+              <span class="card-label">手机号</span>
+              <span class="card-value text-sm">{{ transaction.user.phone }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">产品名称</span>
+              <span class="card-value text-blue-600 font-medium">{{ transaction.product_name || '未知产品' }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">消费时间</span>
+              <span class="card-value text-sm">
+                <div>{{ formatDate(transaction.created_at) }}</div>
+                <div class="text-gray-500">{{ formatTime(transaction.created_at) }}</div>
+              </span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleViewDetail(transaction)"
+              class="action-btn w-full"
+            >
+              查看详情
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
           <el-table
             :data="transactions"
             style="width: 100%"
@@ -188,6 +246,12 @@
             </el-table-column>
           </el-table>
         </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else-if="!loading && transactions.length === 0" class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
+        <p class="text-gray-500">暂无消费记录</p>
+      </div>
     </template>
 
     <!-- 分页 -->
@@ -198,137 +262,26 @@
         v-model:page-size="pageSize"
         :page-sizes="[10, 20, 50, 100]"
         :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
+        :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+        :small="isMobile"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </template>
 
     <template #extra>
-      <!-- 导出数据弹窗 -->
-      <el-dialog
-        v-model="exportDialogVisible"
-        title="导出消费记录"
-        width="600px"
-        class="export-dialog"
-      >
-        <div class="space-y-6">
-          <!-- 导出范围设置 -->
-          <div class="export-section">
-            <h4 class="text-lg font-semibold text-gray-900 mb-4">筛选条件</h4>
-            <div class="grid grid-cols-1 gap-4">
-              <!-- 企业选择 -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">选择企业</label>
-                <el-select
-                  v-model="exportOptions.companyIds"
-                  multiple
-                  filterable
-                  remote
-                  reserve-keyword
-                  placeholder="搜索并选择企业（不选则导出所有）"
-                  class="w-full"
-                  clearable
-                  :remote-method="handleCompanySearch"
-                  :loading="companyLoading"
-                  @focus="loadCompanyOptions"
-                  @visible-change="handleCompanyVisibleChange"
-                >
-                  <el-option
-                    v-for="company in companyOptions"
-                    :key="company.id"
-                    :label="company.company_name"
-                    :value="company.id"
-                  />
-                  <div v-if="companyLoading" class="text-center py-2">
-                    <span class="text-gray-500">加载中...</span>
-                  </div>
-                </el-select>
-              </div>
-
-              <!-- 日期范围 -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
-                <el-date-picker
-                  v-model="exportOptions.dateRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  class="w-full"
-                />
-              </div>
-
-              <!-- 产品选择 -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">选择产品</label>
-                <el-select
-                  v-model="exportOptions.productIds"
-                  multiple
-                  filterable
-                  remote
-                  reserve-keyword
-                  placeholder="搜索并选择产品（不选则导出所有）"
-                  class="w-full"
-                  clearable
-                  :remote-method="handleProductSearch"
-                  :loading="productLoading"
-                  @focus="loadProductOptions"
-                  @visible-change="handleProductVisibleChange"
-                >
-                  <el-option
-                    v-for="product in productOptions"
-                    :key="product.id"
-                    :label="product.name"
-                    :value="product.id"
-                  />
-                  <div v-if="productLoading" class="text-center py-2">
-                    <span class="text-gray-500">加载中...</span>
-                  </div>
-                </el-select>
-              </div>
-            </div>
-          </div>
-
-          <!-- 导出格式选择 -->
-          <div class="export-section">
-            <h4 class="text-lg font-semibold text-gray-900 mb-4">导出格式</h4>
-            <el-radio-group v-model="exportOptions.format">
-              <el-radio value="excel">Excel (.xlsx)</el-radio>
-              <el-radio value="csv">CSV (.csv)</el-radio>
-            </el-radio-group>
-          </div>
-        </div>
-
-        <template #footer>
-          <div class="flex justify-end gap-3">
-            <el-button @click="exportDialogVisible = false">取消</el-button>
-            <el-button
-              type="primary"
-              @click="handleExport"
-              :loading="exportLoading"
-            >
-              <Download class="w-4 h-4 mr-1" />
-              开始导出
-            </el-button>
-          </div>
-        </template>
-      </el-dialog>
-
       <!-- 消费记录详情弹窗 -->
       <el-dialog
         v-model="detailDialogVisible"
         title="消费记录详情"
-        width="800px"
+        :width="isMobile ? '90%' : '800px'"
         class="transaction-detail-dialog"
       >
         <div v-if="selectedTransaction" class="space-y-6">
           <!-- 基本信息 -->
           <div class="info-section">
             <h4 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h4>
-            <div class="grid grid-cols-2 gap-4">
+            <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
               <div class="info-item">
                 <span class="info-label">交易ID</span>
                 <span class="info-value font-mono">{{ selectedTransaction?.transaction_id || '-' }}</span>
@@ -351,7 +304,7 @@
           <!-- 时间信息 -->
           <div class="info-section">
             <h4 class="text-lg font-semibold text-gray-900 mb-4">时间信息</h4>
-            <div class="grid grid-cols-2 gap-4">
+            <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
               <div class="info-item">
                 <span class="info-label">消费时间</span>
                 <span class="info-value">{{ formatDateTime(selectedTransaction?.created_at) }}</span>
@@ -390,6 +343,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -398,6 +352,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 
+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const transactions = ref([])
@@ -739,6 +696,75 @@ watch(() => route.query.user_id, async (newUserId) => {
   background: #f8fafc !important;
 }
 
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端卡片布局 */
+.transaction-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.transaction-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  text-align: right;
+  word-break: break-word;
+  flex: 1;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-btn {
+  width: 100%;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .info-item {
@@ -750,5 +776,92 @@ watch(() => route.query.user_id, async (newUserId) => {
   .info-label {
     min-width: auto;
   }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :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;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+
+  /* 对话框在移动端优化 */
+  .transaction-detail-dialog :deep(.el-dialog__body),
+  .export-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .transaction-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+    min-width: 70px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .card-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-value {
+    text-align: left;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 8px;
+  }
 }
 </style>

src/pages/api/Usage.vue

@@ -89,6 +89,7 @@
       </div> -->
 
       <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
           <el-table
             :data="apiCalls"
             style="width: 100%"
@@ -187,9 +188,11 @@
           </el-table-column>
         </el-table>
         </div>
+      </div>
     </template>
 
     <template #pagination>
+      <div class="pagination-wrapper">
         <el-pagination
           v-if="total > 0"
           v-model:current-page="currentPage"
@@ -200,6 +203,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
+      </div>
     </template>
 
     <template #extra>
@@ -554,7 +558,9 @@ const handleViewDetail = (apiCall) => {
 }
 
 .error-content {
-  space-y: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .error-type {
@@ -657,6 +663,19 @@ const handleViewDetail = (apiCall) => {
   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 {
@@ -683,5 +702,131 @@ const handleViewDetail = (apiCall) => {
   .detail-value {
     font-size: 14px;
   }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :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;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@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>

src/pages/finance/Transactions.vue

@@ -79,6 +79,7 @@
       </div>
 
       <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
           <el-table
             :data="transactions"
             style="width: 100%"
@@ -121,9 +122,11 @@
           </el-table-column>
         </el-table>
         </div>
+      </div>
     </template>
 
     <template #pagination>
+      <div class="pagination-wrapper">
         <el-pagination
           v-if="total > 0"
           v-model:current-page="currentPage"
@@ -134,6 +137,7 @@
           @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>

src/pages/finance/recharge-records/index.vue

@@ -80,6 +80,7 @@
       </div>
 
       <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
           <el-table
             :data="records"
             style="width: 100%"
@@ -162,9 +163,11 @@
           </el-table-column>
         </el-table>
         </div>
+      </div>
     </template>
 
     <template #pagination>
+      <div class="pagination-wrapper">
         <el-pagination
           v-if="total > 0"
           v-model:current-page="currentPage"
@@ -175,6 +178,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
+      </div>
     </template>
   </ListPageLayout>
 </template>
@@ -354,6 +358,19 @@ onMounted(() => {
   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 {
@@ -368,5 +385,113 @@ onMounted(() => {
   .stat-label {
     font-size: 12px;
   }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :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;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@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>