<template>
|
<div class="home-page">
|
<div class="pannel page-pannel1">
|
<module-a />
|
</div>
|
<el-row class="page-pannel-row page-pannel-row2">
|
<el-col :span="14" class="padding-col">
|
<div class="pannel page-pannel-full">
|
<module-b />
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div class="pannel page-pannel-full">
|
<module-c />
|
</div>
|
</el-col>
|
</el-row>
|
<el-row class="page-pannel-row3">
|
<el-col :span="14" class="padding-col">
|
<div class="pannel page-pannel-full">
|
<module-d />
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div class="pannel page-pannel-full">
|
<module-e />
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import ModuleA from './compontents/ModuleA.vue'
|
import ModuleB from './compontents/ModuleB.vue'
|
import ModuleC from './compontents/ModuleC.vue'
|
import ModuleD from './compontents/ModuleD.vue'
|
import ModuleE from './compontents/ModuleE.vue'
|
export default {
|
name:'homePage',
|
components:{ModuleA,ModuleB,ModuleC,ModuleD,ModuleE},
|
provide: {
|
echarts: echarts
|
},
|
mounted() {
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home-page{
|
.pannel{
|
background-color: #FFFFFF;
|
border-radius: 6px;
|
}
|
.page-pannel1{
|
margin-bottom: 16px;
|
min-height: 198px;
|
}
|
.page-pannel-row{
|
margin-bottom: 16px;
|
}
|
.page-pannel-row2{
|
height: 443px;
|
}
|
.page-pannel-full{
|
height: 100%;
|
}
|
}
|
.el-col.padding-col{
|
padding-right: 16px;
|
}
|
</style>
|
<style lang="scss">
|
.home-page{
|
.pannel-title{
|
color: #7b7b7b;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
</style>
|
