Align catalog detail page geometry
This commit is contained in:
Ruslan Bakiev
@@ -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,74 +800,72 @@ 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]">
|
||||
<table class="table bg-white">
|
||||
<thead>
|
||||
<tr class="text-[#587064]">
|
||||
<th>SKU</th>
|
||||
<th>Ширина</th>
|
||||
<th>Длина</th>
|
||||
<th>Толщина</th>
|
||||
<th>Втулка</th>
|
||||
<th>Цвет</th>
|
||||
<th>Надпись</th>
|
||||
<th>Остаток</th>
|
||||
<th class="text-right">Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`" class="align-middle">
|
||||
<td class="font-semibold text-[#163624]">{{ product.sku }}</td>
|
||||
<td>{{ product.widthMm ?? '—' }}</td>
|
||||
<td>{{ product.lengthM ?? '—' }}</td>
|
||||
<td>{{ product.thicknessMicron ?? '—' }}</td>
|
||||
<td>{{ product.sleeveBrand ?? '—' }}</td>
|
||||
<td>{{ product.colorTags.join(', ') || '—' }}</td>
|
||||
<td>{{ product.labelTags.join(', ') || '—' }}</td>
|
||||
<td>
|
||||
<div class="flex min-w-[180px] items-center gap-3">
|
||||
<span class="h-3 w-3 rounded-sm" :class="availabilityTone(product)" />
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-[#163624]">{{ availabilityLabel(product) }}</p>
|
||||
<p class="text-xs text-[#607569]">
|
||||
{{ totalAvailableQty(product) }}<span v-if="warehouseAvailability(product)"> · {{ warehouseAvailability(product) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto rounded-[24px] border border-[#edf4ef] bg-white">
|
||||
<table class="table bg-white">
|
||||
<thead>
|
||||
<tr class="text-[#587064]">
|
||||
<th>SKU</th>
|
||||
<th>Ширина</th>
|
||||
<th>Длина</th>
|
||||
<th>Толщина</th>
|
||||
<th>Втулка</th>
|
||||
<th>Цвет</th>
|
||||
<th>Надпись</th>
|
||||
<th>Остаток</th>
|
||||
<th class="text-right">Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`" class="align-middle">
|
||||
<td class="font-semibold text-[#163624]">{{ product.sku }}</td>
|
||||
<td>{{ product.widthMm ?? '—' }}</td>
|
||||
<td>{{ product.lengthM ?? '—' }}</td>
|
||||
<td>{{ product.thicknessMicron ?? '—' }}</td>
|
||||
<td>{{ product.sleeveBrand ?? '—' }}</td>
|
||||
<td>{{ product.colorTags.join(', ') || '—' }}</td>
|
||||
<td>{{ product.labelTags.join(', ') || '—' }}</td>
|
||||
<td>
|
||||
<div class="flex min-w-[180px] items-center gap-3">
|
||||
<span class="h-3 w-3 rounded-sm" :class="availabilityTone(product)" />
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-[#163624]">{{ availabilityLabel(product) }}</p>
|
||||
<p class="text-xs text-[#607569]">
|
||||
{{ totalAvailableQty(product) }}<span v-if="warehouseAvailability(product)"> · {{ warehouseAvailability(product) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<button
|
||||
v-if="getQuantity(product.id) === 0"
|
||||
class="btn h-10 rounded-full border-0 bg-[#139957] px-5 text-sm font-semibold text-white hover:bg-[#0d854a]"
|
||||
@click="incrementProduct(product)"
|
||||
>
|
||||
В корзину
|
||||
</button>
|
||||
<div v-else class="ml-auto flex w-32 items-center justify-between rounded-[20px] border border-[#dce9e1] bg-white px-2 py-2">
|
||||
<button
|
||||
v-if="getQuantity(product.id) === 0"
|
||||
class="btn h-10 rounded-full border-0 bg-[#139957] px-5 text-sm font-semibold text-white hover:bg-[#0d854a]"
|
||||
class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
|
||||
:disabled="getQuantity(product.id) === 0"
|
||||
@click="decrementProduct(product.id)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<span class="min-w-8 text-center text-sm font-semibold text-[#163624]">{{ getQuantity(product.id) }}</span>
|
||||
<button
|
||||
class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
|
||||
@click="incrementProduct(product)"
|
||||
>
|
||||
В корзину
|
||||
+
|
||||
</button>
|
||||
<div v-else class="ml-auto flex w-32 items-center justify-between rounded-[20px] border border-[#dce9e1] bg-white px-2 py-2">
|
||||
<button
|
||||
class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
|
||||
:disabled="getQuantity(product.id) === 0"
|
||||
@click="decrementProduct(product.id)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<span class="min-w-8 text-center text-sm font-semibold text-[#163624]">{{ getQuantity(product.id) }}</span>
|
||||
<button
|
||||
class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
|
||||
@click="incrementProduct(product)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user