<template>
    <div class="plan-editer">
        <div class="top-bar">
            <topToolBar></topToolBar>
        </div>
        <div class="contents">
            <div class="left-bar">
                <leftToolBar></leftToolBar>
            </div>
            <div class="base-plan-editer">
                <basePlanEditer></basePlanEditer>
            </div>
            <div class="right-bar">
                <rightPropertyBar></rightPropertyBar>
            </div>
        </div>
        <div class="bottom-bar">
            <bottomToolBar />
        </div>
    </div>
</template>
<script>
import leftToolBar from "./leftToolBar";
import rightPropertyBar from "./rightPropertyBar";
import basePlanEditer from "./basePlanEditer";
import topToolBar from "./topToolBar";
import bottomToolBar from "./bottomToolBar";
export default {
    components: { leftToolBar, rightPropertyBar, topToolBar, basePlanEditer, bottomToolBar },
    data() {
        return {};
    },
    methods: {},
};
</script>
<style lang="less">
.plan-editer {
    width: 100%;
    height: 100%;
    position: relative;
    .top-bar {
        width: 100%;
        z-index: 99;
    }
    .contents {
        width: 100%;
        height: calc(~"100% - 48px");
        display: flex;
        justify-content: flex-start;
        .right-bar {
            // width: 240px;
            height: 100%;
        }
        .base-plan-editer {
            flex: 1;
            height: 100%;
        }
    }
    .bottom-bar {
        position: absolute;
        // width: 100%;
        // right: 0;
        bottom: 20px;
        right: 250px;
    }
}
</style>