<template>
    <div class="IndexContainer">
        <el-container>
            <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
                <Navside :isCollapse="isCollapse"></Navside>
            </el-aside>
            <el-container>
                <el-header>
                    <Headside @lefthide="left_hide"></Headside>
                </el-header>
                <el-main>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
                <el-footer v-if="true"><p class="footer">济南佰意兴网络科技有限公司提供技术支持</p></el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src
    import Headside from '@/components/Headside.vue'
    import Navside from '@/components/Navside.vue'
    import Navs from '../api/Navs';

    export default {
        name: 'Home',
        data() {
            return {
                isCollapse: false,
                aSideState: false,
                thisClick: 0,
                tabwildState: 1,
                navs: Navs,
                handleTabsList: [{
                    title: '系统首页',
                    name: '1',
                    clmurl: '/',
                }],
                editableTabsValue: '1'
            }
        },
        methods: {
            left_hide() {
                this.aSideState = !this.aSideState;
                this.isCollapse = !this.isCollapse;
            },
        },
        components: {
            Headside,
            Navside
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-header {
        padding: 0 !important;
        height: 72px !important;
    }

    .shortElaside {
        width: 60px !important;
        overflow: hidden;
        height: 100%;
        float: left;
    }

    .lognElaside {
        width: 256px !important;
        overflow: hidden;
        height: 100%;
        float: left;
    }

    /deep/ .nav {
        width: 60px;
    }



    .IndexContainer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #F0F2F5;
    }

    .IndexContainer > .el-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 10px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        text-indent: -30%;
        font-size: 12px;
        color: #BDBDBD;
        background: #F0F2F5;
        z-index: 222;
    }

  .el-main {
        width: 100%;
        min-height: 800px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        overflow-y: hidden;
        padding: 10px 20px;
    }
</style>
