timi/timi-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix iOS t-navbar style

Browse Source
This commit is contained in:
Timi
2026-04-14 14:38:48 +08:00
parent 631122c79b
commit 42efa2b370
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PageTransition.vue
View File

@@ -102,8 +102,8 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
min-height: 100%;
position: relative; position: relative;
min-height: 100%;
overflow-x: hidden; overflow-x: hidden;
.pages { .pages {

17
src/layout/MainLayout.vue
View File

@@ -184,6 +184,7 @@ const contentHeight = computed(() => {
.main-layout { .main-layout {
--app-nav-offset: v-bind(topPadding); --app-nav-offset: v-bind(topPadding);
--safe-top: env(safe-area-inset-top, 0px); --safe-top: env(safe-area-inset-top, 0px);
box-sizing: border-box; box-sizing: border-box;
isolation: isolate; isolation: isolate;
position: relative; position: relative;
@@ -192,6 +193,8 @@ const contentHeight = computed(() => {
transition: padding-bottom .24s ease; transition: padding-bottom .24s ease;
.nav-bar { .nav-bar {
--td-navbar-padding-top: var(--safe-top);
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@@ -199,11 +202,8 @@ const contentHeight = computed(() => {
position: fixed; position: fixed;
:deep(.t-navbar) { :deep(.t-navbar) {
z-index: 1;
position: relative;
}
:deep(.t-navbar__content) { &__content {
color: var(--tui-black, #000); color: var(--tui-black, #000);
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1);
background: rgba(250, 250, 250, .8); background: rgba(250, 250, 250, .8);
@@ -211,6 +211,13 @@ const contentHeight = computed(() => {
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
} }
&__left,
&__right {
top: var(----td-navbar-padding-top);
height: var(--td-navbar-height, 48px);
}
}
.nav-extra { .nav-extra {
gap: .35rem; gap: .35rem;
display: inline-flex; display: inline-flex;
@@ -237,9 +244,9 @@ const contentHeight = computed(() => {
} }
.tab-bar { .tab-bar {
bottom: 1rem;
left: 1rem; left: 1rem;
right: 1rem; right: 1rem;
bottom: 1rem;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
opacity: 1; opacity: 1;