54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import './menu-with-bottom-button.css'
|
|
import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
|
|
import serveImg from '../../static/left/serves.png'
|
|
// import newImg from '../../static/left/new.png'
|
|
// import {
|
|
// RightOutlined
|
|
// } from '@ant-design/icons';
|
|
export default function MenuWithTopButton(props: IMenuWithTopButton) {
|
|
|
|
|
|
const list = props.list.map((item, index) => (
|
|
// 创建项目下三个选项
|
|
<li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
|
|
props.handleListItem(e, index, item);
|
|
}}>
|
|
|
|
{item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
|
|
<span className="menu-name">{item.name}</span>
|
|
{/* <span className='icon'><RightOutlined /></span> */}
|
|
</li>
|
|
));
|
|
|
|
return (
|
|
<div className="menu-with-bot-button">
|
|
{/* button 是三个黄色按钮 */}
|
|
<div className='bot' onClick={(e) => {
|
|
props.button.handle(e);
|
|
|
|
}}>
|
|
<div className='bot-lift'>
|
|
<img src={serveImg} alt="" />
|
|
<div> {props.button.name}</div>
|
|
</div>
|
|
{/* <div className='bot-right' onClick={(e) => {
|
|
props.button.handle(e);
|
|
|
|
}}>
|
|
<img src={newImg} alt="" />
|
|
<div>创建</div>
|
|
</div> */}
|
|
</div>
|
|
{/* <button className="btn btn-orange top-button"
|
|
onClick={(e) => {
|
|
props.button.handle(e);
|
|
console.log(e);
|
|
|
|
}}
|
|
>
|
|
{props.button.name}
|
|
</button> */}
|
|
<ul>{list}</ul>
|
|
</div>
|
|
)
|
|
} |