signal_web/src/views/Index.vue

<template>
    <div class="container">
        <el-container>
            <el-header>
                <Headside @lefthide="left_hide"></Headside>
            </el-header>
            <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
                <Navside :isCollapse="isCollapse" @TabsAdd="handleTabsAdd"></Navside>
            </el-aside>
            <el-container class="indexContainer">
                <el-main>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
                <el-footer>
                    <p class="footerP">Copyright © 2020 <a href="http://signal.tickdig.com:85/#/">HTTP://SIGNAL.TICKDIG.COM/</a> TICKDIG 版权所有</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 Tabs from '@/components/Tabs.vue'
    import Navs from '../api/Navs';

    export default {
        name: 'Home',
        data() {
            return {
                isCollapse: true,
                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;
            },
            handleTabsAdd: function (data) {
                let that = this;
                let str = ""; //存放第一层遍历的值
                let strArray = []; //存放第二层遍历的值
                let item = {};
                if (data == 99) {
                    // 退出直接后面不处理了
                    return false
                }
                if (data == 1) {
                    // 首页直接处理了
                    item = {
                        title: '系统首页',
                        name: '系统首页',
                        clmurl: '/',
                    };
                } else {
                    for (var i = 0; i < Navs.length; i++) {
                        str += Navs[i].id; //获取第一层的值
                        for (var j = 0; j < Navs[i].childs.length; j++) {
                            if (Navs[i].childs[j].clmid == data) {
                                strArray.push(Navs[i].childs[j])
                            }
                        }
                    }
                    item = {
                        title: strArray[0].clmname,
                        name: strArray[0].clmname,
                        clmurl: strArray[0].clmurl,
                    };
                }
                // 去掉重复的
                that.handleTabsList.map(function (e, i) {
                    if (e.title == item.title) {
                        that.handleTabsList.splice(i, 1)
                    }
                });
                that.handleTabsList.push(item);
                that.editableTabsValue = item.title;
            },
        },
        components: {
            Headside, Navside
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-main {
        padding: 10px;
    }

    .container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #01355B;
        background: url("../assets/img/mainBg.png") top center no-repeat;
        background-size: 100% 100%;
        overflow-y: hidden;
    }

    .container::-webkit-scrollbar { /*滚动条整体样式*/

        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

    .container::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #01355B;

    }

    .container::-webkit-scrollbar-track { /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: none;

    }


    .el-header {
        height: 60px !important;
        padding: 0 !important;
    }

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

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

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

    .el-main {
        /*overflow: hidden;*/
    }

    .indexContainer {
        /*width: 97%;*/
        position: absolute;
        float: right;
        right: 0;
        left: 55px;
        top: 60px;
    }

    .indexContainer {
        position: absolute;
        top: 60px;
        left: 45px;
        /*right: 10px;*/
        bottom: 3px;
        /*width: 100%;*/
        /*height: 100%;*/
        /*max-height: 850px;*/
        /*overflow-y: scroll;*/
    }

    .el-main::-webkit-scrollbar { /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .el-main::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #01355B;
    }

    .el-main::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: none;
    }

    .footerP {
        margin: 5px 0;
        padding: 0;
    }

    .footerP a {
        color: #2c3e50;
    }

    .el-footer {
        height: 30px !important;
        padding: 0 5px;
    }
</style>