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

thainv-dev: UI

Browse Source
This commit is contained in:
nguyen van thai
2024-06-18 14:04:24 +07:00
parent f17e28472c
commit d103f4bbf7
19 changed files with 246 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/articles/layouts/Card.vue
+39 -48
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
import { getInputValue } from "@/utils/parseSQL";
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
const props = defineProps<{
dataResult?: any;
@@ -20,7 +19,6 @@ const LAYOUT_PARSE = computed(() => {
};
}) || [];
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
return Object.assign({}, ...parseLayout, designObject);
});
@@ -65,21 +63,37 @@ const drop = (e: any) => {
<img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
</nuxt-link>
</template>
<span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
</div>
<div class="basic-article_content !py-0" :class="[!parseData && 'no-data']">
<div class="basic-article_content" :class="[!parseData && 'no-data']">
<div>
<nuxt-link :to="`bai-viet/${parseData?.slug}`" v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 text-truncate-two-lines font-bold line-clamp-2 hover:text-primary-600">
<nuxt-link :to="`bai-viet/${parseData?.slug}`"
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
class="line-clamp hover:text-primary-600"
:style="[
LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
LAYOUT_PARSE['lineClampTitle'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampTitle']}`
]"
>
<template v-if="parseData">
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
</template>
<span v-else class="empty-block" style="height: 8px"></span>
</nuxt-link>
<p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3">
<p
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')"
class="mb-0 line-clamp font-arial"
:style="[
LAYOUT_PARSE['fontSizeIntro'] && `font-size: ${LAYOUT_PARSE['fontSizeIntro']}px`,
LAYOUT_PARSE['fontWeightIntro'] && `font-weight: ${LAYOUT_PARSE['fontWeightIntro']}`,
LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
LAYOUT_PARSE['lineClampIntro'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampIntro']}`
]"
>
<template v-if="parseData">
{{ parseData.intro ? parseData.intro?.replace(/<[^>]+>/g, "") : parseData.detail?.replace(/<[^>]+>/g, "") }}
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
</template>
<span v-else class="empty-block" style="height: 5px"></span>
</p>
</div>
</div>
@@ -89,12 +103,19 @@ const drop = (e: any) => {
<style lang="scss" scoped>
.basic-article {
display: flex;
gap: 12px;
gap: 16px;
height: 100%;
padding: 20px;
&.no-data {
gap: 5px !important;
}
.line-clamp {
display: -webkit-box;
/* -webkit-line-clamp: 3; */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
&.vertical {
flex-direction: column;
@@ -103,12 +124,6 @@ const drop = (e: any) => {
}
&.reverse {
flex-direction: column-reverse;
height: 100%;
@media (max-width: 640px) {
flex-direction:column;
}
}
}
&.border-custom {
@@ -116,39 +131,20 @@ const drop = (e: any) => {
}
&.borderLeft {
border-left: 1px solid;
padding-left: 16px;
}
&.borderRight {
border-right: 1px solid;
padding-right: 16px;
}
&.borderTop {
border-top: 1px solid;
padding-top: 16px;
}
&.borderBottom {
border-bottom: 1px solid;
padding-bottom: 16px;
}
&.borderRight ,
&.borderLeft,
&.borderTop,
&.borderBottom {
@media (max-width: 640px) {
border: 0;
padding: 0;
}
}
&.horizontal {
@apply sm:flex-row flex-col;
flex-direction: row;
.basic-article_thumbnail {
width: 40%;
@media (max-width: 640px) {
width: 100% !important;
}
}
&.reverse {
flex-direction: row-reverse;
@@ -158,32 +154,27 @@ const drop = (e: any) => {
&_thumbnail {
img {
width: 100%;
border-radius: 6px;
border-radius: 2px;
aspect-ratio: 16/10;
}
}
&_content {
padding: 10px 0px;
/* padding: 10px 0px; */
flex: 1;
&.no-data {
padding: 0px;
}
h3 {
font-size: 15px;
font-size: 16px;
}
p {
font-size: 12px;
font-size: 14px;
margin-top: 10px;
opacity: 85%;
}
}
// .empty-block {
// background-color: #409eff;
// height: 100px;
// display: block;
// }
}
</style>
components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
+44 -4
View File
@@ -48,7 +48,6 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
}
return null;
}
onMounted(async () => {
clickElement("figure", "custom-figure", "data-code");
@@ -94,12 +93,13 @@ async function copyLink() {
}
}
</script>
<template>
<div id="breakcrumb" class="flex justify-between items-center my-3">
<div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
<ul class="flex gap-6 items-center text-md">
<template v-for="(category, index) in currentCategoryTree" :key="index">
<li class="first:text-primary-600 hover:text-primary-600 font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
<li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
<nuxt-link :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
</li>
</template>
@@ -131,7 +131,7 @@ async function copyLink() {
<h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
<h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold pb-1 mb-3"></div>
<component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
</div>
@@ -152,6 +152,46 @@ async function copyLink() {
</button>
</div>
</div>
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.topics">
<div>
<Icon name="material-symbols:trending-up" class="w-5 h-5"/>
</div>
<span>Chủ đề: </span>
<ul>
<li v-for="(topic, index) in currentArticle?.topics" :key="index" class="mb-1">
<nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link>
<!-- <nuxt-link :to="`topic/${topic.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link> -->
</li>
</ul>
</div>
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.events">
<div>
<Icon name="ic:baseline-event" class="w-5 h-5"/>
</div>
<span>Sự kiện: </span>
<ul>
<li v-for="(event, index) in currentArticle?.events" :key="index" class="mb-1">
<nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link>
<!-- <nuxt-link :to="`event/${event.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link> -->
</li>
</ul>
</div>
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.tags">
<div>
<Icon name="mdi:tag" class="w-5 h-5"/>
</div>
<span>Tags: </span>
<ul class="flex gap-6 flex-wrap">
<li v-for="(tag, index) in currentArticle?.tags" :key="index" class="mb-1 font-normal text-black-500 relative after:absolute after:content-['/'] after:right--4 last:after:content-[''] after:text-[#eee]">
<nuxt-link to="#" class="hover:text-primary-600">{{ tag.title }}</nuxt-link>
<!-- <nuxt-link :to="`topic/${tag.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ tag.title }}</nuxt-link> -->
</li>
</ul>
</div>
</template>
<style lang="scss" scoped>
components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue
+1 -1
View File
@@ -84,7 +84,7 @@ async function copyLink() {
<ul class="flex gap-6 items-center text-md">
<template v-for="(category, index) in currentCategoryTree" :key="index">
<li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
<nuxt-link :class="index !== 0 ? '!text-black' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
<nuxt-link :class="index !== 0 ? '!text-black-500' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
</li>
</template>
</ul>
components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue
+1 -1
View File
@@ -228,7 +228,7 @@ const durationComputed = computed(() => {
<div class="flex items-center justify-center gap-4 flex-1 text-28px text-primary-600">
<Icon @click="replayAndForward(-10)" name="fluent:skip-back-10-48-filled" />
<button @click="togglePlayer" class="bg-transparent">
<Icon v-if="isPlayed" name="material-symbols:play-arrow" class="text-64px" />
<Icon v-if="isPlayed" name="material-symbols:play-arrow-rounded" class="text-64px" />
<Icon v-if="!isPlayed" name="material-symbols:pause" class="text-64px" />
</button>