menu样式重画

src/pages/nav_system_content/SystemContentList.js

@@ -1,12 +1,15 @@
 import React, { useState, useEffect } from 'react'
-import { history, Outlet, useLocation, matchRoutes } from '@umijs/max'
-import { Menu, Tabs } from 'antd'
+import { history, Outlet, useLocation, matchRoutes, useModel } from '@umijs/max'
+import { Menu, Tabs, Select } from 'antd'
 import './SystemContentList.less'
 import { formatRoute, getDefaultRoute } from '@/utils/routeUtils'
 import styles from './TopNavBar.less'
 import { Row, Col, Avatar, Dropdown, Button } from 'antd'
 import { userInfo } from '@/utils/globalCommon'
 import { HomeOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons'
+import { getPageQuery } from '@/utils/utils'
+import menuTitle from '@/assets/img/memuTitle.png'
+import menuTitle1 from '@/assets/img/memuTitle1.png'
 
 const SystemContentList = (props) => {
     const dynamicRoute = window.dynamicRoute
@@ -16,6 +19,7 @@ const SystemContentList = (props) => {
     const [openKey, setOpenKey] = useState([])
     const [selectedKey, setSelectedKey] = useState([])
     const [menuItems, setMenuItems] = useState([])
+    const [systemType, setSystemType] = useState('安全管理系统')
     let defaultKey = ''
 
     useEffect(() => {
@@ -54,6 +58,26 @@ const SystemContentList = (props) => {
         history.replace(curKey)
     }
 
+    const { initialState: { menu }, setInitialState } = useModel('@@initialState')
+
+    const loginOut = async () => {
+        // await outLogin()
+        const { redirect } = getPageQuery()
+
+        if (window.location.pathname !== '/login/login' && !redirect) {
+            history.replace({
+                pathname: '/login',
+                // search: stringify({
+                //   redirect: window.location.href,
+                // }),
+            })
+
+            setInitialState({ currentUser: null, menu: null, menuMap: null })
+            window.dynamicRoute = null
+            localStorage.clear()
+        }
+    }
+
     const handleMenuClick = (e) => {
         switch (e.key) {
             case 'logout':
@@ -78,6 +102,65 @@ const SystemContentList = (props) => {
     return (
         <div className='pageContainer systemContent'>
             <div className='leftMenu'>
+                <div className='menuTitle' style={{ marginBottom: '10px' }}>
+                    <img src={menuTitle} alt='menuTitle' style={{ marginTop: '20px', marginBottom: '2px' }} />
+                    <img src={menuTitle1} alt='menuTitle1' />
+                </div>
+                <div style={{ textAlign: 'center', marginBottom: 16 }}>
+                    <Select
+                        value={systemType}
+                        onChange={setSystemType}
+                        style={{
+                            width: 200,
+                            borderColor: '#3D81FF',
+                            backgroundColor: '#003AA7',
+                            color: '#fff',
+                            fontSize: 22,
+                            fontWeight: 600
+                        }}
+                        options={[
+                            { value: '安全管理系统', label: '安全管理系统' },
+                            { value: '环保管理系统', label: '环保管理系统' }
+                        ]}
+                        dropdownStyle={{
+                            backgroundColor: '#003AA7',
+                            borderColor: '#3D81FF'
+                        }}
+                        popupClassName="custom-select-dropdown"
+                        className="custom-select"
+                    />
+                </div>
+                <style jsx>{`
+                    .custom-select .ant-select-selector {
+                        border-color: #3D81FF !important;
+                        background-color: #003AA7 !important;
+                        color: #fff !important;
+                        fontSize: 22px !important;
+                        fontWeight: 600 !important;
+                    }
+                    .custom-select .ant-select-selection-item {
+                        color: #fff !important;
+                        fontSize: 22px !important;
+                        fontWeight: 600 !important;
+                    }
+                    .custom-select .ant-select-arrow {
+                        opacity: 0.66 !important;
+                        color: #fff !important;
+                    }
+                    .custom-select-dropdown .ant-select-item-option-selected {
+                        background-color: #3D81FF !important;
+                        color: #fff !important;
+                    }
+                    .custom-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected) {
+                        background-color: rgba(61, 129, 255, 0.1) !important;
+                        color: #fff !important;
+                    }
+                    .custom-select-dropdown .ant-select-item-option-content {
+                        color: #fff !important;
+                        font-size: 16px !important;
+                        font-weight: 600 !important;
+                    }
+                `}</style>
                 <Menu
                     openKeys={openKey}
                     selectedKeys={selectedKey}
@@ -122,3 +205,5 @@ const SystemContentList = (props) => {
 }
 
 export default SystemContentList
+
+

src/pages/nav_system_content/SystemContentList.less

@@ -9,6 +9,8 @@
 		background-color: #fff;
 		padding: 0;
 		width: 100%;
+		min-height: 62px;
+		display: grid;
 		// margin-bottom: 10px;
 
 		.tabBarRow {
@@ -65,13 +67,39 @@
 	.leftMenu {
 		margin: 0;
 		width: 230px;
-		background-color: #ffffff;
-		border-radius: 6px;
 		overflow-y: auto;
 		overflow-x: hidden;
+		background-color: #2E4CD4;
 
 		.ant-menu-inline {
-			background: #ffffff !important;
+			background: #2E4CD4 !important;
+		}
+
+		// 默认情况字体样式
+		.ant-menu-item,
+		.ant-menu-submenu-title {
+			color: rgba(255, 255, 255, 0.6) !important;
+		}
+
+		// 选中状态样式
+		.ant-menu-item-selected {
+			color: rgba(255, 255, 255, 1) !important;
+			background-color: rgba(255, 255, 255, 0.22) !important;
+		}
+
+		// 选中状态下的文本颜色
+		.ant-menu-item-selected .ant-menu-item-icon,
+		.ant-menu-item-selected a {
+			color: rgba(255, 255, 255, 1) !important;
+		}
+
+		.menuTitle {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			height: 62px;
+			width: 100%;
 		}
 	}