diff --git a/src/views/recharge/bean/addBeanRecharge.vue b/src/views/recharge/bean/addBeanRecharge.vue
index 8f367bd..61c0abc 100644
--- a/src/views/recharge/bean/addBeanRecharge.vue
+++ b/src/views/recharge/bean/addBeanRecharge.vue
@@ -13,7 +13,7 @@ import { utils, read } from 'xlsx'
 import throttle from 'lodash/throttle'
 import { useAdminStore } from "@/store/index.js";
 import { storeToRefs } from "pinia";
-import _ from 'lodash'
+import _ from 'lodash';
 const user = ref({})
 const getUser = async function (jwcode) {
   if (addForm.value.jwcode) {
@@ -35,7 +35,7 @@ const getUser = async function (jwcode) {
       ElMessage.error("用户不存在");
     } else {
       user.value = result.data;
-      console.log("用户信息", user.value);
+      console.log("用户信息", user.value.name);
       ElMessage.success("查询成功");
     }
   } catch (error) {
@@ -206,115 +206,76 @@ const handleAddForm = async () => {
             <el-input v-model="addForm.remark" style="width: 300px" :rows="5" maxlength="100" show-word-limit
               type="textarea" />
           </el-form-item>
-          <!-- <el-form-item prop="adminName" label="提交人">
-        <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
-      </el-form-item> -->
-          <el-button @click="deleteAddForm" style="margin-left: 280px" type="success">重置</el-button>
-          <el-button type="primary" :disabled="addDisabled" @click="handleAddForm"> 提交 </el-button>
+          <el-button @click="deleteAddForm" style="margin-left: 8.5vw;margin-top:1vw" type="success">重置</el-button>
+          <el-button type="primary" :disabled="addDisabled" @click="handleAddForm" style="margin-top:1vw"> 提交 </el-button>
         </el-form>
       </div>
       <div class="right">
         <!-- 客户信息栏 -->
         <el-card v-if="user.jwcode" class="customer-info">
           <el-form :model="user" label-width="auto" style="min-width: 600px" label-position="left">
-            <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-
+            <el-text size="large" style="margin-left: 2vw">客户信息</el-text>
             <!-- 第一行：姓名 + 当前付费金豆 -->
-            <el-row style="margin-top: 20px">
-              <el-col :span="9">
-                <el-form-item label="姓名:">
-                  <p style="color: #2fa1ff; margin-right: 5px">{{ user.name }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="14">
-                <el-form-item label="当前付费金豆:">
-                  <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.permanentBean))">
-                    {{ Number(user.permanentBean) }}
-                  </p>
-                  <!-- 如果不是有效的数字，显示默认值 -->
-                  <p v-else></p>
-                </el-form-item>
-              </el-col>
-            </el-row>
+            <div style="margin-top: 0.5vw;display:flex;">
+              <p style="width:6vw;">姓名:</p>
+              <p style="color: #2fa1ff;width:6vw;">{{ user.name }}</p>
+              <p style="width:7vw;">当前付费金豆:</p>
+              <p v-if="!isNaN(Number(user.permanentBean))" style="color: #2fa1ff;">{{ Number(user.permanentBean) }}</p>
+              <!-- 如果不是有效的数字，显示默认值 -->
+              <p v-else></p>
+            </div>
 
             <!-- 第二行：精网号 + 免费金豆 -->
-            <el-row>
-              <el-col :span="9">
-                <el-form-item label="精网号:">
-                  <p style="color: #2fa1ff; margin-right: 5px">{{ user.jwcode }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="14">
-                <el-form-item label="当前免费金豆:">
-                  <span style="color: #2fa1ff; margin-right: 5px" v-if="user.freeBean !== undefined">{{ user.freeBean }}
-                  </span>
-                </el-form-item>
-              </el-col>
-            </el-row>
+            <div style="display:flex">
+              <p style="width:6vw;">精网号:</p>
+              <p style="color: #2fa1ff;width:6vw;">{{ user.jwcode }}</p>
+              <p style="width:7vw;">当前免费金豆:</p>
+              <p v-if="user.freeBean !== undefined" style="color: #2fa1ff;">{{ user.freeBean }}</p>
+            </div>
+
             <!-- 第三行：消费次数 + 所属门店 -->
-            <el-row>
-              <el-col :span="9">
-                <el-form-item label="所属门店:">
-                  <p style="color: #2fa1ff">{{ user.market }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="9">
-                <el-form-item label="消耗金豆总数:">
-                  <p style="color: #2fa1ff; margin-right: 5px" v-if="user.consumeSum != null">{{ user.consumeSum }}</p>
-                  <p style="color: #2fa1ff; margin-right: 5px" v-else>{{ 0 }}</p>
-                </el-form-item>
-              </el-col>
-            </el-row>
+            <div style="display:flex">
+              <p style="width:6vw;">所属门店:</p>
+              <p style="color: #2fa1ff;width:6vw;">{{ user.market }}</p>
+              <p style="width:7vw;">消耗金豆总数:</p>
+              <p style="color: #2fa1ff;" v-if="user.consumeSum != null">{{ user.consumeSum }}</p>
+              <p style="color: #2fa1ff;" v-else>{{ 0 }}</p>
+            </div>
           </el-form>
         </el-card>
       </div>
     </div>
-
-
-
   </div>
 </template>
 <style scoped>
 .userAndform {
-  width: 100%;
-  height: 100%;
+  width: 80vw;
+  height: 80vh;
   display: flex;
-  align-items: center;
 
   .left {
-    width: 35%;
+    width: 35vw;
+    height: 80vh;
     display: flex;
-    align-items: center;
 
     .add-form {
-      width: 100%;
-      margin-top: 50px;
+      width: 40vw;
+      margin-top: 5vh;
     }
   }
 
   .right {
     flex: 1;
-    margin-left: 50px;
     display: flex;
+    float: left;
 
-    .beautiful {
-      width: 90%;
+    .customer-info {
+      width: 35vw;
+      height: 28vh;
+      margin-top: 5vh;
       display: flex;
       justify-content: center;
-      align-items: center;
-      padding: 0 10px;
     }
   }
 }
-.customer-info {
-  width: 700px;
-  float: right;
-  margin-right: 300px;
-  margin-top: 50px;
-}
-
-p {
-  margin: 0px;
-}
-
 </style>
\ No newline at end of file
diff --git a/src/views/recharge/bean/beanOnlineRecharge.vue b/src/views/recharge/bean/beanOnlineRecharge.vue
index 1c2bc6b..8cd9cf8 100644
--- a/src/views/recharge/bean/beanOnlineRecharge.vue
+++ b/src/views/recharge/bean/beanOnlineRecharge.vue
@@ -342,107 +342,87 @@ onMounted(async function () {
 })
 </script>
 <template>
-      <el-card style="margin-bottom: 20px;margin-top: 10px">
-        <el-row style="margin-bottom: 10px">
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">精网号：</el-text>
-              <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select v-model="selectData.market" placeholder="请选择所属地区" clearable style="width:150px">
-                <el-option v-for="item in market" :key="item" :label="item" :value="item" />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">订单号：</el-text>
-              <el-input v-model="selectData.orderNo" placeholder="请输入订单号" style="width: 150px" clearable />
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">充值平台：</el-text>
-              <el-select v-model="selectData.platform" placeholder="请选择充值平台" clearable style="width:150px">
-                <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-          </el-col>
-        </el-row>
+  <el-card style="margin-bottom: 0.5vh;">
+    <div>
+      <el-text size="large">精网号：</el-text>
+      <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
 
-        <el-row>
-          <el-col :span="24">
-            <div class="head-card-element">
-              <el-text size="large">充值时间：</el-text>
-              <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
-                end-placeholder="结束时间" style="width: 350px" @change="handleDatePickerChange"
-                :default-time="defaultTime" />
-              <el-button @click="getToday()" style="margin-left: 10px"
-                :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
-              </el-button>
-              <el-button @click="getYesterday()" style="margin-left: 10px"
-                :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
-              </el-button>
-              <el-button @click="get7Days()" style="margin-left: 10px"
-                :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
-              </el-button>
-              <el-button type="success" @click="reset()">重置</el-button>
-              <el-button type="primary" @click="search()">查询</el-button>
-              <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
-              <el-button type="primary" @click="openExportList">查看导出列表</el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-      <el-card>
-        <div class="bean-info">
-          充值金豆数：{{ format3(num) }}&nbsp;&nbsp;&nbsp;&nbsp;合计新币数：{{ format3(money) }}
-        </div>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
-          <el-table :data="tableData" style="width: 100%" height="520px" @sort-change="handleSortChange">
-            <el-table-column type="index" label="序号" width="80px" fixed="left">
-              <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column fixed="left" prop="name" label="姓名" min-width="120" show-overflow-tooltip />
-            <el-table-column fixed="left" prop="jwcode" label="精网号" min-width="110px" />
-            <el-table-column prop="market" label="所属地区" min-width="100px" />
-            <el-table-column prop="orderNo" header-align="center" align="center" label="订单号" min-width="210px" />
-            <el-table-column prop="num" label="数量" sortable="custom" min-width="110px" />
-            <el-table-column prop="money" label="金额" sortable="custom" min-width="150px" />
-            <el-table-column prop="platform" label="充值平台" min-width="150px" show-overflow-tooltip>
-              <template #default=scope>
-                <span v-if="scope.row.platform == 1">PC</span>
-                <span v-else-if="scope.row.platform == 2">手机</span>
-                <span v-else>其他</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="rechargeTime" label="充值时间" min-width="200px">
-              <template #default="scope">
-                {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
+      <el-text size="large">所属地区：</el-text>
+      <el-select v-model="selectData.market" placeholder="请选择所属地区" clearable style="width: 10vw;margin-right: 1vw;">
+        <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+      </el-select>
 
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
-        </div>
-      </el-card>
+      <el-text size="large">订单号：</el-text>
+      <el-input v-model="selectData.orderNo" placeholder="请输入订单号" style="width: 10vw;margin-right: 1vw;" clearable />
+
+      <el-text size="large">充值平台：</el-text>
+      <el-select v-model="selectData.platform" placeholder="请选择充值平台" clearable style="width: 10vw;margin-right: 1vw;">
+        <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </div>
+
+    <div style="margin-top: 0.5vh;">
+      <el-text size="large">充值时间：</el-text>
+      <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+        end-placeholder="结束时间" style="width: 20vw" @change="handleDatePickerChange" :default-time="defaultTime" />
+      <el-button @click="getToday()" style="margin-left: 10px" :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
+      </el-button>
+      <el-button @click="getYesterday()" style="margin-left: 10px"
+        :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
+      </el-button>
+      <el-button @click="get7Days()" style="margin-left: 10px" :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
+      </el-button>
+      <el-button type="success" @click="reset()">重置</el-button>
+      <el-button type="primary" @click="search()">查询</el-button>
+      <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+      <el-button type="primary" @click="openExportList">查看导出列表</el-button>
+    </div>
+  </el-card>
+  <el-card>
+    <div>
+      充值金豆数：{{ format3(num) }}&nbsp;&nbsp;&nbsp;&nbsp;合计新币数：{{ format3(money) }}
+    </div>
+    <!-- 设置表格容器的高度和滚动样式 -->
+    <div>
+      <el-table :data="tableData" style="width:80vw;" height="55vh" @sort-change="handleSortChange">
+        <el-table-column type="index" label="序号" width="80px" fixed="left">
+          <template #default="scope">
+            <span>{{
+              scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="left" prop="name" label="姓名" min-width="120" show-overflow-tooltip />
+        <el-table-column fixed="left" prop="jwcode" label="精网号" min-width="110px" />
+        <el-table-column prop="market" label="所属地区" min-width="100px" />
+        <el-table-column prop="orderNo" header-align="center" align="center" label="订单号" min-width="210px" />
+        <el-table-column prop="num" label="数量" sortable="custom" min-width="110px" />
+        <el-table-column prop="money" label="金额" sortable="custom" min-width="150px" />
+        <el-table-column prop="platform" label="充值平台" min-width="150px" show-overflow-tooltip>
+          <template #default=scope>
+            <span v-if="scope.row.platform == 1">PC</span>
+            <span v-else-if="scope.row.platform == 2">手机</span>
+            <span v-else>其他</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="rechargeTime" label="充值时间" min-width="200px">
+          <template #default="scope">
+            {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination" style="margin-top: 20px">
+      <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
+    </div>
+  </el-card>
   <!-- 导出弹窗 -->
-  <el-dialog v-model="exportListVisible" title="导出列表" width="80%" class="custom-height-dialog">
-    <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
+  <el-dialog v-model="exportListVisible" title="导出列表" width="80vw" class="custom-height-dialog">
+    <el-table :data="exportList" style="width:80vw;height: 60vh;" :loading="exportListLoading">
       <el-table-column prop="fileName" label="文件名" />
       <el-table-column prop="state" label="状态">
         <template #default="scope">
diff --git a/src/views/recharge/bean/beanRecharge.vue b/src/views/recharge/bean/beanRecharge.vue
index 0656e19..dda8a5e 100644
--- a/src/views/recharge/bean/beanRecharge.vue
+++ b/src/views/recharge/bean/beanRecharge.vue
@@ -1,46 +1,35 @@
 <template>
-  <div>
+  <div class="father">
     <el-button-group>
-      <el-button
-          :type="activeTab === 'addBeanRecharge' ? 'primary' : 'default'"
-          @click="navigateTo('addBeanRecharge')"
-          :disabled="!hasAdd"
-          style="width: 120px;"
-      >
+      <el-button :type="activeTab === 'addBeanRecharge' ? 'primary' : 'default'" @click="navigateTo('addBeanRecharge')"
+        :disabled="!hasAdd" style="width: 6.5vw">
         新增充值
       </el-button>
-      <el-button
-          :type="activeTab === 'beanSystemRecharge' ? 'primary' : 'default'"
-          @click="navigateTo('beanSystemRecharge')"
-          :disabled="!hasSystem"
-          style="width: 120px;"
-      >
+      <el-button :type="activeTab === 'beanSystemRecharge' ? 'primary' : 'default'"
+        @click="navigateTo('beanSystemRecharge')" :disabled="!hasSystem" style="width: 6.5vw;">
         系统充值
       </el-button>
-      <el-button
-          :type="activeTab === 'beanOnlineRecharge' ? 'primary' : 'default'"
-          @click="navigateTo('beanOnlineRecharge')"
-          :disabled="!hasOnline"
-          style="width: 120px;"
-      >
+      <el-button :type="activeTab === 'beanOnlineRecharge' ? 'primary' : 'default'"
+        @click="navigateTo('beanOnlineRecharge')" :disabled="!hasOnline" style="width: 6.5vw;">
         线上充值
       </el-button>
     </el-button-group>
-    <router-view></router-view>
   </div>
+    <router-view></router-view>
+
 </template>
 
 <script setup>
-import {ref, watch, onMounted} from 'vue';
-import {useRouter, useRoute} from 'vue-router';
-import {storeToRefs} from 'pinia';
-import {useAdminStore} from '@/store/index.js';
-import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
+import { ref, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useAdminStore } from '@/store/index.js';
+import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js";
 
 const router = useRouter();
 const route = useRoute();
 const adminStore = useAdminStore();
-const {menuTree} = storeToRefs(adminStore);
+const { menuTree } = storeToRefs(adminStore);
 
 const activeTab = ref('');
 const hasAdd = ref(false);
@@ -49,7 +38,7 @@ const hasOnline = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  router.push({name});
+  router.push({ name });
 };
 
 
@@ -74,7 +63,7 @@ const getDefaultAuditRoute = () => {
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
   initPermissions()
-  if (newName=== 'addBeanRecharge' || newName === 'beanSystemRecharge' || newName === 'beanOnlineRecharge') {
+  if (newName === 'addBeanRecharge' || newName === 'beanSystemRecharge' || newName === 'beanOnlineRecharge') {
     activeTab.value = newName;
   } else if (newName === 'beanRecharge') {
     // 每次访问 /beanConsume 都进行默认跳转
@@ -91,9 +80,14 @@ onMounted(() => {
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name=== 'addBeanRecharge' || route.name === 'beanSystemRecharge' || route.name === 'beanOnlineRecharge') {
+    if (route.name === 'addBeanRecharge' || route.name === 'beanSystemRecharge' || route.name === 'beanOnlineRecharge') {
       activeTab.value = route.name;
     }
   }
 });
-</script>
\ No newline at end of file
+</script>
+<style>
+.father {
+  height: 2vw;
+}
+</style>
diff --git a/src/views/recharge/bean/beanSystemRecharge.vue b/src/views/recharge/bean/beanSystemRecharge.vue
index cfce448..3e2532f 100644
--- a/src/views/recharge/bean/beanSystemRecharge.vue
+++ b/src/views/recharge/bean/beanSystemRecharge.vue
@@ -6,13 +6,11 @@ import { AiFillRead } from 'vue-icons-plus/ai'
 import axios from 'axios'
 import moment from 'moment'
 import API from '@/util/http.js'
-
 const selectData = ref({
     jwcode: '',
     market: '',
     startTime: '',
     endTime: '',
-
 })
 const permanentBeans = ref(0)
 const freeBean = ref(0)
@@ -329,89 +327,70 @@ onMounted(async function () {
 })
 </script>
 <template>
-            <el-card style="margin-bottom: 20px;margin-top: 10px">
-                <el-row style="margin-bottom: 10px">
-                    <el-col :span="3">
-                        <div class="head-card-element">
-                            <el-text class="mx-1" size="large">精网号：</el-text>
-                            <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 115px" clearable />
-                        </div>
-                    </el-col>
-                    <el-col :span="4">
-                        <div class="head-card-element">
-                            <el-text class="mx-1" size="large">所属地区：</el-text>
-                            <el-select v-model="selectData.market" placeholder="请选择所属地区" clearable style="width:150px">
-                                <el-option v-for="item in market" :key="item" :label="item" :value="item" />
-                            </el-select>
-                        </div>
-                    </el-col>
-                    <el-col :span="17">
-                        <div class="head-card-element">
-                            <el-text class="mx-1" size="large">充值时间：</el-text>
-                            <el-date-picker v-model="getTime" type="datetimerange" range-separator="至"
-                                start-placeholder="起始时间" end-placeholder="结束时间" style="width: 350px"
-                                @change="handleDatePickerChange" :default-time="defaultTime" />
-                            <el-button @click="getToday()" style="margin-left: 10px"
-                                :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
-                            </el-button>
-                            <el-button @click="getYesterday()" style="margin-left: 10px"
-                                :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
-                            </el-button>
-                            <el-button @click="get7Days()" style="margin-left: 10px"
-                                :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
-                            </el-button>
-                            <el-button type="success" @click="reset()">重置</el-button>
-                            <el-button type="primary" @click="search()">查询</el-button>
-                            <el-button type="primary" style="width: 80px;" @click="exportExcel()">导出Excel</el-button>
-                            <el-button type="primary" style="width: 95px;" @click="openExportList">查看导出列表</el-button>
-                        </div>
-                    </el-col>
-                </el-row>
-                <el-row>
+    <el-card class="condition">
+        <el-text size="large">精网号：</el-text>
+        <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 9vw;margin-right:1vw" clearable />
 
-                </el-row>
-            </el-card>
-            <el-card>
-                <div class="bean-info">
-                    <!-- 汉字用 <strong> 加粗，动态数据用 <span> 包一层单独改色 -->
-                    金豆总数：{{ format3(beanNum) }}&nbsp;&nbsp;&nbsp;&nbsp;
-                    付费金豆数：{{ format3(permanentBeans) }}&nbsp;&nbsp;&nbsp;&nbsp;
-                    免费金豆数：{{ format3(freeBean) }}
-                </div>
-                <!-- 设置表格容器的高度和滚动样式 -->
-                <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
-                    <el-table :data="tableData" style="width: 100%" height="520px" @sort-change="handleSortChange">
-                        <el-table-column type="index" label="序号" width="80px" fixed="left">
-                            <template #default="scope">
-                                <span>{{
-                                    scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                                    }}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column fixed="left" prop="name" label="姓名" min-width="100" show-overflow-tooltip />
-                        <el-table-column fixed="left" prop="jwcode" label="精网号" min-width="110px" />
-                        <el-table-column prop="market" label="所属地区" min-width="100px" />
-                        <el-table-column prop="permanentBean" label="付费金豆" sortable="custom" min-width="110px" />
-                        <el-table-column prop="freeBean" label="免费金豆" sortable="custom" min-width="110px" />
-                        <el-table-column prop="remark" label="备注" min-width="150px" show-overflow-tooltip />
-                        <el-table-column prop="rechargeTime" label="充值时间" min-width="200px">
-                            <template #default="scope">
-                                {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
+        <el-text size="large">所属地区：</el-text>
+        <el-select v-model="selectData.market" placeholder="请选择所属地区" clearable style="width: 9vw;margin-right:1vw">
+            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+        </el-select>
 
-                <!-- 分页 -->
-                <div class="pagination" style="margin-top: 20px">
-                    <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-                        layout="total, sizes, prev, pager, next, jumper" :total="total"
-                        @size-change="handlePageSizeChange" @current-change="handleCurrentChange"></el-pagination>
-                </div>
-            </el-card>
+        <el-text size="large">充值时间：</el-text>
+        <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+            end-placeholder="结束时间" style="width: 20vw" @change="handleDatePickerChange" :default-time="defaultTime" />
+        <el-button @click="getToday()" style="margin-left: 10px" :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
+        </el-button>
+        <el-button @click="getYesterday()" style="margin-left: 10px"
+            :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
+        </el-button>
+        <el-button @click="get7Days()" style="margin-left: 10px" :type="activeTimeRange === '7days' ? 'primary' : ''">
+            近7天
+        </el-button>
+        <el-button type="success" @click="reset()">重置</el-button>
+        <el-button type="primary" @click="search()">查询</el-button>
+        <el-button type="primary" style="width: 80px;" @click="exportExcel()">导出Excel</el-button>
+        <el-button type="primary" style="width: 95px;" @click="openExportList">查看导出列表</el-button>
+    </el-card>
+    <el-card>
+        <div>
+            金豆总数：{{ format3(beanNum) }}&nbsp;&nbsp;&nbsp;&nbsp;
+            付费金豆数：{{ format3(permanentBeans) }}&nbsp;&nbsp;&nbsp;&nbsp;
+            免费金豆数：{{ format3(freeBean) }}
+        </div>
+        <div>
+            <el-table :data="tableData" style="width: 82.8vw;height:60vh;" @sort-change="handleSortChange">
+                <el-table-column type="index" label="序号" width="80px" fixed="left">
+                    <template #default="scope">
+                        <span>{{
+                            scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                        }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="left" prop="name" label="姓名" min-width="100" show-overflow-tooltip />
+                <el-table-column fixed="left" prop="jwcode" label="精网号" min-width="110px" />
+                <el-table-column prop="market" label="所属地区" min-width="100px" />
+                <el-table-column prop="permanentBean" label="付费金豆" sortable="custom" min-width="110px" />
+                <el-table-column prop="freeBean" label="免费金豆" sortable="custom" min-width="110px" />
+                <el-table-column prop="remark" label="备注" min-width="150px" show-overflow-tooltip />
+                <el-table-column prop="rechargeTime" label="充值时间" min-width="200px">
+                    <template #default="scope">
+                        {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 1vw">
+            <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+                @current-change="handleCurrentChange"></el-pagination>
+        </div>
+    </el-card>
     <!-- 导出弹窗 -->
-    <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
-        <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
+    <el-dialog v-model="exportListVisible" title="导出列表" width="80vw">
+        <el-table :data="exportList" style="width: 80vw;height: 60vh;" :loading="exportListLoading">
             <el-table-column prop="fileName" label="文件名" />
             <el-table-column prop="state" label="状态">
                 <template #default="scope">
@@ -441,4 +420,13 @@ onMounted(async function () {
         </template>
     </el-dialog>
 </template>
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.condition {
+    width: 82.8vw;
+    height: 4vw;
+    margin-bottom: 0.5vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+</style>
\ No newline at end of file