44 lines
925 B
Vue
44 lines
925 B
Vue
<template>
|
|
<div class="container">
|
|
<div class="section">
|
|
<h1 class="title has-text-centered is-uppercase">Adventskalender</h1>
|
|
<h2 class="subtitle has-text-centered">Der Gelöt</h2>
|
|
|
|
<ImageModal v-model="modal_visible" :imageUrl="image_url" />
|
|
<CalendarDoor
|
|
v-for="(_, index) in 24"
|
|
:key="index"
|
|
:day="index"
|
|
@openDoor="paula"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
import CalendarDoor from "./components/CalendarDoor.vue";
|
|
import ImageModal from "./components/ImageModal.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
CalendarDoor,
|
|
ImageModal,
|
|
},
|
|
})
|
|
export default class App extends Vue {
|
|
image_url = "";
|
|
modal_visible = false;
|
|
|
|
private paula(url: string): void {
|
|
this.image_url = url;
|
|
this.modal_visible = true;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|