<template>
|
<div class="pageWarp">
|
<!-- 头部 -->
|
<page-header></page-header>
|
<!-- 面包屑导航 -->
|
<div class="pageBreadcrumb">
|
<breadcrumb></breadcrumb>
|
</div>
|
<!-- 内容区域 -->
|
<div class="pageContent">
|
<!-- 左侧菜单 -->
|
<div class="slideBarCon">
|
<page-menu></page-menu>
|
</div>
|
<!-- 右侧界面 -->
|
<div class="viewCon">
|
<!--这里的router-view用来渲染子页面-->
|
<router-view></router-view>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PageMenu from './components/PageMenu.vue'
|
import Breadcrumb from './components/breadcrumb.vue'
|
import PageHeader from './components/pageHeader.vue'
|
export default {
|
components: { PageMenu, Breadcrumb, PageHeader },
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.pageWarp {
|
width: 100%;
|
height: 100%;
|
}
|
|
.pageBreadcrumb {
|
background: #044096;
|
width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
}
|
|
.pageBreadcrumb .el-breadcrumb__inner,
|
.pageBreadcrumb /deep/ .el-breadcrumb__inner {
|
font-size: 17px;
|
color: #ffffff;
|
padding: 0 22px;
|
}
|
.pageBreadcrumb .el-breadcrumb__separator,
|
.pageBreadcrumb /deep/ .el-breadcrumb__separator {
|
color: #ffffff;
|
font-size: 17px;
|
margin: 0;
|
}
|
|
.pageBreadcrumb /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner,
|
.pageBreadcrumb /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
|
.pageBreadcrumb
|
/deep/
|
.el-breadcrumb__item:last-child
|
.el-breadcrumb__inner
|
a:hover,
|
.pageBreadcrumb
|
/deep/
|
.el-breadcrumb__item:last-child
|
.el-breadcrumb__inner:hover,
|
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner,
|
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
|
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
|
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
|
font-size: 17px;
|
color: #ffffff;
|
padding: 0 22px;
|
}
|
|
.pageContent {
|
width: 100%;
|
height: calc(100% - 128px);
|
display: flex;
|
}
|
|
.pageContent .slideBarCon {
|
width: 280px;
|
height: 100%;
|
background: #343345;
|
padding: 20px 0;
|
}
|
|
.pageContent .viewCon {
|
width: calc(100% - 280px);
|
height: 100%;
|
background-color: #e8e8e8;
|
}
|
</style>
|
