diff --git a/src/App.vue b/src/App.vue index b034314..f10e033 100644 --- a/src/App.vue +++ b/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); - } } /* Адаптивные настройки для различных устройств */