mohadese namavar
80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<article class="post-card">
|
|
<img :src="data.coverImage" />
|
|
<div>
|
|
<small>
|
|
<router-link :to="{ path: '/blog', query: data.category.link }">
|
|
{{ data.category.title }}
|
|
</router-link>
|
|
</small>
|
|
<h1>
|
|
<router-link :to="'/blog/' + data.link">
|
|
{{ data.title }}
|
|
</router-link>
|
|
</h1>
|
|
<p>
|
|
{{ removeTags(data.content) }}
|
|
</p>
|
|
<div>
|
|
<span>{{ new Date(data.createdAt).toLocaleDateString('fa') }}</span>
|
|
<router-link :to="'/blog/' + data.link">
|
|
<Button :label="$t('readMore')" icon="isax isax-arrow-left" severity="secondary" text />
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({ data: { type: Object, default: {} } })
|
|
|
|
const removeTags = (str) => {
|
|
if (str === null || str === '') return false
|
|
else str = str.toString()
|
|
return str.replace(/(<([^>]+)>| )+/gi, '')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.post-card {
|
|
box-shadow: 0px 1px 22px 0px rgba(0, 75, 130, 0.15);
|
|
@apply w-[21.3rem] h-[23.3rem] lg:w-[18.3rem] lg:h-[24.3rem] bg-white rounded-2xl p-3 flex flex-col gap-3;
|
|
|
|
img {
|
|
@apply w-full h-[10.4rem] bg-[#ECECEC] rounded-xl;
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col px-3 grow;
|
|
|
|
small {
|
|
@apply text-primary-600 text-xs lg:text-sm font-vazir;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-[#191919] font-bold font-vazir mt-1.5 text-sm lg:text-base;
|
|
}
|
|
|
|
&>p {
|
|
@apply text-[#7F7F7F] font-vazir mt-2 w-[14.4rem] text-xs leading-5 lg:text-sm lg:leading-[1.4rem] line-clamp-3;
|
|
}
|
|
|
|
div {
|
|
@apply flex items-center justify-between mt-auto;
|
|
|
|
span {
|
|
@apply text-[#7F7F7F] text-xs lg:text-sm font-normal font-vazir leading-snug;
|
|
}
|
|
|
|
button {
|
|
@apply whitespace-nowrap h-10 -ml-3 px-2 text-xs lg:text-sm #{!important};
|
|
|
|
.isax {
|
|
@apply text-xl #{!important};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|