diff --git a/vue/gold-system/package.json b/vue/gold-system/package.json
index 46c17b6..a2a34b0 100644
--- a/vue/gold-system/package.json
+++ b/vue/gold-system/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "serve": "vite - service serve --host 0.0.0.0 --port 8080"
diff --git a/vue/gold-system/src/views/workspace/index.vue b/vue/gold-system/src/views/workspace/index.vue
index 3c5dc92..f97ffd1 100644
--- a/vue/gold-system/src/views/workspace/index.vue
+++ b/vue/gold-system/src/views/workspace/index.vue
@@ -6,6 +6,8 @@ import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6C
 import axios, { all } from 'axios';
 
 // 变量
+// 加载对象
+const loading = ref(true)
 // 总览对象
 const getSumCoin = ref({});
 const statistics = ref({});
@@ -136,13 +138,13 @@ const get = async function () {
         payMonthRecharge.value = getMediuPayCoin.value.map(item => Math.abs(item.rechargeSumCoin)).reverse();
         payMonthFree.value = getMediuPayCoin.value.map(item => Math.abs(item.freeSumCoin)).reverse();
         payMonthTask.value = getMediuPayCoin.value.map(item => Math.abs(item.taskSumCoin)).reverse();
-        payMonthRecharge.value.forEach((number)=>{
+        payMonthRecharge.value.forEach((number) => {
             payTotalRecharge.value += number
         })
-        payMonthFree.value.forEach((number)=>{
+        payMonthFree.value.forEach((number) => {
             payTotalFree.value += number
         })
-        payMonthTask.value.forEach((number)=>{
+        payMonthTask.value.forEach((number) => {
             payTotalTask.value += number
         })
         console.log('payMonthCategory', payMonthCategory.value);
@@ -157,13 +159,13 @@ const get = async function () {
         consumeMonthRecharge.value = getMediuConsumeCoin.value.map(item => Math.abs(item.rechargeSumCoin)).reverse();
         consumeMonthFree.value = getMediuConsumeCoin.value.map(item => Math.abs(item.freeSumCoin)).reverse();
         consumeMonthTask.value = getMediuConsumeCoin.value.map(item => Math.abs(item.taskSumCoin)).reverse();
-        consumeMonthRecharge.value.forEach((number)=>{
+        consumeMonthRecharge.value.forEach((number) => {
             consumeTotalRecharge.value += number
         })
-        consumeMonthFree.value.forEach((number)=>{
+        consumeMonthFree.value.forEach((number) => {
             consumeTotalFree.value += number
         })
-        consumeMonthTask.value.forEach((number)=>{
+        consumeMonthTask.value.forEach((number) => {
             consumeTotalTask.value += number
         })
         console.log('consumeMonthCategory', consumeMonthCategory.value);
@@ -293,6 +295,9 @@ const get = async function () {
             { value: (Number(ERPData.value[2].value) + Number(HCData.value[2].value) + Number(LinkData.value[2].value) + Number(goldData.value[2].value)), name: '第3学科' },
             { value: (Number(ERPData.value[3].value) + Number(HCData.value[3].value) + Number(LinkData.value[3].value) + Number(goldData.value[3].value)), name: '第4学科' },
         ]
+
+        loading.value = false;
+
         console.log('allData', allData.value);
     } catch (error) {
         console.log('请求失败', error);
@@ -728,337 +733,349 @@ onMounted(async function () {
 </script>
 
 <template>
-    <el-row :gutter="20">
-        <el-col :span="6">
-            <el-card>
-                <p>当前金币余量
-                </p>
-                <p class="head-mid-font">
-                    {{ formatNum(getSumCoin.todayTotalCoin) }}
-                </p>
-                <p>
-                    <span v-if="getSumCoin.coinDifference > 0">
-                        <div class="comparedWithYesterday">
-                            <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                            <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span v-if="getSumCoin.coinDifference < 0">
-                        <div class="comparedWithYesterday">
-                            <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                            <span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span v-if="getSumCoin.coinDifference == 0">
-                        <div class="comparedWithYesterday">
-                            <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                            <span class="grey-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                </p>
-                <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ formatNum(getSumCoin.todayFree) }}
-                    任务{{ formatNum(getSumCoin.todayTask) }}</template>
-            </el-card>
-        </el-col>
-        <el-col :span="6">
-            <el-card>
-                <p>全年累计金币数</p>
-                <p class="head-mid-font">{{ formatNum(Math.abs(statistics.totalSumCoin)) }}</p>
-                <p>折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }}</p>
-                <template #footer>昨日新增 {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }} ，其中充值 {{
-                    formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }} </template>
-            </el-card>
-        </el-col>
-        <el-col :span="6">
-            <el-card>
-                <p>全年累计消费金币数</p>
-                <p class="head-mid-font">{{ formatNum(Math.abs(getYearConsumeCoin.yearsumCoin)) }}</p>
-                <p>消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }}; 退款 {{
-                    formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin))
-                }}</p>
-                <template #footer>昨日新增消耗 {{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费 {{
-                    formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款 {{
-                        formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin))
-                    }}</template>
-            </el-card>
-        </el-col>
-        <el-col :span="6">
-            <el-card>
-                <p>全年累计充值人数</p>
-                <p class="head-mid-font">{{ formatNum(Math.abs(statistics.rechargeCount)) }}</p>
-                <p style="display: flex;">
-                    <span v-if="statistics.weekOverWeekRate > 0">
-                        <div class="comparedWithYesterday">
-                            <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                            <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span v-if="statistics.weekOverWeekRate < 0">
-                        <div class="comparedWithYesterday">
-                            <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                            <span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span v-if="statistics.weekOverWeekRate == 0">
-                        <div class="comparedWithYesterday">
-                            <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                            <span class="grey-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-                    <span v-if="statistics.dayOverDayRate > 0">
-                        <div class="comparedWithYesterday">
-                            <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                            <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span v-if="statistics.dayOverDayRate < 0">
-                        <div class="comparedWithYesterday">
-                            <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                            <span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                    <span v-if="statistics.dayOverDayRate == 0">
-                        <div class="comparedWithYesterday">
-                            <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                            <span class="grey-triangle" style="margin: 6px 0px 0px 7px;"></span>
-                        </div>
-                    </span>
-                </p>
-                <template #footer>昨日充值人数 {{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }}
-                    ，其中首充 {{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }} 人</template>
-            </el-card>
-        </el-col>
-    </el-row>
-    <el-row :gutter="20">
-        <el-col>
-            <el-card>
-                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-                    <el-tab-pane label="金币充值" name="recharge">
-                        <div>
-                            合计：充值金币：
-                            <span class="mid-head-font">{{ formatNum(payTotalRecharge) }}</span>
-                            ，免费金币：
-                            <span class="mid-head-font">{{ formatNum(payTotalFree) }}</span>
-                            ，任务金币：
-                            <span class="mid-head-font">{{ formatNum(payTotalTask) }}</span>
-                        </div>
-                        <div class="bar">
-                            <div id="recharge" style="width: 1200px;height:400px;"></div>
-                            <div>
-                                <div class="goldCategory">
-                                    <span class="light-green-dot"></span>
-                                    <span>充值金币</span>
-                                </div>
-                                <div class="goldCategory">
-                                    <span class="blue-dot"></span>
-                                    <span>免费金币</span>
-                                </div>
-                                <div class="goldCategory">
-                                    <span class="yellow-dot"></span>
-                                    <span>任务金币</span>
-                                </div>
+    <div v-loading="loading">
+        <el-row :gutter="20">
+            <el-col :span="6">
+                <el-card>
+                    <p>当前金币余量
+                    </p>
+                    <p class="head-mid-font">
+                        {{ formatNum(getSumCoin.todayTotalCoin) }}
+                    </p>
+                    <p>
+                        <span v-if="getSumCoin.coinDifference > 0">
+                            <div class="comparedWithYesterday">
+                                <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
+                                <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                        <span v-if="getSumCoin.coinDifference < 0">
+                            <div class="comparedWithYesterday">
+                                <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
+                                <span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span>
                             </div>
+                        </span>
+                        <span v-if="getSumCoin.coinDifference == 0">
+                            <div class="comparedWithYesterday">
+                                <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
+                                <span class="grey-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                    </p>
+                    <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ formatNum(getSumCoin.todayFree)
+                        }}
+                        任务{{ formatNum(getSumCoin.todayTask) }}</template>
+                </el-card>
+            </el-col>
+            <el-col :span="6">
+                <el-card>
+                    <p>全年累计金币数</p>
+                    <p class="head-mid-font">{{ formatNum(Math.abs(statistics.totalSumCoin)) }}</p>
+                    <p>折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }}</p>
+                    <template #footer>昨日新增 {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }} ，其中充值 {{
+                        formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }} </template>
+                </el-card>
+            </el-col>
+            <el-col :span="6">
+                <el-card>
+                    <p>全年累计消费金币数</p>
+                    <p class="head-mid-font">{{ formatNum(Math.abs(getYearConsumeCoin.yearsumCoin)) }}</p>
+                    <p>消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }}; 退款 {{
+                        formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin))
+                        }}</p>
+                    <template #footer>昨日新增消耗 {{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费 {{
+                        formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款 {{
+                            formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin))
+                        }}</template>
+                </el-card>
+            </el-col>
+            <el-col :span="6">
+                <el-card>
+                    <p>全年累计充值人数</p>
+                    <p class="head-mid-font">{{ formatNum(Math.abs(statistics.rechargeCount)) }}</p>
+                    <p style="display: flex;">
+                        <span v-if="statistics.weekOverWeekRate > 0">
+                            <div class="comparedWithYesterday">
+                                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
+                                <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                        <span v-if="statistics.weekOverWeekRate < 0">
+                            <div class="comparedWithYesterday">
+                                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
+                                <span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                        <span v-if="statistics.weekOverWeekRate == 0">
+                            <div class="comparedWithYesterday">
+                                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
+                                <span class="grey-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span v-if="statistics.dayOverDayRate > 0">
+                            <div class="comparedWithYesterday">
+                                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
+                                <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                        <span v-if="statistics.dayOverDayRate < 0">
+                            <div class="comparedWithYesterday">
+                                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
+                                <span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                        <span v-if="statistics.dayOverDayRate == 0">
+                            <div class="comparedWithYesterday">
+                                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
+                                <span class="grey-triangle" style="margin: 6px 0px 0px 7px;"></span>
+                            </div>
+                        </span>
+                    </p>
+                    <template #footer>昨日充值人数 {{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }}
+                        ，其中首充 {{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }} 人</template>
+                </el-card>
+            </el-col>
+        </el-row>
+        <el-row :gutter="20">
+            <el-col>
+                <el-card>
+                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                        <el-tab-pane label="金币充值" name="recharge">
                             <div>
