You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
house/fount/views/index.vue

44 lines
1.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<!-- 主容器使用 el-container 布局结构 -->
<el-container>
<!-- 引入顶部导航组件 -->
<index-header></index-header>
<!-- 内层容器 -->
<el-container>
<!-- 引入左侧菜单栏组件静态 -->
<index-aside></index-aside>
<!-- 引入主内容区域组件 -->
<index-main></index-main>
</el-container>
</el-container>
</template>
<script>
// 导入顶部导航组件
import IndexHeader from '@/components/index/IndexHeader'
// 导入左侧菜单栏组件(静态)
import IndexAside from '@/components/index/IndexAsideStatic'
// 导入主内容区域组件
import IndexMain from '@/components/index/IndexMain'
export default {
// 注册组件,使其可以在模板中使用
components: {
IndexHeader, // 顶部导航组件
IndexAside, // 左侧菜单栏组件
IndexMain // 主内容区域组件
}
}
</script>
<style lang="scss" scoped>
// 铺满全屏样式
.el-container {
position: absolute; /* 绝对定位 */
width: 100%; /* 宽度占满整个视口 */
top: 0; /* 距离顶部为0 */
left: 0; /* 距离左侧为0 */
bottom: 0; /* 距离底部为0实现高度自适应 */
}
</style>