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

fix: แก้ ui แสดงจำนวน

Browse source
This commit is contained in:
Net 2024-07-03 14:12:51 +07:00 • committed by Methapon2001
parent bb00d8890a
commit 18b7c5c5ab
1 changed files with 33 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/StatCardComponent.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import AppBox from 'components/app/AppBox.vue'; import AppBox from 'components/app/AppBox.vue';
import { vModelSelect } from 'vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
branch: { branch: {
icon: string;
count: number; count: number;
label: string; label: string;
color: 'pink' | 'purple' | 'green' | 'orange'; color: 'pink' | 'purple' | 'green' | 'orange';
@ -27,30 +29,32 @@ const props = withDefaults(
<AppBox <AppBox
v-for="v in props.branch" v-for="v in props.branch"
:key="v.label" :key="v.label"
class="bordered stat-card__wave" class="col-12 no-padding"
:class="{ [`stat-card__${v.color}`]: true }" :class="{ [`stat-card__${v.color}`]: true }"
style=" style="box-shadow: var(--shadow-2)"
padding: 12px 16px;
height: 75px;
min-width: 232px;
box-shadow: var(--shadow-2);
"
> >
<svg <div class="stat-card__content row items-center q-pa-md">
xmlns="http://www.w3.org/2000/svg" <div class="col-4 text-center">
viewBox="0 0 1440 320" <q-avatar
style="width: 100%" size="lg"
> style="background-color: hsla(0 0% 100% /0.15)"
<path text-color="white"
class="box-path" :icon="v.icon"
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> </div>
</svg> <div class="col-6 justify-center column">
<div class="col-6 ellipsis text-bold" style="width: 100%">
{{ labelI18n ? $t(v.label) : v.label }}
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
{{ labelI18n ? $t(v.label) : v.label }}
</q-tooltip>
</div>
<div class="stat-card__content"> <div class="col-6">{{ v.count }}</div>
<div class="text-h5 text-weight-bold">{{ v.count }}</div>
<div class="text-weight-bold text-no-wrap">
{{ labelI18n ? $t(v.label) : v.label }}
</div> </div>
</div> </div>
</AppBox> </AppBox>
@ -76,53 +80,36 @@ const props = withDefaults(
} }
} }
.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 { .stat-card__content {
z-index: 2; z-index: 2;
color: var(--_color); color: hsla(var(--gray-0-hsl) / 1);
background: hsla(var(--_color) / 1);
height: 100%; height: 100%;
width: 200px; width: 200px;
} }
.stat-card__purple { .stat-card__purple {
--_color: var(--violet-11); --_color: var(--violet-11-hsl);
} }
.stat-card__pink { .stat-card__pink {
--_color: var(--pink-6); --_color: var(--pink-6-hsl);
} }
.stat-card__green { .stat-card__green {
--_color: var(--teal-10); --_color: var(--teal-10-hsl);
} }
.stat-card__orange { .stat-card__orange {
--_color: var(--orange-5); --_color: var(--orange-5-hsl);
} }
.dark .stat-card__purple { .dark .stat-card__purple {
--_color: var(--purple-7); --_color: var(--violet-10-hsl);
} }
.dark .stat-card__green { .dark .stat-card__green {
--_color: var(--teal-7); --_color: var(--teal-8-hsl);
} }
.dark .stat-card__orange { .dark .stat-card__orange {