WebIndex/components/card/ArticleDigestViewer.vue
2024-11-17 11:45:08 +08:00

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>