86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import {computed, onMounted, onUnmounted, ref} from "vue";
|
||
|
|
|
||
|
|
const currentPost = ref<IPost | null>(null)
|
||
|
|
|
||
|
|
const onOpenPost = (e: IPost) => {
|
||
|
|
currentPost.value = e;
|
||
|
|
}
|
||
|
|
|
||
|
|
const onClosePost = () => {
|
||
|
|
currentPost.value = null
|
||
|
|
}
|
||
|
|
|
||
|
|
const 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>
|
||
|
|
</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>
|