optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align landing header capsule geometry

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 17:52:53 +07:00
parent 10b72a19e4
commit a962d04ed1
2 changed files with 5 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/navigation/MainNavigation.vue
View File

@@ -6,7 +6,6 @@
<div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4"> <div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
<div <div
class="flex items-center gap-2" class="flex items-center gap-2"
:class="isHeroLayout ? 'items-start' : ''"
:style="rowStyle" :style="rowStyle"
> >
<!-- Left: Logo + AI button + Nav links (top aligned) --> <!-- Left: Logo + AI button + Nav links (top aligned) -->
@@ -98,10 +97,7 @@
<!-- Center: Search input OR Client Area tabs (vertically centered) --> <!-- Center: Search input OR Client Area tabs (vertically centered) -->
<div <div
class="relative flex-1 flex flex-col items-center mx-auto gap-2 transition-all" class="relative mx-auto flex flex-1 flex-col items-center justify-center gap-2 max-w-2xl"
:class="[
isHeroLayout ? 'w-full max-w-none justify-start' : 'max-w-2xl justify-center'
]"
> >
<!-- Client Area tabs --> <!-- Client Area tabs -->
<template v-if="isClientArea"> <template v-if="isClientArea">
@@ -525,24 +521,16 @@ const getTokenIcon = (type: string) => {
} }
const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea) const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
const topRowHeight = 100
const LANDING_CAPSULE_TOP_START = 500 const LANDING_CAPSULE_TOP_START = 500
const LANDING_CAPSULE_TOP_STOP = 2 const LANDING_CAPSULE_TOP_STOP = 0
const rowStyle = computed(() => { const rowStyle = computed(() => ({ height: `${props.height}px` }))
if (isHeroLayout.value) {
return { height: `${topRowHeight}px` }
}
return { height: `${props.height}px` }
})
const isFloatingHomeCapsule = computed(() => isHeroLayout.value) const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
const landingCapsuleTopStart = computed(() => { const landingCapsuleTopStart = computed(() => {
if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
const base = props.heroBaseHeight || 0 return LANDING_CAPSULE_TOP_START
if (!base) return LANDING_CAPSULE_TOP_START
return Math.max(280, Math.min(LANDING_CAPSULE_TOP_START, base - 180))
}) })
const landingCapsuleTop = computed(() => { const landingCapsuleTop = computed(() => {
@@ -553,7 +541,7 @@ const landingCapsuleTop = computed(() => {
const searchCapsuleClass = computed(() => { const searchCapsuleClass = computed(() => {
if (!isFloatingHomeCapsule.value) return 'w-full' if (!isFloatingHomeCapsule.value) return 'w-full'
return 'w-full lg:absolute lg:left-1/2 lg:z-20 lg:w-[min(1120px,calc(100%-1.5rem))] lg:-translate-x-1/2 transition-[top] duration-200 ease-out' return 'w-full lg:fixed lg:left-1/2 lg:z-[55] lg:w-[min(1120px,calc(100vw-1.5rem))] lg:-translate-x-1/2'
}) })
const searchCapsuleStyle = computed(() => { const searchCapsuleStyle = computed(() => {

3
app/pages/index.vue
View File

@@ -9,9 +9,6 @@
<h1 class="text-4xl font-black leading-tight md:text-6xl"> <h1 class="text-4xl font-black leading-tight md:text-6xl">
{{ $t('hero.tagline', 'Торговля — это просто') }} {{ $t('hero.tagline', 'Торговля — это просто') }}
</h1> </h1>
<p class="mx-auto mt-4 max-w-3xl text-base text-white/80 md:text-lg">
{{ $t('hero.subtitle', 'Сравнивайте предложения, находите поставщиков и управляйте закупками в одном интерфейсе.') }}
</p>
</div> </div>
</div> </div>
</section> </section>