Vue+Elementui+iView编写后台

花了几天时间学习，谁便写了如下界面，打的都是草稿，所以命名...啥的都不规范。请大家见谅（未完待续)

1.login.vue代码部分 

<template>
<div style="width: 100%;height:100%;" id="loginMain">
<vueCanvasNest></vueCanvasNest>
<div class="Header">
    <div class="leftHeader"><img src="static/img/logo.png"/></div>
    <div class="rightHeader" align="right" >
    <el-button class="button-new-tag" size="small" >注册</el-button>
    <el-button class="button-new-tag" size="small" >常见问题</el-button>
    
    </div>
</div>
<div class="Content" v-bind:style="{height : fontSize + 'px' }">
<div class="leftContent" align="right" ><img width="384px" height="267.6px" src="static/img/login.png" /></div>
<div class="rightContent">
<el-button plain>
        <form id="loginForm" name="loginForm" method="post" action="user/loginValidation">
            <table  width="280" height="100%">
                   <tr >
                    <td  colspan="2" align="left"  height="40px" >
                        账号登录
                    </td>                           
                </tr>                       
               
                <tr height="40px">                   
                    <td>
                    <Input type="text"  placeholder="请输入用户名"" >
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                    </td>
                    <td></td>
                </tr>
                <tr height="40px">                    
                    <td>
                        <Input type="password" placeholder="请输入密码">
                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                           </Input>
                    </td>
                       <td></td>
                </tr>                
                <tr height="40px">                    
                    <td align="left">
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                    </td>
                       <td></td>
                </tr>                      
                  <tr>                    
                    <td align="center" >
                         <Button type="primary" long>登录</Button>
                    </td>
                       <td></td>
                </tr>
            </table>
        </form>
</el-button>        
</div>
</div>
<div class="Footer" align="center">    
<div align="center"  style="width:100%;padding-top:20px">
    <div>Copyright © 2009-2018 BANK OF URUMQI. All right reserved.</div>
    <div>© 2009-2018 xxxx银行股份有限公司 版权所有 新ICP备13002150号</div>
</div> 
</div>
</div>


