<!-- 
    filename: EnergeTop.vue
    author: liubin
    date: 2023-12-11 09:31:41
    description: 
-->

<template>
	<div
		class="energe-top"
		style="
			flex: 1;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto;
			gap: 8px;
			padding: 4px;
		">
		<ShadowRect
			style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
			<span
				style="
					font-size: 16px;
					line-height: 1.55;
					text-align: right;
					padding-right: 8px;
					letter-spacing: 1px;
				">
				余热发电
			</span>
			<span
				style="
					font-size: 16px;
					line-height: 1.55;
					text-align: right;
					padding-right: 8px;
					letter-spacing: 1px;
				">
				1023kWh
			</span>
		</ShadowRect>

		<ShadowRect>
			<div
				style="
					font-size: 16px;
					line-height: 1.25;
					flex: 1.2;
					text-align: right;
					padding-right: 8px;
					letter-spacing: 3px;
				">
				<p style="margin: 0; line-height: inherit">水耗量</p>
			</div>
			<span style="font-size: 16px; line-height: 1.24; flex: 1">32Km³</span>
		</ShadowRect>

		<ShadowRect>
			<div
				style="
					font-size: 16px;
					line-height: 1.25;
					flex: 1.2;
					text-align: right;
					padding-right: 8px;
					letter-spacing: 3px;
				">
				<p style="margin: 0; line-height: inherit">天然气I</p>
			</div>
			<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
		</ShadowRect>

		<ShadowRect>
			<div
				style="
					font-size: 16px;
					line-height: 1.25;
					flex: 1.2;
					text-align: right;
					padding-right: 8px;
					letter-spacing: 3px;
				">
				<p style="margin: 0; line-height: inherit">电耗量</p>
			</div>
			<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
		</ShadowRect>

		<ShadowRect>
			<div
				style="
					font-size: 16px;
					line-height: 1.25;
					flex: 1.2;
					text-align: right;
					padding-right: 8px;
					letter-spacing: 3px;
				">
				<p style="margin: 0; line-height: inherit">天然气II</p>
			</div>
			<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
		</ShadowRect>
	</div>
</template>

<script>
import ShadowRect from '../components/ShadowRect.vue';

export default {
	name: 'EnergeTop',
	components: { ShadowRect },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.energe-top {
}
</style>
