mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 能耗分析

Browse Source
This commit is contained in:
lb 2023-11-02 16:52:42 +08:00
parent 202cebdde4
commit 2a94f9050c
2 changed files with 66 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/能耗分析/index.jsx
View File

@ -1,16 +1,61 @@
import cls from './index.module.css'; 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) { function EnergyAnalysis(props) {
console.log('[rendering...] 加载 能耗分析页面'); console.log('[rendering...] 加载 能耗分析页面');
return ( return (
<div className={cls.grid}> <div className={cls.grid}>
<div className={cls.vgrid + ' col-1'}> <div className={cls.vgrid + ' col-1'}>
<div className={'bgray ' + cls.smoke}> <div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
<span style={{ gridRow: 2 / 3 }}>烟气处理</span> <span
<span>氧气含量: 80%</span> class={cls.shadowBorder}
<span>一氧化氮排放浓度: 20mg/m³</span> style={{
<span>二氧化硫排放浓度: 20mg/m³</span> gridRow: '1 / 3',
<span>二氧化氮排放浓度: 20mg/m³</span> 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>
<div className={'bgray ' + cls.oxygen}></div> <div className={'bgray ' + cls.oxygen}></div>
<div className={'bgray ' + cls.no}></div> <div className={'bgray ' + cls.no}></div>

15
src/pages/能耗分析/index.module.css
View File

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