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

investment page/curency switcher

Browse Source
This commit is contained in:
Arina Yakovenko 2025-06-05 15:53:41 +02:00
parent a7c4ff51ca
commit c7d71ddb21
17 changed files with 515 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/main.css
View File

@ -18,7 +18,8 @@
--color-bg-block: #E8E7E0;
--color-accent-green: #004F3D;
--color-accent-green-light: #004F3D;
--color-accent-green-dark: #008567;
/* button */
--color-button: #9a7f62;
@ -33,19 +34,27 @@
}
.h2-bold-bounded {
@apply font-bounded text-[24px] leading-[80%] font-bold sm:text-[36px] md:text-[40px];
@apply font-bounded text-[24px] leading-[150%] md:leading-[120%] font-bold sm:text-[36px] md:text-[40px];
}
.h4-uppercase-bold-inter {
@apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
}
.text-bold-24 {
@apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
}
.text-inter {
@apply font-inter text-sm sm:text-lg leading-[150%];
}
.text-bold-24 {
@apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
.space-25-55-75 {
@apply space-y-[25px] sm:space-y-[55px] md:space-y-[75px]
}
.space-25-55 {
@apply space-y-[25px] sm:space-y-[55px]
}
}

125
components/CountryCurrencySelector.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<UCollapsible
class="flex flex-col gap-2 relative"
:ui="{
root: 'relative',
content:
'absolute z-50 w-auto ring-0 left-1/2 top-12 transform -translate-x-1/2 p-0 m-0 border-none',
}"
>
<UButton
color="neutral"
variant="subtle"
trailing-icon="i-lucide-chevron-down"
class="bg-bg-light dark:bg-bg-dark m-0 ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit text-text-light dark:text-text-dark"
block
@click="isOpen = !isOpen"
>
{{ selectedCountry }}/{{ selectedCurrency }}
</UButton>
<template #content v-if="isOpen" class="">
<div
class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark"
>
<div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
<div class="flex flex-col items-start gap-1">
<p>{{ $t("lang") }}</p>
<USelect
v-model="selectedCountry"
:items="menuStore.countryList"
class="w-32"
value-key="iso_code"
:ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark border border-button',
leading: 'p-0',
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
>
<template #leading="{ modelValue }">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
>
{{ modelValue }}
</div>
</template>
<template
#item="{ item }"
class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
>
<div class="flex items-center gap-2 cursor-pointer w-full">
<p class="text-base text-text-light dark:text-text-dark">
{{ item?.name }}
</p>
</div>
</template>
</USelect>
</div>
<div class="flex flex-col items-start gap-[6px]">
<p>{{ $t("currency") }}</p>
<USelect
v-model="selectedCurrency"
:items="menuStore.currencies"
class="w-32"
value-key="iso_code"
:ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark border border-button',
leading: 'p-0',
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
>
<template #leading="{ modelValue }">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
>
{{ modelValue }}
</div>
</template>
<template
#item="{ item }"
class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
>
<div class="flex items-center gap-2 cursor-pointer w-full">
<p class="text-base text-text-light dark:text-text-dark">
{{ item?.name }}
</p>
</div>
</template>
</USelect>
</div>
</div>
</div>
</template>
</UCollapsible>
</template>
<script setup lang="ts">
const isOpen = ref(false);
const menuStore = useMenuStore();
const selectedCountry = ref();
const selectedCurrency = ref();
watchEffect(() => {
if (
!selectedCountry.value &&
menuStore.countryList &&
menuStore.countryList.length > 0
) {
selectedCountry.value = menuStore.countryList[0].iso_code;
}
if (
!selectedCurrency.value &&
menuStore.currencies &&
menuStore.currencies.length > 0
) {
selectedCurrency.value = menuStore.currencies[0].iso_code;
}
});
</script>

71
components/CurrSelector.vue
View File

