Dominik Milacher
c826f3d0be
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 1m58s
64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
const { g, p } = useContentInjected()
|
|
defineProps<{ apartment: any; index: number }>()
|
|
|
|
const version = ref(0)
|
|
const loaded = new Set<string>()
|
|
|
|
function updateVersion(img: string) {
|
|
if (!loaded.has(img)) {
|
|
loaded.add(img)
|
|
++version.value
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :id="g.apartments[index].id" class="rp-2">
|
|
<XContainerHeroContentButtons hero="top" buttons="bottom">
|
|
<template #hero>
|
|
<UCarousel
|
|
:key="version"
|
|
v-slot="{ item }"
|
|
loop
|
|
arrows
|
|
dots
|
|
autoplay
|
|
:items="apartment.images"
|
|
:ui="{
|
|
root: 'mb-12',
|
|
container: '',
|
|
item: 'basis-auto transition-opacity',
|
|
controls: 'relative translate-y-8',
|
|
arrows: '',
|
|
dots: 'absolute inset-x-0 -bottom-0 flex flex-wrap items-center justify-center gap-2 @md:gap-3 translate-y-0.5',
|
|
prev: 'start-0 sm:-start-0 -top-4 -translate-y-0',
|
|
next: 'end-0 sm:-end-0 -top-4 -translate-y-0',
|
|
dot: 'w-3 @md:w-4 h-1',
|
|
}"
|
|
>
|
|
<div class="h-60 flex flex-row justify-center">
|
|
<NuxtImg :src="item" class="h-full" @load="updateVersion(item)" />
|
|
</div>
|
|
</UCarousel>
|
|
</template>
|
|
|
|
<template #buttons>
|
|
<XContainerButtons align="right" :stretch="false">
|
|
<AppButton type="contact" variant="outline" />
|
|
<AppButton type="book" color="primary" />
|
|
</XContainerButtons>
|
|
</template>
|
|
|
|
<div class="flex flex-col">
|
|
<XText as="section" :text="apartment.title" />
|
|
<XText as="paragraph" :text="apartment.subtitle" />
|
|
<XGridIconLabelDetail
|
|
:items="apartment.features"
|
|
:ux="{ icon: 'mt-0', texts: 'justify-center', label: 'font-medium' }"
|
|
/>
|
|
</div>
|
|
</XContainerHeroContentButtons>
|
|
</div>
|
|
</template>
|