diff --git a/src/components/workspace/CashManagement.vue b/src/components/workspace/CashManagement.vue
index eb377da..e0864da 100644
--- a/src/components/workspace/CashManagement.vue
+++ b/src/components/workspace/CashManagement.vue
@@ -17,7 +17,7 @@
       <div class="market-data">
         <div v-for="market in cashData.markets" :key="market.name" class="market-item">
           <span class="market-name">{{ market.name }}:</span>
-          <span class="market-value">{{ market.value.toLocaleString() }}</span>
+          <span class="market-value">{{ market.value.toLocaleString() }}新币</span>
         </div>
       </div>
 
@@ -58,8 +58,11 @@ const renderChart = () => {
       bottom: 5, // 增加底部距离的
       left: 'center'
     },
+
     series: [
       {
+        label: {show: false},
+
         type: 'pie',
         radius: ['40%', '70%'],
         data: cashData.value.markets,
@@ -170,15 +173,15 @@ onMounted(() => {
   padding: 10px;
 }
 
-/* 左侧数据列表，使用您指定的样式 */
+/* 左侧数据列表，使用指定的样式 */
 .market-data {
   display: flex;
-  width: 179px;
+  width: 180px;
   flex-direction: column;
   align-items: flex-start;
-  gap: 12px;
+  gap: 20px;
   padding: 10px;
-  margin-left: 80px;
+  margin-left: 40px;
 }
 
 .market-item {
@@ -191,6 +194,7 @@ onMounted(() => {
 }
 
 .market-name {
+  white-space: nowrap;
   font-weight: 700;
 }
 
diff --git a/src/components/workspace/CashManagementMarkets.vue b/src/components/workspace/CashManagementMarkets.vue
new file mode 100644
index 0000000..890fb4b
--- /dev/null
+++ b/src/components/workspace/CashManagementMarkets.vue
@@ -0,0 +1,210 @@
+<!--各地区的现金管理情况-->
+<template>
+
+  <div class="cash-management">
+    <div class="cash-title">
+      <div class="text1"> 现金管理
+        <span class="text1-update-time">最后更新时间：{{
+            workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
+          }}</span>
+      </div>
+    </div>
+
+    <div class="text2"><span class="text2-income">总营收：{{ cashData.totalIncome }}</span></div>
+
+
+    <div class="chart-container">
+      <!-- 左侧数据列表 -->
+      <div class="market-data">
+        <div v-for="market in cashData.markets" :key="market.name" class="market-item">
+          <span class="market-name">{{ market.name }}:</span>
+          <span class="market-value">{{ market.value.toLocaleString() }}</span>
+        </div>
+      </div>
+
+      <!-- 图表区域 -->
+      <div ref="chartRef" class="chart"></div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import {ref, onMounted} from 'vue'
+
+// 模拟数据
+const cashData = ref({
+  updateTime: '2025-09-24 12:00:00',
+  totalIncome: 1200000,
+  markets: [
+    {name: '北京', value: 450000},
+    {name: '上海', value: 300000},
+    {name: '广州', value: 200000},
+    {name: '深圳', value: 150000},
+    {name: '其他', value: 100000}
+  ]
+})
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const renderChart = () => {
+  if (!chartInstance && chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+  }
+  const option = {
+    tooltip: {trigger: 'item'},
+    legend: {
+      bottom: 5, // 增加底部距离的
+      left: 'center'
+    },
+    series: [
+      {
+        label: {show: false},
+
+        type: 'pie',
+        radius: ['40%', '70%'],
+        data: cashData.value.markets,
+        center: ['60%', '45%'] //图表靠右一点
+      }
+    ]
+  }
+  chartInstance.setOption(option)
+}
+
+onMounted(() => {
+  renderChart()
+})
+</script>
+
+<style scoped>
+/* 背景卡片大小 */
+.cash-management {
+  margin: 10px 5px;
+  width: 100%;
+  height: 50vh;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: #E7F4FD;
+  box-shadow: 0 2px 2px 0 #00000040;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/*
+.cash-card {
+  width: 100%;
+}
+
+.chart {
+  width: 100%;
+  height: 200px;
+} */
+
+
+.cash-title {
+  width: 100%;
+  height: 5vh;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%);
+  box-shadow: 0 2px 2px 0 #00152940;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text1 {
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 31.79px;
+}
+
+.text1-update-time {
+  width: 100%;
+  height: 26px;
+  flex-shrink: 0;
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 31.79px;
+}
+
+/* 总收入的渐变框 */
+.text2 {
+  margin: 13px;
+  width: 95%;
+  height: 48px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
+  box-shadow: 0 2px 2px 0 #00152940;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 总收入字体 */
+.text2-income {
+  width: 215px;
+  height: 26px;
+  flex-shrink: 0;
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 31.79px;
+}
+
+/* 图表容器 */
+.chart-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+
+/* 左侧数据列表，使用您指定的样式 */
+.market-data {
+  display: flex;
+  width: 179px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px;
+  margin-left: 80px;
+}
+
+.market-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  color: #040a2d;
+}
+
+.market-name {
+  font-weight: 700;
+}
+
+.market-value {
+  font-weight: 500;
+}
+
+/* 图表样式 */
+.chart {
+  flex: 1;
+  height: 300px;
+  margin-top: 10px;
+}
+</style>
diff --git a/src/components/workspace/GoldGraph.vue b/src/components/workspace/GoldGraph.vue
index d83a520..c57d6b8 100644
--- a/src/components/workspace/GoldGraph.vue
+++ b/src/components/workspace/GoldGraph.vue
@@ -15,15 +15,25 @@
           任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
         </div>
         <div>
-          <el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }"
+              @click="getYes()" size="default">昨天
           </el-button>
-          <el-button @click="getToday()" size="small" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'today' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'today' ? 'white' : '#666' }"
+              @click="getToday()" size="default">今天
           </el-button>
-          <el-button @click="getWeek()" size="small" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'week' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'week' ? 'white' : '#666' }"
+              @click="getWeek()" size="default">本周
           </el-button>
-          <el-button @click="getMonth()" size="small" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'month' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'month' ? 'white' : '#666' }"
+              @click="getMonth()" size="default">本月
           </el-button>
-          <el-button @click="getYear()" size="small" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }"
+              @click="getYear()" size="default">本年
           </el-button>
         </div>
         <div>
@@ -655,28 +665,7 @@ const getAdminData = async function () {
     console.log('请求失败', error)
   }
 }
-// 获取卡片数据
-const getCardData = async () => {
-  try {
-    const response = await API({url: '/workbench/getCard', data: {}})
-    workDataUpdateTime.value = response.updateTime
-    // 周同比
-    sumWow.value = response.sumWow.toFixed(2)
-    // 日环比
-    sumDaily.value = response.sumDaily.toFixed(2)
-
-    if (response && response.data) {
-      processData(response.data)
-    } else if (Array.isArray(response?.marketCards)) {
-      processData(response)
-    } else {
-      console.error('无效的API响应结构:', response)
-    }
-  } catch (error) {
-    console.error('获取卡片数据失败:', error)
-  }
-}
-const workDataUpdateTime = ref(null)
+
 
 // 标记当前激活的时间范围按钮
 const activeTimeRange = ref('')
