From 2fc6a6ca77d5c913a9dd183cabc29ff496d8e0d0 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sun, 1 Sep 2024 17:52:18 +0800 Subject: [PATCH] modify style --- src/styles/mobile/font-size-default.css | 3 +++ src/styles/mobile/font-size-large.css | 3 +++ src/styles/mobile/font-size-small.css | 3 +++ src/styles/mobile/font-size-x-large.css | 3 +++ src/styles/mobile/font-size-xx-large.css | 3 +++ src/styles/mobile/font-size-xxx-large.css | 3 +++ src/styles/mobile/font-size-xxxx-large.css | 3 +++ src/views/mobile/transactions/EditPage.vue | 14 +++++++------- 8 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/styles/mobile/font-size-default.css b/src/styles/mobile/font-size-default.css index a0812a5e..1c166241 100644 --- a/src/styles/mobile/font-size-default.css +++ b/src/styles/mobile/font-size-default.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 13px; --ebk-transaction-tag-chip-media-size: 19px; --ebk-transaction-tag-chip-height: 19px; + --ebk-transaction-picture-size: 128px; + --ebk-transaction-picture-add-icon-size: 40px; + --ebk-transaction-picture-remove-icon-size: 32px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 30px; --ebk-license-content-font-size: 14px; diff --git a/src/styles/mobile/font-size-large.css b/src/styles/mobile/font-size-large.css index bcb7d279..31e3c4d3 100644 --- a/src/styles/mobile/font-size-large.css +++ b/src/styles/mobile/font-size-large.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 13px; --ebk-transaction-tag-chip-media-size: 20px; --ebk-transaction-tag-chip-height: 20px; + --ebk-transaction-picture-size: 128px; + --ebk-transaction-picture-add-icon-size: 40px; + --ebk-transaction-picture-remove-icon-size: 32px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 31px; --ebk-license-content-font-size: 15px; diff --git a/src/styles/mobile/font-size-small.css b/src/styles/mobile/font-size-small.css index 97741259..35e218e6 100644 --- a/src/styles/mobile/font-size-small.css +++ b/src/styles/mobile/font-size-small.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 13px; --ebk-transaction-tag-chip-media-size: 18px; --ebk-transaction-tag-chip-height: 18px; + --ebk-transaction-picture-size: 112px; + --ebk-transaction-picture-add-icon-size: 32px; + --ebk-transaction-picture-remove-icon-size: 28px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 30px; --ebk-license-content-font-size: 13px; diff --git a/src/styles/mobile/font-size-x-large.css b/src/styles/mobile/font-size-x-large.css index 4741e65a..a1cf63d4 100644 --- a/src/styles/mobile/font-size-x-large.css +++ b/src/styles/mobile/font-size-x-large.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 14px; --ebk-transaction-tag-chip-media-size: 22px; --ebk-transaction-tag-chip-height: 22px; + --ebk-transaction-picture-size: 136px; + --ebk-transaction-picture-add-icon-size: 40px; + --ebk-transaction-picture-remove-icon-size: 32px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 32px; --ebk-license-content-font-size: 16px; diff --git a/src/styles/mobile/font-size-xx-large.css b/src/styles/mobile/font-size-xx-large.css index 17fcc593..345de60e 100644 --- a/src/styles/mobile/font-size-xx-large.css +++ b/src/styles/mobile/font-size-xx-large.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 15px; --ebk-transaction-tag-chip-media-size: 22px; --ebk-transaction-tag-chip-height: 22px; + --ebk-transaction-picture-size: 144px; + --ebk-transaction-picture-add-icon-size: 48px; + --ebk-transaction-picture-remove-icon-size: 40px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 36px; --ebk-license-content-font-size: 17px; diff --git a/src/styles/mobile/font-size-xxx-large.css b/src/styles/mobile/font-size-xxx-large.css index 79f5d75c..22087e79 100644 --- a/src/styles/mobile/font-size-xxx-large.css +++ b/src/styles/mobile/font-size-xxx-large.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 16px; --ebk-transaction-tag-chip-media-size: 24px; --ebk-transaction-tag-chip-height: 24px; + --ebk-transaction-picture-size: 160px; + --ebk-transaction-picture-add-icon-size: 48px; + --ebk-transaction-picture-remove-icon-size: 40px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 38px; --ebk-license-content-font-size: 19px; diff --git a/src/styles/mobile/font-size-xxxx-large.css b/src/styles/mobile/font-size-xxxx-large.css index c6bda399..a57b0537 100644 --- a/src/styles/mobile/font-size-xxxx-large.css +++ b/src/styles/mobile/font-size-xxxx-large.css @@ -78,6 +78,9 @@ --ebk-transaction-tag-chip-font-size: 18px; --ebk-transaction-tag-chip-media-size: 26px; --ebk-transaction-tag-chip-height: 26px; + --ebk-transaction-picture-size: 184px; + --ebk-transaction-picture-add-icon-size: 56px; + --ebk-transaction-picture-remove-icon-size: 48px; --ebk-login-page-title-font-size: 28px; --ebk-license-popup-title-font-size: 40px; --ebk-license-content-font-size: 21px; diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue index 9ddd59bc..72a1a412 100644 --- a/src/views/mobile/transactions/EditPage.vue +++ b/src/views/mobile/transactions/EditPage.vue @@ -1309,13 +1309,13 @@ export default { } .transaction-pictures { - height: 128px; + height: var(--ebk-transaction-picture-size); } .transaction-picture-container, .transaction-picture { - width: 128px; - height: 128px; + width: var(--ebk-transaction-picture-size); + height: var(--ebk-transaction-picture-size); } .transaction-picture .transaction-picture-control-backdrop { @@ -1329,13 +1329,13 @@ export default { .transaction-picture .picture-control-icon { z-index: 15; - font-size: 40px; + font-size: var(--ebk-transaction-picture-add-icon-size); } .transaction-picture .picture-remove-icon { background-color: transparent; color: rgba(255, 255, 255, 0.8); - font-size: 32px; + font-size: var(--ebk-transaction-picture-remove-icon-size); } .transaction-picture > img { @@ -1349,8 +1349,8 @@ export default { } .transaction-picture-add { - width: 126px; - height: 124px; + width: calc(var(--ebk-transaction-picture-size) - 2px); + height: calc(var(--ebk-transaction-picture-size) - 4px); border: 2px dashed #ccc; border-radius: 8px; }