69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
|
|
<!-- product -->
|
|
<div class="space-25-55-75 flex flex-col items-center">
|
|
<div :class="[
|
|
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
|
|
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
|
|
]">
|
|
<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%]">
|
|
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
|
|
vás ochrání zítra
|
|
</h3>
|
|
<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: {
|
|
id: number
|
|
name: string
|
|
img: string[]
|
|
component_name: string
|
|
is_no_lang: boolean
|
|
page_name: string
|
|
}
|
|
}>()
|
|
|
|
const menuStore = useMenuStore()
|
|
const itemCount = ref(4)
|
|
const productStore = useProductStore()
|
|
|
|
async function updateItemCount() {
|
|
const width = window.innerWidth
|
|
if (width >= 1800) itemCount.value = 5
|
|
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
|
|
}
|
|
|
|
watch(itemCount, async () => {
|
|
await productStore.getList(itemCount.value)
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await updateItemCount()
|
|
window.addEventListener('resize', updateItemCount)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', updateItemCount)
|
|
})
|
|
</script>
|