фикс хоум индикатора для табов
This commit is contained in:
parent
e601e66d35
commit
3be7490875
24
src/App.vue
24
src/App.vue
@ -240,11 +240,11 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start; /* Выравниваем элементы по верхнему краю */
|
||||
text-decoration: none;
|
||||
color: #6c757d;
|
||||
transition: all 0.2s ease;
|
||||
padding: 4px 0;
|
||||
padding: 8px 0 0; /* Увеличиваем отступ сверху */
|
||||
position: relative;
|
||||
/* Не растягиваем сами иконки/текст, а только добавляем нижний отступ */
|
||||
padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 3);
|
||||
@ -254,16 +254,28 @@ body {
|
||||
:root {
|
||||
--nav-height: 60px;
|
||||
--header-height: 56px;
|
||||
--safe-area-bottom: 0px; /* Базовое значение */
|
||||
}
|
||||
|
||||
/* Учет Safe Area на устройствах с вырезами (iPhone X и новее) */
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
/* Специальная поддержка для устройств с вырезом (iPhone X и новее) */
|
||||
@supports (padding: env(safe-area-inset-bottom)) {
|
||||
:root {
|
||||
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user