add chart+tables
This commit is contained in:
parent
30bd1f06ed
commit
3b270eb50f
30
src/components/yx-dark/containers/chart.vue
Normal file
30
src/components/yx-dark/containers/chart.vue
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!--
|
||||||
|
filename: chart.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-08 13:53:04
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="yx-dark-chart"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "YxDarkChart",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.yx-dark-chart {
|
||||||
|
height: 100%;
|
||||||
|
background: #f003;
|
||||||
|
}
|
||||||
|
</style>
|
@ -6,7 +6,9 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="rect-container"></div>
|
<div class="rect-container">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -25,7 +27,7 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.rect-container {
|
.rect-container {
|
||||||
background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
|
background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
|
||||||
padding: 0;
|
padding: 24px;
|
||||||
width: 624px;
|
width: 624px;
|
||||||
height: 304px;
|
height: 304px;
|
||||||
}
|
}
|
||||||
|
30
src/components/yx-dark/containers/table.vue
Normal file
30
src/components/yx-dark/containers/table.vue
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!--
|
||||||
|
filename: table.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-08 13:52:12
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="yx-dark-tables"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "YxDarkTables",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.yx-dark-tables {
|
||||||
|
height: 100%;
|
||||||
|
background: #fff3;
|
||||||
|
}
|
||||||
|
</style>
|
@ -7,22 +7,50 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="main-panel">
|
<div class="main-panel">
|
||||||
<RectContainer class="leftTop" />
|
<RectContainer class="leftTop">
|
||||||
<RectContainer class="leftMiddle" />
|
<TablesContainer />
|
||||||
<RectContainer class="leftBottom" />
|
</RectContainer>
|
||||||
|
<RectContainer class="leftMiddle">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="leftBottom">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
|
||||||
<RectContainer class="bottom-1" />
|
<RectContainer class="bottom-1">
|
||||||
<RectContainer class="bottom-2" />
|
<TablesContainer />
|
||||||
<RectContainer class="bottom-3" />
|
</RectContainer>
|
||||||
<RectContainer class="bottom-4" />
|
<RectContainer class="bottom-2">
|
||||||
<RectContainer class="bottom-5" />
|
<TablesContainer />
|
||||||
<RectContainer class="bottom-6" />
|
</RectContainer>
|
||||||
<RectContainer class="bottom-7" />
|
<RectContainer class="bottom-3">
|
||||||
<RectContainer class="bottom-8" />
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="bottom-4">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="bottom-5">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="bottom-6">
|
||||||
|
<TablesContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="bottom-7">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="bottom-8">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
|
||||||
<RectContainer class="rightTop" />
|
<RectContainer class="rightTop">
|
||||||
<RectContainer class="rightMiddle" />
|
<ChartContainer />
|
||||||
<RectContainer class="rightBottom" />
|
</RectContainer>
|
||||||
|
<RectContainer class="rightMiddle">
|
||||||
|
<TablesContainer />
|
||||||
|
</RectContainer>
|
||||||
|
<RectContainer class="rightBottom">
|
||||||
|
<ChartContainer />
|
||||||
|
</RectContainer>
|
||||||
|
|
||||||
<MainArea style="grid-area: main" />
|
<MainArea style="grid-area: main" />
|
||||||
</div>
|
</div>
|
||||||
@ -31,10 +59,12 @@
|
|||||||
<script>
|
<script>
|
||||||
import RectContainer from "@/components/yx-dark/containers/rect.vue";
|
import RectContainer from "@/components/yx-dark/containers/rect.vue";
|
||||||
import MainArea from "./MainArea.vue";
|
import MainArea from "./MainArea.vue";
|
||||||
|
import ChartContainer from "@/components/yx-dark/containers/chart.vue";
|
||||||
|
import TablesContainer from "@/components/yx-dark/containers/table.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "MainPanel",
|
name: "MainPanel",
|
||||||
components: { RectContainer, MainArea },
|
components: { RectContainer, MainArea, ChartContainer, TablesContainer },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
|
Loading…
Reference in New Issue
Block a user