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

refactor: change style

Browse source
This commit is contained in:
Methapon2001 2024-07-04 13:16:19 +07:00
parent b4b6fc75c5
commit d4a26ced4b
1 changed files with 7 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/StatCardComponent.vue
View file

@ -1,6 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
branch: { branch: {
@ -11,7 +9,6 @@ const props = withDefaults(
}[]; }[];
dark?: boolean; dark?: boolean;
labelI18n?: boolean; labelI18n?: boolean;
nowrap?: boolean;
}>(), }>(),
{ {
labelI18n: false, labelI18n: false,
@ -20,18 +17,14 @@ const props = withDefaults(
</script> </script>
<template> <template>
<div <div class="row" style="gap: var(--size-4)" :class="{ dark }">
class="row" <div
style="gap: var(--size-4)"
:class="{ dark, 'no-wrap': nowrap }"
>
<AppBox
v-for="v in props.branch" v-for="v in props.branch"
class="no-padding shadow-2" class="no-padding shadow-2 stat-card"
:class="{ [`stat-card__${v.color}`]: true }" :class="{ [`stat-card__${v.color}`]: true }"
:key="v.label" :key="v.label"
> >
<div class="stat-card__content row items-center q-px-md q-py-sm"> <div class="stat-card__content row items-center q-pa-sm">
<div class="col-4 text-center"> <div class="col-4 text-center">
<q-avatar <q-avatar
size="lg" size="lg"
@ -55,27 +48,14 @@ const props = withDefaults(
<div class="col-6">{{ v.count }}</div> <div class="col-6">{{ v.count }}</div>
</div> </div>
</div> </div>
</AppBox> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.stat-card { .stat-card {
--_color: var(--gray-6); border-radius: var(--radius-2);
display: grid; overflow: hidden;
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1024px) {
.stat-card {
display: flex;
}
}
@media screen and (min-width: 1920px) {
.stat-card {
display: flex;
}
} }
.stat-card__content { .stat-card__content {