minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

phongdt:page video

Browse Source
This commit is contained in:
Duong Truong Phong
2024-06-03 12:27:22 +07:00
parent 94ea03f189
commit 0bfbfa7711
19 changed files with 538 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/other/comments/default.vue
+97 -87
View File
@@ -1,91 +1,101 @@
<template>
<div class="comment">
<div class="input_comment width_common mb-2">
<div class="box-area-input width_common">
<textarea id="txtComment" class="block_input outline-0 outline-none outline-offset-0" placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
</div>
</div>
<div class="mb-2">
<button type="button" class="send-comment">
Gửi bình luận
<Icon name="ri:send-plane-2-fill"></Icon>
</button>
<div class="mt-4">
<div class="input_comment width_common mb-2">
<div class="box-area-input width_common">
<textarea id="txtComment" class="block_input"
placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
</div>
</div>
</template>
<style scoped lang="scss">
.mb-2 {
margin-bottom: 0.5rem;
}
.w-full {
width: 100%;
}
.send-comment {
padding: 0.5rem;
margin-right: 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
background-color: #409eff;
border: 1px solid;
color: #fff;
}
.container {
width: 100%;
max-width: 80rem;
&.h3 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
}
}
.input_comment {
padding: 0;
margin-top: 10px;
background: #fff;
position: relative;
width: 100%;
border-radius: 5px;
border-top: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
.box-area-input {
/* background: #f3f6f9; */
border-radius: 4px;
position: relative;
padding: 5px 10px;
border-left: 2px solid rgba(59, 130, 246, 1);
}
.input_comment textarea.block_input {
height: 30px;
font-size: 14px;
}
textarea::placeholder {
color: #878a99;
}
.input_comment textarea.block_input {
height: 58px;
overflow: hidden;
resize: none;
}
/* .box-area-input .block_input {
background: #f7f7f7;
} */
.input_comment textarea {
background: #fff;
border: none;
width: 100%;
height: 58px;
overflow: hidden;
}
</style>
<div class="mb-2">
<button type="button" class="mr-2 p-2 bg-blue-500 text-[#fff] rounded text-xs">
Gửi bình luận
<Icon name="ri:send-plane-2-fill"></Icon>
</button>
</div>
</div>
</template>
<style scoped lang="scss">
.input_comment {
padding: 0;
margin-top: 10px;
background: #f5f5f5;
position: relative;
width: 100%;
border-top: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
border-radius: 5px;
}
.box-area-input {
background: #f7f7f7;
border-radius: 4px;
position: relative;
padding: 10px 0 10px 0;
border-left: 2px solid rgba(59, 130, 246, 1);
}
.input_comment textarea.block_input {
height: 30px;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.input_comment textarea.block_input {
height: 76px;
overflow: hidden;
resize: none;
}
.box-area-input .block_input {
background: #f7f7f7;
}
.input_comment textarea {
font: 400 16px/150% arial;
background: #fff;
border: none;
width: 100%;
height: 58px;
color: #4f4f4f !important;
overflow: hidden;
padding: 5px 37px 0 15px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
background: #fff;
width: 100%;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
font-size: 14px;
margin: 3px 0;
padding: 0 5px;
outline: none;
}
input,
textarea {
font-family: arial;
font-size: 11px;
border: none;
background: none;
}
</style>
components/dynamic-page/page-component/templates/other/details/podcast.vue
+33
View File
@@ -1,6 +1,9 @@
<script setup lang="ts">
import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
const { currentArticle } = storeToRefs(useArticleStore());
import Topic from "@/components/article/Topic.vue";
import Event from "@/components/article/Event.vue";
import Tag from "@/components/article/Tag.vue";
const getSrc = (htmlString: string) => {
const srcRegex = /src="([^"]+)"/;
@@ -19,6 +22,33 @@ const getSrc = (htmlString: string) => {
// handleError(error);
// }
// };
const store = reactive({
tag: useTagStore(),
topic: useTopicStore(),
event: useEventStore()
});
// const listTag = ref([]);
// const listTopic = ref([]);
// const listEvent = ref([])
// const getTagsAndTopicsAndEvents = async () => {
// if (!currentArticle) return;
// const fetchData = async (ids, fetchFn, list) => {
// if (!ids) return;
// const data = await Promise.all(ids.split(",").map(fetchFn));
// if (data.length > 0) list.value = data;
// };
// await Promise.all([
// fetchData(currentArticle.tagIds, store.tag.fetchById, listTag),
// fetchData(currentArticle.topicIds, store.topic.fetchById, listTopic),
// fetchData(currentArticle.eventIds, store.event.fetchById, listEvent)
// ]);
// };
// getTagsAndTopicsAndEvents();
const listArticle = ref([]);
const audioPlay = ref({});
const defaultClass = {
@@ -70,6 +100,9 @@ const defaultClass = {
</div>
<div class="col-span-11">
<AudioPlayer :src="getSrc(currentArticle?.detail)?.[1]" />
<!-- <Topic :topics="listTopic" />
<Event :events="listEvent" />
<Tag :tags="listTag" /> -->
</div>
</div>
</div>
components/dynamic-page/page-component/templates/other/details/video.vue
+70
View File
@@ -0,0 +1,70 @@
<script setup lang="ts">
import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
import Topic from "@/components/article/Topic.vue";
import Event from "@/components/article/Event.vue";
import Tag from "@/components/article/Tag.vue";
const { currentArticle } = storeToRefs(useArticleStore());
const store = reactive({
tag: useTagStore(),
topic: useTopicStore(),
event: useEventStore()
});
// const listTag = ref([]);
// const listTopic = ref([]);
// const listEvent = ref([])
// const getTagsAndTopicsAndEvents = async () => {
// if (!currentArticle) return;
// const fetchData = async (ids, fetchFn, list) => {
// if (!ids) return;
// const data = await Promise.all(ids.split(",").map(fetchFn));
// if (data.length > 0) list.value = data;
// };
// await Promise.all([
// fetchData(currentArticle.value.tagIds, store.tag.fetchById, listTag),
// fetchData(currentArticle.value.topicIds, store.topic.fetchById, listTopic),
// fetchData(currentArticle.value.eventIds, store.event.fetchById, listEvent)
// ]);
// };
// getTagsAndTopicsAndEvents();
</script>
<template>
<div class="max-w-1500px mx-auto">
<article class="w-full flex flex-col lg:flex-row gap-4 overflow-x-hidden mt-4 bg-#f7f7f7">
<div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
<div v-html="currentArticle?.detail" />
</div>
<div class="lg:w-[480px] overflow-y-auto lg:max-h-560px">
<div class="w-full pt-6 pr-3">
<h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60"></h1>
<h1 v-html="currentArticle?.title" class="text-2xl font-bold text-left sm:text-3xl xl:text-4xl" />
<!-- <ArticleMeta class="!justify-start items-center gap-x-2" :authors="article?.authors" :createdOn="article?.createdOn" :createdBy="article?.createdBy" /> -->
<div id="article-brief" class="mx-auto xl:max-w-6xl text-balance">
<div v-html="currentArticle?.intro" class="font-semibold text-left" />
</div>
<!-- <section>
<article class="mb-[1rem] py-[1rem] border-y-[1px] border-solid border-[#e0e0e0] flex items-center">
<iframe
:src="`https://www.facebook.com/plugins/like.php?href=${ORIGIN}/${category?.code}/${article?.code}&amp;width=160&amp;layout=button&amp;action=like&amp;size=small&amp;share=true&amp;height=65&amp;appId`"
width="140" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</article>
</section> -->
<!-- <Topic :topics="listTopic" />
<Event :events="listEvent" />
<Tag :tags="listTag" /> -->
<section id="comment-section" class="grid">
<Comment :articleId="currentArticle?.articleId" />
</section>
</div>
</div>
</article>
<div class="w-full border-t-2 border-dashed mt-4" />
</div>
</template>
components/dynamic-page/page-component/templates/other/index.ts
+1
View File
@@ -3,6 +3,7 @@ export { default as Article_Detail_Emagazine } from './details/emagazine.vue'
export { default as Article_Detail_Default } from './details/default.vue'
export { default as Article_Detail_Infographics } from './details/infographics.vue'
export { default as Article_Detail_Podcast } from './details/podcast.vue'
export { default as Article_Detail_Video } from './details/video.vue'
export { default as Default_Breadcrumb} from './breadcrumb/default.vue'
export { default as ADS_Default } from './ads/default.vue';
export { default as Comment } from './comments/default.vue'
components/dynamic-page/page-component/templates/other/index.vue
+4 -2
View File
@@ -1,6 +1,8 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment, Article_Detail_Podcast} from "./index";
import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics,
Default_Breadcrumb, ADS_Default, Comment, Article_Detail_Podcast, Article_Detail_Video
} from "./index";
const _props = defineProps<{
settings: any;
component?: any;
@@ -15,7 +17,7 @@ const definedDynamicComponent: Record<string, any> = {
'ARTICLE_BUTTON': Article_Button,
COMMENT: Comment,
PODCAST: Article_Detail_Podcast,
// VIDEO: Video
VIDEO: Article_Detail_Video
};
const getCurrentComponent = computed(() => `${_props.settings.layout}`);