From 8e5ffa81a1435aafb6c495778b8e68e152dce912 Mon Sep 17 00:00:00 2001 From: jxxghp Date: Sun, 20 Apr 2025 09:11:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=EF=BC=8C?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=83=8C=E6=99=AF=E6=A8=A1=E7=B3=8A=E6=95=88?= =?UTF-8?q?=E6=9E=9C=E5=92=8C=E9=A2=9C=E8=89=B2=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=86=85=E8=BE=B9=E8=B7=9D=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=BC=BA=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=E5=92=8C=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@core/scss/base/placeholders/_misc.scss | 60 +++++++++++++++---- src/@layouts/components/VerticalNavLayout.vue | 3 +- src/@layouts/styles/_default-layout.scss | 3 +- src/@layouts/styles/_placeholders.scss | 2 +- src/App.vue | 4 +- src/styles/styles.scss | 15 +++-- src/views/setting/AccountSettingSystem.vue | 2 +- 7 files changed, 64 insertions(+), 25 deletions(-) diff --git a/src/@core/scss/base/placeholders/_misc.scss b/src/@core/scss/base/placeholders/_misc.scss index 6532e0ba..b61ebacc 100644 --- a/src/@core/scss/base/placeholders/_misc.scss +++ b/src/@core/scss/base/placeholders/_misc.scss @@ -3,7 +3,7 @@ // -webkit-backdrop-filter: blur(6px); // backdrop-filter: blur(6px); /* stylelint-enable */ - background-color: rgb(var(--v-theme-surface), 0); + background-color: transparent; position: relative; @@ -13,17 +13,57 @@ top: 0; left: 0; right: 0; - height: calc(100% + 5rem); + height: calc(env(safe-area-inset-top) + 5rem); pointer-events: none; z-index: -1; - background: linear-gradient( - to bottom, - rgba(var(--v-theme-background), 1) 0%, - rgba(var(--v-theme-background), 0.9) 25%, - rgba(var(--v-theme-background), 0.7) 50%, - rgba(var(--v-theme-background), 0.3) 75%, - rgba(var(--v-theme-background), 0.0) 100% - ); + + .v-theme--light & { + background: linear-gradient( + to bottom, + rgba(var(--v-theme-background), 0.9) 0%, + rgba(var(--v-theme-background), 0.7) 20%, + rgba(var(--v-theme-background), 0.5) 40%, + rgba(var(--v-theme-background), 0.3) 60%, + rgba(var(--v-theme-background), 0.1) 80%, + rgba(var(--v-theme-background), 0.0) 100% + ); + } + + .v-theme--dark & { + background: linear-gradient( + to bottom, + rgba(var(--v-theme-background), 1) 0%, + rgba(var(--v-theme-background), 0.8) 20%, + rgba(var(--v-theme-background), 0.6) 40%, + rgba(var(--v-theme-background), 0.4) 60%, + rgba(var(--v-theme-background), 0.2) 80%, + rgba(var(--v-theme-background), 0.0) 100% + ); + } + + .v-theme--purple & { + background: linear-gradient( + to bottom, + rgba(var(--v-theme-background), 1) 0%, + rgba(var(--v-theme-background), 0.8) 20%, + rgba(var(--v-theme-background), 0.6) 40%, + rgba(var(--v-theme-background), 0.4) 60%, + rgba(var(--v-theme-background), 0.2) 80%, + rgba(var(--v-theme-background), 0.0) 100% + ); + } + + .v-theme--transparent & { + background: linear-gradient( + to bottom, + rgba(11, 11, 11, 0.8) 0%, + rgba(11, 11, 11, 0.7) 20%, + rgba(11, 11, 11, 0.6) 40%, + rgba(11, 11, 11, 0.3) 60%, + rgba(11, 11, 11, 0.1) 80%, + rgba(11, 11, 11, 0.0) 100% + ); + } } box-shadow: none; } diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue index 0d15fc4d..1846cc0b 100644 --- a/src/@layouts/components/VerticalNavLayout.vue +++ b/src/@layouts/components/VerticalNavLayout.vue @@ -105,7 +105,6 @@ export default defineComponent({ position: relative; z-index: 1; margin-block-start: 0; - padding-block-start: 0; } .layout-wrapper.layout-nav-type-vertical { @@ -178,7 +177,7 @@ export default defineComponent({ } &:not(.layout-overlay-nav) .layout-content-wrapper { - padding-inline-start: calc(variables.$layout-vertical-nav-width + 0.5rem); + padding-inline-start: calc(variables.$layout-vertical-nav-width); } // Adjust right column pl when vertical nav is collapsed diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss index f81fdb32..d15794a3 100644 --- a/src/@layouts/styles/_default-layout.scss +++ b/src/@layouts/styles/_default-layout.scss @@ -40,7 +40,8 @@ body, // TODO: Use grid gutter variable here; padding-block: 1.5rem; - padding-block-start: calc(env(safe-area-inset-top) + 4.25rem); + padding-inline: 0.5rem; + padding-block-start: calc(env(safe-area-inset-top) + 4.5rem); // display: flex;display diff --git a/src/@layouts/styles/_placeholders.scss b/src/@layouts/styles/_placeholders.scss index a41038dc..f92ac4d8 100644 --- a/src/@layouts/styles/_placeholders.scss +++ b/src/@layouts/styles/_placeholders.scss @@ -4,7 +4,7 @@ %boxed-content { @at-root #{&}-spacing { // TODO: Use grid gutter variable here - padding-inline: 0.5rem; + // padding-inline: 0.5rem; } inline-size: 100%; diff --git a/src/App.vue b/src/App.vue index 9e39fd63..24713329 100644 --- a/src/App.vue +++ b/src/App.vue @@ -206,8 +206,8 @@ onUnmounted(() => { .global-blur-layer { position: absolute; z-index: 1; - backdrop-filter: blur(10px); - background-color: rgba(0, 0, 0, 30%); + backdrop-filter: blur(16px); + background-color: rgba(128, 128, 128, 30%); block-size: 100%; inline-size: 100%; inset-block-start: 0; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 0eddb198..e2b2f354 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -326,14 +326,9 @@ html.v-overlay-scroll-blocked { // 侧边导航栏 .layout-vertical-nav { - backdrop-filter: blur(10px); - background-color: rgba(var(--v-theme-surface), 0.5); - border-inline-end: 1px solid rgba(255, 255, 255, 10%); - } - - // 导航栏 - .navbar-blur::after { - background: transparent; + backdrop-filter: blur(16px); + background-color: rgba(var(--v-theme-surface), 0.2); + border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05); } // 列表 @@ -411,5 +406,9 @@ html[data-theme="transparent"] { backdrop-filter: blur(10px); background-color: rgb(var(--v-theme-surface), 0.5) !important; } + + .v-table thead { + background-color: rgb(var(--v-theme-surface), 0.5) !important; + } } } diff --git a/src/views/setting/AccountSettingSystem.vue b/src/views/setting/AccountSettingSystem.vue index fcc2a63e..c29555f3 100644 --- a/src/views/setting/AccountSettingSystem.vue +++ b/src/views/setting/AccountSettingSystem.vue @@ -369,7 +369,7 @@ onDeactivated(() => {