seepur/resources/scripts/applications/home/components/ProfileHeader.vue

33 lines
901 B
Vue
Raw Normal View History

2020-04-12 14:25:42 +00:00
<template>
2020-05-14 22:49:09 +00:00
<section class="hero is-small p-t-xl p-b-xl is-light" :style="style">
2020-04-12 14:25:42 +00:00
<div class="hero-body">
<div class="container">
<!-- <h1 class="title has-text-light">{{title}}</h1> -->
2020-04-12 14:25:42 +00:00
</div>
</div>
</section>
</template>
<script lang="ts">
export default {
name: "ProfileHeader",
props: ["title", "background"],
computed: {
style() {
2020-05-14 22:49:09 +00:00
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;
2020-04-12 14:25:42 +00:00
}
}
};
</script>