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