66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<template>
|
|
<div class="flex flex-post px-0 sm:px-4 pb-8 mb-8" v-bind:class="{'no-border': !border}">
|
|
<g-link :to="record.path" class="post-card-image-link">
|
|
<g-image :src="record.image" :alt="record.title" class="post-card-image"></g-image>
|
|
</g-link>
|
|
<div class="post-card-content">
|
|
<g-link :to="record.path">
|
|
<p class="uppercase font-medium text-xs text-blue-700 mt-3">{{ record.category.title }}</p>
|
|
<h2 class="post-card-title mt-0">
|
|
{{ record.title }}
|
|
</h2>
|
|
<p class="post-card-excerpt">{{ record.excerpt }}</p>
|
|
</g-link>
|
|
<div class="w-full post-card-meta pt-4">
|
|
<div class="avatars">
|
|
<div class="flex items-center">
|
|
<div class="flex justify-between items-center">
|
|
<ul class="list-none flex author-list">
|
|
<li v-for="author in record.author" :key="author.id" class="author-list-item">
|
|
<g-link :to="author.path" v-tooltip="author.name">
|
|
<g-image
|
|
:src="author.image"
|
|
:alt="author.name"
|
|
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
|
|
/>
|
|
</g-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase">
|
|
<p>
|
|
<g-link :to="record.path">
|
|
<time :datetime="record.datetime" >{{ record.humanTime }}</time>
|
|
</g-link>
|
|
</p>
|
|
<g-link :to="record.path">
|
|
<time :datetime="record.datetime" >{{ record.startDate }}</time>
|
|
</g-link>
|
|
{{ record.status }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
record: {},
|
|
border: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |