51 lines
1.7 KiB
Vue
51 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import {computed} from "vue";
|
|
|
|
const props = defineProps<{
|
|
post: IPost
|
|
}>()
|
|
|
|
const thumbUrl = computed(() => {
|
|
// 如果文章缩略图为空，则从本地随机获取默认缩略图
|
|
props.post.fields.thumb.value = props.post.fields.thumb.value ? props.post.fields.thumb.value : getAssetURL(
|
|
`common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
|
|
)
|
|
return props.post.fields.thumb.value
|
|
})
|
|
|
|
const handleOnCardClick = () => {
|
|
window.open(props.post.url, '_self')
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :title="post.title"
|
|
class="container relative h-56 overflow-hidden rounded-2xl text-white hover:cursor-pointer hover:text-amber-200 hover:shadow-lg"
|
|
@click="handleOnCardClick">
|
|
<!-- 图片 -->
|
|
<div class="container h-full">
|
|
<img :src="thumbUrl" alt=""
|
|
class="h-full w-full object-cover object-center transition-all duration-300 hover:scale-110">
|
|
</div>
|
|
<!-- 文字部分 -->
|
|
<div class="container relative">
|
|
<div class="absolute bottom-0 h-12 w-full truncate bg-black bg-opacity-60 p-2 leading-8 backdrop-blur-3xl">
|
|
<span class="px-1 text-xl font-bold transition-all">{{ post.title }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 分类 -->
|
|
<div class="absolute top-0 left-0 m-2 rounded-lg bg-black bg-opacity-60 px-2 text-white backdrop-blur-3xl">
|
|
<span>{{ post.category }}</span>
|
|
</div>
|
|
<!-- 日期 -->
|
|
<div class="absolute right-0 bottom-12 m-2 rounded-lg bg-black bg-opacity-60 px-2 text-white backdrop-blur-3xl">
|
|
<font-awesome-icon :icon="['far', 'clock']" class="mr-1 text-sm"/>
|
|
<span>{{ post.date.year }}-{{ post.date.month }}-{{ post.date.day }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |