Merge branch 'lihuilin/feature-20250815155204-金币优化' into milestone-20250815-金币优化

src/views/consume/gold/addCoinConsume.vue

@@ -848,9 +848,11 @@ p {
   display: flex;
 
   .left {
-    width: 35%;
+    width: 500px;
     float: left;
     align-items: center;
+    display: flex;
+    align-items: center;
   }
 
   .right {

src/views/workspace/index.vue

@@ -1,26 +1,21 @@
 <template>
-  <el-row>
-    <!-- 数据总览卡片 -->
-    <el-col :span="4" style="padding-right: 10px;">
-      <el-card class="center-card margin-bottom">数据总览</el-card>
-    </el-col>
-    <!-- 最后更新时间 -->
-    <el-col :span="18" style="display: flex; align-items: center; font-size: 18px">
+  <div class="top">
+    <el-card style="width:20%" class="center-card">数据总览</el-card>
+    <span class="text">
       最后更新时间：{{
         workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
       }}
-    </el-col>
-  </el-row>
+    </span>
+  </div>
 
-  <el-row :gutter="10">
+  <div class="card">
     <!-- 第一个卡片 -->
-    <el-col :span="6">
     <el-card class="card-item">
       <template #header>
-          <div class="card-header">
         <div class="card-title">当前金币余量</div>
         <div>
-              <span style="font-weight: bold">{{ currentGold / 100 }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日
+          <span style="font-weight: bold">{{ currentGold / 100
+          }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日
           {{ dailyChange / 100 }}
           <template v-if="dailyChange > 0">
             <el-icon style="color:red">
@@ -38,7 +33,6 @@
             </el-icon>
           </template>
         </div>
-          </div>
       </template>
       <div>
         <div class="margin-bottom">永久金币：{{ currentPermanent / 100 }}</div>
@@ -49,10 +43,8 @@
         <div>任务金币：{{ currentTask / 100 }}</div>
       </div>
     </el-card>
-    </el-col>
 
     <!-- 第二个卡片 -->
-    <el-col :span="6">
     <el-card class="card-item">
       <div class="card-title">全年累计充值金币数</div>
       <div class="card-title">{{ yearlyRecharge / 100 }}</div>
@@ -63,10 +55,8 @@
         <el-col class="margin-bottom center-card">其中充值：{{ money / 100 }}</el-col>
       </template>
     </el-card>
-    </el-col>
 
     <!-- 第三个卡片 -->
-    <el-col :span="6">
     <el-card class="card-item">
       <div class="card-title">全年累计消费金币数</div>
       <div class="card-title">{{ yearlyReduce / 100 }}</div>
@@ -80,10 +70,8 @@
         <div class="margin-bottom center-card">昨日新增退款：{{ dailyRefund / 100 }}</div>
       </template>
     </el-card>
-    </el-col>
 
     <!-- 第四个卡片 -->
-    <el-col :span="6">
     <el-card class="card-item">
       <el-col class="card-title">全年累计充值人头数</el-col>
       <el-col class="card-title">{{ yearlyRechargeNum }}</el-col>
@@ -126,23 +114,23 @@
         <el-col class="margin-bottom center-card">其中首充：{{ firstRecharge }}</el-col>
       </template>
     </el-card>
-    </el-col>
-  </el-row>
+  </div>
 
-    <el-card style="margin-top: 20px">
-      <el-row>
-        <el-col>
+  <div class="graph">
+    <el-card style="width:100%;">
+      <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>
-        </el-col>
-        <div style="margin-top:5px;width:35vw">合计&nbsp;
+      </div>
+      <div class="condition">
+        <div style="width:44%;background-color: antiquewhite;">合计&nbsp;
           永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
           免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
           任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}
         </div>
-        <div @change="handleDatePickerChange" style="width:20vw">
+        <div @change="handleDatePickerChange" style="width:24%;background-color: aqua;">
           <el-button @click="getYes()" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
           </el-button>
           <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
@@ -154,26 +142,19 @@
           <el-button @click="getYear()" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
           </el-button>
         </div>
-        <div style="width:25vw">
+        <div style="width:31%;background-color: bisque;">
           <el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
-                          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" style="width:20vw"
-                          value-format="YYYY-MM-DD HH:mm:ss"
-                          :default-time="defaultTime" :disabled-date="disabledDate"
-          />
+            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" style="width:20vw" value-format="YYYY-MM-DD HH:mm:ss"
+            :default-time="defaultTime" :disabled-date="disabledDate" />
           <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
         </div>
-      </el-row>
-
-
-      <el-row :gutter="20" style="margin-top: 20px">
-        <el-col :span="18">
-          <div class="bar">
-            <div ref="chartRef" style="width: 100%; height: 400px"></div>
       </div>
-        </el-col>
-        <el-col :span="6">
-          <el-card class="rank-card" style="width: 100%; height: 100%">
-            <div class="card-large margin-bottom">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
+
+      <div class="graph-content">
+        <div ref="chartRef" class="left"></div>
+        <div class="right">
+          <el-card>
+            <div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
             <el-select v-model="selectedType" style="width: 100%; margin-bottom: 15px">
               <el-option label="全部类型" value="all"></el-option>
               <el-option label="永久金币" value="permanent"></el-option>
@@ -194,9 +175,10 @@
               </el-table-column>
             </el-table>
           </el-card>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
     </el-card>
+  </div>
 </template>
 
 <script setup>
@@ -206,7 +188,6 @@ import API from '@/util/http'
 import { ElMessage } from 'element-plus'
 import dayjs from 'dayjs';
 import utc from 'dayjs-plugin-utc'
-
 dayjs.extend(utc)
 import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
 import { marketMapping } from "@/utils/marketMap.js";
@@ -806,6 +787,56 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+.top {
+  height: 5.5%;
+  width:100%;
+  display: flex;
+  margin-bottom: 0.2%;
+  .text{
+    margin-left:0.2%;
+    width:50%;
+    display: flex; 
+    align-items: center; 
+    font-size: 18px;
+  }
+}
+
+.card {
+  height: 28%;
+  display: flex;
+  justify-content: center;
+}
+
+.graph {
+  width: 100%;
+  display: flex;
+  height: 64%;
+  background-color: aqua;
+
+  .condition {
+    width: 100%;
+    height: 1%;
+    display: flex;
+    align-items: center;
+  }
+
+  .graph-content {
+    flex: 1;
+    height: auto;
+    display: flex;
+
+    .left {
+      width: 70%;
+      height: auto;
+    }
+
+    .right {
+      flex: 1;
+      padding: 0.5% 2%;
+    }
+  }
+}
+
 .center-card {
   display: flex;
   justify-content: center;
@@ -813,14 +844,16 @@ onUnmounted(() => {
 }
 
 .margin-bottom {
-  margin-bottom: 5px;
+  margin-bottom: 0.5%;
 }
 
 .card-item {
-  height: 260px;
+  width: 25%;
+  height: 98%;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-right: 0.25%;
 }
 
 .card-title {
@@ -831,10 +864,6 @@ onUnmounted(() => {
   align-items: center;
 }
 
-.rank-card {
-  height: 500px;
-}
-
 .card-large {
   font-weight: bold;
   font-size: 16px;
@@ -842,13 +871,6 @@ onUnmounted(() => {
   margin-bottom: 15px;
 }
 
-.bar {
-  background: white;
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);