<template>
    <div class="_energy">
        <layout>
            <template #left>
                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                    <sameDay style="flex: 1;" />
                    <consumptionPower style="flex: 1;" />
                    <consumptionWater style="flex: 1;" />
                </div>
            </template>
            <template #content>
                <p>能源</p>
            </template>
            <template #right>
                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                    <running style="flex: 1;" />
                    <consume style="flex: 1;" />
                    <carbonEmission style="flex: 1;" />
                </div>
            </template>
        </layout>
    </div>
</template>

<script setup name="Role">
import layout from "@/components/layout_/index.vue";
import sameDay from './modules/sameDay.vue'
import consumptionPower from './modules/consumptionPower.vue'
import consumptionWater from './modules/consumptionWater.vue'
import running from './modules/running.vue'
import carbonEmission from './modules/carbonEmission.vue'
import consume from './modules/consume.vue'


</script>
<style lang="scss">
._energy {
    height: 100%;
}
</style>