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