1

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

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>
+  );
 }

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 && (

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 {