46 lines
2.5 KiB
Vue
46 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { blogCard } from '@/_mockApis/components/widget/card';
|
|
</script>
|
|
<template>
|
|
<v-row>
|
|
<v-col cols="12" md="4" sm="4" v-for="card in blogCard" :key="card.title">
|
|
<v-card elevation="10" rounded="md" class="card-hover">
|
|
<div>
|
|
<v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
|
|
<v-card-item
|
|
><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
|
|
></v-card-item>
|
|
</v-img>
|
|
<v-avatar size="40" class="mt-n7 mx-6">
|
|
<img :src="card.avatar" alt="icon" height="40" />
|
|
</v-avatar>
|
|
<v-card-item class="pt-4">
|
|
<v-chip class="text-body-2 font-weight-medium bg-light" size="small" rounded="sm" v-text="card.category"></v-chip>
|
|
<h5 class="text-h5 text-13 my-6 custom-text-primary">
|
|
<RouterLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</RouterLink>
|
|
</h5>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<v-avatar class="" size="18">
|
|
<EyeIcon size="18" class="text-textPrimary" />
|
|
</v-avatar>
|
|
<span class="text-subtitle-1 ml-2 textSecondary" v-text="card.view"></span>
|
|
<v-avatar class="ml-4" size="18">
|
|
<Message2Icon size="18" class="text-textPrimary" />
|
|
</v-avatar>
|
|
<span class="text-subtitle-1 ml-2 textSecondary" v-text="card.comments"></span>
|
|
</div>
|
|
<div>
|
|
<v-avatar size="10">
|
|
<CircleIcon size="10" class="text-textPrimary" />
|
|
</v-avatar>
|
|
<span class="text-subtitle-2 ml-2 textSecondary" v-text="card.time"></span>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|