233 lines
7.1 KiB
Vue
233 lines
7.1 KiB
Vue
<template>
|
|
<UiContainer class="space-25-75">
|
|
<h2 class="h2-bold-bounded">
|
|
<span
|
|
v-for="(item, index) in component.front_section_lang[0].data.main_title"
|
|
:key="index"
|
|
:class="[
|
|
item.highlight
|
|
? 'text-accent-green-light dark:text-accent-green-dark'
|
|
: '',
|
|
'inline',
|
|
]"
|
|
>
|
|
{{ item.text }}
|
|
<span
|
|
v-if="
|
|
index !== component.front_section_lang[0].data.main_title.length - 1
|
|
"
|
|
/>
|
|
</span>
|
|
</h2>
|
|
|
|
<div class="space-25-55-75">
|
|
<p>{{ component.front_section_lang[0].data.main_description }}</p>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.front_section_lang[0].data.section_title }}
|
|
</h4>
|
|
</div>
|
|
|
|
<!-- products -->
|
|
<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',
|
|
]"
|
|
>
|
|
<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="`/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>
|
|
</div>
|
|
</div>
|
|
|
|
<UiButtonArrow
|
|
:arrow="true"
|
|
class="mx-auto"
|
|
type="fill"
|
|
@click="menuStore.navigateToShop"
|
|
>
|
|
{{ $t("eshop") }}
|
|
</UiButtonArrow>
|
|
</div>
|
|
|
|
<!-- calculator-block -->
|
|
<div
|
|
class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55"
|
|
>
|
|
<div class="flex flex-col space-y-[55px] sm:justify-between">
|
|
<div class="space-25-55">
|
|
<p>{{ component.front_section_lang[0].data.section_description }}</p>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.front_section_lang[0].data.info_title }}
|
|
</h4>
|
|
<p>{{ component.front_section_lang[0].data.info_description }}</p>
|
|
</div>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.front_section_lang[0].data.cta_title }}
|
|
</h4>
|
|
</div>
|
|
|
|
<!-- calculator -->
|
|
<div
|
|
class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
|
|
>
|
|
<h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
|
|
{{ component.front_section_lang[0].data.calculator_title }}
|
|
</h2>
|
|
<div class="mb-14 flex flex-col gap-8 sm:gap-14">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex justify-between">
|
|
<p>{{ $t("monthly_savings") }}</p>
|
|
<p
|
|
class="text-accent-green-light dark:text-accent-green-dark font-bold"
|
|
>
|
|
{{ store.monthlySavings }}
|
|
{{ menuStore.selectedCurrency?.sign }}
|
|
</p>
|
|
</div>
|
|
<input
|
|
v-model="store.monthlySavings"
|
|
type="range"
|
|
max="600"
|
|
:min="store.minValue"
|
|
class="w-full accent-button cursor-pointer"
|
|
@mouseup="store.getCalculator()"
|
|
@touchend="store.getCalculator()"
|
|
>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex justify-between">
|
|
<p>{{ $t("storage_period_years") }}</p>
|
|
<p
|
|
class="text-accent-green-light dark:text-accent-green-dark font-bold"
|
|
>
|
|
{{ store.storagePeriod }}
|
|
</p>
|
|
</div>
|
|
<input
|
|
v-model="store.storagePeriod"
|
|
type="range"
|
|
max="20"
|
|
class="w-full accent-button cursor-pointer"
|
|
@mouseup="store.getCalculator()"
|
|
@touchend="store.getCalculator()"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm:items-center"
|
|
>
|
|
<div class="">
|
|
<p>{{ $t("expected_savings_value") }}</p>
|
|
<h2
|
|
class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
|
|
>
|
|
{{ menuStore.selectedCurrency?.sign }} {{ store.totalInvestment }}
|
|
</h2>
|
|
</div>
|
|
<UiButtonArrow :arrow="true"
|
|
type="fill"
|
|
class="mx-auto sm:m-0"
|
|
>
|
|
{{
|
|
component.front_section_lang[0].data.button
|
|
}}
|
|
</UiButtonArrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps<{
|
|
component: {
|
|
id: number
|
|
name: string
|
|
img: string[]
|
|
component_name: string
|
|
is_no_lang: boolean
|
|
page_name: string
|
|
front_section_lang: {
|
|
data: {
|
|
main_title: {
|
|
text: string
|
|
highlight: boolean
|
|
}[]
|
|
main_description: string
|
|
section_title: string
|
|
section_description: string
|
|
info_title: string
|
|
info_description: string
|
|
cta_title: string
|
|
calculator_title: string
|
|
button: string
|
|
}
|
|
id_front_section: number
|
|
id_lang: number
|
|
}[]
|
|
}
|
|
}>()
|
|
|
|
const store = useStore()
|
|
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 >= 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>
|