fix: file name typo
This commit is contained in:
parent
bb12401f58
commit
2eda043ee5
2 changed files with 5 additions and 98 deletions
|
|
@ -1,93 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
branch: {
|
|
||||||
amount: string;
|
|
||||||
label: string;
|
|
||||||
}[];
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="row"
|
|
||||||
style="gap: var(--size-4)"
|
|
||||||
:class="{ 'justify-between': $q.screen.lt.md }"
|
|
||||||
>
|
|
||||||
<app-box
|
|
||||||
v-for="(v, i) in props.branch"
|
|
||||||
:key="v.label"
|
|
||||||
class="bordered wave col-12"
|
|
||||||
:class="`color-${color[i % 5]}`"
|
|
||||||
style="
|
|
||||||
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">
|
|
||||||
<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="column justify-around stat-card-content">
|
|
||||||
<div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
|
|
||||||
<div class="text-weight-bold">{{ v.label }}</div>
|
|
||||||
</div>
|
|
||||||
</app-box>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.wave {
|
|
||||||
background: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 200px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 50px;
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-path {
|
|
||||||
fill: var(--_color-stat-card);
|
|
||||||
fill-opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card-content {
|
|
||||||
z-index: 2;
|
|
||||||
color: var(--_color-stat-card);
|
|
||||||
height: 100%;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-blue {
|
|
||||||
--_color-stat-card: var(--blue-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-purple {
|
|
||||||
--_color-stat-card: var(--purple-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-pink {
|
|
||||||
--_color-stat-card: var(--pink-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-yellow {
|
|
||||||
--_color-stat-card: var(--yellow-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-green {
|
|
||||||
--_color-stat-card: var(--green-8);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -3,12 +3,12 @@ import { ref, onMounted } from 'vue';
|
||||||
import useUserStore from 'stores/user';
|
import useUserStore from 'stores/user';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
import PersonCard from 'src/components/home/PersonCard.vue';
|
import PersonCard from 'components/home/PersonCard.vue';
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
import StatCardComponet from 'components/StatCardComponet.vue';
|
import StatCardComponent from 'components/StatCardComponent.vue';
|
||||||
import SelectorList from 'src/components/SelectorList.vue';
|
import SelectorList from 'components/SelectorList.vue';
|
||||||
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
||||||
import TooltipComponet from 'src/components/TooltipComponet.vue';
|
import TooltipComponet from 'components/TooltipComponet.vue';
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const { data: userData } = storeToRefs(userStore);
|
const { data: userData } = storeToRefs(userStore);
|
||||||
|
|
@ -52,7 +52,7 @@ const selectorList = [
|
||||||
{{ $t('personnelStatTitle') + $t(selectorLabel) }}
|
{{ $t('personnelStatTitle') + $t(selectorLabel) }}
|
||||||
</span>
|
</span>
|
||||||
<div class="row col full-width" style="overflow-x: auto">
|
<div class="row col full-width" style="overflow-x: auto">
|
||||||
<stat-card-componet :branch="branchStat" class="no-wrap" />
|
<StatCardComponent :branch="branchStat" class="no-wrap" />
|
||||||
</div>
|
</div>
|
||||||
</AppBox>
|
</AppBox>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue