fix 全屏弹窗背景

This commit is contained in:
jxxghp
2025-07-10 21:06:54 +08:00
parent 0f64ea1403
commit bc1849f0a0
3 changed files with 15 additions and 10 deletions

View File

@@ -228,8 +228,13 @@ h6,
// 👉 Overlay
.v-overlay__scrim,
.v-navigation-drawer__scrim {
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
opacity: 1 !important;
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
opacity: 1;
}
// 透明主题下全屏弹窗的overlay背景透明度调整
html[data-theme="transparent"] .v-dialog--fullscreen .v-overlay__scrim {
background: rgba(var(--v-overlay-scrim-background), 0.3);
}
// 👉 VMessages
@@ -257,6 +262,11 @@ h6,
background-color: rgb(var(--v-theme-surface));
}
// 透明主题下全屏弹窗背景透明
html[data-theme="transparent"] .v-dialog--fullscreen {
background-color: transparent !important;
}
// For dialog card title
.v-card-item + .v-card-text {
padding-block-start: 0 !important;

View File

@@ -253,7 +253,7 @@ onUnmounted(() => {
<div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
</div>
<!-- 页面内容 -->
<VApp :class="{ 'transparent-app': isTransparentTheme }">
<VApp>
<RouterView />
<!-- PWA安装提示 -->
<PWAInstallPrompt />

View File

@@ -318,9 +318,8 @@ body {
box-shadow: none !important;
}
// 透明主题特殊样式
.transparent-app {
// 透明主题下的弹出窗口样式
html[data-theme="transparent"] {
// 先将所有全局组件定义放在前面避免CSS优先级问题
.v-application, .v-layout, .v-main, .layout-page-content {
background: transparent;
@@ -409,10 +408,6 @@ body {
background-color: rgba(var(--v-theme-surface), 0);
}
}
// 透明主题下的弹出窗口样式
html[data-theme="transparent"] {
.v-overlay__content {
border-radius: 12px !important;
backdrop-filter: blur(10px) !important;