init commit

src/components/模块组件/能耗分析/能源/index.jsx

@@ -0,0 +1,44 @@
+import cls from './index.module.css';
+import GradientText from '../../../公共组件/GradientText';
+
+function Energy(props) {
+	return (
+		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
+			<span
+				className={cls.shadowBorder}
+				style={{
+					gridRow: '1 / 3',
+					paddingTop: '38px',
+					paddingLeft: '32px',
+					userSelect: 'none',
+				}}
+			>
+				<GradientText text="能源" />
+			</span>
+			<span
+				className={cls.shadowBorder + ' ' + cls.infoText}
+				style={{
+					gridRow: '1 / 3',
+				}}
+			>
+				<span style={{ lineHeight: 2.5 }}>余热发电</span>
+				<span style={{ lineHeight: 2.5 }}>992Kwh</span>
+			</span>
+
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				水耗量: 32Km³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				天然气I: 92m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				电耗量: 92Km³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				天然气II: 92m³
+			</span>
+		</div>
+	);
+}
+
+export default Energy;

src/components/模块组件/能耗分析/能源/index.module.css

@@ -0,0 +1,21 @@
+.layout {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 133px 158px 292px 292px ;
+	grid-template-rows: 60px 60px;
+}
+
+.shadowBorder {
+	box-shadow: inset 0 0 12px 3px #fff3;
+	border-radius: 4px;
+	padding: 4px;
+}
+
+.infoText {
+	text-align: center;
+	font-size: 24px;
+	line-height: 2.2;
+	/* line-height: 20px; */
+	letter-spacing: 1px;
+	user-select: none;
+}