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/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>