SmartCommunity/commandCenter/src/views/financialAnalysis/index.vue

<template>
    <div class="contentShow">
        <div class="overflowHidden mr10 list_1_2">
            <net-receipts></net-receipts>
        </div>
        <div class="overflowHidden mr10 list_1-3">
            <collectionRate></collectionRate>
        </div>
        <div class="overflowHidden mr10 list_1-4">
            <income-mode></income-mode>
        </div>
        <div class="overflowHidden mr10 list_2_2">
            <parking-lot></parking-lot>
        </div>
        <div class="overflowHidden mr10 list_2-3">
            <deposit></deposit>
        </div>
        <div class="overflowHidden mr10 list_2-4">
            <deposit-balance></deposit-balance>
        </div>
        <div class="overflowHidden mr10 list_3_2">
            <hydropower labeText="年度水费支出" :type="1"></hydropower>
        </div>
        <div class="overflowHidden mr10 list_3_4">
            <hydropower labeText="年度电费支出" :type="2"></hydropower>
        </div>
    </div>
</template>
<script>
import smallModuleIndex from './smallModuleIndex/index';
export default {
    mixins: [smallModuleIndex]
};
</script>
<style lang="scss" scoped>
.mr10 {
    margin: 10px;
}
.contentShow {
    padding: 0 10px;
    height: calc(100% - 100px);
    margin-top: 100px;
    width: 100%;
    border-radius: 4px;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px;
    color: white;
    .list_1_2 {
        grid-area: 1 / 1 / 1 / span 2;
    }
    .list_1-3 {
        grid-area: 1 / 3 / 1 / 3;
    }
    .list_1-4 {
        grid-area: 1 / 4 / 1 / 4;
    }

    .list_2_2 {
        grid-area: 2 / 1 / 2 / span 2;
    }
    .list_2-3 {
        grid-area: 2 / 3 / 2 / 3;
    }
    .list_2-4 {
        grid-area: 2 / 4 / 2 / 4;
    }
    .list_3_2 {
        grid-area: 3 / 1 / 3 / span 2;
    }
    .list_3_4 {
        grid-area: 3 / 3 / 3 / span 4;
    }
}
</style>