mohadese namavar
63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<template>
|
|
<section class="latest-posts">
|
|
<div>
|
|
<h2>{{ $t('mediaAndContent') }}</h2>
|
|
<h3>
|
|
<span>{{ $t('toViewLatestMediaAndContent') }}</span>
|
|
<router-link to="/blog">{{ $t('clickHere') }}</router-link>
|
|
</h3>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(post, i) in lastBlog" :key="i">
|
|
<BlogCard :data="post" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { lastBlog } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.latest-posts {
|
|
@apply w-full flex justify-center mt-[5.3rem] lg:mt-[8.8rem];
|
|
|
|
&>div {
|
|
@apply container flex flex-col w-full;
|
|
|
|
&>h2 {
|
|
@apply text-[#0B1F11] font-bold font-vazir mr-6 lg:mr-4;
|
|
@apply text-lg lg:text-3xl;
|
|
}
|
|
|
|
&>h3 {
|
|
@apply flex items-center gap-1.5 mt-1.5 mr-6 font-vazir;
|
|
@apply text-sm lg:text-xl lg:mt-2 lg:mr-4;
|
|
|
|
span {
|
|
@apply text-[#8C8C8C] leading-9;
|
|
}
|
|
|
|
a {
|
|
@apply text-primary-600 font-bold leading-[2.8rem];
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
@apply w-full flex lg:overflow-x-auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply hidden;
|
|
}
|
|
|
|
&>ul {
|
|
@apply flex flex-wrap lg:flex-nowrap justify-center gap-5 mx-2 lg:w-max h-max mt-4 lg:my-12 self-center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|