-                                <div class="ranking-header">
-                                    <span style="margin-right: 40px;">门店金币充值排名</span>
-                                    <el-select v-model="goldTypePay" placeholder="请选择金币类型" size="small"
-                                        style="width: 90px;" @change="changeGoldTypePay">
-                                        <el-option v-for="item in gold" :key="item.value" :label="item.label"
-                                            :value="item.value" />
-                                    </el-select>
-                                </div>
+                                合计：充值金币：
+                                <span class="mid-head-font">{{ formatNum(payTotalRecharge) }}</span>
+                                ，免费金币：
+                                <span class="mid-head-font">{{ formatNum(payTotalFree) }}</span>
+                                ，任务金币：
+                                <span class="mid-head-font">{{ formatNum(payTotalTask) }}</span>
+                            </div>
+                            <div class="bar">
+                                <div id="recharge" style="width: 1200px;height:400px;"></div>
                                 <div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 1">
-                                        <Bs1CircleFill />
-                                        <span style="margin-left: 10px;">{{ payRank[0].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[0].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 2">
-                                        <Bs2CircleFill />
-                                        <span style="margin-left: 10px;">{{ payRank[1].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[1].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 3">
-                                        <Bs3CircleFill />
-                                        <span style="margin-left: 10px;">{{ payRank[2].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[2].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 4">
-                                        <Bs4Circle />
-                                        <span style="margin-left: 10px;">{{ payRank[3].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[3].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 5">
-                                        <Bs5Circle />
-                                        <span style="margin-left: 10px;">{{ payRank[4].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[4].value) }}</span>
+                                    <div class="goldCategory">
+                                        <span class="light-green-dot"></span>
+                                        <span>充值金币</span>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 6">
-                                        <Bs6Circle />
-                                        <span style="margin-left: 10px;">{{ payRank[5].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[5].value) }}</span>
+                                    <div class="goldCategory">
+                                        <span class="blue-dot"></span>
+                                        <span>免费金币</span>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 7">
-                                        <Bs7Circle />
-                                        <span style="margin-left: 10px;">{{ payRank[6].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[6].value) }}</span>
+                                    <div class="goldCategory">
+                                        <span class="yellow-dot"></span>
+                                        <span>任务金币</span>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 8">
-                                        <Bs8Circle />
-                                        <span style="margin-left: 10px;">{{ payRank[7].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[7].value) }}</span>
+                                </div>
+                                <div>
+                                    <div class="ranking-header">
+                                        <span style="margin-right: 40px;">门店金币充值排名</span>
+                                        <el-select v-model="goldTypePay" placeholder="请选择金币类型" size="small"
+                                            style="width: 90px;" @change="changeGoldTypePay">
+                                            <el-option v-for="item in gold" :key="item.value" :label="item.label"
+                                                :value="item.value" />
+                                        </el-select>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizePay >= 9">
-                                        <Bs9Circle />
-                                        <span style="margin-left: 10px;">{{ payRank[8].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(payRank[8].value) }}</span>
+                                    <div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 1">
+                                            <Bs1CircleFill />
+                                            <span style="margin-left: 10px;">{{ payRank[0].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[0].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 2">
+                                            <Bs2CircleFill />
+                                            <span style="margin-left: 10px;">{{ payRank[1].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[1].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 3">
+                                            <Bs3CircleFill />
+                                            <span style="margin-left: 10px;">{{ payRank[2].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[2].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 4">
+                                            <Bs4Circle />
+                                            <span style="margin-left: 10px;">{{ payRank[3].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[3].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 5">
+                                            <Bs5Circle />
+                                            <span style="margin-left: 10px;">{{ payRank[4].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[4].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 6">
+                                            <Bs6Circle />
+                                            <span style="margin-left: 10px;">{{ payRank[5].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[5].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 7">
+                                            <Bs7Circle />
+                                            <span style="margin-left: 10px;">{{ payRank[6].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[6].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 8">
+                                            <Bs8Circle />
+                                            <span style="margin-left: 10px;">{{ payRank[7].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[7].value) }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizePay >= 9">
+                                            <Bs9Circle />
+                                            <span style="margin-left: 10px;">{{ payRank[8].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(payRank[8].value) }}</span>
+                                        </div>
+
                                     </div>
 
                                 </div>
-
                             </div>
-                        </div>
-                    </el-tab-pane>
-                    <el-tab-pane label="金币消费" name="consume">
-                        <div>
-                            合计：充值金币：
-                            <span class="mid-head-font">{{ formatNum(consumeTotalRecharge) }}</span>
-                            ，免费金币：
-                            <span class="mid-head-font">{{ formatNum(consumeTotalFree) }}</span>
-                            ，任务金币：
-                            <span class="mid-head-font">{{ formatNum(consumeTotalTask) }}</span>
-                        </div>
-                        <div class="bar">
-                            <div id="consume" style="width: 1200px;height:400px;"></div>
+                        </el-tab-pane>
+                        <el-tab-pane label="金币消费" name="consume">
                             <div>
-                                <div class="goldCategory">
-                                    <span class="light-green-dot"></span>
-                                    <span>充值金币</span>
-                                </div>
-                                <div class="goldCategory">
-                                    <span class="blue-dot"></span>
-                                    <span>免费金币</span>
-                                </div>
-                                <div class="goldCategory">
-                                    <span class="yellow-dot"></span>
-                                    <span>任务金币</span>
-                                </div>
+                                合计：充值金币：
+                                <span class="mid-head-font">{{ formatNum(consumeTotalRecharge) }}</span>
+                                ，免费金币：
+                                <span class="mid-head-font">{{ formatNum(consumeTotalFree) }}</span>
+                                ，任务金币：
+                                <span class="mid-head-font">{{ formatNum(consumeTotalTask) }}</span>
                             </div>
-                            <div>
-                                <div class="ranking-header">
-                                    <span style="margin-right: 40px;">门店金币消费排名</span>
-                                    <el-select v-model="goldTypeConsume" placeholder="请选择金币类型" size="small"
-                                        style="width: 90px;" @change="changeGoldTypeConsume">
-                                        <el-option v-for="item in gold" :key="item.value" :label="item.label"
-                                            :value="item.value" />
-                                    </el-select>
-                                </div>
+                            <div class="bar">
+                                <div id="consume" style="width: 1200px;height:400px;"></div>
                                 <div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 1">
-                                        <Bs1CircleFill />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[0].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[0].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 2">
-                                        <Bs2CircleFill />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[1].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[1].value) }}</span>
+                                    <div class="goldCategory">
+                                        <span class="light-green-dot"></span>
+                                        <span>充值金币</span>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 3">
-                                        <Bs3CircleFill />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[2].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[2].value) }}</span>
+                                    <div class="goldCategory">
+                                        <span class="blue-dot"></span>
+                                        <span>免费金币</span>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 4">
-                                        <Bs4Circle />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[3].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[3].value) }}</span>
+                                    <div class="goldCategory">
+                                        <span class="yellow-dot"></span>
+                                        <span>任务金币</span>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 5">
-                                        <Bs5Circle />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[4].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[4].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 6">
-                                        <Bs6Circle />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[5].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[5].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 7">
-                                        <Bs7Circle />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[6].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[6].value) }}</span>
-                                    </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 8">
-                                        <Bs8Circle />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[7].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[7].value) }}</span>
+                                </div>
+                                <div>
+                                    <div class="ranking-header">
+                                        <span style="margin-right: 40px;">门店金币消费排名</span>
+                                        <el-select v-model="goldTypeConsume" placeholder="请选择金币类型" size="small"
+                                            style="width: 90px;" @change="changeGoldTypeConsume">
+                                            <el-option v-for="item in gold" :key="item.value" :label="item.label"
+                                                :value="item.value" />
+                                        </el-select>
                                     </div>
-                                    <div class="ranking-item" v-if="areaSizeConsume >= 9">
-                                        <Bs9Circle />
-                                        <span style="margin-left: 10px;">{{ ConsumeRank[8].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[8].value) }}</span>
+                                    <div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 1">
+                                            <Bs1CircleFill />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[0].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[0].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 2">
+                                            <Bs2CircleFill />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[1].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[1].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 3">
+                                            <Bs3CircleFill />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[2].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[2].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 4">
+                                            <Bs4Circle />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[3].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[3].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 5">
+                                            <Bs5Circle />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[4].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[4].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 6">
+                                            <Bs6Circle />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[5].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[5].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 7">
+                                            <Bs7Circle />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[6].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[6].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 8">
+                                            <Bs8Circle />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[7].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[7].value)
+                                                }}</span>
+                                        </div>
+                                        <div class="ranking-item" v-if="areaSizeConsume >= 9">
+                                            <Bs9Circle />
+                                            <span style="margin-left: 10px;">{{ ConsumeRank[8].name }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[8].value)
+                                                }}</span>
+                                        </div>
                                     </div>
