38 lines
828 B
Vue
38 lines
828 B
Vue
<script setup lang="ts">
|
|
// 이미지 자리표시자 — 실제 사진이 준비되기 전 영역을 채우는 플레이스홀더
|
|
// (원본 디자인의 <image-slot> 대체. 실제 이미지가 생기면 <img> 로 교체)
|
|
interface Props {
|
|
label?: string
|
|
}
|
|
withDefaults(defineProps<Props>(), {
|
|
label: '이미지',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ph" role="img" :aria-label="label">
|
|
<span class="ph-cap">{{ label }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ph {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: linear-gradient(135deg, #eef0f3 0%, #dfe2e7 100%);
|
|
}
|
|
|
|
.ph-cap {
|
|
font-size: 0.75rem; /* 12px */
|
|
letter-spacing: 0.1em;
|
|
color: rgba(27, 26, 23, 0.38);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
padding: 0 1rem;
|
|
}
|
|
</style>
|