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,20 +1,20 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from "react";
-import cls from './index.module.scss';
+import cls from "./index.module.scss";
 
 export default function CenterMenu({ active, onChangeActive }) {
   const menuList = [
-		['窑炉总览', '/kilnSummary'],
+    ["窑炉总览", "/kilnSummary"],
-		['窑炉内部', '/kilnInner'],
+    ["窑炉内部", "/kilnInner"],
-		['退火监测', '/stopFire'],
+    ["退火监测", "/stopFire"],
-		['质检统计', '/quailtyCheck'],
+    ["质检统计", "/quailtyCheck"],
-		['能耗分析', '/energyCost'],
+    ["能耗分析", "/energyCost"],
   ];
   return (
     <div className={`${cls.centerMenu} flex`}>
       {menuList.map((menu) => (
         <div
           key={menu[0]}
-					className={`${cls.menuItem} ${active == menu[0] ? cls.active : ''}`}
+          className={`${cls.menuItem} ${active == menu[0] ? cls.active : ""}`}
           onClick={() => onChangeActive(menu[0])}
         >
           {menu[0]}

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 {