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

additions to product page

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-23 15:54:55 +02:00
parent 77a490a94d
commit 7d0a449a1e
13 changed files with 387 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/section/main-page/MainProducts.vue
View File

@ -1,27 +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',
]"
>
<div :class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]">
<!-- product -->
<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"
>
<img
:src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
alt="pics"
class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
/>
<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">
<img :src="`https://www.yourgold.cz/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"
>
<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">
@ -33,24 +23,19 @@
{{ 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"
>
<i
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
></i>
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">
<i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
</button>
</div>
</div>
</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%]"
>
<h3 class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]">
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
vás ochrání zítra
</h3>
<UiButtonArrow type="fill" :arrow="true">E-shop</UiButtonArrow>
<UiButtonArrow @click="menuStore.navigateToShop" type="fill" :arrow="true">{{ $t('eshop') }}</UiButtonArrow>
</div>
</UiContainer>
</template>
@ -72,6 +57,7 @@ type Component = {
];
};
const menuStore = useMenuStore()
const itemCount = ref(4);
const productStore = useProductStore();