57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<div class="columns featured-post is-multiline">
|
|
<div class="column is-12 post">
|
|
<h2 class="title is-2">
|
|
{{ featuredTitle }}
|
|
</h2>
|
|
<article class="columns featured">
|
|
<div class="column is-7 post-img ">
|
|
<img :src="firstBlog.image" :alt="firstBlog.title">
|
|
</div>
|
|
<div class="column is-5 featured-content va">
|
|
<div>
|
|
<h6 class="heading post-category">
|
|
<NuxtLink
|
|
v-for="(tag, index) in firstBlog.tags"
|
|
:key="index"
|
|
to="/"
|
|
>
|
|
{{ tag }}
|
|
</NuxtLink>
|
|
</h6>
|
|
<h3 class="title is-3 post-title">
|
|
{{ firstBlog.title }}
|
|
</h3>
|
|
<p class="post-excerpt">
|
|
{{ firstBlog.description }}
|
|
</p>
|
|
<br>
|
|
<NuxtLink
|
|
:to="{name: 'blog-slug', params: { slug: firstBlog.slug }}"
|
|
class="button is-primary"
|
|
>
|
|
Đọc thêm
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Vue, Component } from 'nuxt-property-decorator'
|
|
|
|
@Component({
|
|
props: {
|
|
firstBlog: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
}
|
|
})
|
|
export default class FeaturedBlog extends Vue {
|
|
featuredTitle = 'Bài viết mới nhất'
|
|
}
|
|
</script>
|