flyLong/pc/src/views/Index.vue

<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: document.body.clientWidth < 1366,
                aSideState: false,
                thisClick: 0,
                tabwildState: 1,
                navs: Navs,
                handleTabsList: [{
                    title: '系统首页',
                    name: '1',
                    clmurl: '/',
                }],
                editableTabsValue: '1'
            }
        },
        mounted() {
            // checkScreen
            console.log(this.isCollapse);
            if (document.body.clientWidth < 1366) {
                this.$message.warning('请横屏使用本系统');
            }
        },
        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;
    }


    .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%;
        height: 100%;
        /*min-height: 800px;*/
        overflow: hidden;
        display: block;
        margin: 0 auto;
        overflow-y: hidden;
        padding: 10px 20px;
    }

    /*ipad only*/
    @media (min-width: 1025px) and (max-width: 1366px) {
        .shortElaside {
            width: 140px !important;
            /*width: 60px !important;*/
            overflow: hidden;
            height: 100%;
            float: left;
        }

        .lognElaside {
            width: 70px !important;
        }

        .logoContainer img {
            display: none !important;
        }

        .el-main {
            position: absolute;
            top: 70px;
            bottom: 20px;
            padding: 3px;
            padding-bottom: 60px;
            overflow-y: scroll;
        }

        .el-main > .context {
            /*height: 640px;*/
            /*overflow-y: scroll;*/
            padding: 6px !important;
        }

        .table {
            /*width: 950px;*/
            /*overflow-x: scroll;*/
        }

        .el-dialog {
            max-width: 960px;
        }

        .el-dialog__body {
            padding: 3px;
        }

        .el-transfer__buttons {
            width: 60px;
            padding: 3px;
        }

        .el-transfer .el-button + .el-button {
            float: right;
        }

        .el-container.is-vertical {
            position: absolute;
            left: 140px;
            top: 0;
            right: 0;
            bottom: 0;
            height: 100%;
        }

        .context {
            border-radius: 12px;
            height: 823px !important;
            overflow-y: scroll;
        }

        .el-dialog {
            padding: 5px;
            padding-bottom: 15px;
        }
    }

    @media (min-width: 960px) and (max-width: 1024px) {
        .shortElaside {
            /*width: 140px !important;*/
            width: 60px !important;
            overflow: hidden;
            height: 100%;
            float: left;
        }

        .el-container.is-vertical {
            left: 60px;
        }

        .el-transfer__buttons {
            width: 20px;
            padding: 3px;
        }
        .el-transfer .el-button + .el-button {
            float: right;
        }

        .context {
            border-radius: 12px;
            height: 823px !important;
            overflow-y: scroll;
        }

        .el-dialog {
            padding: 5px;
            padding-bottom: 15px;
        }

        .lognElaside {
            width: 70px !important;
        }

        .logoContainer img {
            display: none !important;
        }

        .el-main {
            position: absolute;
            top: 70px;
            bottom: 20px;
            padding: 3px;
            padding-bottom: 60px;
            overflow-y: scroll;
        }

        .el-main > .context {
            /*height: 640px;*/
            /*overflow-y: scroll;*/
            padding: 6px !important;
        }

        .table {
            /*width: 950px;*/
            /*overflow-x: scroll;*/
        }

        .el-dialog {
            max-width: 960px;
        }
    }
</style>