80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu">
|
|
ފަހުގެ ޙަބަރުތަށް
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<!-- post cards -->
|
|
<div class="w-full lg:w-2/3">
|
|
<a
|
|
v-for="story in recentStories"
|
|
:key="story.id"
|
|
class="block w-full lg:flex mb-10 shadow rounded-lg"
|
|
href="#"
|
|
>
|
|
|
|
<div
|
|
class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
|
|
>
|
|
<div>
|
|
<div
|
|
class="mt-3 md:mt-0 text-gray-700 font-bold text-2xl mb-2 text-right MvAamu"
|
|
style="direction:rtl;"
|
|
>
|
|
އައްޑޫން މީހަކު ޕޮޒިޓިވްވެއްޖެ
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end mt-1 mb-2">
|
|
<p
|
|
class="font-semibold text-gray-700 text-sm capitalize"
|
|
v-text="story.source.name"
|
|
>
|
|
</p>
|
|
<p class="text-gray-600 text-xs ml-1">
|
|
— {{story.published_date | moment("calendar")}}
|
|
</p>
|
|
</div>
|
|
|
|
<p class="text-gray-700 text-base text-right MvTyper" style="direction:rtl;">
|
|
ރާއްޖޭގައި ކޮވިޑްގެ ހާލަތު އިތުރަށް ގޯސްވަމުންދާއިރު ގިނަ ރަށްރަށުން ބަލި މީހުން ދަނީ ފެންނަމުންނެވެ.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
|
|
style="background-image: url('https://images-01.avas.mv/post/big_RuM5p2M10OjKIYZf8SrS6aeHb.jpg')"
|
|
title="deit is very important"
|
|
></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "recent-stories",
|
|
|
|
data() {
|
|
return {
|
|
recentStories: []
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
axios
|
|
.get("api/recent")
|
|
.then(response => {
|
|
this.recentStories = response.data.data;
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
};
|
|
</script>
|