42 lines
869 B
Vue
42 lines
869 B
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
gradient: {
|
|
type: String,
|
|
default: '90deg, #FFC0CB 0%, #FFC0CB 100%',
|
|
},
|
|
aspect: {
|
|
type: String,
|
|
default: '16/9',
|
|
},
|
|
})
|
|
|
|
const elem = ref<HTMLElement>()
|
|
const size = computed(() => {
|
|
return {
|
|
width: elem.value?.getBoundingClientRect().width.toFixed(0),
|
|
height: elem.value?.getBoundingClientRect().height.toFixed(0),
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="elem"
|
|
class="gradient-background flex justify-center items-center"
|
|
:style="`aspect-ratio: ${aspect};`"
|
|
>
|
|
<ClientOnly>
|
|
<h1 class="text-white/80 drop-shadow-2xl text-sm font-bold">
|
|
{{ size.width }} x {{ size.height }}
|
|
</h1>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.gradient-background {
|
|
@apply rounded-lg;
|
|
@apply bg-linear-to-r from-indigo-800 to-purple-600;
|
|
}
|
|
</style>
|