SCRM:
// HTML
import React, {Component} from 'react';
import {observer} from 'mobx-react';
import commonScreenCancel from '@img/icon/common_screen_cancel.png';
import {Table, Button, Drawer} from 'antd';
import noticeStore from '@stores/Notice';
import {toJS} from 'mobx';
import style from './style.less';
@observer
export default class Index extends Component {
constructor(props) {
super(props);
this.state = {};
}
async componentDidMount() {}
render() {
return (
<Drawer className={style.common_config} width={590} placement="right" keyboard={false} maskClosable={false} closable={false} visible={true} getContainer={false} mask={false}>
<div className={style.content}>
<div className={style.content_header}>
<div className={style.header_close_btn} onClick={this.onClose}>
<img src={commonScreenCancel} />
</div>
<div className={style.header_title}>常用筛选管理</div>
</div>
<div className={style.content_body}>11111</div>
<div className={style.content_footer}>
<Button className="btn-sure" htmlType="submit" onClick={() => this.debounceOk()}>
保存
</Button>
<Button onClick={this.onClose} className="btn-cancel">
取消
</Button>
</div>
</div>
</Drawer>
);
}
}
// less
.common_config {
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.content_header {
height: 50px;
line-height: 50px;
padding: 0 20px;
display: flex;
align-items: center;
// justify-content: space-between;
border-bottom: 1px solid #ececec;
color: #252525;
.header_title {
font-size: 14px;
margin-left: 8px;
color: #333333;
font-weight: 500;
}
.header_close_btn {
font-size: 12px;
cursor: pointer;
}
}
.content_body {
padding: 24px;
flex: 1;
overflow: auto;
}
.content_footer {
height: 64px;
line-height: 64px;
padding-left: 24px;
border-top: 1px solid #ececec;
button + button {
margin-left: 10px;
}
> button {
padding: 0 14px !important;
}
}
}
}