113 lines
2.3 KiB
Vue
113 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import AppBox from 'components/app/AppBox.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
branch: {
|
|
count: number;
|
|
label: string;
|
|
color: 'pink' | 'purple' | 'green' | 'orange';
|
|
}[];
|
|
dark?: boolean;
|
|
labelI18n?: boolean;
|
|
}>(),
|
|
{
|
|
labelI18n: false,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="stat-card row"
|
|
style="gap: var(--size-4)"
|
|
:class="{ 'justify-between': $q.screen.lt.md, dark }"
|
|
>
|
|
<AppBox
|
|
v-for="v in props.branch"
|
|
:key="v.label"
|
|
class="bordered stat-card__wave col-12"
|
|
:class="{ [`stat-card__${v.color}`]: true }"
|
|
style="
|
|
padding: 12px 16px;
|
|
height: 75px;
|
|
width: 200px;
|
|
min-width: 150px;
|
|
box-shadow: var(--shadow-2);
|
|
"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
|
<path
|
|
class="box-path"
|
|
d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
|
|
></path>
|
|
</svg>
|
|
|
|
<div class="stat-card__content">
|
|
<div class="text-h5 text-weight-bold">{{ v.count }}</div>
|
|
<div class="text-weight-bold">
|
|
{{ labelI18n ? $t(v.label) : v.label }}
|
|
</div>
|
|
</div>
|
|
</AppBox>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.stat-card {
|
|
--_color: var(--gray-6);
|
|
}
|
|
|
|
.stat-card__wave {
|
|
position: relative;
|
|
display: flex;
|
|
|
|
& svg {
|
|
width: 200px;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0;
|
|
opacity: 0.1;
|
|
|
|
& .box-path {
|
|
fill: var(--_color);
|
|
fill-opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stat-card__content {
|
|
z-index: 2;
|
|
color: var(--_color);
|
|
height: 100%;
|
|
width: 200px;
|
|
}
|
|
|
|
.stat-card__purple {
|
|
--_color: var(--violet-11);
|
|
}
|
|
|
|
.stat-card__pink {
|
|
--_color: var(--pink-6);
|
|
}
|
|
|
|
.stat-card__green {
|
|
--_color: var(--teal-10);
|
|
}
|
|
|
|
.stat-card__orange {
|
|
--_color: var(--orange-5);
|
|
}
|
|
|
|
.dark .stat-card__purple {
|
|
--_color: var(--purple-7);
|
|
}
|
|
|
|
.dark .stat-card__green {
|
|
--_color: var(--teal-7);
|
|
}
|
|
|
|
.dark .stat-card__orange {
|
|
--_color: var(--orange-8);
|
|
}
|
|
</style>
|