59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<template>
|
|
<div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12">
|
|
<h1>{{ data?.title }}</h1>
|
|
<p>
|
|
{{
|
|
new Date(data?.date ?? "").toLocaleString("de-DE", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
minute: "2-digit",
|
|
hour: "2-digit",
|
|
})
|
|
}}
|
|
</p>
|
|
<br />
|
|
<p>{{ data?.description }}</p>
|
|
<br />
|
|
<NuxtPicture
|
|
v-if="data?.image"
|
|
loading="lazy"
|
|
class="w-fit h-[50vh] max-w-full object-cover object-center"
|
|
:src="baseUrl + data.image.url"
|
|
:imgAttrs="{ class: 'w-fit h-[50vh] max-w-full object-cover object-center' }"
|
|
/>
|
|
<br v-if="data?.image" />
|
|
<div v-if="data?.content">
|
|
<p>Bericht:</p>
|
|
<FieldContent :data="data.content" />
|
|
</div>
|
|
<br />
|
|
<div v-if="data?.attachment">
|
|
<p>Anhang:</p>
|
|
<div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
|
|
<NuxtPicture
|
|
v-for="img in data.attachment"
|
|
loading="lazy"
|
|
class="w-fit h-48 object-cover object-center"
|
|
:src="baseUrl + img.url"
|
|
:imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PropType } from "vue";
|
|
import type Article from "../types/collection/article";
|
|
import type Operation from "../types/collection/operation";
|
|
import type Event from "../types/collection/event";
|
|
import type Vehicle from "../types/collection/vehicle";
|
|
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const baseUrl = runtimeConfig.public.strapi.url;
|
|
|
|
defineProps({
|
|
data: Object as PropType<Article | Operation | Event | Vehicle>,
|
|
});
|
|
</script>
|