提交 318152e3 编写于 作者: J jim

edit drawer icon

上级 6e3422fe
import React, { PureComponent } from 'react';
import { Select, message, List, Switch, Divider } from 'antd';
import { Select, message, List, Switch, Divider, Icon } from 'antd';
import DrawerMenu from 'rc-drawer-menu';
import { connect } from 'dva';
import styles from './index.less';
......@@ -125,17 +125,30 @@ class SettingDarwer extends PureComponent {
const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
return (
<div className={styles.settingDarwer}>
<div className={styles.mini_bar} onClick={this.togglerContent}>
<img
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
/>
</div>
<DrawerMenu
parent={null}
level={null}
handleChild={null}
open={collapse}
onHandleClick={this.togglerContent}
handleChild={
!collapse ? (
<Icon
type="setting"
style={{
color: '#FFF',
fontSize: 20,
}}
/>
) : (
<Icon
type="close"
style={{
color: '#FFF',
fontSize: 20,
}}
/>
)
}
placement="right"
width="336px"
style={{
......
@import '~antd/lib/style/themes/default.less';
.settingDarwer {
.mini_bar {
width: 50px;
height: 45px;
border-top-left-radius: 28px;
border-bottom-left-radius: 28px;
text-align: center;
font-size: 24px;
background: white;
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
z-index: 99;
box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
img {
width: 28px;
height: 28px;
}
}
:global {
.drawer {
z-index: 999;
}
}
}
.content {
width: 273px;
height: 100%;
......@@ -75,3 +48,17 @@
line-height: 22px;
margin-bottom: 12px;
}
:global {
.drawer-handle {
top: 240px;
background: #1890ff;
width: 57px;
height: 48px;
padding: 14px 18px;
padding-left: 24px;
}
.drawer-right .drawer-handle {
left: -57px;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册