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

fix: แก้ layout

Browse source
This commit is contained in:
Net 2024-06-25 17:25:33 +07:00
parent 8a49fcf76a
commit 6e3144374c
1 changed files with 21 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/StatCardComponent.vue
View file

@ -19,7 +19,7 @@ const props = withDefaults(
<template> <template>
<div <div
class="stat-card row" class="stat-card"
style="gap: var(--size-4)" style="gap: var(--size-4)"
:class="{ 'justify-between': $q.screen.lt.md, dark }" :class="{ 'justify-between': $q.screen.lt.md, dark }"
> >
@ -31,12 +31,15 @@ const props = withDefaults(
style=" style="
padding: 12px 16px; padding: 12px 16px;
height: 75px; height: 75px;
width: 200px;
min-width: 150px; min-width: 150px;
box-shadow: var(--shadow-2); 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"
style="width: 100%"
>
<path <path
class="box-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" 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"
@ -45,7 +48,7 @@ const props = withDefaults(
<div class="stat-card__content"> <div class="stat-card__content">
<div class="text-h5 text-weight-bold">{{ v.count }}</div> <div class="text-h5 text-weight-bold">{{ v.count }}</div>
<div class="text-weight-bold"> <div class="text-weight-bold text-no-wrap">
{{ labelI18n ? $t(v.label) : v.label }} {{ labelI18n ? $t(v.label) : v.label }}
</div> </div>
</div> </div>
@ -56,6 +59,20 @@ const props = withDefaults(
<style scoped> <style scoped>
.stat-card { .stat-card {
--_color: var(--gray-6); --_color: var(--gray-6);
display: grid;
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__wave { .stat-card__wave {