add EnergyCost
This commit is contained in:
parent
3c74468857
commit
61962832df
@ -0,0 +1,7 @@
|
|||||||
|
import cls from './index.module.less';
|
||||||
|
|
||||||
|
const TechSplitline = (props) => {
|
||||||
|
return <div className={cls.techSplitline}></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TechSplitline;
|
@ -0,0 +1,3 @@
|
|||||||
|
.EnergyCostChart {
|
||||||
|
background: #b730305c;
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
import cls from './index.module.less';
|
||||||
|
|
||||||
|
const EnergyCostChart = (props) => {
|
||||||
|
return <div className={cls.energyCostChart}>EnergyCostChart</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnergyCostChart;
|
@ -0,0 +1,5 @@
|
|||||||
|
.techSplitline {
|
||||||
|
height: 2px;
|
||||||
|
width: 100%;
|
||||||
|
background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
|
||||||
|
}
|
27
src/components/RightBar/EnergyCost/index.jsx
Normal file
27
src/components/RightBar/EnergyCost/index.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import cls from './index.module.less';
|
||||||
|
import Container from '../../Container';
|
||||||
|
import TechSplitline from './TechSplitline';
|
||||||
|
import EnergyCostChart from './TechSplitline';
|
||||||
|
|
||||||
|
function EnergyCost(props) {
|
||||||
|
return (
|
||||||
|
<Container title="能耗" icon="charger" className={cls.energyCost}>
|
||||||
|
<div className={`${cls.cost__info} flex`}>
|
||||||
|
<div className={`${cls.info__item} flex flex-col align-center`}>
|
||||||
|
<span>余 热 发 电</span>
|
||||||
|
<span>922kwh</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.info__item_groups}>
|
||||||
|
<div className={cls.info__item}>水 耗 量 : 32Km³</div>
|
||||||
|
<div className={cls.info__item}>天 然 气 I : 83m³</div>
|
||||||
|
<div className={cls.info__item}>电 耗 量 : 52Km³</div>
|
||||||
|
<div className={cls.info__item}>天 然 气 II: 32m³</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TechSplitline />
|
||||||
|
|
||||||
|
<EnergyCostChart />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
23
src/components/RightBar/EnergyCost/index.module.less
Normal file
23
src/components/RightBar/EnergyCost/index.module.less
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.energyCost {
|
||||||
|
background: #b730305c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__item {
|
||||||
|
border-radius: 2px;
|
||||||
|
color: hsl(0, 0%, 100%, 0.9);
|
||||||
|
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||||
|
// width: 288px;
|
||||||
|
height: 43px;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 1.43px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__item_groups {
|
||||||
|
margin-left: 8px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user