diff --git a/src/assets/bg_center_menu.png b/src/assets/bg_center_menu.png
new file mode 100644
index 0000000..d9515e0
Binary files /dev/null and b/src/assets/bg_center_menu.png differ
diff --git a/src/components/CenterTopData/CenterMenu/index.jsx b/src/components/CenterTopData/CenterMenu/index.jsx
index 5e5303e..199e102 100644
--- a/src/components/CenterTopData/CenterMenu/index.jsx
+++ b/src/components/CenterTopData/CenterMenu/index.jsx
@@ -1,5 +1,18 @@
import cls from './index.module.less';
export default function CenterMenu() {
- return
cetner menu
;
+ const menuList = [
+ ['窑炉总览', '/kilnSummary'],
+ ['窑炉内部', '/kilnInner'],
+ ['退火监测', '/stopFire'],
+ ['质检统计', '/quailtyCheck'],
+ ['能耗分析', '/energyCost'],
+ ];
+ return (
+
+ {menuList.map((menu) => (
+
{menu[0]}
+ ))}
+
+ );
}
diff --git a/src/components/CenterTopData/CenterMenu/index.module.less b/src/components/CenterTopData/CenterMenu/index.module.less
index 05b775c..4a6b7e2 100644
--- a/src/components/CenterTopData/CenterMenu/index.module.less
+++ b/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;
+}