No.8可视化大屏--vite+vue3 主体部分结构编写

一、主体部分结构

 分析一下：

在index.vue 中，

 

 完整代码：

<script setup>
import modelTitle from './modelTitle.vue'; 
import modelFirst from './modelFirst.vue';
import modelSecond from './modelSecond.vue';
import modelThird from './modelThird.vue';
import modelFourth from './modelFourth.vue';
</script>
 
<template>
    <!-- 头部 -->
    <modelTitle/>
    <div class="main">
        <!-- 主体部分 -->
        <modelFirst/>
        <modelSecond/>
        <modelThird/>
        <modelFourth/>
    </div>

</template>
 
<style scoped>
/* 这部分也可以放到index.css 中 */
.main {
    margin-top: 50px;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr 3fr 1fr;
    border: 1px solid white;
}
.main div:nth-child(1) {
    grid-column: 1/3;
}
.main div:nth-child(2) {
    grid-row: 2/4;
}
</style>

　效果：