add EnergyCost

This commit is contained in:
lb 2023-07-01 20:14:52 +08:00
parent 3c74468857
commit 61962832df
6 changed files with 72 additions and 0 deletions

View File

@ -0,0 +1,7 @@
import cls from './index.module.less';
const TechSplitline = (props) => {
return <div className={cls.techSplitline}></div>;
};
export default TechSplitline;

View File

@ -0,0 +1,3 @@
.EnergyCostChart {
background: #b730305c;
}

View File

@ -0,0 +1,7 @@
import cls from './index.module.less';
const EnergyCostChart = (props) => {
return <div className={cls.energyCostChart}>EnergyCostChart</div>;
};
export default EnergyCostChart;

View File

@ -0,0 +1,5 @@
.techSplitline {
height: 2px;
width: 100%;
background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
}

View 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 : 83</div>
<div className={cls.info__item}> : 52Km³</div>
<div className={cls.info__item}> II: 32</div>
</div>
</div>
<TechSplitline />
<EnergyCostChart />
</Container>
);
}

View 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;
}