login/registration/reset pages
This commit is contained in:
@ -1,20 +1,14 @@
|
||||
<template>
|
||||
<UiContainer class="space-25-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
<span
|
||||
v-for="(item, index) in component.section_lang_data.main_title"
|
||||
:key="index"
|
||||
:class="[
|
||||
item.highlight
|
||||
? 'text-accent-green-light dark:text-accent-green-dark'
|
||||
: '',
|
||||
'inline',
|
||||
]"
|
||||
>
|
||||
<span v-for="(item, index) in component.section_lang_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.section_lang_data.main_title.length - 1"
|
||||
>
|
||||
<span v-if="index !== component.section_lang_data.main_title.length - 1">
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
@ -28,27 +22,17 @@
|
||||
|
||||
<!-- 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="`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="[
|
||||
'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="`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"
|
||||
>
|
||||
<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">
|
||||
@ -60,26 +44,19 @@
|
||||
{{ 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>
|
||||
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>
|
||||
|
||||
<UiButtonArrow :arrow="true" class="mx-auto" type="fill"
|
||||
>E-shop</UiButtonArrow
|
||||
>
|
||||
<UiButtonArrow :arrow="true" class="mx-auto" type="fill">E-shop</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 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>
|
||||
@ -94,9 +71,7 @@
|
||||
</div>
|
||||
|
||||
<!-- calculator -->
|
||||
<div
|
||||
class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
|
||||
>
|
||||
<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.section_lang_data.calculator_title }}
|
||||
</h2>
|
||||
@ -104,49 +79,30 @@
|
||||
<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 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"
|
||||
class="w-full accent-button cursor-pointer"
|
||||
@mouseup="store.getCalculator()"
|
||||
@touchend="store.getCalculator()"
|
||||
/>
|
||||
<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") }}</p>
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-bold"
|
||||
>
|
||||
<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()"
|
||||
/>
|
||||
<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="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"
|
||||
>
|
||||
€ {{ store.totalInvestment }}
|
||||
<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">{{
|
||||
@ -183,6 +139,7 @@ type Component = {
|
||||
};
|
||||
|
||||
const store = useStore();
|
||||
const menuStore = useMenuStore();
|
||||
|
||||
const itemCount = ref(4);
|
||||
const productStore = useProductStore();
|
||||
|
||||
Reference in New Issue
Block a user