-                                </div>
 
+                                </div>
                             </div>
-                        </div>
-                    </el-tab-pane>
-                </el-tabs>
+                        </el-tab-pane>
+                    </el-tabs>
 
-            </el-card>
-        </el-col>
-    </el-row>
-    <el-row :gutter="20">
-        <el-col :span="16">
-            <el-card>
-                <template #header>
-                    <div class="card-header">
-                        <span class="tail-head">金币概览</span>
-                    </div>
-                </template>
-                <div class="pie">
-                    <div id="yearRecharge" style="width: 600px;height:400px;"></div>
-                    <div id="yearConsume" style="width: 600px;height:400px;"></div>
-                    <div id="nowGold" style="width: 600px;height:400px;"></div>
-                </div>
-            </el-card>
-        </el-col>
-        <el-col :span="8">
-            <el-card>
-                <template #header>
-                    <div class="card-header" style="display: flex;">
-                        <span class="tail-head">四大学科类别占比</span>
-                        <el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small"
-                            @change="changePlatform" style="margin-left: auto;">
-                            <el-radio-button label="全部平台" value="全部平台" />
-                            <el-radio-button label="ERP" value="ERP" />
-                            <el-radio-button label="HC" value="HC" />
-                            <el-radio-button label="Link" value="Link" />
-                            <el-radio-button label="金币系统" value="金币系统" />
-                        </el-radio-group>
+                </el-card>
+            </el-col>
+        </el-row>
+        <el-row :gutter="20">
+            <el-col :span="16">
+                <el-card>
+                    <template #header>
+                        <div class="card-header">
+                            <span class="tail-head">金币概览</span>
+                        </div>
+                    </template>
+                    <div class="pie">
+                        <div id="yearRecharge" style="width: 600px;height:400px;"></div>
+                        <div id="yearConsume" style="width: 600px;height:400px;"></div>
+                        <div id="nowGold" style="width: 600px;height:400px;"></div>
                     </div>
