layout

src/layouts/index.vue

@@ -1,24 +1,68 @@
 <template>
-  <section class="base-laytout">
+  <section
+    class="base-laytout"
+    :style="{ width: `${state.style.width}px`, height: `${state.style.height}px`, transform: `${state.style.transform}` }"
+  >
     <custom-scroll-title class="base-laytout-header" />
     <section class="base-laytout-main">
       <router-view />
     </section>
   </section>
 </template>
+<script setup>
+import { onMounted, reactive } from 'vue';
+
+const state = reactive({
+  style: {
+    width: '1920',
+    height: '1080',
+    transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
+  },
+  scale: {},
+});
+
+const getScale = () => {
+  const w = window.innerWidth / state.style.width;
+  const h = window.innerHeight / state.style.height;
+  return { x: w, y: h };
+};
+
+const setScale = () => {
+  state.scale = getScale();
+  state.style.transform = 'scaleY(' + state.scale.y + ') scaleX(' + state.scale.x + ') translate(-50%, -50%)';
+};
+
+onMounted(() => {
+  setScale();
+  window.onresize = () => {
+    setScale();
+  };
+});
+</script>
 <style lang="scss" scoped>
 .base-laytout {
+  @include flex-column();
+  position: fixed;
+  z-index: 100;
+  transform-origin: 0 0;
+  left: 50%;
+  top: 50%;
+  transition: 0.3s;
+  user-select: none;
   box-sizing: border-box;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100;
   background:
     url('../assets/images/basic/containerBG.png') no-repeat center 100%,
     url('@/assets/images/basic/containerBotBG.png') no-repeat bottom center;
   &-header {
+    width: 100%;
     height: 60px;
+    margin-bottom: 60px;
   }
   &-main {
-    height: calc(100vh - 60px);
+    flex: 1;
+    min-height: calc(100vh - 60px);
   }
 }
 </style>