66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<Button @click="$router.back()" link icon="pi pi-arrow-left"></Button>
|
|
<div class="px-3">{{ $route?.meta?.title }}</div>
|
|
</div>
|
|
<!-- <Stepper value="1" linear>
|
|
<StepList>
|
|
<Step value="1">Autófelvétel</Step>
|
|
<Step value="2"></Step>
|
|
<Step value="3"></Step>
|
|
</StepList>
|
|
</Stepper> -->
|
|
<NuxtPage />
|
|
<!-- <pre>{{ rent }}</pre> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const {rent} = useAuthStore()
|
|
|
|
const prevPage = ref()
|
|
definePageMeta({
|
|
pageTransition: {
|
|
name: 'slide-right',
|
|
mode: 'out-in'
|
|
},
|
|
middleware(to, from) {
|
|
if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
|
|
console.log(to.meta)
|
|
to.meta.pageTransition.name = +to.meta.rentStep! > +from.meta.rentStep! ? 'slide-left' : 'slide-right'
|
|
prevPage.value = from.fullPath
|
|
}
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active,
|
|
.slide-right-enter-active,
|
|
.slide-right-leave-active {
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.slide-left-enter-from {
|
|
opacity: 0;
|
|
transform: translate(50px, 0);
|
|
}
|
|
|
|
.slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translate(-50px, 0);
|
|
}
|
|
|
|
.slide-right-enter-from {
|
|
opacity: 0;
|
|
transform: translate(-50px, 0);
|
|
}
|
|
|
|
.slide-right-leave-to {
|
|
opacity: 0;
|
|
transform: translate(50px, 0);
|
|
}
|
|
</style> |