<template>
|
<div class="homeBox">
|
<el-container>
|
<!-- 顶部标题 -->
|
<el-header>Header</el-header>
|
<el-main>
|
<el-container>
|
<el-aside> </el-aside>
|
<el-main>
|
<div class="homeContent">
|
<leftTree />
|
<centerContent v-show="!store.$state.setHrefFlag" />
|
<rightTabs v-show="!store.$state.setHrefFlag" />
|
<herfContent v-if="store.$state.setHrefFlag" />
|
|
</div>
|
</el-main>
|
<el-aside> </el-aside>
|
</el-container>
|
</el-main>
|
|
<!-- 底部标题 -->
|
<el-footer>Footer</el-footer>
|
</el-container>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
import leftTree from '../leftTree/index.vue'
|
import centerContent from '../centerContent/index.vue';
|
import rightTabs from '../rightTabs/index.vue';
|
import herfContent from '../herfContent/index.vue';
|
import useStore from '../../store/defineStore.ts';
|
|
const store = useStore();
|
const ShowFalg = false;
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
.homeBox {
|
width: 100%;
|
height: 100%;
|
|
.el-container {
|
width: 100%;
|
height: 100%;
|
|
}
|
|
.el-header {
|
height: 60px;
|
background: skyblue;
|
padding: 0px;
|
|
}
|
|
.el-aside {
|
width: 200px;
|
height: 100%;
|
|
}
|
|
.el-main {
|
height: 100%;
|
padding: 10px;
|
position: relative;
|
|
.homeContent {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
}
|
}
|
|
|
.el-footer {
|
height: 60px;
|
background: skyblue;
|
position: relative;
|
|
|
}
|
|
|
}
|
</style>
|
