initHeader

frontend/src/layouts/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class='common-layout'>
+    <el-container>
+      <el-header  :style="{'--el-header-height':headerHeight+'px',backgroundColor:'var(--el-color-primary)'}">
+       <cn-header :headerHeight='headerHeight' />
+      </el-header>
+      <el-main :style='{height:containerHeight}'>
+        <router-view />
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup lang='ts'>
+defineOptions({
+  name: 'home',
+})
+import { ref, computed } from 'vue'
+import CnHeader from '@/layouts/CnHeader/index.vue'
+let headerHeight = ref(70)
+
+let containerHeight = computed(() => {
+  const viewportHeight = window.innerHeight // 获取视口高度
+  const heightInPx = viewportHeight - headerHeight.value
+  return `${heightInPx}px`
+})
+
+
+
+</script>
+<style scoped lang='scss'>
+ .el-main{
+   padding: 10px;
+ }
+</style>