update energe layout

This commit is contained in:
lb
2024-01-02 17:00:35 +08:00
parent c9829d4f5a
commit 15d05c26d8
16 changed files with 161 additions and 127 deletions

View File

@@ -10,7 +10,7 @@ function SmokeHandle(props) {
className={cls.shadowBorder}
style={{
gridRow: "1 / 3",
paddingTop: "38px",
paddingTop: "96px",
paddingLeft: "32px",
userSelect: "none",
}}
@@ -21,16 +21,26 @@ function SmokeHandle(props) {
className={cls.shadowBorder + " " + cls.infoText}
style={{ letterSpacing: "12px" }}
>
氧气含量: {smokeInfo?.O2_float || 0}%
<span style={{ lineHeight: 1.5 }}> </span>{" "}
<span style={{ lineHeight: 1.5 }}>{smokeInfo?.O2_float || 0}%</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/
<span style={{ lineHeight: 1.5 }}> </span>{" "}
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.NOX_float || 0}mg/
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/
<span style={{ lineHeight: 1.5 }}> </span>{" "}
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.SO2_float || 0}mg/
</span>
</span>
<span className={cls.shadowBorder + " " + cls.infoText}>
颗粒物浓度: {smokeInfo?.dust_float || 0}mg/
<span style={{ lineHeight: 1.5 }}> :</span>{" "}
<span style={{ lineHeight: 1.5 }}>
{smokeInfo?.dust_float || 0}mg/
</span>
</span>
</div>
);

View File

@@ -1,21 +1,31 @@
.smoke {
display: grid;
gap: 6px;
grid-template-columns: 187px 347px 347px ;
grid-template-rows: 60px 60px;
display: grid;
gap: 6px;
grid-template-columns: 187px 347px 347px;
/* grid-template-rows: 60px 60px; */
grid-template-rows: 129px 129px;
height: 100%;
}
.shadowBorder {
box-shadow: inset 0 0 12px 3px #fff3;
border-radius: 4px;
padding: 4px;
box-shadow: inset 0 0 12px 3px #fff2;
border-radius: 4px;
padding: 4px;
}
.infoText {
text-align: center;
font-size: 20px;
line-height: 2.5;
/* line-height: 20px; */
letter-spacing: 1px;
user-select: none;
text-align: center;
font-size: 20px;
line-height: 2.5;
/* line-height: 20px; */
letter-spacing: 1px;
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.infoText > span:last-child {
color: #00fff7;
}