init

2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+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<{
+    layout?: any
+}>()
+
+const classForLayout = computed(() => {
+    let _empty = {
+        page_container: 'page_container',
+        layout_container: 'layout_container',
+    };
+    switch (props.layout) {
+        case 'Full_Page':
+            _empty = {
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container full-size-layout',
+            };
+            break;
+        case 'Center_Page':
+            _empty = {
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container center-layout',
+            };
+            break;
+        case 'Background_Page':
+            _empty = {
+                page_container: 'page_container full-size-page background-container',
+                layout_container: 'layout_container center-layout',
+            };
+            break;
+        default: 
+            break;
+    }
+    return _empty;
+})
+</script>
+
+<template>
+    <div class="h-100 overflow-y-auto">
+        <HeaderHomeTemplate /> 
+
+        <div :class="[classForLayout.page_container]">
+            <div :class="[classForLayout.layout_container]">
+                <slot />
+            </div>
+        </div>
+
+        <FooterHomeTemplate />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .body-center {
+        padding: 40px 0px;
+    }
+
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding: 0 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+</style>