minhnt-dev: fix page template

2024-07-12 19:13:34 +07:00
parent 212e6d357c
commit dffbe39fa6
19 changed files with 413 additions and 265 deletions
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageLayouts, enumPageTemplate, enumPageKey } from "@/definitions/enum";
+
+const props = defineProps<{
+    layout?: any,
+    label?:any
+}>()
+
+const CLASS_FOR_LAYOUT = computed(() => {
+  let _classForLayout = {};
+  switch (props.layout) {
+    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT']:
+      _classForLayout = {
+        page_container: "page_container full-size-page",
+        layout_container: "layout_container center-layout",
+      };
+      break;
+    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL']:
+      _classForLayout = {
+        page_container: "page_container full-size-page",
+        layout_container: "layout_container full-size-layout",
+      };
+      break;
+    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['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 {
+        // padding: 20px 0;
+        &.full-size-page {
+            width: 100%;
+        }
+        // .full-size-layout {
+        //     padding-left: 20px;
+        //     padding-right: 20px;
+        // }
+    }
+
+    .layout_container {
+        padding-top: 20px;
+
+        &.center-layout {
+            max-width: 1440px;
+            padding: 0 27.5px;
+            margin: auto;
+        }
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+</style>