You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.2 KiB
121 lines
2.2 KiB
<script setup lang="ts">
|
|
defineProps<{
|
|
image: string
|
|
title: string
|
|
aspectRatio: number
|
|
}>()
|
|
|
|
const imgLoaded = ref(false)
|
|
const imgFailed = ref(false)
|
|
|
|
function onImgLoad() {
|
|
imgLoaded.value = true
|
|
}
|
|
|
|
function onImgError() {
|
|
imgFailed.value = true
|
|
imgLoaded.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card" :style="{ aspectRatio }">
|
|
<div class="img-placeholder" :class="{ loaded: imgLoaded }" />
|
|
<img
|
|
v-if="!imgFailed"
|
|
:src="image"
|
|
:alt="title"
|
|
loading="lazy"
|
|
class="card-img"
|
|
:class="{ loaded: imgLoaded }"
|
|
@load="onImgLoad"
|
|
@error="onImgError"
|
|
>
|
|
<div v-if="imgFailed" class="img-fallback">
|
|
<span class="fallback-icon">📷</span>
|
|
</div>
|
|
<div class="card-label">
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
background: var(--color-surface-card);
|
|
overflow: hidden;
|
|
transition: transform 0.4s var(--ease-out-expo);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.015);
|
|
}
|
|
|
|
.card:hover .card-label {
|
|
opacity: 1;
|
|
}
|
|
|
|
.img-placeholder {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, #e8e0d2 0%, #efe9de 50%, #e8e0d2 100%);
|
|
background-size: 200% 200%;
|
|
animation: shimmer 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.img-placeholder.loaded {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.card-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.card-img.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-label {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
background: var(--color-surface-dark);
|
|
color: var(--color-on-dark);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
letter-spacing: 0.03em;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 2;
|
|
}
|
|
|
|
.img-fallback {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #e8e0d2 0%, #efe9de 50%, #e8e0d2 100%);
|
|
}
|
|
|
|
.fallback-icon {
|
|
font-size: 40px;
|
|
opacity: 0.35;
|
|
}
|
|
</style>
|
|
|