WebIndex/components/card/ArticleCard.vue

<script lang="ts" setup>
import {computed} from "vue";

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 h-56 overflow-hidden rounded-2xl text-white hover:cursor-pointer hover:text-amber-200 hover:shadow-lg"
       :to="{name: 'article-cid', params: {cid: post.cid}}">
    <!-- 图片 -->
    <div class="container h-full">
      <img v-if="thumbUrl" :src="thumbUrl" alt=""
           class="h-full w-full object-cover object-center transition-all duration-300 hover:scale-110">
      <card-article-default-image :id="randomId"/>
    </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>
  </nuxt-link>
</template>

<style scoped>

</style>