mohadese namavar
54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<template>
|
|
<aside class="blog-aside">
|
|
<div v-for="(items, key) in list" :key="key">
|
|
<h2>{{ $t(key) }}</h2>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(item, i) in items" :key="i">
|
|
<BlogItem :data="item" type="small" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<BlogBanners />
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { lastBlog, topBlog } = inject('data')
|
|
const list = reactive({ lastBlog, topBlog })
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.blog-aside {
|
|
@apply max-w-full flex flex-col gap-6 lg:gap-12;
|
|
@apply min-[1725px]:flex-col mx-auto;
|
|
|
|
&>div {
|
|
@apply w-full flex overflow-hidden flex-col gap-6 lg:gap-12;
|
|
|
|
h2 {
|
|
@apply flex items-center gap-3 text-[#333333] font-bold font-vazir leading-tight;
|
|
@apply text-base lg:text-2xl px-6 lg:px-0;
|
|
|
|
&::after {
|
|
@apply content-['_'] grow h-px bg-[#E5E5E5] lg:hidden;
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
@apply overflow-x-auto max-w-[100vw] py-px scroll-smooth grow-0;
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply hidden;
|
|
}
|
|
|
|
ul {
|
|
@apply flex lg:flex-col w-max gap-[1.1rem] lg:gap-6 px-6 lg:px-0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|