ai-admin/src/components/AHeader/index.js

import {Dropdown ,Menu} from 'antd';
import logo from '@images/logo.png';
import msg from '@images/msg.png';
import me from '@images/me.png';
import down from '@images/down.png';
import {Component} from "react";
import style from './index.less'

const propTypes = {

}
const defaultProps = {};
class AHeader extends Component{
    render() {
        const menu = (
            <Menu>
                <Menu.Item key="0">
                    <a href="https://www.antgroup.com">个人中心</a>
                </Menu.Item>
                <Menu.Divider/>
                <Menu.Item key="3">退出</Menu.Item>
            </Menu>
        );
        return (
            <>
                <img className='logo' src={logo} alt=""/>
                <span className='break-line'>|</span>
                <span className='sys-name'>AI病案质控平台</span>
                <div className='infos'>
                    <span className='time'>2021年5月14日/星期五/18:05:19</span>
                    <span className='break-line'>|</span>
                    <img className='msg-icon' src={msg} alt="未读消息"/>
                    <div className="user">
                        <img className='user-icon' src={me} alt="用户头像"/>
                        <Dropdown overlay={menu} trigger={['click']}>
                            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                                <i>用户名</i>
                                <img src={down} alt=""/>
                            </a>
                        </Dropdown>
                    </div>
                </div>
            </>
        )
    }
}

AHeader.propTypes = propTypes;
AHeader.defaultProps = defaultProps;
export default AHeader;