Frame主体框架页面

F r a m e 主 体 框 架 页 面 Frame主体框架页面 Frame主体框架页面

<template>
<div class="frame">
    <el-container class="frame-container">
        <el-header class="header">
            <a href="/" class="brand"><strong>major</strong>AI平台</a>
        </el-header>
        <el-container>
            <el-aside width="200px" class="aside">Aside</el-aside>
            <el-container>
                <el-main class="main">Main</el-main>
                <el-footer class="footer">Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</template>

<script type="text/ecmascript-6">
import {Container,Aside,Header,Main,Footer} from 'element-ui'

export default {
  name: "Frame",
  data() {
    return {}
  },
  components:{
        [Container.name] :Container,
        [Aside.name]:Aside,
        [Header.name]:Header,
        [Main.name]:Main,
        [Footer.name]:Footer,

  }
}
</script>

<style scoped lang='scss'>
.frame-container{
  height: 100vh;
  .header{
    height: 200px;
    background: #00a65a;
    display: flex;
    .brand{
      width: 200px;
      margin-left: -20px;
      background-color:#008d4c;
      font-size: 20px;
      color: #fff;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .header-content{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 20px;
      color: #fff;
      .signout{
        cursor: pointer;
      }
    }
  }
  .aside{
    background-color: #545c64;
    .el-menu{
      .is-active{
        background-color: #434a50!important;
      }
    }
  }

  .main{
     background: salmon;
  }

  .footer{
    background: gray;
  }
}
</style>

<style scoped>
.aside >>> .el-menu{
  border-right: none;
}
</style>

import VueRouter from "vue-router"
import Vue from "vue"
import Frame from "./components/Frame"
import Login from "./components/Login"


Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:"/",
            component:Frame,
            name:"frame"
        },
        {
            path:"/login",
            component:Login,
            name:"login"
        }
    ]

})

export default router

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style lang="scss">
@import "styles/init.css"
</style>