42 lines
1.4 KiB
Vue
42 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
imageSrc: string
|
|
className?: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
'relative mx-auto w-full max-w-[280px] z-10 transition-transform duration-300 hover:scale-[1.02]',
|
|
props.className || ''
|
|
]"
|
|
style="aspect-ratio: 1290 / 2796;"
|
|
>
|
|
<div
|
|
class="relative w-full h-full bg-black overflow-hidden"
|
|
style="border-radius: 16% / 7.38%; box-shadow: 0 0 0 1px #444, 0 0 0 3px #d1d1d1, 0 0 0 4px #999, 0 20px 50px -10px rgba(0,0,0,0.3); padding: 3px;"
|
|
>
|
|
<div
|
|
class="relative w-full h-full bg-[#111] overflow-hidden"
|
|
style="border-radius: calc(16% - 1%) / calc(7.38% - 0.5%); box-shadow: inset 0 0 20px rgba(255,255,255,0.08);"
|
|
>
|
|
<div class="absolute top-[3.5%] left-1/2 -translate-x-1/2 w-[30%] h-[3.5%] bg-black rounded-[20px] z-50 pointer-events-none flex items-center justify-center">
|
|
<div class="w-[40%] h-[40%] bg-white/10 rounded-full blur-[2px]"></div>
|
|
</div>
|
|
|
|
<img
|
|
:src="props.imageSrc"
|
|
alt="App Screen"
|
|
class="w-full h-full object-cover object-top opacity-100 relative z-10"
|
|
loading="lazy"
|
|
/>
|
|
|
|
<div class="absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[35%] h-[0.5%] bg-white/80 rounded-full z-20 backdrop-blur-sm"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|