提交 a841a166 作者: 龚洪江

修复:menu样式及选中修改

上级 1d3d3dae
//$page-background: #F6F7FB;
$page-background: #f0f2f5;
$page-background: #F3F6FF ;
.layout-view {
position: fixed;
top: 0;
......@@ -46,7 +46,6 @@ $page-background: #f0f2f5;
.ant-menu-dark {
background: transparent;
//font-size: 14px;
}
.ant-layout-sider-children{
border-radius: 10px;
......@@ -55,7 +54,6 @@ $page-background: #f0f2f5;
.ant-menu-item {
transform: translateX(10px);
.ant-menu-item-icon {
transform: translateX(-10px);
}
......@@ -71,12 +69,14 @@ $page-background: #f0f2f5;
height: 44px;
margin-top: 2px;
margin-bottom: 2px;
color: #000;
}
.ant-menu-item-selected {
//background: #1a232c;
background-color: #fff;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
color: #556DA7;
}
.sider-collapsed {
......@@ -98,11 +98,11 @@ $page-background: #f0f2f5;
}
}
:where(.css-dev-only-do-not-override-1os3dla).ant-menu-dark.ant-menu-inline
.ant-menu-sub.ant-menu-inline {
:where(.css-dev-only-do-not-override-rvhhh3).ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline {
background: none;
}
.layout-logo {
height: 100%;
//width: 170px;
......@@ -118,7 +118,7 @@ $page-background: #f0f2f5;
.logo-text {
min-width: 100px;
font-size: 18px;
color: #ffffff;
color: #000;
text-align: left;
animation: fadeIn 0.618s ease-in-out;
animation-fill-mode: forwards;
......@@ -156,14 +156,14 @@ $page-background: #f0f2f5;
.user-company {
font-size: 12px;
font-weight: 600;
color: #ffffff;
color: #000;
}
.user-name {
font-size: 12px;
font-weight: normal;
//color: #7f828a;
color: #F6F7FB;
color: #556DA7 ;
//color: #F6F7FB;
}
}
......@@ -180,7 +180,7 @@ $page-background: #f0f2f5;
align-items: center;
justify-content: center;
flex-direction: column;
color: #ffffff;
color: #000;
}
}
......
......@@ -22,8 +22,7 @@ export function MenuView() {
const navigate = useNavigate();
// 点击侧边栏事件
const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
setOpenKeys(keys);
// console.log('侧边栏事件 -->', keys);
setOpenKeys([keys[keys.length - 1]]);
};
// 点击侧边栏事件
const onSelect: MenuProps['onSelect'] = (keys) => {
......@@ -62,6 +61,12 @@ export function MenuView() {
// 设置当前选中的项目
setOpenKeys([getRoutePid(routerList, location.pathname).toString()]);
// 设置当前选中的项目的subMenu
console.log(
'当前选中menu-->',
getRouteID(routerList, location.pathname),
location.pathname,
routerList,
);
setSelectedKeys([getRouteID(routerList, location.pathname).toString()]);
}, []);
return (
......@@ -73,6 +78,7 @@ export function MenuView() {
onOpenChange={onOpenChange}
mode='inline'
items={items}
style={{ backgroundColor: ' #F3F6FF ' }}
/>
{/* <div className="sider-collapsed" onClick={() => setCollapsed(!collapsed)}> */}
{/* <Button */}
......
......@@ -5,7 +5,7 @@
height: 20px;
fill: currentColor;
transform: translateY(-3px);
color: #fff;
color: #000;
}
.hamburger.is-active {
......
......@@ -38,8 +38,7 @@ export function TitleView() {
return (
<Header
style={{
// background: '#ffffff',
background: 'linear-gradient(137deg,#0165d0,#18a2fe)',
background: '#fff',
height: 40,
padding: '0 10px',
position: 'relative',
......@@ -72,8 +71,8 @@ export function TitleView() {
arrow
>
<div className='user-action'>
<UpOutlined style={{ fontSize: 10, color: '#ffffff' }} />
<DownOutlined style={{ fontSize: 10, color: '#ffffff' }} />
<UpOutlined style={{ fontSize: 10, color: '#000' }} />
<DownOutlined style={{ fontSize: 10, color: '#000' }} />
</div>
</Dropdown>
</div>
......
......@@ -39,7 +39,7 @@ export const getRouteID = (routerList: RouteObjectType[], path: string) => {
routerList.forEach((i) => {
if (i.path === path) {
id = i.meta?.id || '';
} else if (i.children?.length) {
} else if (i.children?.length && id === '') {
id = getRouteID(i.children, path);
}
});
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论