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

add map/products

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-03 15:20:55 +02:00
parent 2ffd64da98
commit c9348dc092
17 changed files with 572 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,16 +34,31 @@
<div
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
>
<ButtonArrow>{{ item.title }}</ButtonArrow>
<UiButtonArrow>{{ item.title }}</UiButtonArrow>
</div>
</div>
<UiButtonArrow class="sm:hidden mx-auto">{{ item.title }}</UiButtonArrow>
</div>
<!-- Map block with same layout rules -->
<div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
<h1>Jsme tu pro vás napříč Evropou</h1>
<MapBlock />
<div class="flex items-center gap-4 w-full justify-end">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
<p>Partners</p>
</div>
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
<p>Customers</p>
</div>
</div>
<ButtonArrow class="sm:hidden mx-auto">{{ item.title }}</ButtonArrow>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
@ -56,4 +71,33 @@ type Component = {
}
];
};
interface Partner {
code: string;
country_iso: string;
region_iso: string;
first_name: string;
last_name: string;
job_position: string;
commissioning_entity_name: string;
}
const props = defineProps<{
component: Component;
data: Object;
infoData: Object;
}>();
const countryISOs = ref("");
const isDefault = ref<boolean>(true);
const activeCountry = ref<string>("");
let partnersList = ref([] as Partner[]);
let partnersCountries = ref([] as any[]);
const backToEurope = () => {
isDefault.value = true;
activeCountry.value = "";
partnersList.value = [];
};
</script>

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

@ -19,9 +19,9 @@
{{ component.section_lang_data.title_second }}
</h3>
<div class="flex w-full items-start justify-center sm:justify-end">
<ButtonArrow type="fill">{{
<UiButtonArrow type="fill">{{
component.section_lang_data.button
}}</ButtonArrow>
}}</UiButtonArrow>
</div>
</div>
</div>

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

@ -2,25 +2,36 @@
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
<div
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-center',
itemCount === 1 ? 'justify-center' : 'justify-between',
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<!-- product -->
<div
v-for="item in itemCount"
:key="item"
class="w-[200px] sm:w-[260px] md:w-[290px] py-[15px] px-[10px] sm:py-5 sm:px-[14px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
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="/pics.png" alt="pics" class="max-w-[150px]" />
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
<h3 class="text-[13px] sm:text-[16px] text-xl font-bold">
50g Zlatý slitek: PAMP Suisse
</h3>
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
Osvobozená sazba DPH PL
</p>
<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 text-bold-24">€ 4,825.44</p>
<p class="text-accent-green 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"
>
@ -39,7 +50,7 @@
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
vás ochrání zítra
</h3>
<ButtonArrow type="fill">E-shop</ButtonArrow>
<UiButtonArrow type="fill">E-shop</UiButtonArrow>
</div>
</UiContainer>
</template>
@ -61,19 +72,27 @@ type Component = {
];
};
const itemCount = ref(1);
const itemCount = ref(4);
const productStore = useProductStore();
function updateItemCount() {
async function updateItemCount() {
const width = window.innerWidth;
if (width >= 1280) itemCount.value = 5;
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;
}
onMounted(() => {
updateItemCount();
watch(itemCount, async() => {
await productStore.getList(itemCount.value);
});
onMounted(async () => {
await updateItemCount();
window.addEventListener("resize", updateItemCount);
await productStore.getList(itemCount.value);
});
onBeforeUnmount(() => {