104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
const currentPost = ref<IPost | null>(null),
|
|
|
|
onOpenPost = (e: IPost) => {
|
|
currentPost.value = e
|
|
},
|
|
|
|
onClosePost = () => {
|
|
currentPost.value = null
|
|
},
|
|
|
|
thumbUrl = computed(() => {
|
|
if (currentPost.value && currentPost.value.fields.thumb.value) {
|
|
return currentPost.value.fields.thumb.value
|
|
}
|
|
return getAssetURL(`${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`)
|
|
})
|
|
|
|
onMounted(() => {
|
|
emitter.on('openPost', onOpenPost)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('openPost', onOpenPost)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="currentPost"
|
|
class="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black bg-opacity-60"
|
|
>
|
|
<div class="container mx-auto my-10 max-h-full overflow-hidden overscroll-y-contain rounded-3xl bg-white">
|
|
<!-- 标题栏 -->
|
|
<div class="relative w-full border-b-2 border-b-gray-200">
|
|
<!-- 文章头图 -->
|
|
<div class="min-h-52">
|
|
<img
|
|
:src="thumbUrl"
|
|
alt=""
|
|
class="max-h-64 w-full object-cover object-center"
|
|
>
|
|
</div>
|
|
<!-- 预览标题 -->
|
|
<div
|
|
class="absolute top-0 right-0 left-0 h-12 truncate bg-black bg-opacity-60 pr-16 pl-8 text-white backdrop-blur-3xl py-1.5"
|
|
>
|
|
<span
|
|
:title="currentPost.title"
|
|
class="text-3xl font-bold"
|
|
>
|
|
文章预览 /
|
|
</span>
|
|
</div>
|
|
<!-- 关闭按钮 -->
|
|
<div
|
|
class="absolute top-0 right-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-all my-1.5 hover:bg-gray-200 hover:text-black"
|
|
@click="onClosePost"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', 'xmark']"
|
|
class="p-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- 正文 -->
|
|
<div
|
|
class="container overflow-y-auto p-8 h-[60vh] preview"
|
|
v-html="currentPost.digest"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.preview {
|
|
h1 {
|
|
@apply mb-2 border-l-8 border-l-blue-400 text-3xl font-bold;
|
|
}
|
|
|
|
h2 {
|
|
@apply mb-2 border-l-4 border-l-blue-400 text-2xl font-bold;
|
|
}
|
|
|
|
h3 {
|
|
@apply mb-2 border-l-2 border-l-blue-400 text-xl font-bold;
|
|
}
|
|
|
|
h4 {
|
|
@apply text-lg font-bold;
|
|
}
|
|
|
|
h5 {
|
|
@apply text-sm font-bold;
|
|
}
|
|
|
|
ul {
|
|
@apply line-clamp-1;
|
|
}
|
|
}
|
|
</style>
|