布局 Layout ​

<template>
    <Layout class="demo">
        <LayoutHeader>header</LayoutHeader>
        <LayoutBody>content</LayoutBody>
        <LayoutFooter>footer</LayoutFooter>
    </Layout>
</template>
<style lang="less" scoped>
.demo {
    color: #fff;
    font-size: 12px;
    text-align: center;

    .app-layout-header {
        padding: 10px 0;
        background-color: var(--app-primary);
    }

    .app-layout-body {
        opacity: 0.8;
        background-color: var(--app-success);
    }

    .app-layout-footer {
        padding: 16px 0;
        background-color: var(--app-danger);
    }
}
</style>

<template>
    <Layout class="demo">
        <LayoutSide>side</LayoutSide>
        <LayoutBody>content</LayoutBody>
        <LayoutSide>side</LayoutSide>
    </Layout>
</template>
<style lang="less" scoped>
.demo {
    color: #fff;
    font-size: 12px;
    text-align: center;

    .app-layout-side {
        padding: 10px 0;
        background-color: var(--app-warning);
    }

    .app-layout-body {
        opacity: 0.8;
        background-color: var(--app-success);
    }
}
</style>

<template>
    <Layout class="demo">
        <LayoutHeader>header</LayoutHeader>
        <Layout>
            <LayoutSide>side</LayoutSide>
            <LayoutBody>content</LayoutBody>
        </Layout>
    </Layout>
</template>
<style lang="less" scoped>
.demo {
    color: #fff;
    font-size: 12px;
    text-align: center;

    .app-layout-header {
        padding: 10px 0;
        background-color: var(--app-primary);
    }

    .app-layout-side {
        padding: 10px 0;
        background-color: var(--app-warning);
    }

    .app-layout-body {
        opacity: 0.8;
        background-color: var(--app-success);
    }
}
</style>

<template>
    <Layout class="demo">
        <LayoutSide>side</LayoutSide>
        <Layout>
            <LayoutHeader>header</LayoutHeader>
            <LayoutBody>body</LayoutBody>
            <LayoutFooter>footer</LayoutFooter>
        </Layout>
    </Layout>
    <br>
    <Layout class="demo">
        <Layout>
            <LayoutHeader>header</LayoutHeader>
            <LayoutBody>body</LayoutBody>
            <LayoutFooter>footer</LayoutFooter>
        </Layout>
        <LayoutSide>side</LayoutSide>
    </Layout>
    <br>
    <Layout class="demo">
        <LayoutHeader>header</LayoutHeader>
        <LayoutBody>
            <Layout>
                <LayoutSide>side</LayoutSide>
                <LayoutBody>content</LayoutBody>
            </Layout>
        </LayoutBody>
        <LayoutFooter>footer</LayoutFooter>
    </Layout>
    <br>
    <Layout class="demo">
        <LayoutHeader>header</LayoutHeader>
        <LayoutBody>
            <Layout>
                <LayoutBody>content</LayoutBody>
                <LayoutSide>side</LayoutSide>
            </Layout>
        </LayoutBody>
        <LayoutFooter>footer</LayoutFooter>
    </Layout>
</template>
<style lang="less" scoped>
.demo {
    color: #fff;
    font-size: 12px;
    text-align: center;

    .app-layout-header {
        padding: 10px 0;
        background-color: var(--app-primary);
    }

    .app-layout-side {
        opacity: 0.9;
        padding: 10px 0;
        background-color: var(--app-warning);
    }

    .app-layout-body {
        opacity: 0.8;
        background-color: var(--app-success);
    }

    .app-layout-footer {
        padding: 16px 0;
        background-color: var(--app-danger);
    }
}
</style>