44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
|
|
|
|
<div class="border-2 shadow-2xl mb-4 ">
|
|
<div class="mt-1">
|
|
|
|
<v-img class="mt-1 rounded-t-2xl " :src="props.post.banner"
|
|
v-if="!isHttpUrl">
|
|
</v-img>
|
|
|
|
|
|
<iframe style="min-height: 400px" class="w-full rounded-t-2xl"
|
|
v-if="isHttpUrl"
|
|
:src="props.post.banner"
|
|
title="YouTube video player"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerpolicy="strict-origin-when-cross-origin"
|
|
allowfullscreen>
|
|
</iframe>
|
|
|
|
|
|
</div>
|
|
<div class="text-lg font-bold m-4">{{ props.post.title }}</div>
|
|
<div class="text-sm text-gray-500 m-4">{{ props.post.title }}</div>
|
|
<div class="text-base text-gray-700 m-4 text-justify">{{ props.post.content }}</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {defineProps, computed} from 'vue';
|
|
|
|
const isHttpUrl = computed(() => props.post.banner.startsWith('http'))
|
|
|
|
const props = defineProps({
|
|
post: {
|
|
type: Object,
|
|
required: true,
|
|
|
|
}
|
|
});
|
|
|
|
|
|
</script> |