update energy

src/components/Container.jsx

@@ -4,6 +4,7 @@ import cls from './container.module.less';
 
 import IconStack from '../assets/Icon/icon-stack.png';
 import IconGood from '../assets/Icon/icon-good.png';
+import IconCharger from '../assets/Icon/icon-charge.png';
 
 const Container = (props) => {
 	let icon = useRef(null);
@@ -15,6 +16,9 @@ const Container = (props) => {
 		case 'good': // 良品率
 			icon.current = IconGood;
 			break;
+		case 'charger':
+			icon.current = IconCharger;
+			break;
 	}
 
 	return (

src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css

@@ -1,17 +1,16 @@
-.EnergyCostChart {
+.energyCostChart {
 	margin-top: 12px;
 	height: 1px;
 	flex: 1;
 	padding-top: 8px;
-	background: #ae27276a;
 }
-.EnergyCostChart .titleBar {
+.energyCostChart .titleBar {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	color: white;
 }
-.EnergyCostChart .titleBar h2 {
+.energyCostChart .titleBar h2 {
 	margin: 0;
 	font-size: 18px;
 	line-height: 32px;
@@ -19,17 +18,17 @@
 	color: #52fff8;
 }
 
-.EnergyCostChart .titleBar .legend {
+.energyCostChart .titleBar .legend {
 	display: flex;
 	align-items: center;
 }
-.EnergyCostChart .titleBar .legend * {
+.energyCostChart .titleBar .legend * {
 	font-size: 14px;
 	line-height: 14px;
 	color: #dff1fe;
 }
 
-.EnergyCostChart .titleBar .legend ul {
+.energyCostChart .titleBar .legend ul {
 	display: flex;
 	margin: 0;
 	margin-left: 8px;
@@ -37,12 +36,12 @@
 	list-style: none;
 	align-items: center;
 }
-.EnergyCostChart .titleBar .legend ul li {
+.energyCostChart .titleBar .legend ul li {
 	position: relative;
 	margin: 4px;
 	padding-left: 16px;
 }
-.EnergyCostChart .titleBar .legend ul li::before {
+.energyCostChart .titleBar .legend ul li::before {
 	content: '';
 	position: absolute;
 	left: 2px;
@@ -53,15 +52,15 @@
 	border-radius: 2px;
 }
 
-.EnergyCostChart .titleBar .legend ul li:first-child::before {
+.energyCostChart .titleBar .legend ul li:first-child::before {
 	background-color: #ffd160;
 }
 
-.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before {
+.energyCostChart .titleBar .legend ul li:nth-child(2)::before {
 	background-color: #12fff5;
 }
 
-.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before {
+.energyCostChart .titleBar .legend ul li:nth-child(3)::before {
 	background-color: #2760ff;
 }
 

src/components/RightBar/EnergyCost/index.jsx

@@ -6,8 +6,11 @@ import EnergyCostChart from './EnergyCostChart';
 function EnergyCost(props) {
 	return (
 		<Container title="能耗" icon="charger" className={cls.energyCost}>
+			<div className={`flex flex-col`}>
 				<div className={`${cls.cost__info} flex`}>
-				<div className={`${cls.info__item} flex flex-col items-center`}>
+					<div
+						className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
+					>
 						<span>余 热 发 电</span>
 						<span>922kwh</span>
 					</div>
@@ -22,6 +25,7 @@ function EnergyCost(props) {
 				<TechSplitline />
 
 				<EnergyCostChart />
+			</div>
 		</Container>
 	);
 }

src/components/RightBar/EnergyCost/index.module.less

@@ -1,9 +1,16 @@
 .energyCost {
-	background: #b730305c;
+	background: url(../../../assets/energy.png) no-repeat;
+	background-size: 100% 100%;
+	width: 626px;
 }
 
 .cost__info {
+	margin-top: 8px;
 	margin-bottom: 12px;
+
+	div {
+		flex-grow: 1;
+	}
 }
 
 .info__item {
@@ -19,6 +26,10 @@
 	user-select: none;
 }
 
+.hAuto {
+	height: auto;
+}
+
 .info__item_groups {
 	margin-left: 8px;
 	display: grid;

src/components/RightBar/substitutionCharts/Chart1/index.jsx

@@ -1,49 +1,43 @@
-
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png'
+// import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png'
 
-import Chart1 from './Chart1.jsx'
+import Chart1 from './Chart1.jsx';
-
-import './index.less'
 
+import './index.less';
 
 //#52FFF8
 
-
 function Index(props) {
-
-
 	const switchColor = (index) => {
-
 		switch (index) {
-            case 1: return '#52FFF8';
+			case 1:
-            case 2: return '#49B2FF';
+				return '#52FFF8';
-            case 3: return '#FFB94D';
+			case 2:
-            default: return '#fff'
+				return '#49B2FF';
+			case 3:
+				return '#FFB94D';
+			default:
+				return '#fff';
 		}
-    }
+	};
-
-
 
 	let Border = styled.div`
 		width: 74px;
 		height: 24px;
 		margin-top: 50px;
 		overflow: hidden;
-    `
+	`;
-
-
 
+	// background: url(${RightChart1Icon2});
 	let Ion2 = styled.div`
 		width: 100%;
 		height: 100%;
 		float: left;
-    background: url(${RightChart1Icon2});
 		background-repeat: no-repeat;
 		transform: translatex(-82px);
 		filter: drop-shadow(82px 1px ${switchColor(props.index)});
-    `
+	`;
 
 	//最大值75
 	let Stuff = styled.div`
@@ -52,9 +46,8 @@ function Index(props) {
 		transform: translatex(3px);
 		width: ${58}%;
 		height: 12px;
-    background: linear-gradient(to right,#051226,${switchColor(props.index)})
+		background: linear-gradient(to right, #051226, ${switchColor(props.index)});
-    `
+	`;
-
 
 	//中间三条gap的位置
 
@@ -66,7 +59,7 @@ function Index(props) {
 		width: 2px;
 		height: 13px;
 		background-color: #051226;
-    `
+	`;
 
 	const Gap2 = styled(Gap1)`
 		transform: translatex(29px);
@@ -76,15 +69,17 @@ function Index(props) {
 		transform: translatex(45px);
 	`;
 
-
 	return (
-
+		<div className="RightChart1ItemBorderRow">
-        <div className='RightChart1ItemBorderRow' >
+			<div className="RightChart1ItemB1">
-            <div className='RightChart1ItemB1'>
+				<Chart1
-                <Chart1 color={switchColor(props.index)} data={props.data} unit={props.unit}/>
+					color={switchColor(props.index)}
+					data={props.data}
+					unit={props.unit}
+				/>
 			</div>
-            <div className='RightChart1ItemB2'>
+			<div className="RightChart1ItemB2">
-                <h2 className='RightChart1ItemB2TXT'>{props.name}</h2>
+				<h2 className="RightChart1ItemB2TXT">{props.name}</h2>
 				<Border>
 					<Ion2></Ion2>
 					<Stuff></Stuff>

src/pages/global.less

@@ -14,6 +14,10 @@
 	justify-content: start;
 }
 
+.justify-center {
+	justify-content: center;
+}
+
 .justify-start {
 	justify-content: center;
 }
@@ -22,6 +26,10 @@
 	align-items: center;
 }
 
+.self-stretch {
+	align-self: stretch;
+}
+
 .w-full {
 	width: 100%;
 }
@@ -33,3 +41,7 @@
 .h-half {
 	height: 50%;
 }
+
+.h-auto {
+	height: auto;
+}