You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.8 KiB
113 lines
2.8 KiB
<template>
|
|
<div class="data-view">
|
|
<dv-full-screen-container>
|
|
<dv-border-box-11 title="信用新桥大数据展示" class="main-container">
|
|
<div class="main-content">
|
|
<div class="left-container">
|
|
<div style="display: flex">
|
|
<div style="flex: 1">
|
|
<dv-border-box-12 class="mborder-box-1">
|
|
<demo1 style="width: 100%;"/>
|
|
</dv-border-box-12>
|
|
</div>
|
|
<div style="flex: 2">
|
|
<dv-border-box-12 class="mborder-box-1">
|
|
<demo3 />
|
|
</dv-border-box-12>
|
|
</div>
|
|
</div>
|
|
<dv-border-box-13 style="height: 500px;">
|
|
<demo5/>
|
|
</dv-border-box-13>
|
|
</div>
|
|
<div class="center-container">
|
|
<dv-border-box-8 style="height: 800px;">
|
|
<demo2 style="width: 100%;"/>
|
|
</dv-border-box-8>
|
|
</div>
|
|
<div class="right-container">
|
|
<dv-border-box-10 style="height: 400px;">
|
|
<demo4 />
|
|
</dv-border-box-10>
|
|
<div style="display: flex;height: 400px">
|
|
<dv-border-box-13 style="flex:1;">
|
|
<demo6/>
|
|
</dv-border-box-13>
|
|
<dv-border-box-13 style="flex:1;">
|
|
<demo7/>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dv-border-box-11>
|
|
</dv-full-screen-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import demo1 from '../components/demo1'
|
|
import demo2 from '../components/demo2'
|
|
import demo3 from '../components/demo3'
|
|
import demo4 from '../components/demo4'
|
|
import demo5 from '../components/demo5'
|
|
import demo6 from '../components/demo6'
|
|
import demo7 from '../components/demo7'
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
demo1,
|
|
demo2,
|
|
demo3,
|
|
demo4,
|
|
demo5,
|
|
demo6,
|
|
demo7
|
|
}
|
|
}
|
|
</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;
|
|
.main-container{
|
|
|
|
}
|
|
.main-content {
|
|
display: flex;
|
|
margin: 50px 10px 10px 10px;
|
|
.border-box-content {
|
|
padding: 6px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
.left-container{
|
|
flex: 1;
|
|
margin: 0 5px 5px 10px;
|
|
.mborder-box-1{
|
|
height: 300px;
|
|
.title{
|
|
text-align: left;
|
|
padding: 20px 0 0 15px;
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
}
|
|
.center-container{
|
|
flex: 1;
|
|
margin: 0 5px 5px 5px;
|
|
}
|
|
.right-container{
|
|
flex: 1;
|
|
margin: 0 10px 5px 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|