initHeader

frontend/src/layouts/CnHeader/index.vue

@@ -0,0 +1,92 @@
+<!--主界面的头部，包含了logo、导航、用户信息-->
+<template>
+  <el-menu
+    :default-active='activeIndex'
+    popper-effect='light'
+    mode='horizontal'
+    :router='false'
+    class='el-menu-njcn text-center'
+    :ellipsis='false'
+    background-color='var(--el-color-primary)'
+    text-color='#fff'
+    active-text-color='#ffd04b'
+    @select='handleSelect'
+    :style="{height:headerHeight+'px'}"
+  >
+    <img
+      class='float-left'
+      :style="{height:headerHeight+'px'}"
+      src='@/assets/images/logo.png'
+    />
+    <el-menu-item index='0'>
+      <el-icon><HomeFilled /></el-icon>
+      <span>运营管理</span>
+    </el-menu-item>
+    <el-sub-menu index='1' :popper-offset="0">
+      <template #title>
+        <el-icon><Monitor /></el-icon>
+        台账管理
+      </template>
+      <el-menu-item index='/home1'>脚本检测管理</el-menu-item>
+      <el-menu-item index='/home1'>被检设备管理</el-menu-item>
+      <el-menu-item index='/home1'>误差体系管理</el-menu-item>
+      <el-menu-item index='/home1'>检测源管理</el-menu-item>
+    </el-sub-menu>
+    <el-sub-menu index='2' :popper-offset="0">
+      <template #title>
+        <el-icon><UserFilled /></el-icon>
+        权限管理
+      </template>
+      <el-menu-item index='/home2'>用户管理</el-menu-item>
+      <el-menu-item index='/home2'>角色管理</el-menu-item>
+      <el-menu-item index='/home2'>菜单管理</el-menu-item>
+    </el-sub-menu>
+    <el-sub-menu index='3' :popper-offset="0">
+      <template #title>
+       <el-icon><Setting /></el-icon>
+        系统配置
+      </template>
+      <el-menu-item index='/home3'>系统配置</el-menu-item>
+      <el-menu-item index='/home3'>数据字典</el-menu-item>
+      <el-menu-item index='/home3'>报告模板</el-menu-item>
+      <el-menu-item index='/home3'>版本注册</el-menu-item>
+    </el-sub-menu>
+    <el-menu-item index='0'>
+      <el-icon><Document /></el-icon>
+      日志管理
+    </el-menu-item>
+    <el-menu-item index='0'>
+      <el-icon><DataLine /></el-icon>
+      统计分析
+    </el-menu-item>
+  </el-menu>
+</template>
+<script setup lang='ts'>
+defineOptions({
+  name: 'customHeader',
+})
+import { ref, onMounted } from 'vue'
+
+const activeIndex = ref('1')
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key)
+}
+
+defineProps(['headerHeight'])
+</script>
+<style scoped>
+
+/* 浮动菜单的颜色 */
+.el-menu-item:hover {
+  --el-menu-hover-bg-color: var(--el-color-primary-light-3);
+}
+
+.el-menu--horizontal > .el-menu-item:nth-child(1) {
+  margin-right: auto;
+}
+
+.el-menu--horizontal.el-menu {
+  border-bottom: solid 0 var(--el-menu-border-color);
+}
+
+</style>

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>