yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix links

Browse Source
This commit is contained in:
Marek Goc
2025-07-04 12:26:32 +02:00
parent f80bc3e3ba
commit de4518367b
9 changed files with 146 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/section/MainProducts.vue
View File

@ -1,49 +1,17 @@
<template>
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
<div
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<!-- product -->
<!-- product -->
<div class="space-25-55-75 flex flex-col items-center">
<div
v-for="(item, index) in productStore.productList"
:key="index"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<img
:src="`/api/public/file/${item.cover_picture_uuid}.webp`"
alt="pics"
class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
>
<div class="flex flex-col justify-between h-full">
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
<h3
class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
>
{{ item.name }}
</h3>
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
{{ item.tax_name }}
</p>
</div>
<div class="flex items-center justify-between">
<p class="text-accent-green-light text-bold-24">
{{ item.formatted_price }}
</p>
<button
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
@click="productStore.incrementCartItem(item.id)"
>
<i
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
/>
</button>
</div>
</div>
<Product v-for="product in productStore.productList" :key="product.id" :product="product" />
</div>
</div>
<div class="flex flex-col gap-6 md:flex-row items-center justify-between">
<h3
class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
@ -51,19 +19,18 @@
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
vás ochrání zítra
</h3>
<UiButtonArrow
type="fill"
:arrow="true"
@click="menuStore.navigateToShop"
>
{{ $t("eshop") }}
</UiButtonArrow>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<UiButtonArrow type="fill" :arrow="true">
{{ $t("eshop") }}
</UiButtonArrow>
</nuxt-link>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Product from './Product.vue'
defineProps<{
component: {
@ -83,8 +50,8 @@ const productStore = useProductStore()
async function updateItemCount() {
const width = window.innerWidth
if (width >= 1800) itemCount.value = 5
else if (width >= 1200) itemCount.value = 4
else if (width >= 768) itemCount.value = 3
else if (width >= 1600) itemCount.value = 4
else if (width >= 1200) itemCount.value = 3
else if (width >= 640) itemCount.value = 2
else itemCount.value = 1
}