@@ -687,7 +676,6 @@ const handleDatePickerChange = () => {
 
 onMounted(async () => {
   await getAdminData()
-  await getCardData()
   await getMarkets()
   getYear()
   window.addEventListener('resize', () => {
@@ -700,7 +688,7 @@ onUnmounted(() => {
 </script>
 <style scoped lang="scss">
 
-
+/* 整个柱状图的图表样式 */
 .graph {
   .condition {
     width: 100%;
@@ -733,15 +721,6 @@ onUnmounted(() => {
   }
 }
 
-.center-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.margin-bottom {
-  margin-bottom: 0.5vh;
-}
 
 .card-item {
   width: 25%;
@@ -784,55 +763,56 @@ onUnmounted(() => {
 }
 
 .graph-card-list {
-  background: #F3FAFF;
+  background: #E7F4FD;
   box-shadow: 0 0 8px 0 #00000040;
   padding: 12px;
 
   .card-select {
-    :deep(.el-input__wrapper) {
+    :deep(.el-select__wrapper) {
       background-color: #E7F4FD !important;
+      // :hover {
+      //   background-color: red !important;
+      // }
       box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25) !important;
       border: none !important;
     }
 
-    :deep(.el-input__inner) {
-      background-color: transparent !important;
-    }
-
-    :deep(.el-input__suffix) {
-      background-color: transparent !important;
+    :deep(.el-select-dropdown__item.selected) {
+      // :hover { background-color: red !important; }
+      background: red !important;
     }
   }
 
   /* 表格整体背景：把表格容器设为卡片背景 */
   :deep(.el-table) {
-    background-color: #F3FAFF !important;
+    background-color: #E7F4FD !important;
     box-shadow: none !important;
   }
 
   /* 表头/表体 wrapper 与 table body 单元格 */
   :deep(.el-table__header-wrapper),
   :deep(.el-table__body-wrapper),
-  :deep(.el-table__body),
-  :deep(.el-table__header),
-  :deep(.el-table__body tbody),
   :deep(.el-table__body tr),
-  :deep(.el-table__row),
-  :deep(.el-table__cell),
   :deep(.el-table__body td) {
     background-color: transparent !important;
   }
 
   /* 表头 */
   :deep(.el-table__header th) {
-    background-color: #F3FAFF !important;
+    background-color: #E7F4FD !important;
   }
 
-  /* 行之间的分隔线（更像卡片内表格） */
-  :deep(.el-table .el-table__row):not(:last-child) {
-    border-bottom: 1px solid rgba(0,0,0,0.06);
+  /* 针对表格 body 中的单元格底部边框 */
+  :deep(.el-table__body .el-table__cell) {
+    border-bottom: 1px solid #BBC0C9 !important;
   }
-
 }
 
+/* tabs的样式 */
+/* 选中 tab 的文字颜色 */
+:deep(.el-tabs__item.is-active) {
+  color: #2741DE !important;
+  font-size:  18px;
+  font-weight: bold;
+}
 </style>
diff --git a/src/components/workspace/GoldGraphMarkets.vue b/src/components/workspace/GoldGraphMarkets.vue
new file mode 100644
index 0000000..3de971f
--- /dev/null
+++ b/src/components/workspace/GoldGraphMarkets.vue
@@ -0,0 +1,818 @@
+<!--各地区的金币充值和消费情况柱状图-->
+
+<template>
+  <div class="graph">
+    <el-card style="width:100%;" class="graph-card">
+      <div>
+        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+          <el-tab-pane label="金币充值" name="recharge"></el-tab-pane>
+          <el-tab-pane label="金币消费" name="consume"></el-tab-pane>
+        </el-tabs>
+      </div>
+      <div class="condition">
+        <div class="stats">
+          <div v-if="activeTab === 'consume'">合计：{{ sumConsume / 100 }}</div>&nbsp;&nbsp;
+          永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
+          免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
+          任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
+        </div>
+        <div>
+          <el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
+          </el-button>
+          <el-button @click="getToday()" size="small" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
+          </el-button>
+          <el-button @click="getWeek()" size="small" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
+          </el-button>
+          <el-button @click="getMonth()" size="small" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
+          </el-button>
+          <el-button @click="getYear()" size="small" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
+          </el-button>
+        </div>
+        <div>
+          <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→"
+                          start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
+                          style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss"
+                          :default-time="defaultTime"
+                          :disabled-date="disabledDate" @change="handleDatePickerChange"/>
+          <el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">查询</el-button>
+        </div>
+      </div>
+
+      <div class="graph-content">
+        <div ref="chartRef" class="left"></div>
+        <div class="right">
+          <el-card class="graph-card-list">
+            <div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
+            <el-select class="card-select" v-model="selectedType" style="width: 100%; margin-bottom: 15px">
+              <el-option label="全部类型" value="all"></el-option>
+              <el-option label="永久金币" value="permanent"></el-option>
+              <el-option label="免费金币" value="free"></el-option>
+              <el-option label="任务金币" value="task"></el-option>
+            </el-select>
+            <el-table class="card-table" :data="tableData" height="320px">
+              <el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column>
+              <el-table-column prop="market" label="地区" align="center">
+                <template #default="scope">
+                  <span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="coinAmount" label="金币数量" align="center">
+                <template #default="{ row }">
+                  {{ row.coinAmount.toLocaleString() }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import {onMounted, onUnmounted, ref, watch} from 'vue'
+import API from '@/util/http'
+import {ElMessage} from 'element-plus'
+import dayjs from 'dayjs';
+import utc from 'dayjs-plugin-utc'
+import {marketMapping} from "@/utils/marketMap.js";
+
+dayjs.extend(utc)
+
+const defaultTime = [
+  new Date(2000, 1, 1, 0, 0, 0),
+  new Date(2000, 2, 1, 23, 59, 59),
+]
+
+// 地区数据
+const markets = ref([])
+// 图表相关
+const dateRange = ref([])
+const activeTab = ref('recharge')
+const selectedType = ref('all')
+const tableData = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+// 图表合计数
+const sumRechargePermanent = ref(0)
+const sumRechargeFree = ref(0)
+const sumRechargeTask = ref(0)
+const sumConsumePermanent = ref(0)
+const sumConsumeFree = ref(0)
+const sumConsumeTask = ref(0)
+const sumConsume = ref(0)
+// 用户信息
+const adminData = ref({})
+// 卡片数据相关
+const currentGold = ref(0)
+const dailyChange = ref(0)
+const currentPermanent = ref(0)
+const currentFree = ref(0)
+const currentFreeJune = ref(0)
+const currentFreeDecember = ref(0)
+const currentTask = ref(0)
+const yearlyRecharge = ref(0)
+const yearlyMoney = ref(0)
+const recharge = ref(0)
+const money = ref(0)
+const yearlyReduce = ref(0)
+const yearlyConsume = ref(0)
+const yearlyRefund = ref(0)
+const dailyReduce = ref(0)
+const dailyConsume = ref(0)
+const dailyRefund = ref(0)
+const yearlyRechargeNum = ref(0)
+const sumWow = ref(0)
+const sumDaily = ref(0)
+const rechargeNum = ref(0)
+const ydayRechargeNum = ref(0)
+const firstRecharge = ref(0)
+const length = ref(0)
+//  加载状态
+const chartLoading = ref(true)
+
+const handleResize = () => {
+  if (chartInstance.value) {
+    try {
+      chartInstance.value.resize()
+      console.log('resize一下')
+    } catch (error) {
+      console.error('图表resize失败:', error)
+    }
+  }
+}
+// 初始化图表
+const initChart = () => {
+  if (!chartInstance && chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+    window.addEventListener('resize', handleResize)
+  }
+}
+// 销毁图表
+const destroyChart = () => {
+  if (chartInstance.value) {
+    try {
+      chartInstance.value.dispose()
+    } catch (error) {
+      console.error('图表销毁失败:', error)
+    }
+    chartInstance.value = null
+  }
+  window.removeEventListener('resize', handleResize)
+}
+const formatDate = function (date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+// 昨天
+const getYes = function () {
+  const yesterday = dayjs().subtract(1, 'day')
+  const startTime = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  dateRange.value = [startTime, endTime]
+  console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'yes' // 标记当前激活状态
+
+  getChartData()
+}
+// 今天
+const getToday = function () {
+  const today = dayjs()
+  const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  // const endTime = today.add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  dateRange.value = [startTime, endTime]
+  console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
+  getChartData()
+}
+// 本周
+const getWeek = function () {
+  const today = dayjs();
+  // 获取今天是星期几（0是周日，1是周一，...，6是周六）
+  const day = today.day();
+
+  // 计算本周一（如果今天是周一，就取今天；如果是周日，就减6天）
+  let monday = today.subtract(day === 0 ? 6 : day - 1, 'day');
+  // 计算本周日（如果今天是周日，就取今天；否则就加(7 - day)天）
+  let sunday = today.add(day === 0 ? 0 : 7 - day, 'day');
+
+  // 设置时间为起始和结束
+  const startTime = monday.startOf('day').format('YYYY-MM-DD HH:mm:ss');
+  const endTime = sunday.endOf('day').format('YYYY-MM-DD HH:mm:ss');
+
+  dateRange.value = [startTime, endTime];
+  console.log('本周时间范围（周一到周日）：', dateRange.value);
+  activeTimeRange.value = 'week';
+
+  getChartData();
+};
+// 本月
+const getMonth = function () {
+  const today = dayjs()
+  const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss')
+  // const endTime = today.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.endOf('month').format('YYYY-MM-DD HH:mm:ss')
+  dateRange.value = [startTime, endTime]
+  console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'month' // 标记当前激活状态
+
+  getChartData()
+}
+// 本年
+const getYear = function () {
+  const today = dayjs()
+  const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.endOf('year').format('YYYY-MM-DD HH:mm:ss')
+  // const endTime = today.add(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
+  dateRange.value = [startTime, endTime]
+  console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'year' // 标记当前激活状态
+
+  getChartData()
+}
+
+// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务)
+const processData = (data) => {
+  const summary = {
+    currentGold: 0,
+    dailyChange: 0,
+    currentPermanent: 0,
+    currentFreeJune: 0,
+    currentFreeDecember: 0,
+    currentTask: 0,
+    currentFree: 0,
+    recharge: 0,
+    money: 0,
+    yearlyRecharge: 0,
+    yearlyMoney: 0,
+    consumePermanent: 0,
+    consumeFreeJune: 0,
+    consumeFreeDecember: 0,
+    consumeTask: 0,
+    refundPermanent: 0,
+    refundFreeJune: 0,
+    refundFreeDecember: 0,
+    refundTask: 0,
+    dailyReduce: 0,
+    yearlyConsume: 0,
+    yearlyRefund: 0,
+    yearlyReduce: 0,
+    rechargeNum: 0,
+    ydayRechargeNum: 0,
+    firstRecharge: 0,
+    sumWow: 0,
+    sumDaily: 0,
+    yearlyRechargeNum: 0
+  }
+
+  // 遍历市场
+  data.marketCards.forEach(market => {
+    for (const i in summary) {
+      if (market[i] !== undefined && market[i] !== null) { // 其实还应该卡一个number
+        summary[i] += market[i]
+      }
+    }
+  })
+
+  // wow和daily除一下
+  length.value = data.markets.length
+  console.log(length.value)
+
+  // 计算昨日新增消费和退款
+  const yesterdayConsume = summary.consumePermanent + summary.consumeFreeJune + summary.consumeFreeDecember + summary.consumeTask
+  const yesterdayRefund = summary.refundPermanent + summary.refundFreeJune + summary.refundFreeDecember + summary.refundTask
+
+  // 更新卡片数据
+  currentGold.value = summary.currentGold.toFixed(2)
+  dailyChange.value = summary.dailyChange.toFixed(2)
+  currentPermanent.value = summary.currentPermanent.toFixed(2)
+  currentFree.value = summary.currentFree.toFixed(2)
+  currentFreeJune.value = summary.currentFreeJune.toFixed(2)
+  currentFreeDecember.value = summary.currentFreeDecember.toFixed(2)
+  currentTask.value = summary.currentTask.toFixed(2)
+
+  yearlyRecharge.value = summary.yearlyRecharge.toFixed(2)
+  yearlyMoney.value = summary.yearlyMoney.toFixed(2)
+  recharge.value = summary.recharge.toFixed(2)
+  money.value = summary.money.toFixed(2)
+
+  yearlyReduce.value = summary.yearlyReduce.toFixed(2)
+  yearlyConsume.value = summary.yearlyConsume.toFixed(2)
+  yearlyRefund.value = summary.yearlyRefund.toFixed(2)
+  dailyReduce.value = summary.dailyReduce.toFixed(2)
+  dailyConsume.value = yesterdayConsume.toFixed(2)
+  dailyRefund.value = yesterdayRefund.toFixed(2)
+
+  yearlyRechargeNum.value = summary.yearlyRechargeNum
+
+  // // 周同比
+  // sumWow.value = (marketCards.sumWow / length.value).toFixed(2)
+  // // 日环比
+  // sumDaily.value = (marketCards.sumDaily / length.value).toFixed(2)
+
+  // rechargeNum.value = summary.rechargeNum
+  ydayRechargeNum.value = summary.ydayRechargeNum
+  firstRecharge.value = summary.firstRecharge
+}
+
+//无法选择的时间
+const disabledDate = (time) => {
+  const limitDate = new Date(2025, 0, 1);
+  return time.getTime() < limitDate.getTime();
+}
+
+// 获取市场列表
+const getMarkets = async () => {
+  console.log("adminData", adminData.value.account)
+  try {
+    const response = await API({
+      url: '/general/adminMarkets',
+      data: {
+        account: adminData.value.account
+      }
+    })
+    if (Array.isArray(response.data)) {
+      // markets.value = response.data.filter(data => data !== "1")
+      markets.value = response.data
+      console.log('市场列表获取成功:', markets.value)
+    } else {
+      console.error('获取市场列表失败', response)
+      ElMessage.error('获取市场列表失败')
+    }
+  } catch (error) {
+    console.error('获取市场列表失败:', error)
+    ElMessage.error('获取市场列表失败')
+  }
+}
+
+// 获取图表数据
+const getChartData = async () => {
+  try {
+    // 校验市场数据到底有没有
+    if (!markets.value || markets.value.length === 0) {
+      await getMarkets()
+    }
+    // 本年
+    if (!dateRange.value || dateRange.value.length === 0) {
+      getYear()
+    }
+    const params = {
+      markets: markets.value,
+      startDate: dateRange.value[0],
+      endDate: dateRange.value[1]
+    };
+
+
+    const response = await API({
+      url: '/workbench/getGraph',
+      data: params
+    })
+    console.log('看看params', params)
+    if (Array.isArray(response.marketGraphs)) {
+      // const filteredGraphs = response.marketGraphs.filter(data => data.market !== "1");
+      // 处理图表数据
+      processChartData(response.marketGraphs)
+      // 处理排名数据
+      processRankingData(response.marketGraphs)
+    } else {
+      console.error('获取图表数据失败:', response)
+      ElMessage.error('获取图表数据失败')
+    }
+  } catch (error) {
+    console.error('获取图表数据失败:', error)
+    ElMessage.error('获取图表数据失败')
+  }
+}
+// 处理图表数据
+const processChartData = (marketCards) => {
+  const chartData = {
+    rechargePermanent: [],
+    rechargeFree: [],
+    rechargeTask: [],
+    consumePermanent: [],
+    consumeFree: [],
+    consumeTask: [],
+    sumConsume: []
+  }
+  // 这是图表的合计数，怎样遍历？？？？？
+  const sumRechargePermanent1 = ref(0)
+  const sumRechargeFree1 = ref(0)
+  const sumRechargeTask1 = ref(0)
+  const sumConsumePermanent1 = ref(0)
+  const sumConsumeFree1 = ref(0)
+  const sumConsumeTask1 = ref(0)
+  const sumConsume1 = ref(0)
+
+
+  marketCards.forEach(market => {
+    chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0)
+    chartData.rechargeFree.push(market.sumRechargeFree / 100 || 0)
+    chartData.rechargeTask.push(market.sumRechargeTask / 100 || 0)
+    chartData.consumePermanent.push(market.sumConsumePermanent / 100 || 0)
+    chartData.consumeFree.push(market.sumConsumeFree / 100 || 0)
+    chartData.consumeTask.push(market.sumConsumeTask / 100 || 0)
+    chartData.sumConsume.push(market.sumConsume / 100 || 0)
+
+    // 合计数合计数合计数咋算
+    sumRechargePermanent1.value += (market.sumRechargePermanent || 0)
+    sumRechargeFree1.value += (market.sumRechargeFree || 0)
+    //sumRechargeTask1.value += (market.sumRechargeTask || 0)
+    sumConsumePermanent1.value += (market.sumConsumePermanent || 0)
+    sumConsumeFree1.value += (market.sumConsumeFree || 0)
+    sumConsumeTask1.value += (market.sumConsumeTask || 0)
+    sumConsume1.value += (market.sumConsume || 0)
+  })
+  sumRechargePermanent.value = sumRechargePermanent1.value
+  sumRechargeFree.value = sumRechargeFree1.value
+  sumRechargeTask.value = 0
+  sumConsumePermanent.value = sumConsumePermanent1.value
+  sumConsumeFree.value = sumConsumeFree1.value
+  sumConsumeTask.value = sumConsumeTask1.value
+  sumConsume.value = sumConsume1.value
+
+  updateChart(chartData)
+}
+
+const processRankingData = (marketCards) => {
+  // 每个市场的总金币数
+  const rankingData = marketCards.map(market => {
+    let coinAmount = 0;
+    if (activeTab.value === 'recharge') {
+      // 充值排名
+      switch (selectedType.value) {
+        case 'all':
+          coinAmount = (market.sumRechargePermanent / 100 || 0) + (market.sumRechargeFree / 100 || 0) + (market.sumRechargeTask / 100 || 0);
+          break;
+        case 'permanent':
+          coinAmount = market.sumRechargePermanent / 100 || 0;
+          break;
+        case 'free':
+          coinAmount = market.sumRechargeFree / 100 || 0;
+          break;
+        case 'task':
+          coinAmount = market.sumRechargeTask / 100 || 0;
+          break;
+      }
+    } else {
+      // 消费排名
+      switch (selectedType.value) {
+        case 'all':
+          coinAmount = (market.sumConsumePermanent / 100 || 0) + (market.sumConsumeFree / 100 || 0) + (market.sumConsumeTask / 100 || 0);
+          break;
+        case 'permanent':
+          coinAmount = market.sumConsumePermanent / 100 || 0;
+          break;
+        case 'free':
+          coinAmount = market.sumConsumeFree / 100 || 0;
+          break;
+        case 'task':
+          coinAmount = market.sumConsumeTask / 100 || 0;
+          break;
+      }
+    }
+    return {
+      market: market.market,
+      coinAmount: coinAmount
+    };
+  });
+
+  // 按金币数量排序
+  rankingData.sort((a, b) => b.coinAmount - a.coinAmount);
+
+  // 排名序号
+  tableData.value = rankingData.map((item, index) => ({
+    rank: index + 1,
+    ...item
+  }));
+}
+
+watch(selectedType, () => {
+  getChartData();
+});
+// 更新图表
+const updateChart = (chartData) => {
+  if (!chartInstance) {
+    initChart()
+  }
+  chartLoading.value = true
+  try {
+    let series = []
+    let legend = []
+
+    if (activeTab.value === 'recharge') {
+      series = [
+        {
+          name: '永久金币',
+          type: 'bar',
+          stack: 'recharge',
+          data: chartData.rechargePermanent,
+          itemStyle: {color: '#5470c6'},
+          barWidth: 30
+        },
+        {
+          name: '免费金币',
+          type: 'bar',
+          stack: 'recharge',
+          data: chartData.rechargeFree,
+          itemStyle: {color: '#91cc75'},
+          barWidth: 30
+        },
+        {
+          name: '任务金币',
+          type: 'bar',
+          stack: 'recharge',
+          data: chartData.rechargeTask,
+          itemStyle: {color: '#fac858'},
+          barWidth: 30
+        }
+      ]
+      legend = ['永久金币', '免费金币', '任务金币']
+    } else {
+      series = [
+        {
+          name: '永久金币',
+          type: 'bar',
+          stack: 'consume',
+          data: chartData.consumePermanent,
+          itemStyle: {color: '#5470c6'},
+          barWidth: 30
+        },
+        {
+          name: '免费金币',
+          type: 'bar',
+          stack: 'consume',
+          data: chartData.consumeFree,
+          itemStyle: {color: '#91cc75'},
+          barWidth: 30
+        },
+        {
+          name: '任务金币',
+          type: 'bar',
+          stack: 'consume',
+          data: chartData.consumeTask,
+          itemStyle: {color: '#fac858'},
+          barWidth: 30
+        }
+      ]
+      legend = ['永久金币', '免费金币', '任务金币']
+    }
+
+    const option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: function (params) {
+          let result = params[0].name + '<br/>'
+          let total = 0;
+          params.forEach(param => {
+            result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`;
+            total += param.value;
+          })
+          result += `总${activeTab.value === 'recharge' ? '充值' : '消费'}: ${total.toLocaleString()}`;
+          return result
+        }
+      },
+      legend: {
+        data: legend,
+        bottom: 10
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        // 横坐标数据 之后要改成一个时间的
+        data: markets.value,
+        axisLabel: {
+          interval: 0,
+          rotate: 0
+        }
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            width: 1,
+            color: '#000000'
+          }
+        },
+        axisLabel: {
+          formatter: function (value) {
+            return value.toLocaleString()
+          }
+        },
+
+      },
+      series: series,
+      // dataZoom: [
+      //   {
+      //     type: 'slider',
+      //     show: true,
+      //     start: 0,
+      //     end: 100,
+      //     maxSpan: 100,
+      //     minSpan: 100,
+      //
+      //     height: 2,
+      //   },
+      // ]
+    }
+
+    chartInstance.setOption(option)
+  } catch (error) {
+    console.error('图表更新失败:', error)
+    ElMessage.error('图表渲染失败')
+  } finally {
+    setTimeout(() => {
+      chartLoading.value = false
+    }, 300)
+  }
+}
+
+// 处理标签切换
+const handleTabChange = () => {
+  getChartData()
+  console.log('标签切换调用图表')
+}
+
+const getAdminData = async function () {
+  try {
+    const result = await API({url: '/admin/userinfo', data: {}})
+    adminData.value = result
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
+
+onMounted(async () => {
+  await getAdminData()
+  await getMarkets()
+  getYear()
+  window.addEventListener('resize', () => {
+    chartInstance.resize()
+  })
+})
+onUnmounted(() => {
+  destroyChart()
+})
+</script>
+<style scoped lang="scss">
+
+
+.graph {
+  .condition {
+    width: 100%;
+    height: 1%;
+    display: flex;
+    align-items: center;
+
+    .stats {
+      display: flex;
+      align-items: center;
+      width: 35vw;
+      font-size: 15px;
+    }
+  }
+
+  .graph-content {
+    flex: 1;
+    height: auto;
+    display: flex;
+
+    .left {
+      width: 70%;
+      height: auto;
+    }
+
+    .right {
+      flex: 1;
+      padding: 0.5vw 2vh;
+    }
+  }
+}
+
+.center-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.margin-bottom {
+  margin-bottom: 0.5vh;
+}
+
+.card-item {
+  width: 25%;
+  height: 28vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 0.25vw;
+}
+
+.card-title {
+  font-weight: bold;
+  margin-bottom: 1vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-large {
+  font-weight: bold;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 15px;
+
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.graph-card {
+  background: #F3FAFF;
+  box-shadow: 0 0 8px 0 #00000040;
+}
+
+.graph-card-list {
+  background: #F3FAFF;
+  box-shadow: 0 0 8px 0 #00000040;
+  padding: 12px;
+
+  .card-select {
+    :deep(.el-input__wrapper) {
+      background-color: #E7F4FD !important;
+      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25) !important;
+      border: none !important;
+    }
+
+    :deep(.el-input__inner) {
+      background-color: transparent !important;
+    }
+
+    :deep(.el-input__suffix) {
+      background-color: transparent !important;
+    }
+  }
+
+  /* 表格整体背景：把表格容器设为卡片背景 */
+  :deep(.el-table) {
+    background-color: #F3FAFF !important;
+    box-shadow: none !important;
+  }
+
+  /* 表头/表体 wrapper 与 table body 单元格 */
+  :deep(.el-table__header-wrapper),
+  :deep(.el-table__body-wrapper),
+  :deep(.el-table__body),
+  :deep(.el-table__header),
+  :deep(.el-table__body tbody),
+  :deep(.el-table__body tr),
+  :deep(.el-table__row),
+  :deep(.el-table__cell),
+  :deep(.el-table__body td) {
+    background-color: transparent !important;
+  }
+
+  /* 表头 */
+  :deep(.el-table__header th) {
+    background-color: #F3FAFF !important;
+  }
+
+  /* 行之间的分隔线（更像卡片内表格） */
+  :deep(.el-table .el-table__row):not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+}
+
+</style>
diff --git a/src/components/workspace/GoldManagement.vue b/src/components/workspace/GoldManagement.vue
index 46b5e9a..c4663ff 100644
--- a/src/components/workspace/GoldManagement.vue
+++ b/src/components/workspace/GoldManagement.vue
@@ -270,7 +270,8 @@ const processData = (data) => {
   });
 }
 
-// 初始化金币类型南丁格尔图
+// 初始化金币类型南丁格尔图（暂时不用了）
+/*
 const initGoldTypeChart = () => {
   const myChart = echarts.init(goldTypeChart.value);
   const option = {
@@ -310,6 +311,7 @@ const initGoldTypeChart = () => {
   };
   myChart.setOption(option);
 }
+*/
 
 // 初始化充值金币环形图
 const initRechargeGoldChart = () => {
@@ -405,7 +407,7 @@ const initConsumeDetailChart = () => {
     // 增加图表内边距，避免内容溢出
     legend: {
       orient: 'vertical',
-      left: 'left',
+      left: '20%',
       top: '85',
       icon: 'circle',
       iconSize: 5,
@@ -463,7 +465,7 @@ const initRechargePeopleChart = () => {
   const option = {
     legend: {
       orient: 'vertical',
-      left: 'left',
+      left: '20%',
       top: '85',
       icon: 'circle',
       iconSize: 5,
@@ -540,7 +542,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
 
 .center-card {
diff --git a/src/views/audit/bean/beanAudit.vue b/src/views/audit/bean/beanAudit.vue
index 5d2c129..38a55da 100644
--- a/src/views/audit/bean/beanAudit.vue
+++ b/src/views/audit/bean/beanAudit.vue
@@ -1,35 +1,47 @@
 <template>
-  <el-card style="margin-bottom: 0.5vh;width:82vw">
-    <div style="margin-bottom: 1vh">
-      <el-text size="large">精网号：</el-text>
-      <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 12vw;margin-right:1vw" clearable />
-
-      <el-text size="large">所属地区：</el-text>
-      <el-cascader v-model="selectedMarkets" :options="marketOptions" placeholder="请选择所属地区" clearable
-        style="width: 12vw" @change="handleMarketChange" />
-    </div>
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
+    <el-col style="margin-bottom: 1vh">
+      <div class="select">
+        <div class="selectRow">
+          <el-text class="text" size="large">精网号：</el-text>
+          <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 12vw;margin-right:1vw" clearable />
+        </div>
+        <div class="selectRow">
+          <el-text class="text" size="large">所属地区：</el-text>
+          <el-cascader v-model="selectedMarkets" :options="marketOptions" placeholder="请选择所属地区" clearable
+            style="width: 12vw" @change="handleMarketChange" />
+        </div>
+      </div>
+    </el-col>
     <el-col>
-      <el-text size="large" style="width: 80px" v-show="checkTab === 'pending'">提交时间：</el-text>
-      <el-text size="large" style="width: 80px" v-show="checkTab === 'reject' || checkTab === 'pass'">审核时间：</el-text>
-      <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
-        end-placeholder="结束时间" style="width: 25vw;margin-right:1vw" @change="handleDatePickerChange"
-        :default-time="defaultTime" />
-      <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button>
-      <el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''">昨</el-button>
-      <el-button @click="get7Days()" :type="activeTimeRange === '7days' ? 'primary' : ''">近7天</el-button>
-      <el-button type="success" @click="resetSearch">重置</el-button>
-      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <div class="select">
+        <div class="selectRow" style="width: 36vw;">
+          <el-text class="text" size="large"  v-show="checkTab === 'pending'">提交时间：</el-text>
+          <el-text size="large" style="width: 25vw;margin-right:1vw"
+            v-show="checkTab === 'reject' || checkTab === 'pass'">审核时间：</el-text>
+          <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+            end-placeholder="结束时间" style="width: 25vw;margin-right:1vw" @change="handleDatePickerChange"
+            :default-time="defaultTime" />
+          <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button>
+          <el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''">昨</el-button>
+          <el-button @click="get7Days()" :type="activeTimeRange === '7days' ? 'primary' : ''">近7天</el-button>
+        </div>
+        <div class="selectRow" style="justify-content: flex-start;">
+          <el-button type="success" @click="resetSearch">重置</el-button>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+        </div>
+      </div>
     </el-col>
   </el-card>
 
-  <el-card >
+  <el-card class="card2">
     <el-tabs v-model="checkTab" type="card" @tab-click="handleClick">
-      <el-tab-pane label="待审核" name="pending" v-if="hasbeanWait&&hasbeanWaitShow"></el-tab-pane>
+      <el-tab-pane label="待审核" name="pending" v-if="hasbeanWait && hasbeanWaitShow"></el-tab-pane>
       <el-tab-pane label="已通过" name="pass" v-if="hasbeanThrough"></el-tab-pane>
       <el-tab-pane label="已驳回" name="reject" v-if="hasbeanReject"></el-tab-pane>
     </el-tabs>
 
-    <div>
+    <div class="goldStatistics">
       总条数：{{ format3(stats.num) }}条&nbsp;&nbsp;&nbsp;&nbsp;
       总金豆数：{{ format3(stats.beanNum) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
       付费金豆：{{ format3(stats.permanentBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
@@ -61,7 +73,8 @@
           {{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
         </template>
       </el-table-column>
-      <el-table-column v-if="checkTab === 'pending' &&(hasbeanWaitThough||hasbeanWaitReject)" fixed="right" prop="operation" label="操作" width="400px">
+      <el-table-column v-if="checkTab === 'pending' && (hasbeanWaitThough || hasbeanWaitReject)" fixed="right"
+        prop="operation" label="操作" width="400px">
         <template #default="scope">
           <div class="operation">
             <el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
@@ -77,7 +90,8 @@
                 </el-button>
               </template>
             </el-popconfirm>
-            <el-button v-if="hasbeanWaitReject" :disabled="clicked || cancelClicked" type="primary" text @click="showRejectDialog(scope.row)">
+            <el-button v-if="hasbeanWaitReject" :disabled="clicked || cancelClicked" type="primary" text
+              @click="showRejectDialog(scope.row)">
               驳回
             </el-button>
           </div>
@@ -142,7 +156,7 @@ const hasbeanWaitThough = ref(false)  // 金豆审核通过（对应beanWaitThou
 const hasbeanWaitReject = ref(false)  // 金豆审核驳回（对应beanWaitReject:47）
 
 // 初始化权限状态（补充金豆审核权限，与充值权限初始化逻辑并列）
-const initPermissions = async() => {
+const initPermissions = async () => {
   if (!menuTree.value || !menuTree.value.length) return;
   hasbeanWait.value = hasMenuPermission(menuTree.value, permissionMapping.beanWait);
   hasbeanThrough.value = hasMenuPermission(menuTree.value, permissionMapping.beanThrough);
@@ -288,7 +302,7 @@ const getStats = async () => {
 }
 // 处理通过操作
 const handleApprove = async (row) => {
-    if (!hasbeanWaitThough) {
+  if (!hasbeanWaitThough) {
     ElMessage.error('暂无权限')
     return
   }
@@ -458,7 +472,7 @@ const throttledHandleApprove = _.throttle(handleApprove, 5000, {
   trailing: false
 })
 const showRejectDialog = (row) => {
-   if (!hasbeanWaitReject) {
+  if (!hasbeanWaitReject) {
     ElMessage.error('暂无权限')
     return
   }
@@ -501,12 +515,12 @@ const trimJwCode = () => {
 }
 onMounted(async () => {
   await initPermissions()
-   if(hasbeanWaitShow.value){
+  if (hasbeanWaitShow.value) {
     searchForm.value.status = 0
-  }else if(hasbeanThrough.value){
+  } else if (hasbeanThrough.value) {
     searchForm.value.status = 1
-  }else if(hasbeanReject){
-   searchForm.value.status = 2
+  } else if (hasbeanReject) {
+    searchForm.value.status = 2
   }
   getmarkets()
   await get()
@@ -515,4 +529,68 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped lang="scss">
+/* 搜索的卡片样式 */
+.card1 {
+  background: #F3FAFE;
+}
+
+/* 表单的卡片样式 */
+.card2 {
+  background: #E7F4FD;
+}
+
+/* 充值新币总数等等 */
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+/* 表头/表体 wrapper 与 table body 单元格 */
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+.select {
+  display: flex;
+
+  .selectRow {
+    width: 17vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.5vw;
+
+    .text {
+      width: 5vw;
+      font-size: 15px;
+    }
+
+    .selectContent {
+      flex: 1;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/audit/gold/rechargeAudit.vue b/src/views/audit/gold/rechargeAudit.vue
index 08f2750..a9d7f8f 100644
--- a/src/views/audit/gold/rechargeAudit.vue
+++ b/src/views/audit/gold/rechargeAudit.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
     <el-col style="margin-bottom: 1vh">
       <div class="select">
         <div class="selectRow">
@@ -47,12 +47,12 @@
       </div>
     </el-col>
   </el-card>
-  <el-card>
+  <el-card class="card2">
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> 
       <el-tab-pane label="待审核" name="wait" v-if="hasrechargeWait&&hasrechargeWaitShow"></el-tab-pane>
       <el-tab-pane label="已通过" name="pass" v-if="hasrechargeThrough"></el-tab-pane>
       <el-tab-pane label="已驳回" name="reject" v-if="hasrechargeReject"></el-tab-pane>
-      <div>
+      <div class="goldStatistics">
 
         <!--        总条数：{{ format3(stats.totalNum) }}条&nbsp;&nbsp;&nbsp;&nbsp;-->
         充值新币：{{ format3(stats.permanentGolds) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
@@ -715,7 +715,7 @@ onMounted(async function () {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .pagination {
   display: flex;
   margin-top: 0.5vh;
@@ -725,6 +725,47 @@ onMounted(async function () {
   display: flex;
 }
 
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .select {
   display: flex;
 
diff --git a/src/views/audit/gold/refundAudit.vue b/src/views/audit/gold/refundAudit.vue
index 4248286..56452ee 100644
--- a/src/views/audit/gold/refundAudit.vue
+++ b/src/views/audit/gold/refundAudit.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
     <el-col style="margin-bottom: 1vh">
       <div class="select">
         <div class="selectRow">
@@ -49,14 +49,14 @@
     </el-col>
   </el-card>
 
-  <el-card >
+  <el-card class="card2">
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="待审核" name="wait" v-if="hasrefundWait&&hasrefundWaitShow"></el-tab-pane>
       <el-tab-pane label="已通过" name="pass" v-if="hasrefundThrough"></el-tab-pane>
       <el-tab-pane label="已驳回" name="reject" v-if="hasrefundReject"></el-tab-pane>
     </el-tabs>
 
-    <div>
+    <div class="goldStatistics">
       退款总金币数：{{ format3((stats.permanentGolds + stats.freeGolds + stats.taskGolds).toFixed(2))
       }}金币&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(stats.permanentGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
@@ -629,7 +629,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .pagination {
   display: flex;
   margin-top: 0.5vh;
@@ -639,6 +639,47 @@ onMounted(async () => {
   display: flex;
 }
 
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .select {
   display: flex;
 
diff --git a/src/views/consume/bean/articleVideo.vue b/src/views/consume/bean/articleVideo.vue
index 90ae55a..ed37a86 100644
--- a/src/views/consume/bean/articleVideo.vue
+++ b/src/views/consume/bean/articleVideo.vue
@@ -463,7 +463,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh">
+  <el-card class="card1" style="margin-bottom: 1vh">
     <el-col style="margin-bottom: 1vh; ">
       <div style="display:flex">
         <div style="width: 13vw; display:flex; align-items:center; justify-content: center;">
@@ -494,7 +494,7 @@ const getTagText = (state) => {
         </div>
         <div style="width: 12vw; display:flex; align-items:center; justify-content: center;">
           <el-text>作者：</el-text>
-          <el-input v-model="beanConsumeArticle.author"style="width:8vw; margin-left: 0.5vw;" placeholder="请输入作者" clearable />
+          <el-input v-model="beanConsumeArticle.author" style="width:8vw; margin-left: 0.5vw;" placeholder="请输入作者" clearable />
         </div>
       </div>
     </el-col>
@@ -516,8 +516,8 @@ const getTagText = (state) => {
       </div>
     </el-col>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       金豆总数：{{ format3(Math.abs(permanentBean + freeBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       付费金豆数：{{ format3(Math.abs(permanentBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金豆数：{{ format3(Math.abs(freeBean)) }}
@@ -600,7 +600,50 @@ const getTagText = (state) => {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .pagination {
   display: flex;
   margin-top: 20px;
diff --git a/src/views/consume/bean/dieHardFan.vue b/src/views/consume/bean/dieHardFan.vue
index 32e980e..27cfba0 100644
--- a/src/views/consume/bean/dieHardFan.vue
+++ b/src/views/consume/bean/dieHardFan.vue
@@ -468,7 +468,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <el-col style="margin-bottom: 10px">
       <el-text>精网号：</el-text>
       <el-input v-model="beanConsumeFan.jwcode" placeholder="请输入精网号" style="width: 200px;margin-right: 20px"
@@ -499,8 +499,8 @@ const getTagText = (state) => {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </el-col>
   </el-card>
-      <el-card>
-        <div>
+      <el-card class="card2">
+        <div class="goldStatistics">
           金豆总数：{{ format3(Math.abs(permanentBean + freeBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
           付费金豆数：{{ format3(Math.abs(permanentBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
           免费金豆数：{{ format3(Math.abs(freeBean)) }}
@@ -573,7 +573,50 @@ const getTagText = (state) => {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .pagination {
   display: flex;
   margin-top: 20px;
diff --git a/src/views/consume/bean/liveStream.vue b/src/views/consume/bean/liveStream.vue
index 6062e20..5ee693a 100644
--- a/src/views/consume/bean/liveStream.vue
+++ b/src/views/consume/bean/liveStream.vue
@@ -502,7 +502,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <div style="margin-bottom: 1vh;display: flex;">
       <div style="width: 18vw;margin-right: 1vw;display: flex;align-items: center;">
         <el-text>精网号：</el-text>
@@ -550,8 +550,8 @@ const getTagText = (state) => {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </div>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       金豆总数：{{ format3(Math.abs(permanentBean + freeBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       付费金豆数：{{ format3(Math.abs(permanentBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金豆数：{{ format3(Math.abs(freeBean)) }}
@@ -623,7 +623,50 @@ const getTagText = (state) => {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .pagination {
   display: flex;
   margin-top: 20px;
diff --git a/src/views/consume/gold/coinConsumeDetail.vue b/src/views/consume/gold/coinConsumeDetail.vue
index e0df8e3..c67a92a 100644
--- a/src/views/consume/gold/coinConsumeDetail.vue
+++ b/src/views/consume/gold/coinConsumeDetail.vue
@@ -562,7 +562,7 @@ const getMarket = async function () {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
     <div style="width:82vw;margin-bottom: 1vh;">
       <el-text>精网号：</el-text>
       <el-input v-model="consumeUser.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
@@ -605,8 +605,8 @@ const getMarket = async function () {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </div>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       消耗新币：{{ format3(Math.abs(permanentGolds)) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
       总金币数：{{ format3(Math.abs(permanentGolds + freeGolds + taskGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(Math.abs(permanentGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -713,7 +713,7 @@ const getMarket = async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .status {
   display: flex;
 }
@@ -734,4 +734,48 @@ const getMarket = async function () {
   display: flex;
   margin-top: 1vh;
 }
+
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 </style>
diff --git a/src/views/moneyManage/receiveDetail/receiveDetail.vue b/src/views/moneyManage/receiveDetail/receiveDetail.vue
index 056238c..b750f27 100644
--- a/src/views/moneyManage/receiveDetail/receiveDetail.vue
+++ b/src/views/moneyManage/receiveDetail/receiveDetail.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="content">
-        <div class="card1">
-            <el-card style="margin-bottom: 0.5vh; min-height: 110px;">
+        <div class="div-card1">
+            <el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;">
                 <div class="row">
                     <div class="rowItem">
                         <el-text style="width: 4vw;">精网号</el-text>
@@ -55,8 +55,8 @@
         </div>
 
 
-        <div class="card2">
-            <el-card>
+        <div class="div-card2">
+            <el-card class="card2">
                 <div class="btns">
                     <div class="tabs" v-if="caiwu">
                         <el-button-group>
@@ -833,8 +833,7 @@ const tableData = [
     }
 
 
-    .card2 {
-        // 下方数据展示card
+    .div-card2 {  // 下方数据展示card
         width: 100%;
 
         margin-top: 2vh;
@@ -1183,4 +1182,34 @@ const tableData = [
         padding-bottom: 15px;
     }
 }
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/permissions/rolePermission.vue b/src/views/permissions/rolePermission.vue
index e56c04f..266ff68 100644
--- a/src/views/permissions/rolePermission.vue
+++ b/src/views/permissions/rolePermission.vue
@@ -586,7 +586,7 @@ onMounted(async function () {
 </script>
 <template>
   <div>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
       <div style="display: flex;">
         <el-text size="large">角色名称：</el-text>
         <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
@@ -597,7 +597,7 @@ onMounted(async function () {
       </div>
     </el-card>
 
-    <el-card>
+    <el-card class="card2">
       <div class="add-item">
         <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()" :disabled="!canAdd" v-if="canAdd">新增角色</el-button>
       </div>
@@ -739,7 +739,40 @@ onMounted(async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+
 .head-card {
   display: flex;
 }
diff --git a/src/views/permissions/userPermission.vue b/src/views/permissions/userPermission.vue
index 6240935..e79a7f4 100644
--- a/src/views/permissions/userPermission.vue
+++ b/src/views/permissions/userPermission.vue
@@ -910,7 +910,7 @@ onMounted(async function () {
 
 <template>
   <div>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
       <div class="head-card">
         <div class="head-card-element">
           <el-text class="mx-1" size="large">OA号：</el-text>
@@ -935,7 +935,7 @@ onMounted(async function () {
         </div>
       </div>
     </el-card>
-    <el-card>
+    <el-card class="card2">
       <!-- 展示表单 -->
       <div class="add-item">
         <el-button style="color: #048efb; border: 1px solid #048efb" :disabled="!canAdd" v-if="canAdd" @click="userAddInit()">新增用户</el-button>
@@ -1168,7 +1168,38 @@ onMounted(async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .pagination {
   display: flex;
 }
diff --git a/src/views/recharge/bean/addBeanRecharge.vue b/src/views/recharge/bean/addBeanRecharge.vue
index c93f3d9..5ae5387 100644
--- a/src/views/recharge/bean/addBeanRecharge.vue
+++ b/src/views/recharge/bean/addBeanRecharge.vue
@@ -247,7 +247,7 @@ const handleAddForm = async () => {
       </div>
     </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 .userAndform {
   width: 80vw;
   height: 80vh;
diff --git a/src/views/recharge/bean/beanOnlineRecharge.vue b/src/views/recharge/bean/beanOnlineRecharge.vue
index 019857b..f12a50d 100644
--- a/src/views/recharge/bean/beanOnlineRecharge.vue
+++ b/src/views/recharge/bean/beanOnlineRecharge.vue
@@ -349,7 +349,7 @@ onMounted(async function () {
 })
 </script>
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" 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 />
@@ -385,8 +385,8 @@ onMounted(async function () {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </div>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       充值金豆数：{{ format3(num) }}&nbsp;&nbsp;&nbsp;&nbsp;合计新币数：{{ format3(money) }}
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
@@ -459,4 +459,48 @@ onMounted(async function () {
     </template>
   </el-dialog>
 </template>
-<style scoped></style>
\ No newline at end of file
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/recharge/bean/beanSystemRecharge.vue b/src/views/recharge/bean/beanSystemRecharge.vue
index 53e6716..0806d9e 100644
--- a/src/views/recharge/bean/beanSystemRecharge.vue
+++ b/src/views/recharge/bean/beanSystemRecharge.vue
@@ -335,7 +335,7 @@ onMounted(async function () {
 })
 </script>
 <template>
-    <el-card class="condition">
+    <el-card class="card1" style="margin-bottom: 0.5vh">
         <div>
             <el-text size="large">精网号：</el-text>
             <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 9vw;margin-right:1vw" clearable />
@@ -366,8 +366,8 @@ onMounted(async function () {
             <el-button type="primary" style="width: 95px;" @click="openExportList">查看导出列表</el-button>
         </div>
     </el-card>
-    <el-card>
-        <div>
+    <el-card class="card2">
+        <div class="goldStatistics">
             金豆总数：{{ format3(beanNum) }}&nbsp;&nbsp;&nbsp;&nbsp;
             付费金豆数：{{ format3(permanentBeans) }}&nbsp;&nbsp;&nbsp;&nbsp;
             免费金豆数：{{ format3(freeBean) }}
@@ -434,12 +434,56 @@ onMounted(async function () {
         </template>
     </el-dialog>
 </template>
-<style scoped>
-.condition {
+<style scoped lang="scss">
+/* .condition {
     height: 6vw;
     margin-bottom: 0.5vh;
     display: flex;
     justify-content: space-between;
     align-items: center;
+} */
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
 }
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+
 </style>
\ No newline at end of file
diff --git a/src/views/recharge/gold/addCoinRecharge.vue b/src/views/recharge/gold/addCoinRecharge.vue
index ce6352c..9d4c38f 100644
--- a/src/views/recharge/gold/addCoinRecharge.vue
+++ b/src/views/recharge/gold/addCoinRecharge.vue
@@ -595,13 +595,13 @@ const payModel = [
 ]
 
 
+// // }
+// function handleActivityChange(value) {
+//   // 在这里执行逻辑，例如获取选中的值
+//   console.log('选中的值：', value)
+//   // getActivityById(value)
+//   console.log('看看', recharge.value)
 // }
-function handleActivityChange(value) {
-  // 在这里执行你的逻辑，例如获取选中的值
-  console.log('选中的值：', value)
-  // getActivityById(value)
-  console.log('看看', recharge.value)
-}
 
 //这是重置重置表单的方法
 const deleteRecharge = function () {
@@ -917,10 +917,10 @@ p {
   margin: 0px;
 }
 
-.batch-btn {
-  margin-top: 20px;
-  margin-left: auto;
-}
+// .batch-btn {
+//   margin-top: 20px;
+//   margin-left: auto;
+// }
 
 .field-label {
   font-size: 14px;
diff --git a/src/views/recharge/gold/coinRechargeDetail.vue b/src/views/recharge/gold/coinRechargeDetail.vue
index 63e8358..da6d362 100644
--- a/src/views/recharge/gold/coinRechargeDetail.vue
+++ b/src/views/recharge/gold/coinRechargeDetail.vue
@@ -586,7 +586,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 0.5vh">
+  <el-card class="card1" style="margin-bottom: 0.5vh">
     <div style="margin-bottom: 0.5vh;">
       <el-text size="large">精网号：</el-text>
       <el-input v-model="rechargeUser.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
@@ -628,8 +628,8 @@ const getTagText = (state) => {
     </div>
   </el-card>
 
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       充值新币：{{ format3(permanentGolds) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
       总金币数：{{ format3(permanentGolds + freeGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(permanentGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
@@ -712,5 +712,47 @@ const getTagText = (state) => {
     </template>
   </el-dialog>
 </template>
-<style scoped>
+<style scoped lang="scss">
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/refund/gold/coinRefundDetail.vue b/src/views/refund/gold/coinRefundDetail.vue
index 6d2925c..62b66a5 100644
--- a/src/views/refund/gold/coinRefundDetail.vue
+++ b/src/views/refund/gold/coinRefundDetail.vue
@@ -499,7 +499,7 @@ const getMarket = async function () {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <div class="condition">
       <div style="display: flex;align-items: center;width:18vw">
         <el-text>精网号：</el-text>
@@ -552,8 +552,8 @@ const getMarket = async function () {
     </div>
   </el-card>
 
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       退款金币总数：{{ format3(Math.abs(sumGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(Math.abs(permanentGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金币：{{ format3(Math.abs(freeGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -637,7 +637,50 @@ const getMarket = async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .condition{
   display: flex;
   width:82vw;
diff --git a/src/views/usergold/bean/userbean.vue b/src/views/usergold/bean/userbean.vue
index 50ef4f0..8ea084b 100644
--- a/src/views/usergold/bean/userbean.vue
+++ b/src/views/usergold/bean/userbean.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
         <el-text size="large">精网号：</el-text>
         <el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
         <el-text size="large" style="margin-left:20px">地区：</el-text>
@@ -13,8 +13,8 @@
         </div>
     </el-card>
 
-    <el-card>
-        <div class="stats-card">
+    <el-card class="card2">
+        <div class="goldStatistics">
             现有金豆数：{{ format3(stats.sumBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
             付费金豆数：{{ format3(stats.permanentBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
             免费金豆数：{{ format3(stats.freeBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
@@ -188,5 +188,48 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/usergold/gold/clientCountBalance.vue b/src/views/usergold/gold/clientCountBalance.vue
index 92806e0..cabc15d 100644
--- a/src/views/usergold/gold/clientCountBalance.vue
+++ b/src/views/usergold/gold/clientCountBalance.vue
@@ -5,11 +5,11 @@ import { storeToRefs } from "pinia"
 import { findMenuById, permissionMapping } from "@/utils/menuTreePermission.js"
 const adminStore = useAdminStore()
 const { adminData, menuTree } = storeToRefs(adminStore)
-import {onMounted, ref} from 'vue'
-import {ElMessage} from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 import moment from 'moment'
 import API from '@/util/http.js'
-import {reverseMarketMapping} from "@/utils/marketMap.js";
+import { reverseMarketMapping } from "@/utils/marketMap.js";
 
 //新增员工数据复选框
 const showEmployeeData = ref(false)
@@ -65,7 +65,7 @@ const sortOrder = ref('')
 // 搜索===========================================================================
 // 搜索方法
 const get = async function (val) {
-  if(!findMenuById(menuTree.value, permissionMapping.coinCustomerMoney)){
+  if (!findMenuById(menuTree.value, permissionMapping.coinCustomerMoney)) {
     ElMessage.error('无此权限')
     return
   }
@@ -81,7 +81,7 @@ const get = async function (val) {
     console.log('搜索参数', getObj.value)
 
     // 发送POST请求
-    const requestData = {...getObj.value, user: {...user.value}};//控制台打印请求的参数
+    const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
     console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
     //console.log('请求参数', requestData);
     // 检查markets数组中是否包含'总部'或'研发部'
@@ -102,7 +102,7 @@ const get = async function (val) {
     const result = await API({
       url: '/goldDetail/getGold',
       method: 'post',
-      data: {...getObj.value, user: {...user.value, flag: showEmployeeData.value? 0 : 1}}
+      data: { ...getObj.value, user: { ...user.value, flag: showEmployeeData.value ? 0 : 1 } }
     })
     console.log('响应数据', result)
     tableData.value = result.data.list
@@ -115,7 +115,7 @@ const get = async function (val) {
       data: {
         jwcode: user.value.jwcode,
         markets: user.value.markets,
-      flag: showEmployeeData.value? 0 : 1
+        flag: showEmployeeData.value ? 0 : 1
       }
     })
     // 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组
@@ -137,7 +137,7 @@ const get = async function (val) {
       // ElMessage.warning('精网号不存在，请检查输入')
     }
     // 判断合计数是否存在,不存在时 result.data.list 为空数组
-    else if(resultGoldTotal.data===0){
+    else if (resultGoldTotal.data === 0) {
       // 将表格数据设置为空数组
       tableData.value = []
       // 将合计数设置为 0
@@ -242,11 +242,11 @@ const exportExcel = async function () {
     user: {
       jwcode: user.value.jwcode || '',
       markets: user.value.markets || [],
-    flag: showEmployeeData.value? 0 : 1
+      flag: showEmployeeData.value ? 0 : 1
     }
 
   }
-  const res = await API({url: '/goldDetail/exportGold', data: params})
+  const res = await API({ url: '/goldDetail/exportGold', data: params })
   if (res.code === 200) {
     ElMessage.success('导出成功')
   }
@@ -268,7 +268,7 @@ const exportListLoading = ref(false)
 const getExportList = async () => {
   exportListLoading.value = true
   try {
-    const result = await API({url: '/export/export'})
+    const result = await API({ url: '/export/export' })
     if (result.code === 200) {
       const filteredData = result.data.filter(item => {
         return item.type === 1; //返回type為0即客户金币余额的数据
@@ -357,8 +357,8 @@ const getMarket = async function () {
 
       return allChildren.map(child => {
         const grandchildren = child.children && child.children.length
-            ? transformTree([child]) // 递归处理子节点
-            : null;
+          ? transformTree([child]) // 递归处理子节点
+          : null;
 
         return {
           value: child.name,
@@ -375,63 +375,57 @@ const getMarket = async function () {
   }
 }
 const format3 = (num) => {
-    // 每三位添加逗号
-    return num.toLocaleString('en-US')
+  // 每三位添加逗号
+  return num.toLocaleString('en-US')
 }
 
 </script>
 
 <template>
-      <el-card style="margin-bottom: 1vh;">
-        <div class="head-card">
-          <div class="head-card-element">
-            <el-text class="mx-1" size="large">精网号：</el-text>
-            <el-input v-model="user.jwcode" style="width: 160px" placeholder="请输入精网号" clearable/>
-          </div>
-          <div class="head-card-element">
-            <el-text class="mx-1" size="large">所属地区：</el-text>
-            <el-cascader
-                v-model="selectedMarketPath"
-                :options="markets"
-                placeholder="请选择所属地区"
-                clearable
-                style="width:180px"
-                @change="handleMarketChange"
-            />
-          </div>
-            <div class="head-card-element">
-              <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
-            </div>
-          <el-button type="primary" @click="search()">查询</el-button>
-          <el-button @click="reset" type="success">重置</el-button>
-          <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
-          <el-button type="primary" @click="openExportList">查看导出列表</el-button>
-        </div>
-        <!-- </div> -->
-      </el-card>
-      <el-card>
-        <div>
-          金币总数：{{ format3(goldtotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
-          永久金币：{{ format3(permanentGold  || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
-          免费金币：{{ format3(freeGold  || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
-          任务金币：{{ format3(taskGold  || 0) }}
-        </div>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 60vh; overflow-y: auto">
-          <el-table :data="tableData" @cellClick="cellClick" style="width: 82vw; height:60vh"
-                    @sort-change="handleSortChange">
-            <el-table-column type="index" label="序号" width="100px" fixed="left">
-              <template #default="scope">
-                <span>{{
-                    scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                  }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="name" label="姓名" width="140"/>
-            <el-table-column prop="jwcode" label="精网号" width="160"/>
-            <el-table-column prop="market" label="所属地区" width="140"/>
-            <el-table-column prop="sumGold" label="金币总数" width="140" aligh="center">
-              <!-- <template #default="scope">
+  <el-card class="card1" style="margin-bottom: 1vh;">
+    <div class="head-card">
+      <div class="head-card-element">
+        <el-text class="mx-1" size="large">精网号：</el-text>
+        <el-input v-model="user.jwcode" style="width: 160px" placeholder="请输入精网号" clearable />
+      </div>
+      <div class="head-card-element">
+        <el-text class="mx-1" size="large">所属地区：</el-text>
+        <el-cascader v-model="selectedMarketPath" :options="markets" placeholder="请选择所属地区" clearable style="width:180px"
+          @change="handleMarketChange" />
+      </div>
+      <div class="head-card-element">
+        <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
+      </div>
+      <el-button type="primary" @click="search()">查询</el-button>
+      <el-button @click="reset" type="success">重置</el-button>
+      <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+      <el-button type="primary" @click="openExportList">查看导出列表</el-button>
+    </div>
+    <!-- </div> -->
+  </el-card>
+  <el-card class="card2">
+    <div class="goldStatistics">
+      金币总数：{{ format3(goldtotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      永久金币：{{ format3(permanentGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      免费金币：{{ format3(freeGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      任务金币：{{ format3(taskGold || 0) }}
+    </div>
+    <!-- 设置表格容器的高度和滚动样式 -->
+    <div style="height: 60vh; overflow-y: auto">
+      <el-table :data="tableData" @cellClick="cellClick" style="width: 82vw; height:60vh"
+        @sort-change="handleSortChange">
+        <el-table-column type="index" label="序号" width="100px" fixed="left">
+          <template #default="scope">
+            <span>{{
+              scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="140" />
+        <el-table-column prop="jwcode" label="精网号" width="160" />
+        <el-table-column prop="market" label="所属地区" width="140" />
+        <el-table-column prop="sumGold" label="金币总数" width="140" aligh="center">
+          <!-- <template #default="scope">
                 <span>{{
                     ((scope.row.currentPermanentGold || 0) +
                         (scope.row.currentFreeJune || 0) +
@@ -439,28 +433,28 @@ const format3 = (num) => {
                         (scope.row.currentTaskGold || 0)) 
                   }}</span>
               </template> -->
-            </el-table-column>
-            <el-table-column prop="currentPermanentGold" label="永久金币" sortable="custom" width="150">
-              <template #default="scope">
-                <span>{{ (scope.row.currentPermanentGold || 0)  }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="currentFreeJune" label="6月份到期免费金币" sortable="custom" width="170">
-              <template #default="scope">
-                <span>{{ (scope.row.currentFreeJune || 0)  }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="currentFreeDecember" label="12月份到期免费金币" sortable="custom" width="180">
-              <template #default="scope">
-                <span>{{ (scope.row.currentFreeDecember || 0)  }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="currentTaskGold" label="任务金币" sortable="custom" width="180">
-              <template #default="scope">
-                <span>{{ (scope.row.currentTaskGold || 0)  }}</span>
-              </template>
-            </el-table-column>
-<!--            <el-table-column prop="rcoin" label="历史金币总额" width="150">
+        </el-table-column>
+        <el-table-column prop="currentPermanentGold" label="永久金币" sortable="custom" width="150">
+          <template #default="scope">
+            <span>{{ (scope.row.currentPermanentGold || 0) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentFreeJune" label="6月份到期免费金币" sortable="custom" width="170">
+          <template #default="scope">
+            <span>{{ (scope.row.currentFreeJune || 0) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentFreeDecember" label="12月份到期免费金币" sortable="custom" width="180">
+          <template #default="scope">
+            <span>{{ (scope.row.currentFreeDecember || 0) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentTaskGold" label="任务金币" sortable="custom" width="180">
+          <template #default="scope">
+            <span>{{ (scope.row.currentTaskGold || 0) }}</span>
+          </template>
+        </el-table-column>
+        <!--            <el-table-column prop="rcoin" label="历史金币总额" width="150">
               <template #default="scope">
                 <el-popover trigger="hover" placement="left" width="150">
                   <template #default>
@@ -507,19 +501,18 @@ const format3 = (num) => {
                 </el-popover>
               </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-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%">
     <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
-      <el-table-column prop="fileName" label="文件名"/>
+      <el-table-column prop="fileName" label="文件名" />
       <el-table-column prop="state" label="状态">
         <template #default="scope">
           <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
@@ -535,7 +528,7 @@ const format3 = (num) => {
       <el-table-column label="操作">
         <template #default="scope">
           <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
-                     :disabled="scope.row.state !== 2">
+            :disabled="scope.row.state !== 2">
             下载
           </el-button>
         </template>
@@ -551,6 +544,49 @@ const format3 = (num) => {
 </template>
 
 <style scoped lang="scss">
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+
 .pagination {
   display: flex;
 }
diff --git a/src/views/usergold/gold/clientCountDetail.vue b/src/views/usergold/gold/clientCountDetail.vue
index 05d08c7..94565ce 100644
--- a/src/views/usergold/gold/clientCountDetail.vue
+++ b/src/views/usergold/gold/clientCountDetail.vue
@@ -460,7 +460,7 @@ const format3 = (num) => {
 </script>
 <template>
   <div>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
       <el-row style="margin-bottom: 10px">
         <el-col :span="5">
           <div class="head-card-element">
@@ -526,8 +526,8 @@ const format3 = (num) => {
         <el-button type="primary" @click="openExportList">查看导出列表</el-button>
       </div>
     </el-card>
-    <el-card>
-      <div>
+    <el-card class="card2">
+      <div class="goldStatistics">
         金币净变化：{{ format3(totalGoldTotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
         永久金币：{{ format3(totalPermanentGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
         免费金币：{{ format3(totalFreeGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -631,7 +631,50 @@ const format3 = (num) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index f7d02fe..0cf0a5e 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -6,7 +6,7 @@
   <div style="height: 100vh;">
     <el-row class="cards" >
       <el-col :span="14">
-        <GoldManagement :cardData="cardData" />
+        <GoldManagement/>
       </el-col>
       <!-- 右上格子：占12列 -->
       <el-col :span="10">
@@ -15,7 +15,7 @@
     </el-row>
     <el-row class="graphs">
       <el-col :span="24">
-        <GoldGraph :graphData="graphData" @tab-change="handleTabChange" />
+        <GoldGraph/>
       </el-col>
     </el-row>
   </div>
@@ -29,76 +29,7 @@ import GoldManagement from "@/components/workspace/GoldManagement.vue"
 import CashManagement from "@/components/workspace/CashManagement.vue"
 import GoldGraph from "@/components/workspace/GoldGraph.vue"
 
-const cardData = ref({})
-const graphData = ref([])
-const markets = ref([])
-const account = ref('')
-const activeTab = ref('recharge')
 
-// tab 切换时重新调图表接口
-const handleTabChange = async (tab) => {
-  activeTab.value = tab
-  await getGraphData()
-}
-
-// 获取用户信息（拿 account）
-const getUserInfo = async () => {
-  const res = await API({ url: '/admin/userinfo', data: {} })
-  account.value = res?.account || ''
-}
-
-// 获取市场列表
-const getMarkets = async () => {
-  if (!account.value) return
-  const res = await API({ url: '/general/adminMarkets', data: { account: account.value } })
-  markets.value = res.data
-  console.log('获取市场列表:res:', res)
-  console.log('获取市场列表:market:', markets.value)
-}
-
-// 获取金币卡片数据
-const getCardData = async () => {
-  const res = await API({ url: '/workbench/getCard', data: {} })
-  cardData.value = res?.data || {}
-}
-
-// 获取金币图表数据
-const getGraphData = async () => {
-  if (!markets.value.length) return
-
-  const params = {
-    markets: markets.value,
-    startDate: '2025-01-01 00:00:00',
-    endDate: '2025-12-31 23:59:59'
-  }
-
-  const res = await API({ url: '/workbench/getGraph', data: params })
-  if (!res?.marketGraphs) return
-
-  graphData.value = res.marketGraphs.map(m => ({
-    market: m.market,
-    permanent: activeTab.value === 'recharge'
-        ? m.sumRechargePermanent / 100
-        : m.sumConsumePermanent / 100,
-    free: activeTab.value === 'recharge'
-        ? m.sumRechargeFree / 100
-        : m.sumConsumeFree / 100,
-    task: activeTab.value === 'recharge'
-        ? m.sumRechargeTask / 100
-        : m.sumConsumeTask / 100,
-  }))
-}
-
-onMounted(async () => {
-  try {
-    await getUserInfo()   // 先拿 account
-    await getMarkets()    // 再拿 markets
-    await getCardData()   // 卡片
-    await getGraphData()  // 图表
-  } catch (err) {
-    console.error('初始化失败:', err)
-  }
-})
 </script>
 
 <style scoped>