121 lines
1.9 KiB
Vue
121 lines
1.9 KiB
Vue
<template>
|
|
<div class="containerBox">
|
|
<div class="leftBox">
|
|
<div class="leftOne">
|
|
<LeftOne />
|
|
</div>
|
|
<div class="leftTwo">
|
|
<LeftTwo />
|
|
</div>
|
|
<div class="leftThree">
|
|
<LeftThree />
|
|
</div>
|
|
<div class="leftFour">
|
|
<LeftFour />
|
|
</div>
|
|
</div>
|
|
<div class="centerBox">
|
|
<div class="center">
|
|
<Center />
|
|
</div>
|
|
</div>
|
|
<div class="rightBox">
|
|
<div class="rightOne">
|
|
<RightOne />
|
|
</div>
|
|
<div class="rightTwo">
|
|
<RightTwo />
|
|
</div>
|
|
<div class="rightThree">
|
|
<RightThree />
|
|
</div>
|
|
<div class="rightFour">
|
|
<RightFour />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LeftOne from './leftOne'
|
|
import LeftTwo from './leftTwo'
|
|
import LeftThree from '../command/LeftThree'
|
|
import LeftFour from './leftFour'
|
|
import Center from './center'
|
|
import CenterBOne from './centerBOne'
|
|
import CenterBTwo from './centerBTwo'
|
|
import RightOne from './rightOne'
|
|
import RightTwo from './rightTwo'
|
|
import RightThree from './rightThree'
|
|
import RightFour from './rightFour'
|
|
|
|
export default {
|
|
components: {
|
|
LeftOne,
|
|
LeftTwo,
|
|
LeftThree,
|
|
LeftFour,
|
|
Center,
|
|
CenterBOne,
|
|
CenterBTwo,
|
|
RightOne,
|
|
RightTwo,
|
|
RightThree,
|
|
RightFour
|
|
},
|
|
data() {
|
|
return {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
.leftBox {
|
|
width: 25%;
|
|
.leftOne {
|
|
height: 28%;
|
|
}
|
|
|
|
.leftThree {
|
|
height: 22%;
|
|
}
|
|
|
|
.leftTwo,
|
|
.leftFour {
|
|
height: 25%;
|
|
}
|
|
}
|
|
.centerBox {
|
|
width: 50%;
|
|
.center {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.rightBox {
|
|
width: 25%;
|
|
height: 100%;
|
|
.rightOne {
|
|
height: 26%;
|
|
}
|
|
|
|
.rightTwo {
|
|
height: 30%;
|
|
}
|
|
|
|
.rightThree {
|
|
height: 25%;
|
|
}
|
|
|
|
.rightFour {
|
|
height: 19%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|