46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
imageSrc?: string
|
|
title: string
|
|
color?: string
|
|
className?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
color: 'bg-blue-600',
|
|
className: '',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="['relative group perspective-1000', props.className]">
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-gradient-to-tr from-orange-100/40 to-blue-100/40 blur-[60px] rounded-full pointer-events-none"></div>
|
|
|
|
<div class="relative z-10 transition-transform duration-500 hover:scale-105 hover:-translate-y-2">
|
|
<img
|
|
v-if="props.imageSrc"
|
|
:src="props.imageSrc"
|
|
:alt="props.title"
|
|
class="w-full h-auto object-contain drop-shadow-2xl"
|
|
style="filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));"
|
|
loading="lazy"
|
|
/>
|
|
<div
|
|
v-else
|
|
:class="[
|
|
'w-[220px] h-[300px] mx-auto rounded-r-xl rounded-l-sm shadow-2xl flex flex-col p-6 relative overflow-hidden',
|
|
props.color
|
|
]"
|
|
>
|
|
<div class="absolute left-0 top-0 bottom-0 w-[4px] bg-black/10"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-tr from-black/10 to-transparent pointer-events-none"></div>
|
|
<div class="text-white/60 text-xs font-bold tracking-[0.2em] mb-auto uppercase">Gongxue</div>
|
|
<div class="text-white font-serif text-3xl font-bold leading-tight">{{ props.title }}</div>
|
|
<div class="mt-4 w-12 h-1 bg-white/50"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-black/20 blur-xl rounded-[100%] opacity-0 group-hover:opacity-40 transition-opacity duration-500"></div>
|
|
</div>
|
|
</template>
|