add fto&chip-invest

src/views/dashboard/charts/ChipInvest.vue

@@ -0,0 +1,37 @@
+<!-- 
+    filename: chip-invest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <chart-container class="chip-invest-chart">
+    <div class="chart-title">chip-invest</div>
+    <div class="chart-body">
+      <div class="chart-item">chip-invest</div>
+      <div class="chart-item">chip-invest</div>
+      <div class="chart-item">chip-invest</div>
+      <div class="chart-item">chip-invest</div>
+    </div>
+  </chart-container>
+</template>
+
+<script>
+import ChartContainerVue from "../components/ChartContainer.vue";
+
+export default {
+  name: "chip-investChart",
+  components: {
+    ChartContainer: ChartContainerVue,
+  },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/dashboard/charts/Fto.vue

@@ -0,0 +1,37 @@
+<!-- 
+    filename: fto.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <chart-container class="fto-chart">
+    <div class="chart-title">FTO</div>
+    <div class="chart-body">
+      <div class="chart-item">FTO</div>
+      <div class="chart-item">FTO</div>
+      <div class="chart-item">FTO</div>
+      <div class="chart-item">FTO</div>
+    </div>
+  </chart-container>
+</template>
+
+<script>
+import ChartContainerVue from "../components/ChartContainer.vue";
+
+export default {
+  name: "FtoChart",
+  components: {
+    ChartContainer: ChartContainerVue,
+  },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/dashboard/components/ChartContainer.vue

@@ -0,0 +1,34 @@
+<!-- 
+    filename: ChartContainer.vue
+    author: liubin
+    date: 2024-04-10 08:54:33
+    description: 
+    todo: 实现滑动条 和动态宽高
+-->
+
+<template>
+  <div class="chart-container">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartContainer",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-container {
+  background: #151516;
+  height: 100%;
+  flex: 1;
+}
+</style>

src/views/dashboard/components/Container.vue

@@ -25,7 +25,9 @@
       :class="[
         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
       ]"
-    ></div>
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -82,7 +84,7 @@ export default {
   }
 
   .container-body {
-    padding: 8px;
+    padding: 12px;
     display: flex;
     flex: 1;
   }