布局:
<div className={Styles.filterBox}> <div className={Styles.itme}> <span className={Styles.control} style={{ width:'210px'}}> <Input placeholder="请输入物品名称/品牌" /> </span> </div> <div className={Styles.itme}> <span className={Styles.control} style={{ width:'150px'}}> <Input placeholder="批号" /> </span> </div> <div className={Styles.itme}> <span className={Styles.control}> <span className={Styles.label}>有效期至:</span> <DatePicker dateRender={current => { const style = {}; if (current.date() === 1) { style.border = '1px solid #1890ff'; style.borderRadius = '50%'; } return ( <div className="ant-calendar-date" style={style}> {current.date()} </div> ); }} /> </span> </div> <div className={Styles.itme}> <span className={Styles.control}> <span className={Styles.label} onClick={()=>{this.onClick()}} >选择仓库:</span> <Select style={{width:"180px"}} value={0} > { housesbody.map((item,key)=> { return ( <Option value={0} key={key}>{item.name}</Option> ) }) } </Select> </span> </div> <div className={Styles.itme} style={{ paddingTop:'7px'}}> <span className={Styles.control}> <CheckBox>显示0库存物品</CheckBox> </span> </div> </div>
样式:
.filterBox{ margin-bottom: 20px; width:1240px; display:flex; margin-top:35px; margin-bottom: 30px; Box-sizing: border-Box; flex-flow: row Nowrap; position: relative; .itme{ margin-right: 20PX; .control{ display: flex; flex-direction: row; } .label{ margin-right: 5px; color: #6c757d; font-size: 12px; line-height: 32px; } } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。