后台layout布局手写版（没有使用elementui框架自带的layout布局）

<template>
        <div class="layout_container">
            <!-- 左侧菜单 -->
            <div class="layout_slider"></div>
            <!-- 顶部导航 -->
            <div class="layout_tabbar"></div>
            <!-- main内容区域 -->
            <div class="layout_main"></div>
        </div>
    </template>


    <style scoped lang="scss">
    
    .layout_container {
        width: 100%;
        height: 100vh;

        .layout_slider {
            color: white;
            width: 260px;
            height: 100vh;
            background: #ccc;
        }

        .layout_tabbar {
            position: fixed;
            width: calc(100% - 260px);
            height:50px;
            top: 0px;
            left: $base-menu-width;
            transition: all 0.3s;
            &.fold {
                width: calc(100vw - $base-menu-min-width );
                left: $base-menu-min-width;
            }
        }

        .layout_main {
            position: absolute;
            width: calc(100% - 260px);
            height: calc(100vh - 50px);
            left: 260px;
            top: 50px;
            padding: 20px;
            overflow: auto;
        }
    }
    </style>