gold-vue/src/views/workspace/index.vue

<template>
  <!-- 头部 -->
        <el-header class="header">
            <div class="title">数据总览</div>
        </el-header>
  <div style="height: 100vh;">
    <el-row class="cards" >
      <el-col :span="14">
        <GoldManagement/>
      </el-col>
      <!-- 右上格子：占12列 -->
      <el-col :span="10">
        <CashManagement />
      </el-col>
    </el-row>
    <el-row class="graphs">
      <el-col :span="24">
        <GoldGraph/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import API from '@/util/http'

import GoldManagement from "@/components/workspace/GoldManagement.vue"
import CashManagement from "@/components/workspace/CashManagement.vue"
import GoldGraph from "@/components/workspace/GoldGraph.vue"


</script>

<style scoped>

.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;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: 136px;
  color: #040a2d;
  font-family: "PingFang SC";
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
  line-height: 31.79px;
  text-align: center;
}


</style>