<template>
    <div class="ht-base-layout-demo demo">
            <ht-base-layout>
                <Header>Header</Header>
                <Content>Content</Content>
                <Footer>Footer</Footer>
            </ht-base-layout>
            <br/>
            <ht-base-layout>
                <Header>Header</Header>
                <ht-base-layout>
                    <Sider hide-trigger>Sider</Sider>
                    <Content>Content</Content>
                </ht-base-layout>
                <Footer>Footer</Footer>
            </ht-base-layout>
            <br/>
            <ht-base-layout>
                <Header>Header</Header>
                <ht-base-layout>
                    <Content>Content</Content>
                    <Sider hide-trigger>Sider</Sider>
                </ht-base-layout>
                <Footer>Footer</Footer>
            </ht-base-layout>
            <br/>
            <ht-base-layout>
                <Sider hide-trigger>Sider</Sider>
                <ht-base-layout>
                    <Header>Header</Header>
                    <Content>Content</Content>
                    <Footer>Footer</Footer>
                </ht-base-layout>
            </ht-base-layout>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseLayoutDemo',
  }
</script>
<style>
    .ht-base-layout-demo {
        .ivu-layout-header {
            padding: 0 50px;
            height: 64px;
            line-height: 64px;
            background: #7cbce9;
            color: #fff;
        }
        .ivu-layout-content {
            background: #0f8de9;
            min-height: 120px;
            line-height: 120px;
            color: #fff;
            padding: 0 50px;
        }
        .ivu-layout-footer {
            padding: 24px 50px;
            font-size: 14px;
            background: #7cbce9;
            color: #fff;
        }
        .ivu-layout-sider-children {
            height: 100%;
            padding-top: .1px;
            margin-top: -.1px;
            color: #fff;
            background: #3a9fe8;
            min-height: 120px;
            line-height: 120px;
        }
    }
</style>

