setup

src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx

@@ -0,0 +1,37 @@
+import cls from './index.module.css';
+import GradientText from '../../../Common/GradientText';
+
+function SmokeHandle(props) {
+	return (
+		<div className={' ' + cls.smoke} 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={{ letterSpacing: '12px' }}
+			>
+				氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				一氧化氮排放浓度: 20mg/m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				二氧化硫排放浓度: 20mg/m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				二氧化氮排放浓度: 20mg/m³
+			</span>
+		</div>
+	);
+}
+
+export default SmokeHandle;

src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css

@@ -0,0 +1,21 @@
+.smoke {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 187px 347px 347px ;
+	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;
+}