cash-management 和 worspace

src/components/workspace/CashManagement.vue

@@ -1,30 +1,47 @@
 <template>
-   <span class="text"> 现金管理
-      最后更新时间：{{
-       workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
-     }}</span>
-  <div>
-    <el-card class="cash-card">
-      <div>总营收：{{ cashData.totalIncome }}</div>
+
+  <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>
-    </el-card>
+    </div>
+
   </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-import {ref, onMounted} from 'vue'
+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}
+    { name: '北京', value: 450000 },
+    { name: '上海', value: 300000 },
+    { name: '广州', value: 200000 },
+    { name: '深圳', value: 150000 },
+    { name: '其他', value: 100000 }
   ]
 })
 
@@ -36,13 +53,16 @@ const renderChart = () => {
     chartInstance = echarts.init(chartRef.value)
   }
   const option = {
-    tooltip: {trigger: 'item'},
-    legend: {bottom: 10},
+    tooltip: { trigger: 'item' },
+    legend: { 
+      bottom: 5, // 增加底部距离的
+      left: 'center' }, 
     series: [
       {
         type: 'pie',
         radius: ['40%', '70%'],
-        data: cashData.value.markets
+        data: cashData.value.markets,
+        center: [ '60%', '45%'] //图表靠右一点
       }
     ]
   }
@@ -55,6 +75,20 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* 背景卡片大小 */
+.cash-management {
+  margin: 10px 5px;
+  width: 100%;
+  height: 55vh;
+  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%;
 }
@@ -62,10 +96,110 @@ onMounted(() => {
 .chart {
   width: 100%;
   height: 200px;
-}
+} */
+
 
 .cash-title {
-  font-weight: bold;
+  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/views/home.vue

@@ -330,28 +330,12 @@ function logout() {
   overflow: hidden;
 }
 
-/* 头部样式 */
-.header {
-  /* 将纯色背景替换为线性渐变 */
-  background: linear-gradient(
-    90deg, 
-    rgba(228, 240, 252, 1) 20%, 
-    rgba(190, 218, 247, 1) 50%, 
-    rgba(228, 240, 252, 1) 100%
-  );
-  height: 6vh;
-  border-radius: 12px;
-  margin-bottom: 4px;
-  box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
-  /* 添加阴影增强层次感 */
-  z-index: 80;
-}
 
 /* 主内容区域容器 */
 .main-area {
   flex: 1;
   background: #E7F4FD;
-  /* 半透明白色背景 */
+  /* 半透明浅色背景 */
   /* backdrop-filter: blur(5px); */
   /* 毛玻璃效果 */
   border-radius: 12px;

src/views/workspace/index.vue

@@ -3,7 +3,7 @@
         <el-header class="header">
             <div class="title">数据总览</div>
         </el-header>
-  <div style="height: 100vh; overflow: hidden;">
+  <div style="height: 100vh; overflow: auto;">
     <el-row class="cards" >
       <el-col :span="12">
         <GoldManagement :cardData="cardData" />