NetsPro/Reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

фикс хоум индикатора для табов

Browse Source
This commit is contained in:
Professional 2025-05-23 20:31:21 +07:00
parent e601e66d35
commit 3be7490875
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@ -240,11 +240,11 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start; /* Выравниваем элементы по верхнему краю */
text-decoration: none; text-decoration: none;
color: #6c757d; color: #6c757d;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 4px 0; padding: 8px 0 0; /* Увеличиваем отступ сверху */
position: relative; position: relative;
/* Не растягиваем сами иконки/текст, а только добавляем нижний отступ */ /* Не растягиваем сами иконки/текст, а только добавляем нижний отступ */
padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 3); padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 3);
@ -254,16 +254,28 @@ body {
:root { :root {
--nav-height: 60px; --nav-height: 60px;
--header-height: 56px; --header-height: 56px;
--safe-area-bottom: 0px; /* Базовое значение */
}
/* Специальная поддержка для устройств с вырезом (iPhone X и новее) */
@supports (padding: env(safe-area-inset-bottom)) {
:root {
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
} }
/* Учет Safe Area на устройствах с вырезами (iPhone X и новее) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.mobile-nav { .mobile-nav {
height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); height: calc(var(--nav-height) + var(--safe-area-bottom));
padding-bottom: var(--safe-area-bottom);
/* Перемещаем содержимое вверх, чтобы оно не перекрывалось home indicator */
padding-top: 5px;
} }
.app-content { .app-content {
height: calc(100% - var(--nav-height) - env(safe-area-inset-bottom, 0px)); height: calc(100% - var(--nav-height) - var(--safe-area-bottom));
}
.nav-item {
padding-bottom: var(--safe-area-bottom);
} }
} }