| | |
| | | import zhCN from '@/locales/zh-CN/mob.js' |
| | | import enUS from '@/locales/en-US/mob.js' |
| | | import ColorSketch from '@/mob/colorsketch' |
| | | import StyleInput from './styleInput' |
| | | import FileUpload from '@/tabviews/zshare/fileupload' |
| | | import './index.scss' |
| | | |
| | |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | card: null, |
| | | comIds: [], |
| | | fontColor: '#000000', |
| | | bgimages: [], |
| | | backgroundImage: '', |
| | | options: [], |
| | |
| | | * @description 修改字体颜色 ,颜色控件 |
| | | */ |
| | | changeFontColor = (val) => { |
| | | this.setState({ |
| | | fontColor: val |
| | | }) |
| | | this.updateStyle({color: val}) |
| | | } |
| | | |
| | | /** |
| | | * @description 修改字体颜色 ,手动输入 |
| | | */ |
| | | changeFontColorInput = (e) => { |
| | | this.setState({ |
| | | fontColor: e.target.value |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.updateStyle({border: border}) |
| | | } |
| | | |
| | | changeBorderRadius = (e) => { |
| | | let val = e.target.value |
| | | changeBorderRadius = (val) => { |
| | | this.updateStyle({borderRadius: val}) |
| | | } |
| | | |
| | | changeMarginOrPadding = (val, type) => { |
| | | val = parseInt(val) |
| | | |
| | | if (isNaN(val)) { |
| | | val = 0 |
| | | } |
| | | |
| | | this.updateStyle({[type]: `${val}px`}) |
| | | this.updateStyle({[type]: val}) |
| | | } |
| | | |
| | | render () { |
| | |
| | | <Drawer |
| | | title={ |
| | | <div className="header-logo"> |
| | | <img src="http://cloud.mk9h.cn/Content/images/upload/2020-03-26/2020032615132185788026_xiazai.png" alt=""/> |
| | | <img src={window.GLOB.mainlogo} alt=""/> |
| | | </div> |
| | | } |
| | | placement="left" |
| | |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item colon={false} label={<Icon title="行间距" type="line-height" />}> |
| | | <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> |
| | | <InputNumber defaultValue={card.lineHeight} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item colon={false} label={<Icon title="字间距" type="column-width" />}> |
| | | <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> |
| | | <InputNumber defaultValue={card.letterSpacing} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={24}> |
| | |
| | | label={<Icon title="字体颜色" type="font-colors" />} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <ColorSketch value={card.color || '#000000'} onChange={this.changeFontColor} /> |
| | | <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} /> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={24}> |
| | |
| | | label={<Icon title="圆角" type="radius-setting" />} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <Radio.Group onChange={this.changeBorderRadius} defaultValue={card.borderRadius || ''}> |
| | | <Radio value="0px">无</Radio> |
| | | <Radio value="2px">2px</Radio> |
| | | <Radio value="4px">4px</Radio> |
| | | <Radio value="25%">25%</Radio> |
| | | <Radio value="50%">50%</Radio> |
| | | </Radio.Group> |
| | | <StyleInput defaultValue={card.borderRadius || ''} width={210} options={['px', '%']} onChange={this.changeBorderRadius}/> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> : null} |
| | |
| | | colon={false} |
| | | label={<Icon title="上边距" type="arrow-up"/>} |
| | | > |
| | | <InputNumber defaultValue={card.marginTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/> |
| | | <StyleInput defaultValue={card.marginTop} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | colon={false} |
| | | label={<Icon title="下边距" type="arrow-down"/>} |
| | | > |
| | | <InputNumber defaultValue={card.marginBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/> |
| | | <StyleInput defaultValue={card.marginBottom} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | colon={false} |
| | | label={<Icon title="左边距" type="arrow-left"/>} |
| | | > |
| | | <InputNumber defaultValue={card.marginLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/> |
| | | <StyleInput defaultValue={card.marginLeft} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | colon={false} |
| | | label={<Icon title="右边距" type="arrow-right"/>} |
| | | > |
| | | <InputNumber defaultValue={card.marginRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/> |
| | | <StyleInput defaultValue={card.marginRight} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> : null} |
| | |
| | | colon={false} |
| | | label={<Icon title="上边距" type="arrow-up"/>} |
| | | > |
| | | <InputNumber defaultValue={card.paddingTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/> |
| | | <StyleInput defaultValue={card.paddingTop} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | colon={false} |
| | | label={<Icon title="下边距" type="arrow-down"/>} |
| | | > |
| | | <InputNumber defaultValue={card.paddingBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/> |
| | | <StyleInput defaultValue={card.paddingBottom} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | colon={false} |
| | | label={<Icon title="左边距" type="arrow-left"/>} |
| | | > |
| | | <InputNumber defaultValue={card.paddingLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/> |
| | | <StyleInput defaultValue={card.paddingLeft} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | colon={false} |
| | | label={<Icon title="右边距" type="arrow-right"/>} |
| | | > |
| | | <InputNumber defaultValue={card.paddingRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/> |
| | | <StyleInput defaultValue={card.paddingRight} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> : null} |