chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: stats card

Browse source
This commit is contained in:
Methapon-Frappet 2024-04-13 16:49:34 +07:00
parent db36d71ec2
commit f91bb46c6b
1 changed files with 14 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/StatCardComponent.vue
View file

@ -3,7 +3,7 @@ import AppBox from 'components/app/AppBox.vue';
const props = defineProps<{ const props = defineProps<{
branch: { branch: {
amount: number; count: number;
label: string; label: string;
}[]; }[];
dark?: boolean; dark?: boolean;
@ -22,13 +22,8 @@ const color = ['pink', 'purple'];
v-for="(v, i) in props.branch" v-for="(v, i) in props.branch"
:key="v.label" :key="v.label"
class="bordered wave col-12" class="bordered wave col-12"
:class="`color-${color[i % 2]}`" :class="{ [`stat__${color[i % 2]}`]: true }"
style=" style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
width: 200px;
min-width: 150px;
max-height: 95px;
box-shadow: var(--shadow-2);
"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path <path
@ -37,8 +32,8 @@ const color = ['pink', 'purple'];
></path> ></path>
</svg> </svg>
<div class="stat-card-content"> <div class="stat__content">
<div class="text-h5 text-weight-bold">{{ v.amount }}</div> <div class="text-h5 text-weight-bold">{{ v.count }}</div>
<div class="text-weight-bold">{{ $t(v.label) }}</div> <div class="text-weight-bold">{{ $t(v.label) }}</div>
</div> </div>
</AppBox> </AppBox>
@ -60,26 +55,26 @@ svg {
} }
.box-path { .box-path {
fill: var(--_color-stat-card); fill: var(--_color);
fill-opacity: 1; fill-opacity: 1;
} }
.stat-card-content { .stat__content {
z-index: 2; z-index: 2;
color: var(--_color-stat-card); color: var(--_color);
height: 100%; height: 100%;
width: 200px; width: 200px;
} }
.color-purple { .stat__purple {
--_color-stat-card: var(--violet-11); --_color: var(--violet-11);
} }
.color-pink { .stat__pink {
--_color-stat-card: var(--pink-6); --_color: var(--pink-6);
} }
.dark .color-purple { .dark .stat__purple {
--_color-stat-card: var(--purple-8); --_color: var(--purple-8);
} }
</style> </style>