51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
|
|
<div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
|
|
:style="{'background-image':'url(' + article.featured_image + ')'}"
|
|
></div>
|
|
<div class="p-4 absolute bottom-0 right-0 z-20">
|
|
<h2 class="text-3xl font-semibold text-gray-100 leading-relaxed text-right MvAamu" style="direction:rtl;" v-text="article.title"></h2>
|
|
<div class="flex justify-end mt-3">
|
|
<img v-if="article.source" :src="article.source.logo"
|
|
class="h-10 w-10 rounded-full mr-2 object-cover" />
|
|
<div>
|
|
<p v-if="article.source" class="font-semibold text-gray-200 text-md MvTyper" v-text="article.source.name"></p>
|
|
<p class="font-semibold text-gray-400 text-xs">{{article.published_date | moment('calendar')}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 lg:px-0 mt-12 text-gray-700 max-w-screen-md mx-auto text-lg leading-relaxed">
|
|
<p v-for="paragraph in article.body" :key="paragraph" class="MvTyper text-right" style="direction:rtl;">
|
|
{{paragraph}}
|
|
<br>
|
|
<br>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
article: []
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
axios.get(`/api/article/${this.$route.params.id}`).then(response => {
|
|
this.article = response.data.data;
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.image-dark {
|
|
filter: brightness(50%);
|
|
}
|
|
</style> |