init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,124 @@
+<template>
+    <router-link :to="'/blog/' + link" :class="['post-item', `post-item-${type}`]">
+        <article>
+            <img :src="coverImage" :alt="title" />
+            <div>
+                <h1>{{ title }}</h1>
+                <div v-if="type != 'vertical'" v-html="content" />
+                <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 { 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;
+
+            h1 {
+                @apply text-zinc-800 font-bold truncate;
+            }
+
+            p {
+                @apply text-zinc-500 lg:leading-[1.9rem];
+            }
+        }
+    }
+}
+
+.post-item-normal {
+    article {
+        @apply w-[21.4rem] 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;
+
+            h1 {
+                @apply text-xs lg:text-2xl whitespace-normal;
+            }
+
+            p {
+                @apply hidden lg:block w-[39.4rem] line-clamp-3;
+            }
+
+            button {
+                @apply w-max h-max text-[#43E97B] 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;
+
+            h1 {
+                @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 h1 {
+            @apply text-xs lg:text-base leading-6 line-clamp-3 lg:line-clamp-2 whitespace-break-spaces;
+        }
+    }
+}
+</style>