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