一张订单图做一个小项目六

menu页面的的布局  效果图

使用 上  (下)左右的布局方式  

直接用elementui的组件即可

代码如下  组件的使用  应该有手  有眼会查找就行

<template>
<div class="about">
  <el-container>
       <el-header>
         <h1>27极简</h1>
       </el-header>
  <el-container>
 <el-aside width="150px">
 <el-row class="tac" width="150px">
  <el-col :span="12">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      style="width:150px" @select="select">

      <el-menu-item index="list/parta" >
        <i class="el-icon-menu"></i>
        <span slot="title">甲方管理</span>
      </el-menu-item>
      <el-menu-item index="list/partb" >
        <i class="el-icon-document"></i>
        <span slot="title">乙方管理</span>
      </el-menu-item>
      <el-menu-item index="list/order">
        <i class="el-icon-setting"></i>
        <span slot="title">订单管理</span>
      </el-menu-item>
    </el-menu>
  </el-col>

</el-row>
    </el-aside>
    <el-main>
      中心页面
    </el-main>
  </el-container>
</el-container>
  </div>
</template>
<script>
export default {
  methods:{
    select(index,path){
      
    }
   }
}
</script>
<style scoped>
.about{
  height: 100%;
  width: 100%;
}
.el-container{
    height: 100%;
  width: 100%;
}
  .el-header {
    background-color: #409EFF;
    color:wheat;

  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 100%;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
      height: 100%;
  }
</style>