From 4c64f7a2c345ea20a5ea984c4aa888a06056e69e Mon Sep 17 00:00:00 2001 From: jxxghp Date: Mon, 25 Aug 2025 13:03:45 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20HTML=20=E7=BB=93=E6=9E=84?= =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=20CSS=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 705 ++++++++---------- .../scss/_default-layout-w-vertical-nav.scss | 3 +- src/@core/scss/_misc.scss | 2 +- src/@layouts/components/VerticalNavLayout.vue | 6 +- src/@layouts/styles/_default-layout.scss | 7 +- src/styles/common.scss | 14 +- 6 files changed, 337 insertions(+), 400 deletions(-) diff --git a/index.html b/index.html index bbbedd5f..9caa5eed 100644 --- a/index.html +++ b/index.html @@ -1,430 +1,369 @@ - - - MoviePilot - - - + "> - - + + MoviePilot + + + - - - - + + - - - + + + + - - - - + + + - - - - + + + + - - - - + + + + - - + + + + - - - - + + - - - - - - + + + + - - - - + + + + + + - - - - - + + + + - - - + + + + + - - + + + - - - + + - - - - + + + - - - - - - + + + + - - - + + + + + + - - - /* 添加加载背景消失动画 - 放大虚化效果 */ - .loading-complete { - filter: blur(15px); - opacity: 0; - transform: scale(1.2); + + + - 100% { - transform: rotate(1turn); - } - } - - @keyframes rotate-opacity { - 0% { - opacity: 0.1; - transform: rotate(0deg); - } - - 100% { - opacity: 1; - transform: rotate(1turn); - } - } - - - - - - - -
- +
+ + + diff --git a/src/@core/scss/_default-layout-w-vertical-nav.scss b/src/@core/scss/_default-layout-w-vertical-nav.scss index 873f82d5..2a0e13cb 100644 --- a/src/@core/scss/_default-layout-w-vertical-nav.scss +++ b/src/@core/scss/_default-layout-w-vertical-nav.scss @@ -48,8 +48,7 @@ $header: ".layout-navbar"; /* ℹ️ Ensure header styles are preserved when dialog is opened, but only if window was scrolled before dialog opened */ - html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed, - html.dialog-scroll-locked &.window-scrolled.layout-navbar-fixed { + html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed { #{$header} { padding-inline: 1rem; diff --git a/src/@core/scss/_misc.scss b/src/@core/scss/_misc.scss index c66f3a59..eff171d9 100644 --- a/src/@core/scss/_misc.scss +++ b/src/@core/scss/_misc.scss @@ -45,7 +45,7 @@ code { inset-block-start: 0; inset-inline: 0; pointer-events: none; - transition: all 0.3s ease-in-out; + transition: padding 0.3s ease-in-out; .v-theme--light & { background: rgba(var(--v-theme-surface), 0.6); diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue index eec98eba..3437dce0 100644 --- a/src/@layouts/components/VerticalNavLayout.vue +++ b/src/@layouts/components/VerticalNavLayout.vue @@ -23,9 +23,7 @@ export default defineComponent({ // 监听弹窗状态变化 const checkDialogState = () => { const wasDialogOpen = isDialogOpen.value - isDialogOpen.value = - document.documentElement.classList.contains('dialog-scroll-locked') || - document.documentElement.classList.contains('v-overlay-scroll-blocked') + isDialogOpen.value = document.documentElement.classList.contains('v-overlay-scroll-blocked') // 当弹窗刚打开时，记录当前的滚动状态 if (!wasDialogOpen && isDialogOpen.value) { @@ -121,7 +119,7 @@ export default defineComponent({ 'layout-navbar-fixed', mdAndDown.value && 'layout-overlay-nav', route.meta.layoutWrapperClasses, - (scrollDistance.value > 0 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled', + (scrollDistance.value > 5 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled', ], }, [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay], diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss index d15794a3..c8fa209a 100644 --- a/src/@layouts/styles/_default-layout.scss +++ b/src/@layouts/styles/_default-layout.scss @@ -6,8 +6,9 @@ html { background: rgb(var(--v-theme-background)); - min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom)); - overflow-y: overlay; + min-block-size: 100vh; + min-block-size: 100dvh; + overflow-y: hidden; } body { @@ -40,8 +41,8 @@ body, // TODO: Use grid gutter variable here; padding-block: 1.5rem; - padding-inline: 0.5rem; padding-block-start: calc(env(safe-area-inset-top) + 4.5rem); + padding-inline: 0.5rem; // display: flex;display diff --git a/src/styles/common.scss b/src/styles/common.scss index 9014a907..ccee94bf 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -3,15 +3,15 @@ @tailwind components; @tailwind utilities; - -@supports (-webkit-touch-callout: none) { - html.v-overlay-scroll-blocked { - position: inherit; - } +html.v-overlay-scroll-blocked { + position: static; } -body { - overscroll-behavior: none; +html.v-overlay-scroll-blocked body { + position: fixed; + overflow: hidden; + inset: 0; + inset-block-start: var(--v-body-scroll-y); } @mixin hide-scrollbar {