@ -1,71 +0,0 @@
<template>
<UCollapsible
v-model="isOpen"
class="flex flex-col gap-2"
:ui="{
content: 'absolute top-20',
}"
>
<UButton
color="neutral"
variant="subtle"
trailing-icon="i-lucide-chevron-down"
class="m-0 bg-bg-dark ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit"
block
@click="isOpen = !isOpen"
>
{{ selectedCountry }}/{{ selectedCurrency }}
</UButton>
<template #content>
<div class="flex flex-col">
<USelect
v-model="selectedCountry"
:items="menuStore.countryList"
class="w-48"
value-key="iso_code"
>
<template #leading="{ modelValue }">
<div class="flex items-center gap-2 text-xl font-medium uppercase">
{{ modelValue }}
</div>
</template>
<template #item="{ item }">
<div class="flex items-center gap-2 cursor-pointer w-full">
<p class="text-xl font-medium">{{ item?.name }}</p>
</div>
</template>
</USelect>
<USelect
v-model="selectedCurrency"
:items="menuStore.currencies"
class="w-48"
value-key="iso_code"
>
<template #leading="{ modelValue }">
<div class="flex items-center gap-2 text-xl font-medium uppercase">
{{ modelValue }}
</div>
</template>
<template #item="{ item }">
<div class="flex items-center gap-2 cursor-pointer w-full">
<p class="text-xl font-medium">{{ item?.name }}</p>
</div>
</template>
</USelect>
</div>
</template>
</UCollapsible>
</template>
<script setup lang="ts">
import { useI18n } from "#imports";
const isOpen = ref(false);
const menuStore = useMenuStore();
const selectedCountry = ref(menuStore.countryList[0].iso_code);
const selectedCurrency = ref(menuStore.currencies[0].iso_code);
</script>

2
components/FooterBlock.vue
View File

@ -11,7 +11,7 @@
>
<h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
<div
class="text-inter cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
v-for="(el, indexEl) in item.items"
:key="indexEl"
>

36
components/HeaderBlock.vue
View File

@ -30,11 +30,13 @@
<i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
</div>
<div class="flex">
<LangSwitcher />
<CurrSelector />
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<button
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter"
>
E-shop
</button>
@ -62,7 +64,10 @@
<i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
</div>
<div class="flex">
<LangSwitcher />
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<i
variant="subtle"
@ -92,7 +97,7 @@
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div class="text-inter leading-[70%] text-lg">
<div class="leading-[70%] text-lg">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
@ -164,7 +169,7 @@
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div class="text-inter leading-[70%] text-lg">
<div class="leading-[70%] text-lg">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
@ -184,13 +189,19 @@
</svg>
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
<p class="leading-[70%] text-lg">
{{ $t("change_language") }}
</p>
<LangSwitcher />
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
<p class="leading-[70%] text-lg">
{{ $t("change_currency_country") }}
</p>
<CountryCurrencySelector />
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
{{ $t("change_theme") }}
</p>
<ThemeSwitcher />
@ -243,7 +254,7 @@
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div class="text-inter leading-[70%] text-lg">
<div class="leading-[70%] text-lg">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
@ -263,13 +274,19 @@
</svg>
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
<p class="leading-[70%] text-lg">
{{ $t("change_language") }}
</p>
<LangSwitcher />
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
<p class="leading-[70%] text-lg">
{{ $t("change_currency_country") }}
</p>
<CountryCurrencySelector />
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
{{ $t("change_theme") }}
</p>
<ThemeSwitcher />
@ -282,6 +299,7 @@
</div>
</template>
<script lang="ts" setup>
import CountryCurrencySelector from "./CountryCurrencySelector.vue";
import LangSwitcher from "./LangSwitcher.vue";
const menuStore = useMenuStore();

10
components/LangSwitcher.vue
View File

