<template>
  <n-layout style="">
    <n-layout-header ref="nav">
      <navH />
    </n-layout-header>
    <n-scrollbar :style="cH">
      <router>
        <router-view />
      </router>
    </n-scrollbar>
  </n-layout>
</template>

<script setup>
import navH from "@/components/menu.vue";
import router from "@/components/router.vue";
import { onMounted } from "vue";

const nav = ref(null);
let contH = ref(0);
let cH = ref({});
onMounted(() => {
  getH();
});
function getH() {
  contH.value = nav.value.$el.clientHeight;
  cH.value = {
    height: document.documentElement.clientHeight - contH.value + "px",
    backgroundColor:"#f1f2f3"
  };
  // console.log(4, contH.value);
}
</script>

<style scoped lang="less">
:deep(.n-layout-header) {
  background-color: @dp;
}
</style>
