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

init

Browse Source
This commit is contained in:
MoreStrive
2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
+72
View File
@@ -0,0 +1,72 @@
<script setup lang="ts">
const props = defineProps<{
layout?: any
}>()
const CLASS_FOR_LAYOUT = computed(() => {
let _classForLayout = {};
switch (props.layout) {
case 'Full_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container full-size-layout',
};
break;
case 'Center_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container center-layout',
};
break;
case 'Background_Page':
_classForLayout = {
page_container: 'page_container full-size-page background-container',
layout_container: 'layout_container center-layout',
};
break;
default:
_classForLayout = {
page_container: 'page_container',
layout_container: 'layout_container',
};
break;
}
return _classForLayout;
})
</script>
<template>
<div :class="[CLASS_FOR_LAYOUT.page_container]">
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 40px;
}
</style>
components/dynamic-page/page/layouts/articles/Long.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container center-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
</style>
components/dynamic-page/page/layouts/articles/None.vue
+42
View File
@@ -0,0 +1,42 @@
/*
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
- ContentType: None=0 | General=1 | Photo=2 | Audio=3 | Video=4 | Graphic=5 | Document=6 | Interaction=7 (Poll,Quiz)
*/
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container full-size-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 40px;
}
</style>
components/dynamic-page/page/layouts/articles/Normal.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container center-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
</style>
components/dynamic-page/page/layouts/articles/Page.vue
+42
View File
@@ -0,0 +1,42 @@
/*
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
- ContentType: None=0 | General=1 | Photo=2 | Audio=3 | Video=4 | Graphic=5 | Document=6 | Interaction=7 (Poll,Quiz)
*/
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container full-size-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 40px;
}
</style>
components/dynamic-page/page/layouts/articles/Short.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container center-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
</style>
components/dynamic-page/page/layouts/index.ts
+8
View File
@@ -0,0 +1,8 @@
export { default as BASE_LAYOUT } from './Default.vue'
// Article
export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
export { default as ARTICLE_NONE_LAYOUT } from './articles/None.vue'
export { default as ARTICLE_NORMAL_LAYOUT } from './articles/Normal.vue'
export { default as ARTICLE_PAGE_LAYOUT } from './articles/Page.vue'
export { default as ARTICLE_SHORT_LAYOUT } from './articles/Short.vue'
components/dynamic-page/page/layouts/index.vue
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts" setup>
import { layouts } from "@/definitions/enum";
import {
BASE_LAYOUT,
ARTICLE_SHORT_LAYOUT,
ARTICLE_PAGE_LAYOUT,
ARTICLE_NORMAL_LAYOUT,
ARTICLE_NONE_LAYOUT,
ARTICLE_LONG_LAYOUT,
} from './index';
const _props = defineProps<{
settings?: any,
}>()
const definedDynamicPageLayout: Record<string, any> = {
'Default': BASE_LAYOUT,
[layouts.FULL_PAGE]: BASE_LAYOUT,
[layouts.CENTER_PAGE]: BASE_LAYOUT,
[layouts.BACKGROUND_PAGE]: BASE_LAYOUT,
'ARTICLE_SHORT': ARTICLE_SHORT_LAYOUT,
'ARTICLE_PAGE': ARTICLE_PAGE_LAYOUT,
'ARTICLE_NORMAL': ARTICLE_NORMAL_LAYOUT,
'ARTICLE_NONE': ARTICLE_NONE_LAYOUT,
'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
}
const getCurrentLayout = computed(() => _props.settings && _props.settings.layout);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
props = {
...props,
[key]: value
}
}
return props;
};
})
</script>
<template>
<component :is="definedDynamicPageLayout[getCurrentLayout] || null" v-bind="GET_PROPS()">
<slot />
</component>
</template>
components/dynamic-page/page/templates/articles/Default.vue
+19
View File
@@ -0,0 +1,19 @@
<script setup lang="ts">
import DynamicLayout from '~/components/dynamic-page/page/layouts/index.vue';
import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
const props = defineProps<{
settings?: any
}>()
</script>
<template>
<div class="h-100 overflow-y-auto">
<HeaderHomeTemplate />
<DynamicLayout :settings="props.settings">
<slot />
</DynamicLayout>
<FooterHomeTemplate />
</div>
</template>
components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
+237
View File
@@ -0,0 +1,237 @@
<script setup lang="ts">
</script>
<template>
<div>
useCmsPageStore
</div>
</template>
<style lang="scss" scoped>
.col-span-8 {
grid-column: span 8 / span 8;
@media (max-width: 1150px) {
grid-column: span 7 / span 7;
}
}
.col-span-12 {
grid-column: span 12 / span 12 !important;
}
.mbootom-5 {
margin-bottom: 5px;
}
.mbootom-14 {
margin-bottom: 14px;
}
.text-neutral-500 {
color: #737373;
}
.grid-col-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
&.grid-col-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.flex-col {
display: flex;
flex-direction: column;
.text-span {
font-size: 1rem;
line-height: 1.75rem;
font-weight: 700;
letter-spacing: 0.025em;
flex: 1;
word-break: break-word;
}
.text-a {
font-size: 0.8rem;
line-height: 1rem;
}
}
.lg-row {
@media (min-width: 1300px) {
flex-direction: row;
justify-content: space-between;
}
}
.footer1 {
margin-top: 1.5rem;
background-color: #ffffff;
color: black;
border-top: 1px solid #bfbfbf;
&-wrap {
max-width: 90%;
margin: auto;
padding-top: 1rem;
padding-left: 0;
padding-right: 0;
.section-right {
display: grid;
margin-bottom: 0.5rem;
gap: 1rem;
font-size: 0.8rem;
line-height: 1.25rem;
font-weight: 400;
@media (min-width: 950px) {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.footer-category {
display: grid;
gap: 1rem;
height: 100%;
/* grid-template-columns: repeat(5, minmax(0, 1fr)); */
&.grid-col-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
&.grid-col-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.item-nav {
padding: 10px;
.text {
font-size: 0.8rem;
line-height: 1.25rem;
color: black;
}
}
.drag-new {
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
background: #215486;
font-size: 40px;
color: #fff;
margin: 0 11px;
max-width: 200px;
height: 30px;
}
}
&-4 {
display: grid;
grid-column: span 4 / span 4;
grid-auto-rows: max;
gap: 1rem;
&.border-top-left-0 {
border-left: 0;
border-top: 1px solid #bfbfbf;
padding-top: 1rem;
}
@media (max-width: 1150px) {
grid-column: span 5 / span 5;
}
@media (min-width: 950px) {
padding-left: 1rem;
border-left: 1px solid #bfbfbf;
}
.text {
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.75rem;
font-weight: 700;
text-transform: uppercase;
&-wrap {
display: flex;
flex-direction: column;
gap: 0.75rem;
white-space: nowrap;
.text-item {
display: flex;
gap: 0.5rem;
align-items: center;
max-width: 100%;
.text-child {
font-size: 0.8rem;
line-height: 1.25rem;
flex: 1;
word-break: break-word;
}
}
}
}
}
}
.section-bottom {
display: flex;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
align-items: center;
@media (min-width: 640px) {
flex-direction: row;
}
.ssr {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
a {
font-size: 0.8rem;
color: #737373;
line-height: 1.25rem;
@media (min-width: 1024px) {
font-size: 1rem;
line-height: 1.5rem;
}
}
}
&__left {
display: flex;
justify-content: center;
align-items: center;
@media (min-width: 640px) {
order: 1;
}
}
&__right {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
.icon1 {
color: #737373;
display: grid;
place-items: center;
border-radius: 9999px;
border: 1px solid #737373;
transition-duration: 300ms;
width: 32px;
height: 32px;
}
@media (min-width: 640px) {
order: 3;
}
}
}
}
}
</style>
components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
+237
View File
@@ -0,0 +1,237 @@
<script setup lang="ts">
</script>
<template>
<div>
useCmsPageStore
</div>
</template>
<style lang="scss" scoped>
.col-span-8 {
grid-column: span 8 / span 8;
@media (max-width: 1150px) {
grid-column: span 7 / span 7;
}
}
.col-span-12 {
grid-column: span 12 / span 12 !important;
}
.mbootom-5 {
margin-bottom: 5px;
}
.mbootom-14 {
margin-bottom: 14px;
}
.text-neutral-500 {
color: #737373;
}
.grid-col-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
&.grid-col-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.flex-col {
display: flex;
flex-direction: column;
.text-span {
font-size: 1rem;
line-height: 1.75rem;
font-weight: 700;
letter-spacing: 0.025em;
flex: 1;
word-break: break-word;
}
.text-a {
font-size: 0.8rem;
line-height: 1rem;
}
}
.lg-row {
@media (min-width: 1300px) {
flex-direction: row;
justify-content: space-between;
}
}
.footer1 {
margin-top: 1.5rem;
background-color: #ffffff;
color: black;
border-top: 1px solid #bfbfbf;
&-wrap {
max-width: 90%;
margin: auto;
padding-top: 1rem;
padding-left: 0;
padding-right: 0;
.section-right {
display: grid;
margin-bottom: 0.5rem;
gap: 1rem;
font-size: 0.8rem;
line-height: 1.25rem;
font-weight: 400;
@media (min-width: 950px) {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.footer-category {
display: grid;
gap: 1rem;
height: 100%;
/* grid-template-columns: repeat(5, minmax(0, 1fr)); */
&.grid-col-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
&.grid-col-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.item-nav {
padding: 10px;
.text {
font-size: 0.8rem;
line-height: 1.25rem;
color: black;
}
}
.drag-new {
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
background: #215486;
font-size: 40px;
color: #fff;
margin: 0 11px;
max-width: 200px;
height: 30px;
}
}
&-4 {
display: grid;
grid-column: span 4 / span 4;
grid-auto-rows: max;
gap: 1rem;
&.border-top-left-0 {
border-left: 0;
border-top: 1px solid #bfbfbf;
padding-top: 1rem;
}
@media (max-width: 1150px) {
grid-column: span 5 / span 5;
}
@media (min-width: 950px) {
padding-left: 1rem;
border-left: 1px solid #bfbfbf;
}
.text {
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.75rem;
font-weight: 700;
text-transform: uppercase;
&-wrap {
display: flex;
flex-direction: column;
gap: 0.75rem;
white-space: nowrap;
.text-item {
display: flex;
gap: 0.5rem;
align-items: center;
max-width: 100%;
.text-child {
font-size: 0.8rem;
line-height: 1.25rem;
flex: 1;
word-break: break-word;
}
}
}
}
}
}
.section-bottom {
display: flex;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
align-items: center;
@media (min-width: 640px) {
flex-direction: row;
}
.ssr {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
a {
font-size: 0.8rem;
color: #737373;
line-height: 1.25rem;
@media (min-width: 1024px) {
font-size: 1rem;
line-height: 1.5rem;
}
}
}
&__left {
display: flex;
justify-content: center;
align-items: center;
@media (min-width: 640px) {
order: 1;
}
}
&__right {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
.icon1 {
color: #737373;
display: grid;
place-items: center;
border-radius: 9999px;
border: 1px solid #737373;
transition-duration: 300ms;
width: 32px;
height: 32px;
}
@media (min-width: 640px) {
order: 3;
}
}
}
}
}
</style>
components/dynamic-page/page/templates/components/headers/logo.svg
+132
View File
@@ -0,0 +1,132 @@
<svg `viewBox="0 0 693 315" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="693" height="315" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0586 26.0907H76.5475L89.0139 54.0907H25.525L13.0586 26.0907Z"
fill="#262626" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M25.525 54.0907L13.0586 26.0907H76.5475L89.0139 54.0907L139.685 167.901L107.941 239.2L25.525 54.0907Z"
fill="#262626" />
<path d="M245 77H289.5C304.136 77 316 88.8645 316 103.5C316 118.136 304.136 130 289.5 130H245V77Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M245 77H244.036H243.66L243.214 78H245V77Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M294.88 99.6374L244.036 77H243.66L243.214 78L183.966 211.074L235.124 233.852L294.88 99.6374Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M202.823 26.0907H266.312L253.846 54.0907H190.357L194 45.9081L202.823 26.0907Z" fill="#EC3E36" />
<path d="M107.941 239.2L139.685 310.499L171.43 239.2L139.685 167.901L107.941 239.2Z" fill="#EC3E36" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M202.823 26.0907L194 45.9081V179.091H303.5C345.75 179.091 380 144.841 380 102.591C380 60.3409 345.75 26.0907 303.5 26.0907L202.823 26.0907Z"
fill="#EC3E36" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M171.43 239.2L139.685 167.901L190.357 54.0907L194 45.9081L202.823 26.0907H266.312L253.846 54.0907L171.43 239.2Z"
fill="#EC3E36" />
<path d="M245 77H289.5C304.136 77 316 88.8645 316 103.5V103.5C316 118.136 304.136 130 289.5 130H245V77Z"
fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M245 77H244.036H243.66L243.214 78H245V77Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M294.88 99.6374L244.036 77H243.66L243.214 78L183.966 211.074L235.124 233.852L294.88 99.6374Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M202.823 26.0907H266.312L253.846 54.0907H190.357L194 45.9081L202.823 26.0907Z" fill="#EC3E36" />
<path d="M107.941 239.2L139.685 310.499L171.43 239.2L139.685 167.901L107.941 239.2Z" fill="#EC3E36" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M202.823 26.0907L194 45.9081V179.091H303.5C345.75 179.091 380 144.841 380 102.591C380 60.3409 345.75 26.0907 303.5 26.0907L202.823 26.0907Z"
fill="#EC3E36" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M171.43 239.2L139.685 167.901L190.357 54.0907L194 45.9081L202.823 26.0907H266.312L253.846 54.0907L171.43 239.2Z"
fill="#EC3E36" />
<path
d="M245.034 77.1399H289.534C304.17 77.1399 316.034 89.0043 316.034 103.64V103.64C316.034 118.275 304.17 130.14 289.534 130.14H245.034V77.1399Z"
fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M245.034 77.1398H244.07H243.694L243.249 78.1398H245.034V77.1398Z"
fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M294.915 99.7773L244.07 77.1398H243.694L243.249 78.1398L184 211.214L235.159 233.992L294.915 99.7773Z"
fill="white" />
<path d="M205 209.322L225.941 209.322L244.5 281.094L226.778 281.127L205 209.322Z" fill="#1A1A1A" />
<path d="M269.491 208.806L248.379 208.829L232 281.092L249.646 281.116L269.491 208.806Z" fill="#1A1A1A" />
<path d="M327 209.195H345V281.195H327V209.195Z" fill="#1A1A1A" />
<rect x="358" y="208.431" width="21" height="73" fill="#1A1A1A" />
<path
d="M376 208.431H387.5C401.031 208.431 412 219.4 412 232.931V232.931C412 246.462 401.031 257.431 387.5 257.431H376V208.431Z"
fill="#1A1A1A" />
<path
d="M379 225.431H385.5C389.642 225.431 393 228.789 393 232.931V232.931C393 237.073 389.642 240.431 385.5 240.431H379V225.431Z"
fill="white" />
<rect x="425" y="208.431" width="19" height="73" fill="#1A1A1A" />
<path
d="M443 208.431H459.5C473.031 208.431 484 219.4 484 232.931V232.931C484 246.462 473.031 257.431 459.5 257.431H443V208.431Z"
fill="#1A1A1A" />
<path
d="M444 225.431H456.5C460.642 225.431 464 228.789 464 232.931V232.931C464 237.073 460.642 240.431 456.5 240.431H444V225.431Z"
fill="white" />
<path d="M450.564 251.949L468.306 242.001L484.868 281.225L462.462 281.225L450.564 251.949Z" fill="#1A1A1A" />
<rect x="497" y="208.431" width="20" height="73" fill="#1A1A1A" />
<rect x="507" y="208.431" width="46" height="19" fill="#1A1A1A" />
<rect x="512" y="263.431" width="41" height="18" fill="#1A1A1A" />
<rect x="514" y="237.431" width="29" height="16" fill="#1A1A1A" />
<rect x="571" y="266.437" width="40" height="14" rx="7" fill="#0B5398" />
<path d="M566 263.437H604V281.437H566V263.437Z" fill="#1A1A1A" />
<ellipse cx="603.5" cy="259.437" rx="19.5" ry="22" fill="#1A1A1A" />
<rect x="580" y="225.437" width="25" height="12" rx="6" fill="#F5F5F5" />
<rect x="570" y="252.437" width="34" height="11" rx="5.5" fill="white" />
<rect x="589" y="238.437" width="20" height="13" rx="6.5" fill="#0B5398" />
<path d="M618.611 226.028L585.748 226.009L585.757 208.431L618.62 208.45L618.611 226.028Z" fill="#1A1A1A" />
<ellipse cx="19.3494" cy="22.0044" rx="19.3494" ry="22.0044"
transform="matrix(-1 -0.000571404 0.000499233 -1 605.053 252.474)" fill="#1A1A1A" />
<path
d="M610.184 237.45L590.914 237.439C587.759 237.437 585.202 234.878 585.204 231.723V231.723C585.205 228.568 587.764 226.011 590.92 226.013L610.189 226.024L610.184 237.45Z"
fill="white" />
<rect width="22.315" height="13.9922" rx="6.99612"
transform="matrix(-1 -0.000571404 0.000499233 -1 609.698 252.372)" fill="#1A1A1A" />
<rect x="641" y="266.437" width="40" height="14" rx="7" fill="#0B5398" />
<path d="M636 263.437H674V281.437H636V263.437Z" fill="#1A1A1A" />
<ellipse cx="673.5" cy="259.437" rx="19.5" ry="22" fill="#1A1A1A" />
<rect x="650" y="225.437" width="25" height="12" rx="6" fill="#F5F5F5" />
<rect x="640" y="252.437" width="34" height="11" rx="5.5" fill="white" />
<rect x="659" y="238.437" width="20" height="13" rx="6.5" fill="#0B5398" />
<path d="M688.611 226.028L655.748 226.009L655.757 208.431L688.62 208.45L688.611 226.028Z" fill="#1A1A1A" />
<ellipse cx="19.3494" cy="22.0044" rx="19.3494" ry="22.0044"
transform="matrix(-1 -0.000571404 0.000499233 -1 675.053 252.474)" fill="#1A1A1A" />
<path
d="M680.184 237.45L660.914 237.439C657.759 237.437 655.202 234.878 655.204 231.723V231.723C655.205 228.568 657.764 226.011 660.92 226.013L680.189 226.024L680.184 237.45Z"
fill="white" />
<rect width="22.315" height="13.9922" rx="6.99612"
transform="matrix(-1 -0.000571404 0.000499233 -1 679.698 252.372)" fill="#1A1A1A" />
<path d="M282 209.195H299.152H300V281.195H282V209.195Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M327 280.195H326V280.946L326.179 281.195H327V280.195Z"
fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M299.152 209.195L284.621 223.419L326 280.946L326.179 281.195L326.182 281.2L341.494 266.211L301 209.915L300.483 209.195H300H299.152Z"
fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M299.152 209.195H299V210.195H301V209.915L300.483 209.195H299.152Z"
fill="#1A1A1A" />
<rect x="299.737" y="208.182" width="3.7116" height="3.43404" transform="rotate(-36 299.737 208.182)"
fill="white" />
<rect x="302" y="207.431" width="25" height="3" fill="white" />
<rect x="282" y="280.431" width="18" height="1" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M345 280.431H326V280.948L326.351 281.431H326.663H345V280.431Z"
fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M326.611 280.233L325.871 280.77L326 280.948L326.351 281.431H326.663L327.198 281.042L326.611 280.233Z"
fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M227.195 279.423L226.345 279.683L226.574 280.431L226.88 281.431H227.469L227.78 281.336L227.195 279.423Z"
fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M226.574 280.431H249.833L249.56 281.431H248.181H227.469H226.88L226.574 280.431Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M250.01 279.783L248.727 279.433L248.181 281.431H249.56L249.833 280.431L250.01 279.783Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M206.271 210.241L205.717 208.431H204.729L205.034 209.431L205.367 210.518L206.271 210.241Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M224.233 208.431L224.653 209.955L226.004 209.583L225.962 209.431L225.686 208.431H224.233Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M249.055 211.213L249.697 208.431H248.481L248.25 209.431L247.9 210.946L249.055 211.213Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M268.585 208.431L268 210.344L268.956 210.636L269.325 209.431L269.63 208.431H268.585Z" fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M249.697 208.431H248.481L248.25 209.431H269.325L269.63 208.431H268.585H249.697ZM224.233 208.431H225.686L225.962 209.431H205.034L204.729 208.431H205.717H224.233Z"
fill="#1A1A1A" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M282 208.431H299.922L300.648 209.431H282V208.431Z"
fill="#1A1A1A" />
<path d="M301 209.431V208.431H299.922L300.648 209.431H301Z" fill="white" />
<rect x="327" y="208.431" width="18" height="1" fill="#1A1A1A" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

components/dynamic-page/page/templates/homes/Basic.vue
+19
View File
@@ -0,0 +1,19 @@
<script setup lang="ts">
import DynamicLayout from '~/components/dynamic-page/page/layouts/index.vue';
import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
const props = defineProps<{
settings?: any
}>()
</script>
<template>
<div>
<HeaderHomeTemplate />
<DynamicLayout :settings="props.settings">
<slot />
</DynamicLayout>
<FooterHomeTemplate />
</div>
</template>
components/dynamic-page/page/templates/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as HomeBasic } from './homes/Basic.vue'
components/dynamic-page/page/templates/index.vue
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts" setup>
import { HomeBasic } from './index';
const _props = defineProps<{
settings: any
}>()
const definedDynamicPage: Record<string, any> = {
'Home' : HomeBasic,
}
const getCurrentTemplate = computed(() => {
return _props.settings && _props.settings.template || '';
});
const GET_PROPS = computed(() => {
return () => {
let props : any = {};
if (_props.settings) {
for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
props = {
...props,
[key]: value
}
}
}
return props;
};
})
</script>
<template>
<component :is="definedDynamicPage[getCurrentTemplate] || null" v-bind="{...(GET_PROPS()), settings: _props.settings}">
<slot />
</component>
</template>