фикс
This commit is contained in:
parent
3be7490875
commit
dee05f4956
26
src/App.vue
26
src/App.vue
@ -232,7 +232,6 @@ body {
|
||||
background: white;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px); /* Используем env напрямую для поддержки iOS */
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@ -240,21 +239,19 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* Выравниваем элементы по верхнему краю */
|
||||
justify-content: center; /* Центрируем содержимое по вертикали */
|
||||
text-decoration: none;
|
||||
color: #6c757d;
|
||||
transition: all 0.2s ease;
|
||||
padding: 8px 0 0; /* Увеличиваем отступ сверху */
|
||||
padding: 4px 0;
|
||||
position: relative;
|
||||
/* Не растягиваем сами иконки/текст, а только добавляем нижний отступ */
|
||||
padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 3);
|
||||
}
|
||||
|
||||
/* CSS переменные для динамической настройки */
|
||||
:root {
|
||||
--nav-height: 60px;
|
||||
--header-height: 56px;
|
||||
--safe-area-bottom: 0px; /* Базовое значение */
|
||||
--safe-area-bottom: 0px;
|
||||
}
|
||||
|
||||
/* Специальная поддержка для устройств с вырезом (iPhone X и новее) */
|
||||
@ -263,20 +260,23 @@ body {
|
||||
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
/* Новый подход: делаем навбар выше и поднимаем содержимое вверх */
|
||||
.mobile-nav {
|
||||
height: calc(var(--nav-height) + var(--safe-area-bottom));
|
||||
padding-bottom: var(--safe-area-bottom);
|
||||
/* Перемещаем содержимое вверх, чтобы оно не перекрывалось home indicator */
|
||||
padding-top: 5px;
|
||||
padding-bottom: var(--safe-area-bottom); /* Добавляем отступ снизу */
|
||||
}
|
||||
|
||||
/* Контейнер для выравнивания элементов навигации */
|
||||
.nav-item {
|
||||
/* Оставляем центрирование, но элементы будут в верхней части увеличенного навбара */
|
||||
transform: translateY(-10px); /* Поднимаем элементы повыше от home indicator */
|
||||
justify-content: flex-start;
|
||||
padding-top: 10px; /* Увеличиваем верхний отступ */
|
||||
}
|
||||
|
||||
.app-content {
|
||||
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