提交 a841a166 作者: 龚洪江

修复:menu样式及选中修改

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