组件化项目开发管理系统布局思路

实现全屏，不同组件页面的布局

头部组件是公共组件，只需要引入一次，而下面的内容就是不同的大组件，显示在router-outlet中。

<div class="page">
    <div class="header">
        <app-header></app-header>
    </div>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
</div>

// 放在全局样式中   /* 布局结构 */

.page {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    height: 80px;
    background: #222840;
}

.content {
    flex: 1;
    box-sizing: border-box;
    flex-direction: column;
    padding: 15px 15px 0 15px;
    overflow-y: auto;
}

.page_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
}

.search_box {
    height: 80px;
}

.table_data {
    flex: 1;
    box-sizing: border-box;
    border: 1px solid blue;
    overflow-y: auto;
}

子页面路由中显示内容

<div class="page_content">
    <div class="search_box"></div>

    <div class="table_data"></div>
</div>