39 lines
917 B
Vue
39 lines
917 B
Vue
<template>
|
|
<RouterLink :to="routeLink">
|
|
<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 v-if="image" :src="image" alt="" 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">{{ title }}</span>
|
|
<span class="text-sm" v-if="subtitle">{{ subtitle }}</span>
|
|
</div>
|
|
</div>
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { RouteLocationRaw } from 'vue-router';
|
|
|
|
const props = defineProps<{
|
|
image?: string;
|
|
title: string;
|
|
routeLink: RouteLocationRaw;
|
|
subtitle?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.hoverbox {
|
|
img {
|
|
transition: all 3s;
|
|
}
|
|
|
|
&:hover {
|
|
img {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
}
|
|
</style>
|