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:33:46 +07:00
parent 3be7490875
commit dee05f4956
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.vue
View File

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