This commit is contained in:
MoreStrive
2024-07-01 16:06:28 +07:00
21 changed files with 77 additions and 64 deletions
@@ -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'
@@ -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,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>
+3
View File
@@ -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 */
+3
View File
@@ -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 */