Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2
This commit is contained in:
@@ -4,15 +4,15 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
|
||||
import { useDynamicPageStore } from '~/stores/dynamic-page';
|
||||
const { currentPage } = storeToRefs(useDynamicPageStore());
|
||||
const props = defineProps<{
|
||||
type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
|
||||
type?: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
|
||||
}>();
|
||||
|
||||
const defineTypeRecusive = {
|
||||
TOP_NAVIGATION: enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]]['NAVIGATION_TOP_DEFAULT'],
|
||||
BOTTOM_NAVIGATION: enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]]['NAVIGATION_BOTTOM_DEFAULT'],
|
||||
TOP_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT'],
|
||||
BOTTOM_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT'],
|
||||
};
|
||||
|
||||
const findDataPosition = computed(() => {
|
||||
const findDataPosition = computed<any>(() => {
|
||||
let result = {};
|
||||
switch (props.type) {
|
||||
case defineTypeRecusive.TOP_NAVIGATION:
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div class="pt-5">
|
||||
<div class="content p-3">
|
||||
<span class="text-12px text-[#AFADB5] text-end block">Quảng full</span>
|
||||
<img class="block w-full h-full" src="/assets/images/tienphong/main-ads-2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
font-size: 18px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
@@ -1 +1,2 @@
|
||||
export { default as Default_Ads } from './Default.vue'
|
||||
export { default as Main_Ads } from './Main.vue'
|
||||
|
||||
+2
-1
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
import { Default_Ads } from "./index";
|
||||
import { Default_Ads, Main_Ads } from "./index";
|
||||
|
||||
const _props = defineProps<{
|
||||
settings: any;
|
||||
@@ -9,6 +9,7 @@ const _props = defineProps<{
|
||||
}>();
|
||||
const definedDynamicComponent: Record<string, any> = {
|
||||
[enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['DEFAULT']]: Default_Ads,
|
||||
[enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['MAIN']]: Main_Ads,
|
||||
};
|
||||
|
||||
const getCurrentComponent = computed(() => _props.settings.layout);
|
||||
|
||||
@@ -78,14 +78,15 @@ const parseData = computed(() => {
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</article>
|
||||
<div v-html="LAYOUT_PARSE.styleClasses"></div>
|
||||
<div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.card-audio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%; //tỷ lệ 9 /16;;
|
||||
padding-bottom: calc((16 / 9) * 100%);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
@@ -98,7 +99,7 @@ const parseData = computed(() => {
|
||||
.card-audio__content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
max-height: 100%;
|
||||
bottom: 0;
|
||||
padding: 20px 30px;
|
||||
z-index: 3;
|
||||
|
||||
@@ -25,32 +25,6 @@ const parseData = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <article class="article-card-default">
|
||||
<div class="article-card-default__content">
|
||||
<template v-if="currentArticle.tags && currentArticle?.tags.length > 0">
|
||||
<nuxt-link class="article-card-default__tag" :to="`/${currentArticle?.tags[0].code}`">
|
||||
<h5>{{ currentArticle?.tags[0].title }}</h5>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
|
||||
<nuxt-link class="article-card-default__title" :to="`/bai-viet/${currentArticle.code}`">
|
||||
<h2 v-html="currentArticle.title"></h2>
|
||||
<p v-html="currentArticle.intro"></p>
|
||||
</nuxt-link>
|
||||
|
||||
<div class="article-card-default__bottom">
|
||||
<span>{{ formatDate(String(currentArticle.createdOn), "DD/MM/YYYY | HH:mm") }}</span> /
|
||||
<nuxt-link :to="`/${currentArticle.category?.code}`"> {{ currentArticle.category?.title }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-card-default__thumbnail">
|
||||
<figure>
|
||||
<nuxt-link :to="`bai-viet${currentArticle.code}`">
|
||||
<img :src="currentArticle?.thumbnail ? currentArticle?.thumbnail : 'http://picsum.photos/1024/600?random=1'" :alt="currentArticle?.title" />
|
||||
</nuxt-link>
|
||||
</figure>
|
||||
</div>
|
||||
</article> -->
|
||||
<article
|
||||
v-if="parseData"
|
||||
class="basic-article border-custom"
|
||||
@@ -95,7 +69,7 @@ const parseData = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div v-html="LAYOUT_PARSE.styleClasses"></div>
|
||||
<div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -46,14 +46,6 @@ const mapActivesToItems = (index: number) => {
|
||||
</svg>
|
||||
|
||||
<h3
|
||||
:class="[
|
||||
index !== 0
|
||||
? store.page.classifyScreenByWidth({
|
||||
tablet: '',
|
||||
smartphone: 'd-none',
|
||||
})
|
||||
: '',
|
||||
]"
|
||||
:style="mapActivesToItems(index)['h3.categories']"
|
||||
>
|
||||
{{ component.title }}
|
||||
|
||||
+5
-5
@@ -5,10 +5,10 @@ import { enumPageComponentStaticChild } from "@/definitions/enum";
|
||||
|
||||
const props = defineProps<{
|
||||
records?: any[]
|
||||
component: any;
|
||||
component?: any;
|
||||
}>();
|
||||
|
||||
const globalState = ref({})
|
||||
const globalState = ref<any>({})
|
||||
const setGlobalState = (id: any) => {
|
||||
globalState.value[id] = !globalState.value[id];
|
||||
}
|
||||
@@ -19,7 +19,7 @@ const setGlobalState = (id: any) => {
|
||||
<div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
|
||||
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
|
||||
<div class="navigation-submenu">
|
||||
<div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
<div class="navigation_title ">{{ record?.title }}</div>
|
||||
<div class="navigation-item submenu-container dropdown-container">
|
||||
<RecusiveNavItem :records="record.childs" />
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@ const setGlobalState = (id: any) => {
|
||||
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
|
||||
<div class="navigation-submenu">
|
||||
<div class="position-relative ps-3">
|
||||
<div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
<div class="navigation_title ">{{ record?.title }}</div>
|
||||
</div>
|
||||
<div class="full-layout dropdown-container">
|
||||
<template v-if="record.data">
|
||||
@@ -40,7 +40,7 @@ const setGlobalState = (id: any) => {
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="navigation_title navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
<div class="navigation_title navigation-item" >{{ record?.title }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="big-temp">28°</div>
|
||||
<div class="name">Mưa nhẹ</div>
|
||||
</div>
|
||||
<div class="color-gray-2">
|
||||
<!-- <div class="color-gray-2">
|
||||
<p>Cao: 28° Thấp: 24°</p>
|
||||
<div>
|
||||
<span>Không khí:</span>
|
||||
@@ -52,9 +52,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-info-weather__right text-right color-gray-2">
|
||||
<!-- <div class="box-info-weather__right text-right color-gray-2">
|
||||
<div class="weather-tooltip mb40">
|
||||
<span class="weather-tooltip-group">
|
||||
<span>Cảm giác như 33° </span>
|
||||
@@ -134,7 +134,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@@ -145,7 +145,7 @@
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
min-height: 240px;
|
||||
// min-height: 240px;
|
||||
&.flexbox {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
|
||||
@@ -9,7 +9,7 @@ const _props = defineProps<{
|
||||
}>();
|
||||
|
||||
const definedDynamicComponent: Record<string, any> = {
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']]['NAVIGATION_TOP_DEFAULT']]: WeatherDay,
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]["WEATHER"]]["WEATHER_DEFAULT"]]: WeatherDay,
|
||||
};
|
||||
|
||||
const getCurrentComponent = computed(() => _props.settings.layout);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "@/definitions/enum";
|
||||
import { NONE_DEFAULT_LAYOUT } from "./index";
|
||||
|
||||
@@ -36,7 +36,6 @@ const definedDynamicSection: Record<string, any> = {
|
||||
const getCurrentSection = computed(() => {
|
||||
return _props.settings.layout
|
||||
});
|
||||
|
||||
const GET_PROPS = computed(() => {
|
||||
return () => {
|
||||
let props: any = {};
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
|
||||
const props = defineProps<{
|
||||
layout?: string;
|
||||
@@ -19,11 +19,22 @@ const defineTypeRecusive = {
|
||||
const SETTING_OPTIONS = computed(() => {
|
||||
let _setting_options = {};
|
||||
switch (props.layout) {
|
||||
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
@@ -130,6 +141,19 @@ const CLASS_FOR_SECTION = computed(() => {
|
||||
section_layout: "section_layout two_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-5",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-2",
|
||||
2: "col-span-3",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
|
||||
const props = defineProps<{
|
||||
label?: any
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { Article_Section_Default } from "./index";
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
|
||||
|
||||
const _props = defineProps<{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
import { enumPageSectionKey } from "@/definitions/enum";
|
||||
import { None_Section } from "./index";
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
|
||||
const props = defineProps<{
|
||||
label?: any;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PageSection } from "@/models/cms";
|
||||
import type { PageSection } from "@/server/models/dynamic-page/index";
|
||||
import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
|
||||
import { None_Section_Default } from "./index";
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
|
||||
<div>
|
||||
<div class="footer-navigation-container">
|
||||
<div>
|
||||
<AssignComponent :type="enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]]['NAVIGATION_BOTTOM_DEFAULT']" />
|
||||
<AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ onMounted(() => {
|
||||
<img src="~/assets/images/tienphong/tamviet-logo.png" alt="">
|
||||
</div>
|
||||
<div class="main-header-navbar">
|
||||
<AssignComponent :type="enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]]['NAVIGATION_TOP_DEFAULT']" />
|
||||
<AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -155,7 +155,9 @@ export const pageSectionTempaltes = {
|
||||
export const pageSectionLayouts = {
|
||||
[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]: [
|
||||
{ title: "2 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_TWO'] },
|
||||
{ title: "Trái 1 Cột, giữa 2 Cột, phải 3 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_TWO_THREE'] },
|
||||
{ title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_LEFT_TWO'] },
|
||||
{ title: "6 Cột, phải 5 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FIVE'] },
|
||||
{ title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_RIGHT_TWO'] },
|
||||
{ title: "3 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_THREE'] },
|
||||
{ title: "4 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FOUR'] },
|
||||
@@ -268,6 +270,7 @@ export const pageComponentLayouts = {
|
||||
/* ADVERTISING */
|
||||
[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]: [
|
||||
{ title: "Cơ bản (300x260)", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['DEFAULT'] },
|
||||
{ title: "full width", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['MAIN'] },
|
||||
],
|
||||
|
||||
/* OTHER */
|
||||
|
||||
@@ -231,6 +231,8 @@ export const enumPageSectionTemplate = {
|
||||
export const enumPageSectionLayouts = {
|
||||
[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]: {
|
||||
'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
|
||||
'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3',
|
||||
'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5',
|
||||
'VERTICAL_LEFT_TWO': 'LAYOUT:vertical-TYPE:LEFT-MAX:2',
|
||||
'VERTICAL_RIGHT_TWO': 'LAYOUT:vertical-TYPE:RIGHT-MAX:2',
|
||||
'VERTICAL_THREE': 'LAYOUT:vertical-TYPE:Default-MAX:3',
|
||||
@@ -349,6 +351,7 @@ export const enumPageComponentLayouts = {
|
||||
/* ADVERTISING */
|
||||
[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]: {
|
||||
'DEFAULT': "TYPE:Default",
|
||||
'MAIN': "TYPE:Main"
|
||||
},
|
||||
|
||||
/** OTHER */
|
||||
|
||||
Reference in New Issue
Block a user