<template>
|
<div id="app">
|
<div class="page-container">
|
<page-header></page-header>
|
<page-nav></page-nav>
|
<div class="page-content">
|
<div class="page-content-container">
|
<div class="page-content-left">
|
<content-box
|
title="站点管理">
|
<my-tree
|
@tree-click="treeClick"></my-tree>
|
</content-box>
|
</div>
|
<div class="page-content-right">
|
<content-box
|
:title-left=true>
|
<div class="whyc-breadcrumb" slot="title">当前位置：{{$store.state.crumb}}</div>
|
<router-view></router-view>
|
</content-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PageHeader from './components/PageHeader'
|
import PageNav from './components/PageNav'
|
import ContentBox from './components/ContentBox'
|
import MyTree from './components/tree/Index'
|
|
export default {
|
name: 'App',
|
components: {
|
PageHeader,
|
PageNav,
|
ContentBox,
|
MyTree,
|
},
|
methods: {
|
treeClick: function(res) {
|
console.log(res);
|
}
|
}
|
}
|
</script>
|
|
<style>
|
#app {
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
background: url('./assets/images/dw_bg.jpg') no-repeat;
|
background-size: 100% 100%;
|
padding-left: 0.1rem;
|
padding-right: 0.1rem;
|
}
|
.page-container {
|
display: flex;
|
height: 100vh;
|
flex-direction: column;
|
}
|
.page-content {
|
flex: 1;
|
}
|
.page-content-container {
|
height: 100%;
|
box-sizing: border-box;
|
padding-top: 0.08rem;
|
padding-bottom: 0.08rem;
|
}
|
.page-content-left,
|
.page-content-right {
|
height: 100%;
|
}
|
.page-content-left {
|
float: left;
|
width: 3.8rem;
|
}
|
.page-content-right {
|
float: right;
|
width: calc(100vw - 4.06rem);
|
}
|
</style>
|
