update 能耗分析

src/pages/能耗分析/index.jsx

@@ -1,16 +1,61 @@
 import cls from './index.module.css';
 
+const GradientText = ({ text, spacing }) => {
+	return (
+		<svg>
+			<defs>
+				<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
+					<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
+					<stop
+						offset="100%"
+						style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
+					/>
+				</linearGradient>
+			</defs>
+			<text
+				x={0}
+				y={36}
+				fill="url(#smoke-text)"
+				style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
+			>
+				{text}
+			</text>
+		</svg>
+	);
+};
+
 function EnergyAnalysis(props) {
 	console.log('[rendering...] 加载 能耗分析页面');
 	return (
 		<div className={cls.grid}>
 			<div className={cls.vgrid + ' col-1'}>
-				<div className={'bgray ' + cls.smoke}>
-					<span style={{ gridRow: 2 / 3 }}>烟气处理</span>
-					<span>氧气含量: 80%</span>
-					<span>一氧化氮排放浓度: 20mg/m³</span>
-					<span>二氧化硫排放浓度: 20mg/m³</span>
-					<span>二氧化氮排放浓度: 20mg/m³</span>
+				<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
+					<span
+						class={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>
 				<div className={'bgray ' + cls.oxygen}></div>
 				<div className={'bgray ' + cls.no}></div>

src/pages/能耗分析/index.module.css

@@ -19,6 +19,21 @@
 	grid-template-rows: repeat(3, 253px);
 }
 
+.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;
+}
+
 .line {
 	background: url(../../assets/line.png) 0 60% no-repeat;
 }