WebIndex/components/card/ArticleCard.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>