vue用栅格布局布大屏展示页面

<template>
    <div class="home" id="home">
        <Row :gutter="14">
            <Col span="6">
                <div  class="row-div1">
                    <Flex direction="row" style=" 100%;height: 100%">
                        <FlexItem flex="1">
                            <Flex direction="column" style=" 100%;height: 100%">
                                <FlexItem flex="1">
                                    <div class="five-font center-content">项目总数</div>
                                </FlexItem>
                                <FlexItem flex="1">
                                    <div class="center-content">
                                        <img src="@/assets/images/file.png" width="40">
                                    </div>
                                </FlexItem>
                            </Flex>
                        </FlexItem>
                        <FlexItem flex="1">
                            <div class="first-font num-content">{{projectCount}}</div>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
            <Col span="6">
                <div class="row-div1">
                    <Flex direction="row" style=" 100%;height: 100%">
                        <FlexItem flex="1">
                            <Flex direction="column" style=" 100%;height: 100%">
                                <FlexItem flex="1">
                                    <div class="five-font center-content">设备总数</div>
                                </FlexItem>
                                <FlexItem flex="1">
                                    <div class="center-content">
                                        <img src="@/assets/images/icon/device.png" width="38" height="34">
                                    </div>
                                </FlexItem>
                            </Flex>
                        </FlexItem>
                        <FlexItem flex="1">
                            <div class="first-font num-content">{{configCount}}</div>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
            <Col span="6">
                <div class="row-div1">
                    <Flex direction="row" style=" 100%;height: 100%">
                        <FlexItem flex="1">
                            <Flex direction="column" style=" 100%;height: 100%">
                                <FlexItem flex="1">
                                    <div class="five-font center-content">监测点位</div>
                                </FlexItem>
                                <FlexItem flex="1">
                                    <div class="center-content">
                                        <img src="@/assets/images/icon/zuobiao.png" width="40">
                                    </div>
                                </FlexItem>
                            </Flex>
                        </FlexItem>
                        <FlexItem flex="1">
                            <div class="first-font num-content">{{deviceCount}}</div>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
            <Col span="6">
                <div class="row-div1">
                    <Flex direction="row" style=" 100%;height: 100%">
                        <FlexItem flex="1">
                            <Flex direction="column" style=" 100%;height: 100%">
                                <FlexItem flex="1">
                                    <div class="five-font center-content">报警总数</div>
                                </FlexItem>
                                <FlexItem flex="1">
                                    <div class="center-content">
                                        <img src="@/assets/images/icon/alarm.png" width="40">
                                    </div>
                                </FlexItem>
                            </Flex>
                        </FlexItem>
                        <FlexItem flex="1">
                            <div class="first-font num-content">{{alarmCount}}</div>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
        </Row>
        <Row :gutter="14">
            <Col span="7">
                <div  class="row-div2" :style="{'height':logDivHeight/2+'px'}">
                    <Flex direction="column" style="height: 100%">
                        <FlexItem>
                            <div class="item-title">故障统计<span></span></div>
                        </FlexItem>
                        <FlexItem flex="1">
                            <FaultStatistics></FaultStatistics>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
            <Col span="10">
                <div  class="row-div2" :style="{'height':logDivHeight/2+'px'}">
                    <Flex direction="column" style="height: 100%">
                        <FlexItem>
                            <div class="item-title">采集数据<span></span></div>
                        </FlexItem>
                        <FlexItem flex="1">
                            <Collection></Collection>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
            <Col span="7">
                <div  class="row-div2" :style="{'height':logDivHeight/2+'px'}">
                    <Flex direction="column" style="height: 100%">
                        <FlexItem>
                            <div class="item-title">诊断报告<span></span></div>
                        </FlexItem>
                        <FlexItem flex="1">
                            <DiagnosticReport></DiagnosticReport>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
        </Row>
        <Row :gutter="14">
            <Col span="12">
                <div  class="row-div2" :style="{'height':logDivHeight/2+'px'}">
                    <Flex direction="column" style="height: 100%">
                        <FlexItem>
                            <div class="item-title">实时报警<span></span>
                            </div>
                        </FlexItem>
                        <FlexItem flex="1">
                            <AlarmRealTime></AlarmRealTime>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>
            <Col span="12">
                <div  class="row-div2" :style="{'height':logDivHeight/2+'px'}">
                    <Flex direction="column" style="height: 100%">
                        <FlexItem>
                            <div class="item-title">运行日志<span></span></div>
                        </FlexItem>
                        <FlexItem flex="1">
                            <RunLog></RunLog>
                        </FlexItem>
                    </Flex>
                </div>
            </Col>

        </Row>
    </div>