@ -10,7 +10,7 @@
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0',
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 pr-6',
group: 'px-[5px] py-[10px]',
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
@ -28,7 +28,11 @@
:name="item.icon as string"
class="size-5 rounded-full border border-button/40"
/>
<p class="text-xl font-medium uppercase">{{ item.code }}</p>
<p
class="text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100"
>
{{ item.code }}
</p>
</div>
</template>
</USelect>
@ -39,6 +43,8 @@ import { useI18n } from "#imports";
const { locale, locales, setLocale } = useI18n();
const isOpen = ref(false);
const selectedLocaleCode = ref(locale.value);
const selectedIcon = ref(
locales.value.find((item) => item.code === locale.value)?.icon

6
components/MapBlock.vue
View File

@ -258,11 +258,11 @@ import { onMounted } from "vue";
import type { CountryList } from "~/types";
const mapStore = useMapStore();
const menuStore = useMenuStore();
const color = useColorMode();
onMounted(async () => {
// await mapStore.getCountList();
await mapStore.getCountries();
// await mapStore.getCountList()
const map = document.getElementById("europe_map");
if (!map) return;
@ -304,7 +304,7 @@ onMounted(async () => {
element.classList.forEach((className) => {
let cl = className.split("_");
if (cl.length == 3 && cl[2]) {
let cc = mapStore.countries?.find(
let cc = menuStore.countryList?.find(
(x: CountryList) => x.iso_code == cl[2].toLowerCase()
);
if (cc) {

91
components/section/investment-page/InvestmentMain.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<UiContainer class="space-y-[30px] xl:space-y-[55px]">
<div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
<div
class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
>
<h1 class="h1">
<span
v-for="(item, index) in component.section_lang_data.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.title.length - 1">
</span>
</span>
</h1>
<h4 class="h4-uppercase-bold-inter">
<span
v-for="(item, index) in component.section_lang_data.sub_title"
:key="index"
:class="{
'text-accent-green-light dark:text-accent-green-dark':
item.highlight,
}"
>
{{ item.text }}
</span>
</h4>
<p>{{ component.section_lang_data.description }}</p>
</div>
<div
class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
</div>
<div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
<div
class="w-full xl:max-w-[570px] h-[225px] block rounded-2xl"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div
class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
>
<p>{{ component.section_lang_data.description_second }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.sub_title_second }}
</h4>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: [
{
text: string;
highlight: boolean;
}
];
sub_title: [
{
text: string;
highlight: boolean;
}
];
description: string;
description_second: string;
sub_title_second: string;
};
};
</script>

43
components/section/investment-page/InvestmentWhy.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<UiContainer>
<div class="space-25-55-75 max-w-[1000px] mx-auto">
<h1 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.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.title.length - 1">
</span>
</span>
</h1>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.description }}
</h4>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: [
{
text: string;
highlight: boolean;
}
];
description: string;
};
};
</script>

169
components/section/investment-page/InvestmentZone.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<UiContainer class="space-y-[25px] sm:space-y-[75px]">
<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',
]"
>
{{ item.text }}
<span
v-if="index !== component.section_lang_data.main_title.length - 1"
>
</span>
</span>
</h2>
<div class="space-25-55-75">
<p>{{ component.section_lang_data.main_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_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-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-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"
>
<i
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
></i>
</button>
</div>
</div>
</div>
</div>
<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]">
<p>{{ component.section_lang_data.section_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.info_title }}
</h4>
<p>{{ component.section_lang_data.info_description }}</p>
</div>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.cta_title }}
</h4>
</div>
<div
class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
>
<h2 class="h2-bold-bounded mb-[80px]">
{{ 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>
<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>
</div>
<div class="flex justify-between 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>
</div>
<UiButtonArrow type="fill">{{
component.section_lang_data.button
}}</UiButtonArrow>
</div>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
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;
};
};
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>

10
components/section/main-page/MainBlocks.vue
View File

