44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<RouterLink
|
|
:to="{ name: 'floor', params: { id: building, number: floor.number } }"
|
|
>
|
|
<div
|
|
class="hoverbox relative flex h-60 flex-col overflow-hidden rounded-lg bg-gray-50 shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 hover:scale-105 md:h-80"
|
|
>
|
|
<img
|
|
:src="`${BACKEND_URL}/usercontent/${floor.planImage}`"
|
|
v-if="floor.planImage"
|
|
class="absolute object-cover"
|
|
/>
|
|
<div class="z-10 mt-auto flex flex-col bg-white px-4 py-4">
|
|
<span class="text-lg font-bold">{{ floor.displayName }}</span>
|
|
<span class="text-sm">Floor {{ floor.number }}</span>
|
|
</div>
|
|
</div>
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { BACKEND_URL } from '../../../constants';
|
|
import { FloorListItem } from '../../../interfaces/floor.interfaces';
|
|
|
|
const props = defineProps<{
|
|
building: number;
|
|
floor: FloorListItem;
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.hoverbox {
|
|
img {
|
|
transition: all 3s;
|
|
}
|
|
|
|
&:hover {
|
|
img {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
}
|
|
</style>
|