<template>
|
<div id="app">
|
<div class="layout">
|
<Layout>
|
<Header class="page-header">
|
<div class="app-logo">板卡自动测试系统</div>
|
<div class="app-tools">
|
<ul>
|
<li><a class="active">管理员</a></li>
|
<li><a>退出系统</a></li>
|
</ul>
|
</div>
|
</Header>
|
<main-menu></main-menu>
|
<Content class="page-content">
|
<router-view></router-view>
|
</Content>
|
</Layout>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MainMenu from './components/MainMenu';
|
export default {
|
components:{
|
MainMenu
|
},
|
name: 'app'
|
}
|
</script>
|
<style scoped>
|
.ivu-layout-header.page-header {
|
position: relative;
|
height: 60px;
|
background: #EDEDED;
|
box-shadow: 0 2px 6px rgba(0,0,0,.2)
|
}
|
.page-header .app-logo {
|
position: absolute;
|
color: #2F89C9;
|
font-size: 18px;
|
}
|
.page-header .app-tools {
|
float: right;
|
}
|
.app-tools ul li{
|
float:left;
|
list-style: none;
|
}
|
.app-tools ul li a {
|
display: block;
|
height: 60px;
|
padding: 0 12px;
|
font-size: 18px;
|
line-height: 60px;
|
}
|
.app-tools ul li a.active {
|
background-color: #0070C0;
|
color: #FFFFFF;
|
}
|
.app-tools ul li a:active {
|
background-color: #0070C0;
|
color: #FFFFFF;
|
}
|
.ivu-layout-content.page-content {
|
margin-top: 2px;
|
height: calc(100vh - 171px);
|
overflow-y: auto;
|
background: -webkit-linear-gradient(#E7EDF7, #ABC0E4); /* Safari 5.1 - 6.0 */
|
background: -o-linear-gradient(#E7EDF7, #ABC0E4); /* Opera 11.1 - 12.0 */
|
background: -moz-linear-gradient(#E7EDF7, #ABC0E4); /* Firefox 3.6 - 15 */
|
background: linear-gradient(#E7EDF7, #ABC0E4); /* 标准的语法 */
|
}
|
|
</style>
|
