create 返回官网

src/pages/finance/Transactions.vue

@@ -42,7 +42,7 @@
           </div>
         </FilterItem>
 
-        <FilterItem label="时间范围">
+        <FilterItem label="时间范围" class="col-span-1">
           <el-date-picker
             v-model="dateRange"
             type="datetimerange"
@@ -53,6 +53,7 @@
             value-format="YYYY-MM-DD HH:mm:ss"
             @change="handleDateRangeChange"
             class="w-full"
+            :size="isMobile ? 'small' : 'default'"
           />
         </FilterItem>
 
@@ -80,20 +81,20 @@
 
       <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%"
-            :header-cell-style="{
-              background: '#f8fafc',
-              color: '#475569',
-              fontWeight: '600',
-              fontSize: '14px',
-            }"
-            :cell-style="{
-              fontSize: '14px',
-              color: '#1e293b',
-            }"
-          >
+        <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>
@@ -127,16 +128,16 @@
 
     <template #pagination>
       <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"
-        />
+      <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>
 
@@ -200,8 +201,12 @@ import { financeApi } from '@/api'
 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 { ElMessage } from 'element-plus'
 
+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const transactions = ref([])

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

@@ -35,7 +35,7 @@
           </el-select>
         </FilterItem>
 
-        <FilterItem label="开始时间">
+        <FilterItem label="开始时间" class="col-span-1">
           <el-date-picker
             v-model="filters.start_time"
             type="datetime"
@@ -44,10 +44,11 @@
             value-format="YYYY-MM-DD HH:mm:ss"
             @change="handleFilterChange"
             class="w-full"
+            :size="isMobile ? 'small' : 'default'"
           />
         </FilterItem>
 
-        <FilterItem label="结束时间">
+        <FilterItem label="结束时间" class="col-span-1">
           <el-date-picker
             v-model="filters.end_time"
             type="datetime"
@@ -56,6 +57,7 @@
             value-format="YYYY-MM-DD HH:mm:ss"
             @change="handleFilterChange"
             class="w-full"
+            :size="isMobile ? 'small' : 'default'"
           />
         </FilterItem>
 
@@ -81,20 +83,20 @@
 
       <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%"
-            :header-cell-style="{
-              background: '#f8fafc',
-              color: '#475569',
-              fontWeight: '600',
-              fontSize: '14px'
-            }"
-            :cell-style="{
-              fontSize: '14px',
-              color: '#1e293b'
-            }"
-          >
+        <el-table
+          :data="records"
+          style="width: 100%"
+          :header-cell-style="{
+            background: '#f8fafc',
+            color: '#475569',
+            fontWeight: '600',
+            fontSize: '14px'
+          }"
+          :cell-style="{
+            fontSize: '14px',
+            color: '#1e293b'
+          }"
+        >
         <el-table-column prop="alipay_order_id" label="订单号">
             <template #default="{ row }">
               <div class="space-y-1">
@@ -168,16 +170,16 @@
 
     <template #pagination>
       <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"
-        />
+      <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>
   </ListPageLayout>
@@ -188,8 +190,12 @@ import { financeApi } from '@/api'
 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 { ElMessage } from 'element-plus'
 
+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const records = ref([])