fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align catalog detail page geometry

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-09 20:05:10 +07:00
parent e8ff766c24
commit 3b3959ced0
1 changed files with 67 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/catalog/CatalogConfigurator.vue
View File

@@ -626,11 +626,11 @@ function productDetailPath(group: ProductGroup) {
<section class="space-y-5">
<div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
<div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
<div v-else-if="selectedGroup" class="relative mx-auto max-w-[1380px] px-1 pb-10 sm:px-0">
<div v-else-if="selectedGroup" class="relative pb-10">
<NuxtLink
v-if="previousGroup"
:to="productDetailPath(previousGroup)"
class="absolute left-0 top-28 z-10 hidden w-44 -translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
class="absolute left-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
>
<img
:src="createProductCover(previousGroup.typeLabel, previousGroup.key)"
@@ -644,7 +644,7 @@ function productDetailPath(group: ProductGroup) {
<NuxtLink
v-if="nextGroup"
:to="productDetailPath(nextGroup)"
class="absolute right-0 top-28 z-10 hidden w-44 translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
class="absolute right-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
>
<img
:src="createProductCover(nextGroup.typeLabel, nextGroup.key)"
@@ -655,7 +655,7 @@ function productDetailPath(group: ProductGroup) {
<p class="mt-3 text-sm font-semibold leading-5 text-[#163624]">{{ nextGroup.typeLabel }}</p>
</NuxtLink>
<header class="mb-5 flex items-center gap-4 px-3 sm:px-6 xl:px-8">
<header class="mb-5 flex items-center gap-4">
<NuxtLink
to="/products"
class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-[#dce9e1] bg-white text-xl text-[#163624] shadow-[0_10px_24px_rgba(18,56,36,0.06)] transition hover:-translate-y-0.5"
@@ -669,7 +669,7 @@ function productDetailPath(group: ProductGroup) {
</div>
</header>
<div class="mb-5 grid gap-3 px-3 sm:px-6 2xl:hidden">
<div class="mb-5 grid gap-3 2xl:hidden">
<NuxtLink
v-if="previousGroup"
:to="productDetailPath(previousGroup)"
@@ -699,7 +699,7 @@ function productDetailPath(group: ProductGroup) {
</NuxtLink>
</div>
<div class="grid gap-5 px-3 sm:px-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.15fr)_320px] xl:px-8">
<div class="grid gap-5 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.15fr)_320px]">
<div class="space-y-3">
<div class="overflow-hidden rounded-[32px] border border-[#e6efe9] bg-white p-4 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
<img
@@ -765,7 +765,7 @@ function productDetailPath(group: ProductGroup) {
<aside class="self-start xl:sticky xl:top-24">
<div class="rounded-[30px] border border-[#e6efe9] bg-white p-5 shadow-[0_24px_48px_rgba(18,56,36,0.08)]">
<p class="mt-2 text-2xl font-bold leading-tight text-[#163624]">{{ articleLabel(selectedGroup) }}</p>
<p class="mt-1 text-lg font-medium leading-tight text-[#163624]">{{ articleLabel(selectedGroup) }}</p>
<button
v-if="selectedQty(selectedGroup) === 0"
@@ -800,11 +800,10 @@ function productDetailPath(group: ProductGroup) {
</aside>
</div>
<div class="mt-8 px-3 sm:px-6 xl:px-8">
<div class="rounded-[32px] border border-[#e6efe9] bg-white p-5 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
<p class="text-base font-semibold text-[#163624]">Доступные варианты</p>
<div class="mt-8">
<p class="mb-4 text-base font-semibold text-[#163624]">Доступные варианты</p>
<div class="mt-4 overflow-x-auto rounded-[24px] border border-[#edf4ef]">
<div class="overflow-x-auto rounded-[24px] border border-[#edf4ef] bg-white">
<table class="table bg-white">
<thead>
<tr class="text-[#587064]">
@@ -870,7 +869,6 @@ function productDetailPath(group: ProductGroup) {
</div>
</div>
</div>
</div>
<div v-else class="alert surface-card border-0">Такой тип товара не найден.</div>
</section>
</template>