diff --git a/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx b/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx
new file mode 100644
index 0000000..fe9e623
--- /dev/null
+++ b/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx
@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const TechSplitline = (props) => {
+	return <div className={cls.techSplitline}></div>;
+};
+
+export default TechSplitline;
diff --git a/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.less b/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.less
new file mode 100644
index 0000000..30c5c74
--- /dev/null
+++ b/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.less
@@ -0,0 +1,3 @@
+.EnergyCostChart {
+	background: #b730305c;
+}
diff --git a/src/components/RightBar/EnergyCost/TechSplitline/index.jsx b/src/components/RightBar/EnergyCost/TechSplitline/index.jsx
new file mode 100644
index 0000000..c3450db
--- /dev/null
+++ b/src/components/RightBar/EnergyCost/TechSplitline/index.jsx
@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const EnergyCostChart = (props) => {
+	return <div className={cls.energyCostChart}>EnergyCostChart</div>;
+};
+
+export default EnergyCostChart;
diff --git a/src/components/RightBar/EnergyCost/TechSplitline/index.module.less b/src/components/RightBar/EnergyCost/TechSplitline/index.module.less
new file mode 100644
index 0000000..38f1cd0
--- /dev/null
+++ b/src/components/RightBar/EnergyCost/TechSplitline/index.module.less
@@ -0,0 +1,5 @@
+.techSplitline {
+	height: 2px;
+	width: 100%;
+	background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
+}
diff --git a/src/components/RightBar/EnergyCost/index.jsx b/src/components/RightBar/EnergyCost/index.jsx
new file mode 100644
index 0000000..3906afa
--- /dev/null
+++ b/src/components/RightBar/EnergyCost/index.jsx
@@ -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>
+	);
+}
diff --git a/src/components/RightBar/EnergyCost/index.module.less b/src/components/RightBar/EnergyCost/index.module.less
new file mode 100644
index 0000000..ceef02b
--- /dev/null
+++ b/src/components/RightBar/EnergyCost/index.module.less
@@ -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;
+}