From b7b2ad2ee5be8f720cb31731c0046f59eb9b60bd Mon Sep 17 00:00:00 2001
From: lb <lb@znjszx.com>
Date: Wed, 24 Jan 2024 15:39:42 +0800
Subject: [PATCH] 1

---
 .../Common/BottomItemBackground/index.jsx     |  1 +
 src/components/Common/NavMenu/index.jsx       | 44 +++++++++----------
 src/components/Container.jsx                  |  3 ++
 src/components/container.module.scss          |  8 ++++
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/Common/BottomItemBackground/index.jsx b/src/components/Common/BottomItemBackground/index.jsx
index 6da5645..db9ce43 100644
--- a/src/components/Common/BottomItemBackground/index.jsx
+++ b/src/components/Common/BottomItemBackground/index.jsx
@@ -6,6 +6,7 @@ function BottomBarItem(props) {
 		<Container
 			icon={props.icon}
 			title={props.title}
+			desc="hello world"
 			className={`${cls.bottomBarItem} ${props.className}`}
 			style={props.style}
 		>
diff --git a/src/components/Common/NavMenu/index.jsx b/src/components/Common/NavMenu/index.jsx
index 3fbbd2c..160b6b6 100644
--- a/src/components/Common/NavMenu/index.jsx
+++ b/src/components/Common/NavMenu/index.jsx
@@ -1,25 +1,25 @@
-import { useCallback, useState } from 'react';
-import cls from './index.module.scss';
+import { useCallback, useEffect, useState } from "react";
+import cls from "./index.module.scss";
 
 export default function CenterMenu({ active, onChangeActive }) {
-	const menuList = [
-		['窑炉总览', '/kilnSummary'],
-		['窑炉内部', '/kilnInner'],
-		['退火监测', '/stopFire'],
-		['质检统计', '/quailtyCheck'],
-		['能耗分析', '/energyCost'],
-	];
-	return (
-		<div className={`${cls.centerMenu} flex`}>
-			{menuList.map((menu) => (
-				<div
-					key={menu[0]}
-					className={`${cls.menuItem} ${active == menu[0] ? cls.active : ''}`}
-					onClick={() => onChangeActive(menu[0])}
-				>
-					{menu[0]}
-				</div>
-			))}
-		</div>
-	);
+  const menuList = [
+    ["窑炉总览", "/kilnSummary"],
+    ["窑炉内部", "/kilnInner"],
+    ["退火监测", "/stopFire"],
+    ["质检统计", "/quailtyCheck"],
+    ["能耗分析", "/energyCost"],
+  ];
+  return (
+    <div className={`${cls.centerMenu} flex`}>
+      {menuList.map((menu) => (
+        <div
+          key={menu[0]}
+          className={`${cls.menuItem} ${active == menu[0] ? cls.active : ""}`}
+          onClick={() => onChangeActive(menu[0])}
+        >
+          {menu[0]}
+        </div>
+      ))}
+    </div>
+  );
 }
diff --git a/src/components/Container.jsx b/src/components/Container.jsx
index 3d65c8d..8c467e2 100644
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@@ -5,6 +5,8 @@ import cls from "./container.module.scss";
 const Container = (props) => {
   let icon = useIcon(props.icon);
 
+  const desc = props.desc;
+  
   return (
     <div
       className={`${cls.container} ${props.className}`}
@@ -17,6 +19,7 @@ const Container = (props) => {
           className={props.icon == "kiln" ? cls.bigger : ""}
         />
         <h2>{props.title}</h2>
+        {desc && <div className={cls.graphBaseDesc}>{desc}</div>}
       </div>
       <div className={cls.container__content}>{props.children}</div>
       {props.pending && (
diff --git a/src/components/container.module.scss b/src/components/container.module.scss
index e175358..7e02f93 100644
--- a/src/components/container.module.scss
+++ b/src/components/container.module.scss
@@ -30,6 +30,14 @@
       letter-spacing: 2px;
       font-weight: 500;
     }
+
+    .graphBaseDesc {
+      margin: 0 6px;
+      margin-left: 110px;
+      font-size: 16px;
+      color: #76fff9;
+      flex: 1;
+    }
   }
 
   .container__content {