fix：样式

# Conflicts:
#	src/components/workspace/GoldGraph.vue

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,

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>

src/components/workspace/GoldGraph.vue

@@ -15,15 +15,25 @@
           任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}  
         </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%;
@@ -806,33 +785,34 @@ onUnmounted(() => {
 
   /* 表格整体背景：把表格容器设为卡片背景 */
   :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>

src/components/workspace/GoldGraphMarkets.vue

@@ -1,3 +1,5 @@
+<!--各地区的金币充值和消费情况柱状图-->
+
 <template>
   <div class="graph">
     <el-card style="width:100%;" class="graph-card">
@@ -592,6 +594,7 @@ const updateChart = (chartData) => {
       },
       xAxis: {
         type: 'category',
+        // 横坐标数据 之后要改成一个时间的
         data: markets.value,
         axisLabel: {
           interval: 0,
@@ -656,8 +659,6 @@ const getAdminData = async function () {
   }
 }
 
-const workDataUpdateTime = ref(null)
-
 // 标记当前激活的时间范围按钮
 const activeTimeRange = ref('')
 // 日期选择器变化时清除按钮激活状态

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 = () => {