45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
post: IPost
|
|
}>(),
|
|
|
|
pid = useAsyncData('pid', async () => (Math.floor(Math.random() * (7 - 1 + 1)) + 1).toString()),
|
|
|
|
thumbUrl = computed(() => props.post.fields.thumb.value),
|
|
|
|
randomId = computed(() => pid.data.value!)
|
|
</script>
|
|
|
|
<template>
|
|
<nuxt-link
|
|
:title="post.title"
|
|
class="container relative overflow-hidden rounded-2xl bg-white transition-all duration-300 ease-in-out h-[31rem] hover:-translate-y-2 hover:cursor-pointer hover:shadow"
|
|
:to="{ name: 'article-cid', params: { cid: post.cid } }"
|
|
>
|
|
<!-- 图片 -->
|
|
<div class="relative">
|
|
<!-- 渐变 -->
|
|
<div class="absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-t from-white" />
|
|
<img
|
|
v-if="thumbUrl"
|
|
:src="thumbUrl"
|
|
alt=""
|
|
class="aspect-video w-full h-auto object-cover object-center"
|
|
>
|
|
<card-article-default-image :id="randomId" />
|
|
</div>
|
|
<!-- 文字部分 -->
|
|
<div class="px-5">
|
|
<!-- 标题 -->
|
|
<h4 class="text-2xl font-bold">{{ post.title }}</h4>
|
|
<p class="mt-4 text-lg px-1 text-gray-700">{{ post.digest }}</p>
|
|
</div>
|
|
</nuxt-link>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|