仓库管理系统07

系统主界面

<template>

   <el-container style="height: 100%; border: 1px solid #eee">

  <el-aside :width="aside_width"  style="background-color: rgb(238, 241, 246); margin-left: -1px;" >

        <Aside :isCollapse="isCollapse"></Aside>

  </el-aside>

 

  <el-container style="height: 100%;">

    <el-header style="text-align: right; font-size: 12px;border-bottom: rgb(118, 118, 118) solid;" >

    <Header @doCollapse="doCollapse" :icon="icon"></Header>

    </el-header>

   

    <el-main style="height: 100%;">

    <router-view></router-view>

    </el-main>

  </el-container>

</el-container>

</template>

<script>

    import Aside from './Aside.vue'

    import Header from './Header.vue'

    export default{

    name:"Index",

    components:{

        Aside,Header

    },

    data(){

        return{

            isCollapse:false,

            aside_width:'200px',

            icon:'el-icon-s-fold',

        }

    },

    methods:{

        doCollapse(){

            this.isCollapse = !this.isCollapse;

            this.isCollapse == true ? (this.aside_width='64px',this.icon='el-icon-s-unfold'):(this.aside_width = '200px',this.icon='el-icon-s-fold');  

        }

    }

  };

</script>

<style>

     .el-header {

    /* */

    color: #333;

    line-height: 60px;

  }

  .el-main{

    padding: 5px;

  }

  .el-aside {

    color: #333;

  }

</style>