40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import {computed} from "vue";
|
|
import {pos} from "ipx";
|
|
|
|
const props = defineProps<{
|
|
post: IPost
|
|
}>()
|
|
|
|
const pid = useAsyncData('pid', async () => (Math.floor(Math.random() * (7 - 1 + 1)) + 1).toString())
|
|
|
|
const thumbUrl = computed(() => props.post.fields.thumb.value)
|
|
|
|
const 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"></div>
|
|
<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> |