add icon&scrollbar

src/views/dashboard/charts/ChipInvest.vue

@@ -8,7 +8,7 @@
 <template>
   <chart-container class="chip-invest-chart">
     <div class="chart-title">chip-invest</div>
-    <div class="chart-body">
+    <div class="chart-body" style="width: 1000px; background: #f024;">
       <div class="chart-item">chip-invest</div>
       <div class="chart-item">chip-invest</div>
       <div class="chart-item">chip-invest</div>

src/views/dashboard/components/ChartContainer.vue

@@ -30,5 +30,31 @@ export default {
   background: #151516;
   height: 100%;
   flex: 1;
+  overflow-x: scroll;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  //   width: 10px;
+  //   height: 10px;
+  //   background: #14305f;
+}
+
+::-webkit-scrollbar-track {
+  background: #14305f;
+  border: 0 none;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #004798;
+  border: 0 none;
+  border-radius: 6px;
 }
 </style>

src/views/dashboard/components/ContainerIcon.vue

@@ -6,18 +6,43 @@
 -->
 
 <template>
-  <div class="container-icon"></div>
+  <div class="container-icon" :style="bgStyle"></div>
 </template>
 
 <script>
+import cube from "@/assets/images/homeindex/fto-icon.png";
+import chip from "@/assets/images/homeindex/chip-icon.png";
+import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
+import bipv from "@/assets/images/homeindex/bipv-icon.png";
+import std from "@/assets/images/homeindex/std-icon.png";
+
 export default {
   name: "ContainerIcon",
   components: {},
-  props: {},
+  props: {
+    icon: {
+      type: String,
+      default: "cube",
+    },
+  },
   data() {
     return {};
   },
-  computed: {},
+  computed: {
+    bgStyle() {
+      return {
+        cube:
+          "background: url(" + cube + ") no-repeat center center / 100% 100%",
+        chip:
+          "background: url(" + chip + ") no-repeat center center / 100% 100%",
+        chip2:
+          "background: url(" + chip2 + ") no-repeat center center / 100% 100%",
+        bipv:
+          "background: url(" + bipv + ") no-repeat center center / 100% 100%",
+        std: "background: url(" + std + ") no-repeat center center / 100% 100%",
+      }[this.icon];
+    },
+  },
   methods: {},
 };
 </script>

src/views/index.vue

@@ -8,14 +8,14 @@
             <db-container icon="cube" title="FTO投入">
               <fto-chart />
             </db-container>
-            <db-container icon="chip" title="芯片投入">
+            <db-container icon="chip2" title="芯片投入">
               <chip-invest-chart />
             </db-container>
           </div>
           <div class="db-right">
             <db-container
               side="right"
-              icon="chip2"
+              icon="chip"
               title="芯片产出"
             ></db-container>
             <db-container
@@ -25,7 +25,7 @@
             ></db-container>
             <db-container
               side="right"
-              icon="stack"
+              icon="bipv"
               title="BIPV产出"
             ></db-container>
           </div>