59 lines
2.4 KiB
Vue
59 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<section class="mx-auto max-w-6xl py-5">
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-col md:flex-row justify-center items-center">
|
|
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
|
|
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
|
|
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row justify-center items-center">
|
|
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
|
|
<div slot="middle-right" class="max-w-xs">
|
|
<div class="flex flex-col justify-center h-48 p-3">
|
|
<div class="text-5xl font-bold text-gray-800 mb-2 text-center MvAamu" v-text="topic.name"></div>
|
|
<div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;"> {{topic.name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
|
|
|
|
<div
|
|
class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2"
|
|
v-for="article in articles"
|
|
:key="article.id"
|
|
>
|
|
<div slot="bottom-left" class="max-w-xs">
|
|
<div class="p-5 shadow-md m-2 mt-4"><img class="object-scale-down h-30" :src="article.featured_image" :alt="article.meta.title">
|
|
<div class="text-xs font-bold uppercase text-teal-700 text-right mt-1 mb-2 MvTyper" v-text="article.source.name"></div>
|
|
<div class="text-xl font-bold mb-2 MvAamu text-right" v-text="article.title"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
topic: [],
|
|
articles: []
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
axios.get(`/api/topic/${this.$route.params.slug}`).then(response => {
|
|
this.topic = response.data.topic;
|
|
this.articles = response.data.articles;
|
|
});
|
|
},
|
|
}
|
|
</script> |