53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<script setup>
|
|
import headView from "@/components/headView.vue";
|
|
import leftItme1 from "./components/leftItme1.vue";
|
|
import leftItme2 from "./components/leftItme2.vue";
|
|
import centerItme1 from "./components/centerItem1.vue";
|
|
import centerItme2 from "./components/centerItem2.vue";
|
|
import rightItem1 from "./components/rightItem1.vue";
|
|
import rightItem2 from "./components/rightItem2.vue";
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<headView></headView>
|
|
<div class="center">
|
|
<div class="item">
|
|
<leftItme1 style="height: 58%"></leftItme1>
|
|
<leftItme2 style="height: 38%"></leftItme2>
|
|
</div>
|
|
<div class="item item_c">
|
|
<centerItme1 style="height: 66%"></centerItme1>
|
|
<centerItme2 style="height: 32%"></centerItme2>
|
|
</div>
|
|
<div class="item">
|
|
<rightItem1 style="height: 35%"></rightItem1>
|
|
<rightItem2 style="height: 63%"></rightItem2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.center {
|
|
display: flex;
|
|
height: calc(100% - 60px);
|
|
justify-content: space-evenly;
|
|
.item {
|
|
width: 26%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
/* border: 1px solid red; */
|
|
& > .div {
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.item_c {
|
|
width: 44%;
|
|
}
|
|
}
|
|
</style>
|