36 lines
1.3 KiB
Vue
36 lines
1.3 KiB
Vue
<script setup>
|
|
import { onMounted, ref, toRef, watch } from 'vue';
|
|
import { initFlowbite } from 'flowbite';
|
|
|
|
onMounted(() => {
|
|
initFlowbite();
|
|
});
|
|
|
|
const clubName = ref(null);
|
|
|
|
const props = defineProps({
|
|
block: { type: Object, required: true }
|
|
});
|
|
|
|
const emit = defineEmits(['update:block']);
|
|
const local = toRef(props, 'block');
|
|
|
|
watch(local, (val) => emit('update:block', val), { deep: true });
|
|
</script>
|
|
|
|
<template>
|
|
<header id="frontPageHeader" class="h-[400px] bg-heroBg bg-no-repeat bg-center bg-cover">
|
|
<div class="h-[400px] bg-heroSoldiers bg-no-repeat bg-bottom z-0">
|
|
<div class="h-[400px] bg-heroFgR bg-repeat-x bg-bottom z-10">
|
|
<div class="flex items-end justify-center content-end pt-12">
|
|
<Link id="logoHeader" :href="route('forsiden')" class="flex justify-center items-center p-2">
|
|
<img id="clubLogo" src="/img/oms-glow.png" class="w-14 md:w-20 lg:w-28 mr-2 md:mr-6 shadow-2xl" alt="">
|
|
<p class="text-white text-2xl md:text-4xl lg:text-6xl font-topsecret">
|
|
<span ref="clubName">{{ block.title || 'Østfold Milsim' }}</span>
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template> |