style: 工作台适应壳子

src/components/workspace/CashManagement.vue

@@ -83,7 +83,7 @@ onMounted(() => {
 .cash-management {
   margin: 10px 5px;
   width: 100%;
-  height: 50vh;
+  height: 550px;
   flex-shrink: 0;
   border-radius: 8px;
   background: #E7F4FD;

src/components/workspace/GoldGraph.vue

@@ -14,7 +14,7 @@
           免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}  
           任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}  
         </div>
-        <div>
+        <div style="display: flex">
           <el-button
               :style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }"
               @click="getYes()" size="default">昨天
@@ -36,7 +36,7 @@
               @click="getYear()" size="default">本年
           </el-button>
         </div>
-        <div>
+        <div style="display: flex">
           <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"

src/components/workspace/GoldManagement.vue

@@ -67,12 +67,12 @@
           <el-row>
             <el-col :span="12">
               <div class="center-card">折合新币累计金额</div>
-              <el-image :src="svg1" style="width: 68px; display: block;margin: 0 auto;"/>
+              <el-image :src="svg1" style="width: 88px; display: block;margin: 0 auto;"/>
               <div class="center-card">{{ yearlyMoney / 100 }}新币</div>
             </el-col>
-            <el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 120px">
+            <el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 160px">
               <div class="center-card" style="white-space: nowrap;">昨日新增金币：{{ recharge / 100 }}</div>
-              <div ref="rechargeGoldChart" style="width: 68px; height: 68px; display: block;margin: 0 auto;"></div>
+              <div ref="rechargeGoldChart" style="width: 88px; height: 88px; display: block;margin: 0 auto;"></div>
               <div class="center-card" style="white-space: nowrap;">其中永久金币：{{ money / 100 }}</div>
             </el-col>
           </el-row>
@@ -88,10 +88,10 @@
           <div class="card-title">全年累计消费金币数：{{ yearlyReduce / 100 }}</div>
           <el-row style="height: 200px;">
             <el-col :span="12">
-              <div ref="consumeChart" style="width:100%; height: 68%;"></div>
+              <div ref="consumeChart" style="width:100%; height: 88%;"></div>
             </el-col>
             <el-col :span="12">
-              <div ref="consumeDetailChart" style="width: 100%; height: 88%;"></div>
+              <div ref="consumeDetailChart" style="width: 100%; height: 108%;"></div>
             </el-col>
           </el-row>
         </div>
@@ -101,16 +101,16 @@
         <div class="card-item" >
           <div class="card-title">全年累计充值人头数：{{ yearlyRechargeNum }}</div>
           <el-row style="height: 200px;">
-            <el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 150px">
+            <el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 200px">
               <div class="chart5">
-                <el-image :src="svg2" style="width: 68px; display: block;margin: 0 auto;"/>
+                <el-image :src="svg2" style="width: 88px; display: block;margin: 0 auto;"/>
                 <div class="margin-bottom">
-                  <div style="display: flex; gap: 10px; font-size: 14px;">周同比：{{ sumWow }}%
+                  <div style="display: flex; gap: 10px; font-size: 16px;">周同比：{{ sumWow }}%
                     <el-image v-if="sumWow > 0" :src="upArrow" style="width: 10px;"/>
                     <el-image v-else-if="sumWow < 0" :src="downArrow" style="width: 10px;"/>
                     <el-image v-else :src="pingArrow" style="width: 10px;"/>
                   </div>
-                  <div style="display: flex; gap: 10px; font-size: 14px;">
+                  <div style="display: flex; gap: 10px; font-size: 16px;">
                     日环比：{{ sumDaily }}%
                     <el-image v-if="sumDaily > 0" :src="upArrow" style="width: 10px;"/>
                     <el-image v-else-if="sumDaily < 0" :src="downArrow" style="width: 10px;"/>
@@ -124,7 +124,7 @@
             </el-col>
             <!-- 新增的环形图容器 -->
             <el-col :span="12">
-              <div ref="rechargePeopleChart" style="width:100%; height: 68%;"></div>
+              <div ref="rechargePeopleChart" style="width:100%; height: 88%;"></div>
             </el-col>
           </el-row>
         </div>
@@ -362,11 +362,16 @@ const initConsumeChart = () => {
   const myChart = echarts.init(consumeChart.value);
   const option = {
     legend: {
+      textStyle: {
+        fontSize: 15,
+        color: '#000',
+        fontFamily: 'PingFang SC'
+      },
       orient: 'vertical',
-      left: '10%',
-      top: '85',
+      left: '15%',
+      top: '105',
       icon: 'circle',
-      iconSize: 5,
+      iconSize: 7,
       textSize: 12,
       itemWidth: 7,
       itemHeight: 7,
@@ -376,7 +381,7 @@ const initConsumeChart = () => {
       {
         type: 'pie',
         radius: ['30%', '45%'],
-        center: ['50%', '35%'],
+        center: ['50%', '30%'],
         silent: true,
         clockwise: true,
         label: {show: false},
@@ -406,9 +411,14 @@ const initConsumeDetailChart = () => {
   const option = {
     // 增加图表内边距，避免内容溢出
     legend: {
+      textStyle: {
+        fontSize: 15,
+        color: '#000',
+        fontFamily: 'PingFang SC'
+      },
       orient: 'vertical',
       left: '20%',
-      top: '85',
+      top: '105',
       icon: 'circle',
       iconSize: 5,
       itemWidth: 7,
@@ -464,12 +474,16 @@ const initRechargePeopleChart = () => {
   const myChart = echarts.init(rechargePeopleChart.value);
   const option = {
     legend: {
+      textStyle: {
+        fontSize: 15,
+        color: '#000',
+        fontFamily: 'PingFang SC'
+      },
       orient: 'vertical',
       left: '20%',
-      top: '85',
+      top: '110',
       icon: 'circle',
       iconSize: 5,
-      textSize: 18,
       itemWidth: 7,
       itemHeight: 7,
     },
@@ -477,7 +491,7 @@ const initRechargePeopleChart = () => {
       {
         type: 'pie',
         radius: ['30%', '50%'],
-        center: ['50%', '35%'],
+        center: ['50%', '30%'],
         silent: true,
         clockwise: true,
         label: {show: false},
@@ -492,7 +506,7 @@ const initRechargePeopleChart = () => {
       {
         type: 'pie',
         radius: ['30%', '45%'],
-        center: ['50%', '35%'],
+        center: ['50%', '30%'],
         silent: true,
         clockwise: true,
         label: {show: false},
@@ -552,7 +566,7 @@ onMounted(async () => {
 }
 
 .card-item-row1 {
-  height: 160px;
+  height: 200px;
   width: auto;
   background: #E4F0FC;
   box-shadow: 0 0 4px 0 #00000040;
@@ -566,7 +580,7 @@ onMounted(async () => {
 
 
 .card-item {
-  height: 200px;
+  height: 240px;
   width: auto;
   background: #E4F0FC;
   box-shadow: 0 0 4px 0 #00000040;
@@ -581,6 +595,7 @@ onMounted(async () => {
 .card-title {
   font-weight: bold;
   height: 36px;
+  font-size: 17px;
   width: 100%;
   flex-shrink: 0;
   border-radius: 8px;
@@ -645,7 +660,7 @@ onMounted(async () => {
 .gold-management {
   margin: 10px 5px;
   width: 100%;
-  height: 50vh;
+  height: 550px;
   flex-shrink: 0;
   border-radius: 8px;
   background: #E7F4FD;