@ -1,6 +1,6 @@
<template>
<UiContainer
class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px] mb-[55px] sm:mb-[100px]"
class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]"
>
<div
class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
@ -11,7 +11,7 @@
<div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
<div class="space-y-[55px]">
<h2 class="h2-bold-bounded">{{ item.title }}</h2>
<p class="text-inter">{{ item.description }}</p>
<p>{{ item.description }}</p>
</div>
<h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
</div>
@ -19,7 +19,7 @@
<!-- sm/md -->
<div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
<h2 class="h2-bold-bounded">{{ item.title }}</h2>
<p class="text-inter">{{ item.description }}</p>
<p>{{ item.description }}</p>
<h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
</div>
@ -47,11 +47,11 @@
<div class="flex items-center gap-4 w-full justify-end">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-[2.8px] bg-button"></div>
<p class="text-sm sm:text-lg">Partners</p>
<p>Partners</p>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
<p class="text-sm sm:text-lg">Customers</p>
<p>Customers</p>
</div>
</div>
</div>

2
components/section/main-page/MainHero.vue
View File

@ -1,6 +1,6 @@
<template>
<UiContainer>
<div class="space-y-[30px] sm:space-y-[53px] mb-[55px] sm:mb-[100px]">
<div class="space-y-[30px] sm:space-y-[53px]">
<h1 class="h1">
{{ component.section_lang_data.title }}
</h1>

2
components/section/main-page/MainProducts.vue
View File

@ -29,7 +29,7 @@
</p>
</div>
<div class="flex items-center justify-between">
<p class="text-accent-green text-bold-24">
<p class="text-accent-green-light text-bold-24">
{{ item.formatted_price }}
</p>
<button

2
components/ui/ButtonArrow.vue
View File

@ -2,7 +2,7 @@
<div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
<button
:class="[
'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
'h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
type === 'fill'
? 'bg-button text-text-dark group-hover:bg-button-hover'
: 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',

7
layouts/default.vue
View File

@ -3,14 +3,9 @@
class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden"
>
<HeaderBlock />
<!-- <ImageBlock>
<div
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter"
>
<UiButtonArrow>Title</UiButtonArrow>
</div>
</ImageBlock> -->
<div class="flex-1 py-[25px] sm:py-[55px] md:py-[75px]">
<slot />
</div>
<FooterBlock />

32
pages/[id]/[slug].vue
View File

@ -1,24 +1,26 @@
<template>
<div>
<KeepAlive>
<component :is="component.componentInstance" v-for="component in componentsList" :key="component.name" :component="component.component" />
<component
:is="component.componentInstance"
v-for="component in componentsList"
:key="component.name"
:component="component.component"
/>
</KeepAlive>
</div>
</template>
</template>
<script setup>
import { useStore } from "@/stores/store";
const route = useRoute();
const store = useStore();
const menuStore = useMenuStore();
await store.getSections(route.params.id);
<script setup>
import { useStore } from "@/stores/store";
const route = useRoute();
const store = useStore();
const menuStore = useMenuStore();
await store.getSections(route.params.id);
onMounted(() => {
onMounted(() => {
menuStore.openMenu = false;
});
});
useHead(menuStore.headMeta);
useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id);
const componentsList = await store.getComponents(route.params.id);
</script>

28
stores/mapStore.ts
View File

@ -47,9 +47,6 @@ export const useMapStore = defineStore("mapStore", () => {
"se"
]);
const countryList = ref<CountryList[]>()
const countries = ref<CountryList[]>()
// async function getPartnersList() {
// try {
// const res = await fetch(
@ -94,36 +91,11 @@ export const useMapStore = defineStore("mapStore", () => {
// }
// }
async function getCountries() {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/countries`,
{
headers: {
"Content-Type": "application/json",
},
}
);
if (!res.ok) {
throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();
countries.value = data.ata
} catch (error) {
console.error("getList error:", error);
}
}
return {
partnersList,
customersList,
// countryList,
countries,
// getPartnersList,
// getCustomerList,
getCountries
};
});