skytek_xinliang
45 lines
894 B
Vue
45 lines
894 B
Vue
<template>
|
|
<div
|
|
class="illustration-container d-flex flex-column align-center justify-center fill-height px-8"
|
|
>
|
|
<div class="illustration-wrapper mb-8 w-100 d-flex justify-center">
|
|
<v-img
|
|
v-if="image"
|
|
aspect-ratio="16/9"
|
|
contain
|
|
max-width="600"
|
|
:src="image"
|
|
width="100%"
|
|
></v-img>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<h1 class="text-h4 font-weight-bold text-secondary mb-4">{{ title }}</h1>
|
|
<p class="text-body-1 text-secondary">{{ description }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
image: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '這是一個標題',
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: '這是一個副標題',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.illustration-container {
|
|
width: 100%;
|
|
}
|
|
</style>
|