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

悠悠 2021-11-09 19:24 228阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

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

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

// 放在全局样式中   /* 布局结构 */
    
    .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;
    }

#### 子页面路由中显示内容 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211109/f6823d7596f042ce996b1a27e96ad40b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20211109/0d7d3b9681fd466382b8cdc06c8c0482.png