100 lines
3.1 KiB
Vue
100 lines
3.1 KiB
Vue
<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 -->
|
|
<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-button-white 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"
|
|
>
|
|
{{ 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">
|
|
{{ 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>
|
|
</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%]"
|
|
>
|
|
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
|
|
vás ochrání zítra
|
|
</h3>
|
|
<UiButtonArrow type="fill">E-shop</UiButtonArrow>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
|
|
defineProps<{ component: Component }>();
|
|
type Component = {
|
|
image_collection: string;
|
|
section_id: string;
|
|
section_img: string;
|
|
section_lang_data: [
|
|
{
|
|
title: string;
|
|
description: string;
|
|
sub_title: string;
|
|
}
|
|
];
|
|
};
|
|
|
|
const itemCount = ref(4);
|
|
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 >= 640) itemCount.value = 2;
|
|
else itemCount.value = 1;
|
|
}
|
|
|
|
watch(itemCount, async () => {
|
|
await productStore.getList(itemCount.value);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await updateItemCount();
|
|
window.addEventListener("resize", updateItemCount);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", updateItemCount);
|
|
});
|
|
</script>
|