35 lines
821 B
Vue
35 lines
821 B
Vue
|
<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>
|