From c4a1711b62706a03634ec18e2893ddfa62aa35d2 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Mon, 16 Oct 2023 21:50:12 +0800 Subject: [PATCH] pref: adjust balance mobile --- src/views/balance/Balance.vue | 34 +++++++++++++++++++++++++++ src/views/balance/components/Form.vue | 6 +++++ 2 files changed, 40 insertions(+) diff --git a/src/views/balance/Balance.vue b/src/views/balance/Balance.vue index d43ddf09..90ecc26f 100644 --- a/src/views/balance/Balance.vue +++ b/src/views/balance/Balance.vue @@ -178,8 +178,42 @@ onMounted(async () => { } @media (max-width: 1000px) { + .root { + width: 80%; + height: 100%; + margin: auto; + } + .content { flex-direction: column; + justify-content: center; + align-items: center; + width: 80%; + div { + &:nth-child(1) { + margin-bottom: 20px; + } + } + } + + .title { + font-size: 20px; + } + .amount-status-deficit { + flex-direction: column; + div { + &:nth-child(2) { + margin-top: 20px; + } + } + } +} + +@media (max-width: 700px) { + .root { + width: 95%; + } + .content { width: 100%; } } diff --git a/src/views/balance/components/Form.vue b/src/views/balance/components/Form.vue index c311ac6d..81ffe43d 100644 --- a/src/views/balance/components/Form.vue +++ b/src/views/balance/components/Form.vue @@ -103,4 +103,10 @@ const { isIncome, incomeData, expenditureData, statement } = toRefs(props) background-color: var(--kungalgame-trans-pink-0); } } + +@media (max-width: 1000px) { + .form { + width: 100%; + } +}