update menu

src/components/CenterTopData/CenterMenu/index.jsx

@@ -1,5 +1,18 @@
 import cls from './index.module.less';
 
 export default function CenterMenu() {
-	return <div className={cls.centerMenu}>cetner menu</div>;
+	const menuList = [
+		['窑炉总览', '/kilnSummary'],
+		['窑炉内部', '/kilnInner'],
+		['退火监测', '/stopFire'],
+		['质检统计', '/quailtyCheck'],
+		['能耗分析', '/energyCost'],
+	];
+	return (
+		<div className={`${cls.centerMenu} flex`}>
+			{menuList.map((menu) => (
+				<div className={cls.menuItem}>{menu[0]}</div>
+			))}
+		</div>
+	);
 }

src/components/CenterTopData/CenterMenu/index.module.less

@@ -1,9 +1,31 @@
 .centerMenu {
-	position: fixed;
-	top: 80px;
-	left: 240px;
-	height: 200px;
-	width: 1000px;
-	background: #1ed65278;
+	position: absolute;
+	top: 20px;
+	left: 680px;
 	color: white;
 }
+
+.menuItem {
+	transition: all 0.3s ease-out;
+	cursor: pointer;
+	user-select: none;
+	padding: 10px 20px;
+	font-size: 32px;
+	line-height: 48px;
+	letter-spacing: 6px;
+	background: url(../../../assets/bg_center_menu.png) no-repeat;
+	background-size: 100% 50%;
+	background-position: bottom;
+	color: #00fff788;
+	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+		'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
+		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
+}
+
+.menuItem:hover {
+	color: #00fff7;
+}
+
+.menuItem:not(:first-child) {
+	margin-left: 50px;
+}