调整样式以考虑安全区域的上下内边距，优化布局和溢出处理

jxxghp · Jan 4, 2025 · f9f29cc · f9f29cc
1 parent 3bd63ab
commit f9f29cc
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 17 deletions.
diff --git a/public/loader.css b/public/loader.css
@@ -5,7 +5,7 @@ body {
 html {
   overflow: hidden auto;
   background: var(--initial-loader-bg, #fff);
-  min-block-size: calc(100% + env(safe-area-inset-top));
+  min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 #loading-bg {
@@ -82,4 +82,4 @@ html {
     opacity: 1;
     transform: rotate(1turn);
   }
-}
+}
diff --git a/src/@core/scss/pages/page-auth.scss b/src/@core/scss/pages/page-auth.scss
@@ -1,5 +1,5 @@
 .auth-wrapper {
-  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top));
+  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 .auth-footer-mask {

diff --git a/src/@core/scss/template/libs/full-calendar.scss b/src/@core/scss/template/libs/full-calendar.scss
@@ -92,8 +92,7 @@
   .fc-header-toolbar {
     flex-wrap: wrap;
     margin: 1.25rem;
-    column-gap: 0.5rem;
-    row-gap: 1rem;
+    gap: 1rem 0.5rem;
   }
 
   .fc-toolbar-chunk {
@@ -238,7 +237,7 @@
         inline-size: 1.5625rem;
         margin-inline-end: 0.25rem;
 
-        @media (max-width: 1264px) {
+        @media (width <= 1264px) {
           display: block !important;
         }
 

diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss
@@ -5,7 +5,7 @@
 @use "@configured-variables" as variables;
 
 html {
-  min-height: calc(100% + env(safe-area-inset-top));
+  min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
   background: rgb(var(--v-theme-background));
   overflow-y: overlay;
 }

diff --git a/src/@layouts/styles/_global.scss b/src/@layouts/styles/_global.scss
@@ -7,5 +7,5 @@
 
 html {
   box-sizing: border-box;
-  min-height: calc(100% + env(safe-area-inset-top))
+  min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom))
 }
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
@@ -14,6 +14,8 @@ import ProgressDialog from '../dialog/ProgressDialog.vue'
 
 // 显示器宽度
 const display = useDisplay()
+// APP
+const appMode = inject('pwaMode') && display.mdAndDown.value
 
 // 输入参数
 const props = defineProps({
@@ -507,7 +509,7 @@ watch(
         <VCardText class="min-h-40">
           <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
         </VCardText>
-        <VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" />
+        <VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" :class="{ 'mb-10': appMode }" />
       </VCard>
     </VDialog>
 

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -3,6 +3,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html.v-overlay-scroll-blocked {
+  position: relative;
+}
+
 #nprogress .bar {
   background: rgb(var(--v-theme-primary)) !important;
   inset-block-start: env(safe-area-inset-top) !important;
@@ -23,18 +27,12 @@
   margin-block-start: env(safe-area-inset-top);
 }
 
-.v-overlay-container {
-  min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
-  overflow-y: overlay;
-}
-
 .v-dialog > .v-overlay__content {
   margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
 }
 
-.v-dialog--fullscreen > .v-overlay__content{
-  margin-block-start: env(safe-area-inset-top);
-  padding-block-end: env(safe-area-inset-bottom);
+.v-dialog--fullscreen > .v-overlay__content > .v-card {
+  padding-block-end: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 /* router view transition fade-slide */