<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>
