add icon&scrollbar

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-10 09:47:45 +08:00
parent 4c2bca6c76
commit 3ca4412f23
4 changed files with 58 additions and 7 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>