</template>
<style>
.leftContent{
    float:left;    
    width:50%;
    --background-color:#666666;
    height:100%;
    padding-top:60px;    
    padding-right:36px;    

    
}
.rightContent{
    float:left;    
    clear:right;
    width:50%;
    padding-top:80px;
    padding-left:100px;        
    --background-color:#FF0000;
    height:100%;
}
body{
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.leftHeader{
    --background-color:#666666;    
    --background-position:left;
        
    padding-top:30px;    
    padding-left:90px;    
    width:50%;
    float:left;    
}
.rightHeader{    
    float:right;    
    width:50%;
    clear:right;
    padding-right:50px;
    padding-top:30px;    
}
.Header{
    padding-top:0px;
    line-height:60px;
    overflow: hidden;
    border-bottom-width:2px;
    border-bottom-color:#0066FF;
    --background-color:#FF0000;
    
}
.Content{    
    width: 100%;
    background-color:#5787F6;
    
}
.Footer{
    --padding-top:30px;

    height:80px;
    width: 100%;
    --background-color:#E0ECFF;
}
</style>
<script>
import vueCanvasNest from '@/components/canvas-nest.vue'
export default {
    name:'login',
     components: { vueCanvasNest },
    data () {
        return {            
            fontSize:`${document.documentElement.clientHeight}`-210 
        }
    }
}

</script>

 2.Main.vue代码部分

<style scoped>
.layout-logo{
    width: 230px;
    height: 30px;  
    float: left;
    padding-top: 18px;
    padding-left: 20px;
    --background:#FF0;
}
.layout-nav{
    --width: 40%;
    margin: 0 auto;
    --background:#F00;
    float: left;
    padding-top:5px;
    border-bottom:0px
}
.layout-nav-right{
    --width: 40%;
    float:right;
    --background:#FFF;
    margin-top:25px;    
}
.logoHeader{
    height:40px;
    width:140px;
    padding-top:0px;
    padding-left:5px;
    padding-bottom:0px;
    background:f5f7f9;
}
.headerbuttion{
    padding:2px 2px 2px 2px;
    background:#EBF1F6;
    
}
.headerbadge{
    --margin-top:12px;
    margin-right:18px;
}

.line{
    width:100%;
    border:solid 1px #515A6E;
    border-top-color:#515A6E;
}
.el-header{
    --background:#515A6E;
    background:#EBF1F6;
    height: 70px; 
    padding:0px 0px 0px 0px;
}
.el-main{
    background:#FFFFFF;
    width:100%
}    
.el-footer{
    --background-color: #B3C0AA;
    --line-height:15px;
    --height:15px;
    background-color:#EBF1F6 ;
    padding-top:5px;
}
.el-aside{
    background-color:#FFFFFF ;
}  
</style>
<template>
<el-container>
      <el-header height="70px">
    <div class="layout-logo"><el-button class="logoHeader"  plain><img width="108px" height="25.6px" src="static/img/logomain.png" /></el-button></div>
    <div class="layout-nav" align="right" >
        <Menu mode="horizontal"  style="background:#EBF1F6;" >                             
            <MenuItem name="1">
                <span  @click="jumpMenu('a')"> 
                <Icon type="ios-navigate"></Icon>
                   首页
                   </span>
            </MenuItem>
            <MenuItem name="2">
                <span  @click="jumpMenu('a')"> 
                <Icon type="ios-keypad"></Icon>
                   系统管理
                   </span>
            </MenuItem>                        
            <MenuItem name="3">
                <span  @click="jumpMenu('a')"> 
                <Icon type="ios-analytics"></Icon>
                   企业管理
                   </span>
            </MenuItem>
            <MenuItem name="4">
                <span  @click="jumpMenu('a')"> 
                <Icon type="ios-keypad"></Icon>
                    商户管理
                </span>
            </MenuItem>   
            <MenuItem name="5" >
                <span  @click="jumpMenu('b')"> 
                <Icon type="ios-keypad"></Icon>
                   我的工作台
                   </span>
            </MenuItem>                  
        </Menu>
    </div>
    <div  class="layout-nav-right" align="right" >    
                    <el-badge :value="3" class="headerbadge">
                          <el-button size="mini" class="headerbuttion"><Icon type="md-reorder"  size="23" color="#606266"/></el-button>
                    </el-badge>                         
                    <el-badge :value="3" class="headerbadge">
                          <el-button size="mini" class="headerbuttion"><Icon type="ios-mail-outline" size="23" color="#606266"/></el-button>
                    </el-badge>
                    <el-badge :value="12" class="headerbadge">
                          <el-button size="mini" class="headerbuttion"><Icon type="md-notifications" size="23" color="#606266" /></el-button>
                    </el-badge>
                   <span  style="float:right;margin-top:-18px;margin-right:10px;margin-left:20px;clear:both;">
                    <el-badge  >
                    <Menu mode="horizontal"  theme="dark" width="90px" style=" padding: 0 0 0 0;background:#EBF1F6;">
                      <Submenu name="1" >
                        <template slot="title"  width="20px" >                            
                              <Icon size="40" type="ios-contact" style="padding: 0 0 0 0;" color="#606266"/> <span style="color:#000000">admin</span>
                        
                        </template>        
                        <MenuItem name="1-1" width="20px">修改信息</MenuItem>                
                        <MenuItem name="1-2" width="20px">密码修改</MenuItem>
                        <MenuItem name="1-3" width="20px">退出</MenuItem>
                                            
                   </Submenu>
                   </Menu>
                   </el-badge>
                     <el-button size="mini" class="headerbuttion"><Icon type="md-exit"  size="18" color="#606266"/></el-button>
                   </span>                            
                   
    
    </div>
    </el-header>

  <el-container style="padding: 0 0 0 0;background-color:#F0F;">
    <el-aside v-bind:style="{height : fontSize + 'px'}" width="230px">
       <csiimenu :csiimenu="csiimenu" @jump="jump"></csiimenu>
    </el-aside>
    <el-container>
    <el-main>
        <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
          <el-tab-pane >
           qwe
          </el-tab-pane>
        </el-tabs>
    </el-main>   
    
  </el-container>
  </el-container>
  <csiifooter/>

</el-container>

</template>
<script>
import Vue from 'vue'
import csiimenu from '@/views/csii/csiimenu'
import csiifooter from '@/views/csii/csiifooter'
export default {
    name:'index',
    
    data () {
        return {
            fontSize:`${document.documentElement.clientHeight}`-97,
            csiimenu:[{name:"系统管理",index:'0',icon:"el-icon-menu",childs:[{name:"用户管理",menuid:"1-1"},{name:"角色管理",menuid:"1-2"},{name:"权限管理",menuid:"1-3"},{name:"数据字典",menuid:"1-4"}]},{name:"企业管理",index:'1',icon:"el-icon-menu",childs:[{name:"企业管理1",menuid:"b1"},{name:"企业管理2",menuid:"b2"}]},{name:"商户管理",index:'2',icon:"el-icon-setting",childs:[{name:"商户管理1",menuid:"a1"},{name:"商户管理2",menuid:"a2"}]}]
            
        }
    },
    components: {
      'csiimenu': csiimenu,
      'csiifooter':csiifooter
    },
    methods:{
        init(){
            console.dir(this.$data);
        },
        jumpMenu(num){
            if(num=='a'){
                this.$data.csiimenu=[{name:"系统管理",index:'0',icon:"el-icon-menu",childs:[{name:"用户管理",menuid:"1-1"},{name:"角色管理",menuid:"1-2"},{name:"权限管理",menuid:"1-3"},{name:"数据字典",menuid:"1-4"}]},{name:"企业管理",index:'1',icon:"el-icon-menu",childs:[{name:"企业管理1",menuid:"b1"},{name:"企业管理2",menuid:"b2"}]},{name:"商户管理",index:'2',icon:"el-icon-setting",childs:[{name:"商户管理1",menuid:"a1"},{name:"商户管理2",menuid:"a2"}]}];
            }else{
                this.$data.csiimenu=[{name:"我的工作台",index:'2',icon:"el-icon-setting",childs:[{name:"主题设置",menuid:"a1"},{name:"消息设置",menuid:"a2"}]}];
            }
            
            console.dir(this.$refs);
            //console.dir(this.$data.fontSize);
        },
        jump(name){
            alert(name);
        }
    }
}

</script>

3.left.vue

 

<template>         
 <el-menu :default-openeds="['0']" v-bind:style="{height : fontSize + 'px'}" :collapse="isCollapse">
     <li v-for="(item, index) in csiimenu">
          <el-submenu  :index="item.index">
            <template slot="title"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></template>
            <el-menu-item-group>      
             <li v-for="(child,index) in item.childs">
              <el-menu-item :index="child.menuid" @click="jump(child.name)">{{child.name}}</el-menu-item>
              </li>
            </el-menu-item-group>
            
          </el-submenu>
    </li>     
        </el-menu>

</template>
<script>
import Vue from 'vue'
export default {
    name:'csiimenu',
    props:{
        csiimenu:{
        type:Array, 
        required:false,
        default:function(){
            return [{name:"系统管理",index:'0',icon:"el-icon-menu",childs:[{name:"用户管理",menuid:"1-1"},{name:"角色管理",menuid:"1-2"},{name:"权限管理",menuid:"1-3"},{name:"数据字典",menuid:"1-4"}]},{name:"企业管理",index:'1',icon:"el-icon-menu",childs:[{name:"企业管理1",menuid:"b1"},{name:"企业管理2",menuid:"b2"}]},{name:"商户管理",index:'2',icon:"el-icon-setting",childs:[{name:"商户管理1",menuid:"a1"},{name:"商户管理2",menuid:"a2"}]}]
        }
    }},
    data () {
        return {
            fontSize:`${document.documentElement.clientHeight}`-97,
            isCollapse: false
            //items:[{name:"系统管理",index:'0',icon:"el-icon-menu",childs:[{name:"用户管理",menuid:"1-1"},{name:"角色管理",menuid:"1-2"},{name:"权限管理",menuid:"1-3"},{name:"数据字典",menuid:"1-4"}]},{name:"企业管理",index:'1',icon:"el-icon-menu",childs:[{name:"企业管理1",menuid:"b1"},{name:"企业管理2",menuid:"b2"}]},{name:"商户管理",index:'2',icon:"el-icon-setting",childs:[{name:"商户管理1",menuid:"a1"},{name:"商户管理2",menuid:"a2"}]}]
        }
    },
    methods:{
        jump(name){
        alert(name);
        this.$emit('jump',name);
        
        }
    }
}

</script>

 

4.footer.vue

<template>         
  <el-footer height="30px"  >
          <div align="left"  style="width:50%;float:left;"><span style="padding-left:10px;">当前用户</span>:<strong style="margin-left:5px;">连长</strong></div> 
        <div align="right" style="width:50%;float:left; ">
            &copy; 版权所有及技术支持:&nbsp;<a href="" target="_blank"  style="color:#0033CC;width:400px" title="银行技术专家" >科蓝股份有限公司</a><span style="padding-left:20px;padding-right:10px;width:300px" id="sysTime"></span>
            
        </div>
  </el-footer>
</template>
<script>


window.setInterval(function(){    
        document.getElementById('sysTime').innerHTML=getCurrDate();
}, 1000);
function fillDateZero(num){
    if(parseInt(num)<10){
    
        return "0"+num;
    }
    return num;
}
function getCurrDate(){
  
   var d=new Date();
   var s= d.getFullYear()+"-";
   s+=(d.getMonth()+1)+"-";
   s+= d.getDate()+ " ";
   s+= d.getHours()+":";
   s += fillDateZero(d.getMinutes())+":";
   s += fillDateZero(d.getSeconds());
   return s;
}


</script>