32 lines
901 B
Vue
32 lines
901 B
Vue
<template>
|
|
<section class="hero is-small p-t-xl p-b-xl is-light" :style="style">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<!-- <h1 class="title has-text-light">{{title}}</h1> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script lang="ts">
|
|
export default {
|
|
name: "ProfileHeader",
|
|
props: ["title", "background"],
|
|
computed: {
|
|
style() {
|
|
const defaultCss = `
|
|
background-image: url("/images/cloudgroup.png"), url('/images/sun+clouds.svg');
|
|
background-size: contain, cover;
|
|
background-position: center top, center right;
|
|
background-repeat: repeat, no-repeat;
|
|
`;
|
|
const customCss = `
|
|
background-image: url('${this.background}');
|
|
background-size: cover;
|
|
background-position: center
|
|
`;
|
|
const css = this.background ? customCss : defaultCss;
|
|
return css;
|
|
}
|
|
}
|
|
};
|
|
</script>
|