<template>
|
<div id="data-view">
|
<dv-full-screen-container>
|
<top-header />
|
<div class="main-container">
|
<div class="left1" style="width: 20%;display:flex;flex-direction:column">
|
<dv-border-box-12>
|
<left1 />
|
</dv-border-box-12>
|
<dv-border-box-12>
|
<left12 />
|
</dv-border-box-12>
|
</div>
|
<div class="left2" style="width: 20%;display:flex;flex-direction:column">
|
<dv-border-box-12>
|
<left2 />
|
</dv-border-box-12>
|
<dv-border-box-12>
|
<left22 />
|
</dv-border-box-12>
|
<dv-border-box-12>
|
<left23 />
|
</dv-border-box-12>
|
</div>
|
<div class="middle" style="width: 40%;display:flex;flex-direction:column">
|
<dv-border-box-1 style="height: 15%;">
|
<middle1 />
|
</dv-border-box-1>
|
<dv-border-box-8 style="height: 60%;">
|
<middle2 />
|
</dv-border-box-8>
|
<dv-border-box-1 style="height: 25%;">
|
<middle3 />
|
</dv-border-box-1>
|
</div>
|
<div class="right" style="width:20%;display:flex;flex-direction:column">
|
<dv-border-box-12>
|
<right1 />
|
</dv-border-box-12>
|
<dv-border-box-12>
|
<right2 />
|
</dv-border-box-12>
|
<dv-border-box-12>
|
<right3 />
|
</dv-border-box-12>
|
<dv-border-box-12>
|
<right4 />
|
</dv-border-box-12>
|
</div>
|
</div>
|
</dv-full-screen-container>
|
</div>
|
</template>
|
|
<script>
|
import topHeader from './topHeader'
|
import left1 from './left1'
|
import left12 from './left12'
|
import left2 from './left2'
|
import left22 from './left22'
|
import left23 from './left23'
|
import right1 from './right1'
|
import right2 from './right2'
|
import right3 from './right3'
|
import right4 from './right4'
|
import middle1 from './middle1'
|
import middle2 from './middle2'
|
import middle3 from './middle3'
|
|
export default {
|
name: 'DataView',
|
components: {
|
topHeader,
|
left1,
|
left12,
|
left2,
|
left22,
|
left23,
|
right1,
|
right2,
|
right3,
|
right4,
|
middle1,
|
middle2,
|
middle3
|
},
|
data() {
|
return {}
|
},
|
methods: {}
|
}
|
</script>
|
|
<style lang="less">
|
#data-view {
|
width: 100%;
|
height: 100%;
|
background-color: #030409;
|
color: #fff;
|
|
#dv-full-screen-container {
|
background-image: url('./img/bg.png');
|
background-size: 100% 100%;
|
box-shadow: 0 0 3px blue;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.main-container {
|
// height: calc(~"100% - 80px");
|
// flex: 1;
|
height: 100%;
|
padding: 5px;
|
display: flex;
|
box-sizing: border-box;
|
flex-direction: row;
|
}
|
}
|
</style>
|
