侧边栏背景设计：

step1:导入背景图片

background-image: url(../../assets/menu-background.png);background-repeat:no-repeat ;background-size: cover;

step2:设置背景图片高度

  • 父盒子高度就是所有可见区高度
height:100%;
  • 父盒子高度中蕴含其余盒子
height: ~'calc(100% - @{layout-header-height})';
  • 背景图片须要设计为滚动条可见区高度
const scrollHight = document.body.scrollHeight;style={{ height:{scrollHight}}}

浮动Menu设计

step1:导入andt组件<Menu>

`import { Menu } from 'antd';`

step2:<div>(menu的父元素)中导入menu的背景图片并设置浮动

background-image: url(../../assets/menu-focusing.png);background-repeat:no-repeat ;background-size: cover;position: fixed;

step3:写出menu的style和题目

<Menu className={addStyles.newStyle}><SubMenu title="我的项目合集" className={addStyles.writeSize}>{this.getProjectData()}</SubMenu><div className={addStyles.backLogo} /
step4：getProjectData()函数获取数据，并获得前5(NUMBER_FIVE)条数据，再通过数据驱动生成menuitem
  • 获取数据
getProjectData = () => {    const { ProjectModel = {} } = this.props;    const { Topdata = [""] } = ProjectModel;    const getedData = [];    for (let i = 0; i < Topdata.length; i += 1) {      if (Topdata.length !== 0) {        const { projectName = [] } = Topdata[i];        getedData[i] = projectName;      }    }    if (getedData.length >NUMBER_FIVE) {      for (let j = NUMBER_FIVE; j <= getedData.length - 1; j += 1) {        getedData.pop();      }    }    return (      getedData.map((rigthData) => (        this.createProjectMenu(rigthData)      )))  }
  • createProjectMenu()函数生成menuitem
  createProjectMenu = (rigthData) => {    const { changeStyle = ''} = this.state;    const { ProjectModel = {} } = this.props;    const { Topdata = [""] } = ProjectModel;    return (      <div>        <Menu>          <Menu.Item className={addStyles.menuItemStyle}>            <Button onClick={this.goTheProject} className={addStyles.buttonStyle}>              {rigthData}            </Button>          </Menu.Item>          <span>            <Button className={addStyles.anoButtonStyle} onClick={() => this.changeIcon(Topdata)}>              <Icon type="star" style={{ fontSize: '30px' }} theme={changeStyle === 1 ? ("twoTone") : ("")} twoToneColor={changeStyle === 1 ? ("#52c41a") : ("")} />            </Button>          </span>        </Menu>      </div>    )  }
  • goTheProject()函数：通过点击事件进行跳转，跳转到该项目标详情页面
goTheProject = () => {    router.push({ pathname: '/Project/ProjectBranch' });  }
  • changeIcon()函数：通过点击图标进行珍藏和勾销珍藏
const { confirm } = Modal;changeIcon = (record) => {    const { isChange } = this.state;    const { dispatch, ProjectModel: { pagination } } = this.props;    const data = record[0];    const { id = '' } = data;    this.setState({      visible: true    })    if (isChange === 1) {      this.setState(        {          changeStyle: 0,          isChange: 0,        }      )      confirm({        title: `是否勾销珍藏所选我的项目`,        okText: '确定',        cancelText: '勾销',        onOk: () => {          dispatch({            type: 'ProjectModel/deleteTopProject',            payload: {              data: {                projectId: id,              },              pagination,            },          });        },      });    } else {      this.setState(        {          changeStyle: 1,          isChange: 1,        }      )      confirm({        title: `是否珍藏所选我的项目`,        okText: '确定',        cancelText: '勾销',        onOk: () => {          dispatch({            type: 'ProjectModel/topProject',            payload: {              data: {                projectId: id,              },              pagination,            },          });        },      });    }  }