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

add map/products

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-03 15:20:55 +02:00
parent 2ffd64da98
commit c9348dc092
17 changed files with 572 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,25 +2,36 @@
<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-center',
itemCount === 1 ? 'justify-center' : 'justify-between',
'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 in itemCount"
:key="item"
class="w-[200px] sm:w-[260px] md:w-[290px] py-[15px] px-[10px] sm:py-5 sm:px-[14px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
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-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
>
<img src="/pics.png" alt="pics" class="max-w-[150px]" />
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
<h3 class="text-[13px] sm:text-[16px] text-xl font-bold">
50g Zlatý slitek: PAMP Suisse
</h3>
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
Osvobozená sazba DPH PL
</p>
<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"
>
{{ 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 text-bold-24">€ 4,825.44</p>
<p class="text-accent-green 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"
>
@ -39,7 +50,7 @@
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
vás ochrání zítra
</h3>
<ButtonArrow type="fill">E-shop</ButtonArrow>
<UiButtonArrow type="fill">E-shop</UiButtonArrow>
</div>
</UiContainer>
</template>
@ -61,19 +72,27 @@ type Component = {
];
};
const itemCount = ref(1);
const itemCount = ref(4);
const productStore = useProductStore();
function updateItemCount() {
async function updateItemCount() {
const width = window.innerWidth;
if (width >= 1280) itemCount.value = 5;
if (width >= 1800) itemCount.value = 5;
else if (width >= 1200) itemCount.value = 4;
else if (width >= 768) itemCount.value = 3;
else if (width >= 640) itemCount.value = 2;
else itemCount.value = 1;
}
onMounted(() => {
updateItemCount();
watch(itemCount, async() => {
await productStore.getList(itemCount.value);
});
onMounted(async () => {
await updateItemCount();
window.addEventListener("resize", updateItemCount);
await productStore.getList(itemCount.value);
});
onBeforeUnmount(() => {