</template>

<script>
    import Flex from "../../components/ios/Flex";
    import FlexItem from "../../components/ios/FlexItem";
    import FaultStatistics from "./home-child/FaultStatistics";
    import DaiDing from "./home-child/DaiDing";
    import DiagnosticReport from "./home-child/DiagnosticReport";
    import AlarmRealTime from "./home-child/AlarmRealTime";
    import RunLog from "./home-child/RunLog";
    import Collection from "./home-child/Collection";
    export default {
        name: "HomeThird",
        components: {Collection, RunLog, AlarmRealTime, DiagnosticReport, DaiDing, FaultStatistics, FlexItem, Flex},
        mounted(){
            this.logDivHeight = document.getElementById("home").offsetHeight-182;
            let _this = this;
            window.addEventListener('resize', () => {
                _this.logDivHeight = document.getElementById("home").offsetHeight-182;
            });
        },
        data(){
            return{
                logDivHeight: 0,
                projectCount:0,
                configCount: 0,
                deviceCount: 0,
                alarmCount: 0,
            }
        },
        created() {
            this.handleSearchCount()
            this.getInfo()
        },
        methods: {//查询个人信息
            getInfo(){
                this.$http.get("/api/self/getInfo").then(res=>{
                    let body = res.data;
                    if(body.code===200){
                        this.avatar = body.data.avatar
                        this.realName = body.data.name
                        window.sessionStorage.setItem("avatar",body.data.avatar)
                        window.sessionStorage.setItem("realName",body.data.name)
                    }
                })
            },

            //查询项目总数，设备总数，检测位点，报警总数
            handleSearchCount(){
                this.$http.get("/api/smart/getIndexDataNew").then(res=>{
                    let body = res.data;
                    if(body.code===200){
                        this.projectCount = body.data.projectCount;
                        this.configCount = body.data.configurationCount;
                        this.deviceCount = body.data.sensorCount;
                        this.alarmCount = body.data.alarmCount;
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import '../../assets/css/index.less';
    .home{
        height: 100%;
        width: 100%;
        padding: 14px 14px;
        background-color: @third-background-color;
        .row-div1{
            border-radius: 4px;
            height: 15% ;
            /*height: 126px;*/
            background-color: @primary-background-color;
        }
        .row-div2{
            margin-top: 14px;
            border-radius: 4px;
            background-color: @primary-background-color;
        }
        .row-div3{
            margin-top: 14px;
            border-radius: 4px;
            background-color: @primary-background-color;
        }
        .center-content {
            height: 50px;
            line-height: 50px;
            width: 100%;
            overflow: hidden;
            text-align: center;
        }
        .num-content {
            height: 120px;
            line-height: 125px;
            width: 100%;
            overflow: hidden;
            text-align: center;
            font-size: 40px;
        }
        .item-title {
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            color: #e8eaec;
            padding: 8px 15px 7px 15px;

            span {
                float: right;
                cursor: pointer;
            }
        }
    }

</style>

 要注意加高度的时候呀，给col里面的div加高度才管用。并且也需要给div加背景颜色才能显示出来gutter，不能只给row或者col加背景。