slidev-theme-narduin/layouts/title-image.vue
2024-12-17 22:50:34 +01:00

36 lines
619 B
Vue

<script setup lang="ts">
import { imageSrc } from '../utils/imageHelper'
const props = defineProps({
image: {
type: String,
required: true
}
})
const image = imageSrc(props.image)
</script>
<template>
<div class="slidev-layout h-full title">
<div class="grid h-full gap-4">
<div class="place-self-center">
<slot />
</div>
<div class="image"></div>
</div>
</div>
</template>
<style scoped>
.grid {
grid-template-columns: 3fr 2fr;
}
.image {
block-size: 100%;
background-image: v-bind(image);
background-size: cover;
background-position: center;
}
</style>