mohadese-nm
136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<router-link :to="'/blog/' + link" :class="['post-item', `post-item-${type}`]">
|
|
<article>
|
|
<img :src="coverImage" :alt="title" />
|
|
<div>
|
|
<h3>{{ removeTags(title) }}</h3>
|
|
<div v-if="type != 'vertical'">
|
|
<p>{{ removeTags(content) }}</p>
|
|
</div>
|
|
<Button v-if="type == 'normal'" v-bind="btn.props" />
|
|
</div>
|
|
</article>
|
|
</router-link>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../initialize/post-item'
|
|
const { btn } = init()
|
|
|
|
const props = defineProps({
|
|
type: { default: 'normal' },
|
|
data: {},
|
|
});
|
|
const removeTags = (str) => {
|
|
if (str === null || str === '') return false
|
|
else str = str.toString()
|
|
return str.replace(/(<([^>]+)>| )+/gi, '')
|
|
}
|
|
|
|
const { link, coverImage, title, content } = props.data
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.post-item {
|
|
article {
|
|
@apply flex gap-3 lg:gap-6;
|
|
|
|
img {
|
|
@apply object-contain object-center;
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col overflow-hidden font-vazir;
|
|
|
|
h3 {
|
|
@apply text-zinc-800 font-bold truncate h-8;
|
|
}
|
|
|
|
p {
|
|
@apply text-zinc-500 lg:leading-[1.9rem];
|
|
overflow: hidden !important;
|
|
display: -webkit-box !important;
|
|
-webkit-box-orient: vertical !important;
|
|
-webkit-line-clamp: 3 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-item-normal {
|
|
article {
|
|
@apply w-[21.4rem] min-h-[4.7rem];
|
|
@apply lg:w-[55.9rem] lg:h-[11.9rem];
|
|
|
|
img {
|
|
@apply w-[4.7rem] h-[4.7rem] lg:w-[15.1rem] lg:h-[11.9rem] object-cover;
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col justify-between lg:justify-center;
|
|
@apply gap-1 lg:gap-6;
|
|
|
|
h3 {
|
|
@apply text-xs lg:text-xl whitespace-normal h-8;
|
|
}
|
|
|
|
p {
|
|
@apply hidden lg:block w-[39.4rem] line-clamp-3;
|
|
}
|
|
|
|
button {
|
|
@apply w-max h-max text-[#4D88B7] py-1.5 px-3.5 -mr-3.5 -my-1.5 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply font-normal font-vazir text-[0.7em] lg:text-base;
|
|
}
|
|
|
|
.isax {
|
|
@apply text-base lg:text-2xl mr-1 #{!important};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-item-small {
|
|
article {
|
|
@apply w-[21.4rem] h-[4.7rem] lg:w-[26.1rem] lg:h-[7.7rem];
|
|
|
|
img {
|
|
@apply w-[4.8rem] h-[4.8rem] lg:w-[7.7rem] lg:h-[7.7rem];
|
|
}
|
|
|
|
&>div {
|
|
@apply gap-2 lg:gap-0.5 justify-center;
|
|
|
|
h3 {
|
|
@apply text-xs lg:text-base lg:leading-[2.8rem];
|
|
}
|
|
|
|
p {
|
|
@apply text-[0.7em] lg:text-base lg:w-[16.9rem] line-clamp-2;
|
|
}
|
|
|
|
button {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-item-vertical {
|
|
article {
|
|
@apply flex-col gap-3 lg:gap-4 w-[9.9rem] lg:w-[18.3rem];
|
|
|
|
img {
|
|
@apply w-full h-[9.9rem] lg:h-[18.3rem] object-cover;
|
|
}
|
|
|
|
&>div h3 {
|
|
@apply text-xs lg:text-base leading-6 line-clamp-3 lg:line-clamp-2 whitespace-break-spaces;
|
|
}
|
|
}
|
|
}
|
|
</style>
|