< 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%;" / >
< / d v - b o r d e r - b o x - 1 2 >
< / div >
< div style = "flex: 2" >
< dv -border -box -12 class = "mborder-box-1" >
< demo3 / >
< / d v - b o r d e r - b o x - 1 2 >
< / div >
< / div >
< dv -border -box -13 style = "height: 500px;" >
< demo5 / >
< / d v - b o r d e r - b o x - 1 3 >
< / div >
< div class = "center-container" >
< dv -border -box -8 style = "height: 800px;" >
< demo2 style = "width: 100%;" / >
< / d v - b o r d e r - b o x - 8 >
< / div >
< div class = "right-container" >
< dv -border -box -10 style = "height: 400px;" >
< demo4 / >
< / d v - b o r d e r - b o x - 1 0 >
< div style = "display: flex;height: 400px" >
< dv -border -box -13 style = "flex:1;" >
< demo6 / >
< / d v - b o r d e r - b o x - 1 3 >
< dv -border -box -13 style = "flex:1;" >
< demo7 / >
< / d v - b o r d e r - b o x - 1 3 >
< / div >
< / div >
< / div >
< / d v - b o r d e r - b o x - 1 1 >
< / d v - f u l l - s c r e e n - c o n t a i n e r >
< / 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 3 px blue ;
display : flex ;
. main - container {
}
. main - content {
display : flex ;
margin : 50 px 10 px 10 px 10 px ;
. border - box - content {
padding : 6 px ;
box - sizing : border - box ;
display : flex ;
}
. left - container {
flex : 1 ;
margin : 0 5 px 5 px 10 px ;
. mborder - box - 1 {
height : 300 px ;
. title {
text - align : left ;
padding : 20 px 0 0 15 px ;
font - weight : bolder ;
}
}
}
. center - container {
flex : 1 ;
margin : 0 5 px 5 px 5 px ;
}
. right - container {
flex : 1 ;
margin : 0 10 px 5 px 5 px ;
}
}
}
}
< / style >