74 lines
2.8 KiB
Vue
74 lines
2.8 KiB
Vue
<template>
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
<div
|
|
class="px-4 py-5 sm:px-6 flex justify-between items-center flex-wrap sm:flex-nowrap"
|
|
>
|
|
<div>
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
{{ title }}
|
|
</h3>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-start">
|
|
<div
|
|
class="flex-shrink-0 inline-flex rounded-full border-2 border-white"
|
|
>
|
|
<BaseAvater1
|
|
:image-size="2"
|
|
:image-url="profileUrl"
|
|
:image-alt="name + '의 프로필 사진'"
|
|
/>
|
|
</div>
|
|
<div class="ml-4">
|
|
<div class="text-base font-medium">{{ name }}</div>
|
|
<div class="text-base text-xs">{{ created }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-200 px-4 py-5 sm:px-6 min-h-[15rem]">
|
|
<div
|
|
ref="myCoolDiv"
|
|
class="prose mt-3 space-y-0 max-w-none"
|
|
v-html="content"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
name: { type: String, required: true },
|
|
profileUrl: { type: String, required: true },
|
|
title: { type: String, required: true },
|
|
content: { type: String, required: true },
|
|
flags: { type: Array<string>, default: [] },
|
|
attachments: { type: Array<string>, default: [] },
|
|
hitCount: { type: Number, required: true },
|
|
likeCount: { type: Number, required: true },
|
|
dislikeCount: { type: Number, required: true },
|
|
commentCount: { type: Number, required: true },
|
|
reportCount: { type: Number, required: true },
|
|
status: { type: Number, required: true },
|
|
updated: { type: String, required: true },
|
|
created: { type: String, required: true },
|
|
});
|
|
|
|
const myCoolDiv = ref(null);
|
|
|
|
watch(myCoolDiv, () => {
|
|
if (myCoolDiv.value.childNodes[0].tagName == 'IFRAME') {
|
|
myCoolDiv.value.childNodes[0].classList.add('xl:w-[1243px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('xl:h-[621.5px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('lg:w-[1243px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('lg:h-[621.5px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('md:w-[900px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('md:h-[400px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('w-[310px]');
|
|
myCoolDiv.value.childNodes[0].classList.add('h-[250px]');
|
|
}
|
|
});
|
|
</script>
|