thainv-dev: page chi tiết

2024-05-31 12:39:53 +07:00
parent 86bebfd66e
commit 6ff759f22a
15 changed files with 348 additions and 14 deletions
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { isEmpty } from 'lodash';
+const emit = defineEmits(['dropData', 'selectComponent'])
+
+const _props = defineProps<{
+  dataResult?: any[]
+}>()
+
+
+</script>
+<template>
+    <div class="content">
+        <h3 class="title">Tiêu đề bài viết ở đây</h3>
+        <span class="intro">intro bài viết ở đây</span>
+        <div class="detail">Nội dung bài viết ở đây <br>
+            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .content {
+        font-size: 14px;
+        height: 200px;
+        padding: 8px;
+        overflow: hidden;
+    }
+
+    .title {
+        white-space: normal;
+    }
+
+    .intro {
+        white-space: normal;
+        padding-bottom: 10px;
+        display: block;
+    }
+
+    .detail {
+        white-space: normal;
+    }
+</style>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useArticleStore } from '~/stores/articles';
+const emit = defineEmits(['dropData', 'selectComponent'])
+const { currentArticle } = storeToRefs(useArticleStore());
+
+</script>
+<template>
+    <div class="content" v-if="currentArticle">
+        <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
+        <h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
+        <div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
+        <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
+                        class="[&_img]:mx-auto">
+                    </div>
+                    1
+    </div>
+</template>
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { isEmpty } from 'lodash';
+const emit = defineEmits(['dropData', 'selectComponent'])
+
+const _props = defineProps<{
+  dataResult?: any[]
+}>()
+
+
+</script>
+<template>
+    <div class="content">
+        <h3 class="title">Tiêu đề bài viết ở đây</h3>
+        <div class="author">Tác giả - Thời gian tạo</div>
+        <span class="intro">intro bài viết ở đây</span>
+        <div class="detail">Nội dung bài viết ở đây <br>
+            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .content {
+        font-size: 14px;
+        height: 200px;
+        padding: 8px;
+        overflow: hidden;
+    }
+
+    .title, .author, .intro {
+        white-space: normal;
+    }
+
+    span {
+        white-space: normal;
+        padding-bottom: 10px;
+        display: block;
+    }
+    .detail {
+        white-space: normal;
+    }
+
+</style>