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

12 篇文章 2 订阅

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值