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

invest page

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-06 15:50:06 +02:00
parent c7d71ddb21
commit 3d91d7f1bb
16 changed files with 331 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/section/investment-page/InvestmentZone.vue
View File

@ -1,5 +1,5 @@
<template>
<UiContainer class="space-y-[25px] sm:space-y-[75px]">
<UiContainer class="space-25-75">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.main_title"
@ -37,7 +37,7 @@
<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"
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`"
@ -73,9 +73,13 @@
<UiButtonArrow class="mx-auto" type="fill">E-shop</UiButtonArrow>
</div>
<div class="flex items-stretch gap-2">
<div class="flex flex-col justify-between">
<div class="space-y-[55px]">
<!-- 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.section_lang_data.section_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.info_title }}
@ -86,30 +90,64 @@
{{ component.section_lang_data.cta_title }}
</h4>
</div>
<!-- calculator -->
<div
class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
>
<h2 class="h2-bold-bounded mb-[80px]">
<h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
{{ component.section_lang_data.calculator_title }}
</h2>
<div class="mb-[44px]">
<div class="flex justify-between">
<p>{{ $t("monthly_savings") }}</p>
<p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
<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 }}
</p>
</div>
<input
v-model="store.monthlySavings"
type="range"
max="600"
class="w-full accent-button cursor-pointer"
@mouseup="store.getCalculator()"
@touchend="store.getCalculator()"
/>
</div>
<div class="flex justify-between">
<p>{{ $t("storage_period") }}</p>
<p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
<div class="flex flex-col gap-4">
<div class="flex justify-between">
<p>{{ $t("storage_period") }}</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 justify-between items-center">
<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_value") }}</p>
<h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
39 444,87 €
<h2
class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
>
€ {{ store.totalInvestment }}
</h2>
</div>
<UiButtonArrow type="fill">{{
<UiButtonArrow type="fill" class="mx-auto sm:m-0">{{
component.section_lang_data.button
}}</UiButtonArrow>
</div>
@ -142,6 +180,8 @@ type Component = {
};
};
const store = useStore();
const itemCount = ref(4);
const productStore = useProductStore();