-                </template>
-                <span v-if="platform == '全部平台'">
-                    <div id="all" style="width: 500px;height:400px;"></div>
-                </span>
-                <span v-if="platform == 'ERP'">
-                    <div id="ERP" style="width: 500px;height:400px;"></div>
-                </span>
-                <span v-if="platform == 'HC'">
-                    <div id="HC" style="width: 500px;height:400px;"></div>
-                </span>
-                <span v-if="platform == 'Link'">
-                    <div id="Link" style="width: 500px;height:400px;"></div>
-                </span>
-                <span v-if="platform == '金币系统'">
-                    <div id="gold" style="width: 500px;height:400px;"></div>
-                </span>
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <el-card>
+                    <template #header>
+                        <div class="card-header" style="display: flex;">
+                            <span class="tail-head">四大学科类别占比</span>
+                            <el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small"
+                                @change="changePlatform" style="margin-left: auto;">
+                                <el-radio-button label="全部平台" value="全部平台" />
+                                <el-radio-button label="ERP" value="ERP" />
+                                <el-radio-button label="HC" value="HC" />
+                                <el-radio-button label="Link" value="Link" />
+                                <el-radio-button label="金币系统" value="金币系统" />
+                            </el-radio-group>
+                        </div>
+                    </template>
+                    <span v-if="platform == '全部平台'">
+                        <div id="all" style="width: 500px;height:400px;"></div>
+                    </span>
+                    <span v-if="platform == 'ERP'">
+                        <div id="ERP" style="width: 500px;height:400px;"></div>
+                    </span>
+                    <span v-if="platform == 'HC'">
+                        <div id="HC" style="width: 500px;height:400px;"></div>
+                    </span>
+                    <span v-if="platform == 'Link'">
+                        <div id="Link" style="width: 500px;height:400px;"></div>
+                    </span>
+                    <span v-if="platform == '金币系统'">
+                        <div id="gold" style="width: 500px;height:400px;"></div>
+                    </span>
 
-            </el-card>
-        </el-col>
-    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
 </template>
 
 <style scoped>
@@ -1067,7 +1084,7 @@ onMounted(async function () {
     font-weight: bold;
 }
 
-.mid-head-font{
+.mid-head-font {
     font-weight: bold;
     color: #5eb7ff;
 }