You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.4 KiB
68 lines
1.4 KiB
<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>
|