update menu
This commit is contained in:
parent
1062775867
commit
5a5adaf108
BIN
src/assets/bg_center_menu.png
Normal file
BIN
src/assets/bg_center_menu.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.4 KiB |
@ -1,5 +1,18 @@
|
|||||||
import cls from './index.module.less';
|
import cls from './index.module.less';
|
||||||
|
|
||||||
export default function CenterMenu() {
|
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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,31 @@
|
|||||||
.centerMenu {
|
.centerMenu {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 80px;
|
top: 20px;
|
||||||
left: 240px;
|
left: 680px;
|
||||||
height: 200px;
|
|
||||||
width: 1000px;
|
|
||||||
background: #1ed65278;
|
|
||||||
color: white;
|
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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user