From e0e5aa28cbd509579c7a83672a93241c9a5ed7e9 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 06 七月 2020 15:09:49 +0800
Subject: [PATCH] 2020-07-06
---
src/mob/colorsketch/index.jsx | 32 ++--
src/mob/controller/index.jsx | 222 +++++++++++++++++++++++++++++--
src/mob/contupdate/index.jsx | 5
src/mob/modelsource/option.jsx | 10
src/mob/login/index.scss | 32 +++-
src/mob/login/index.jsx | 45 +++++-
src/mob/contupdate/index.scss | 1
src/views/mobdesign/index.jsx | 20 ++
src/mob/controller/index.scss | 15 ++
9 files changed, 320 insertions(+), 62 deletions(-)
diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx
index 7f02cc2..42a3b13 100644
--- a/src/mob/colorsketch/index.jsx
+++ b/src/mob/colorsketch/index.jsx
@@ -8,34 +8,34 @@
class ColorSketch extends Component {
static propTpyes = {
- card: PropTypes.object,
- onDoubleClick: PropTypes.func
+ color: PropTypes.any,
+ changeColor: PropTypes.func
}
state = {
- visible: false,
- color: '#f8e71c',
- };
-
- handleClick = () => {
- this.setState({ visible: !this.state.visible })
- };
-
- handleClose = () => {
- this.setState({ visible: false })
- };
+ color: this.props.color,
+ }
handleChange = (color) => {
this.setState({ color: color.rgb })
- };
+ this.props.changeColor(`rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`)
+ }
render() {
const { color } = this.state
+
+ let _color = ''
+ if (typeof(color) === 'string') {
+ _color = color
+ } else {
+ _color = `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })`
+ }
+
return (
<Popover content={
<SketchPicker color={ this.state.color } onChange={ this.handleChange } />
} overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
- <div className="color-sketch-block" onClick={ this.handleClick }>
- <div className="color-sketch-block-inner" style={ {background: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })`} }></div>
+ <div className="color-sketch-block">
+ <div className="color-sketch-block-inner" style={ {background: _color} }></div>
</div>
</Popover>
)
diff --git a/src/mob/controller/index.jsx b/src/mob/controller/index.jsx
index 6a4306b..6e9ebc0 100644
--- a/src/mob/controller/index.jsx
+++ b/src/mob/controller/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Input, Col, Icon, InputNumber, Select } from 'antd'
+import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio } from 'antd'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -14,22 +14,153 @@
class MobController extends Component {
static propTpyes = {
editElem: PropTypes.any,
+ updateStyle: PropTypes.func,
}
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ card: null,
+ fontColor: '#000000',
+ backgroundColor: '#ffffff'
+ }
+
+ UNSAFE_componentWillReceiveProps (nextProps) {
+ if (!is(fromJS(this.props.editElem), fromJS(nextProps.editElem))) {
+ this.setState({
+ card: null
+ }, () => {
+ if (!nextProps.editElem) return
+ let _card = fromJS(nextProps.editElem).toJS()
+
+ this.setState({
+ card: _card,
+ fontColor: _card.color || '#000000',
+ backgroundColor: _card.backgroundColor || '#ffffff'
+ })
+ })
+ }
}
shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ return !is(fromJS(this.state), fromJS(nextState))
}
+ /**
+ * @description 瀛椾綋澶у皬鍒囨崲锛岃秴鍑鸿寖鍥村拷鐣�
+ */
+ changeFontSize = (val) => {
+ const { card } = this.state
+ let value = parseInt(val)
+
+ if (isNaN(value) || value < 12 || value > 100) return
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontSize: `${value}px`}})
+ }
+
+ /**
+ * @description 淇敼琛岄棿璺濓紝瓒呭嚭鑼冨洿蹇界暐
+ */
+ changeLineHeight = (val) => {
+ const { card } = this.state
+ let value = parseFloat(val)
+
+ if (isNaN(value) || value < 1 || value > 10) return
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {lineHeight: value}})
+ }
+
+ /**
+ * @description 瀛椾綋闂磋窛淇敼锛岃秴鍑鸿寖鍥村拷鐣�
+ */
+ changeLetterSpacing = (val) => {
+ const { card } = this.state
+ let value = parseFloat(val)
+
+ if (isNaN(value) || value < 0 || value > 100) return
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {letterSpacing: `${value}px`}})
+ }
+
+ /**
+ * @description 淇敼瀛椾綋绮楃粏
+ */
boldChange = (val) => {
- console.log(val)
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontWeight: val}})
+ }
+
+ /**
+ * @description 淇敼瀛椾綋棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeFontColor = (val) => {
+ const { card } = this.state
+
+ this.setState({
+ fontColor: val
+ })
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {color: val}})
+ }
+
+ /**
+ * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏�
+ */
+ changeFontColorInput = (e) => {
+ this.setState({
+ fontColor: e.target.value
+ })
+ }
+
+ /**
+ * @description 瀛椾綋瀵归綈
+ */
+ changeTextAlign = (e) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {textAlign: e.target.value}})
+ }
+
+ /**
+ * @description 瀛椾綋鏍峰紡锛屽�炬枩
+ */
+ changeFontStyle = (e) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontStyle: e.target.value}})
+ }
+
+ /**
+ * @description 瀛椾綋瑁呴グ锛屼笅鍒掔嚎銆佽疮绌跨嚎銆佷笂鍒掔嚎
+ */
+ changeTextDecoration = (e) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {textDecoration: e.target.value}})
+ }
+
+ /**
+ * @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeBackgroundColor = (val) => {
+ const { card } = this.state
+
+ this.setState({
+ backgroundColor: val
+ })
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {backgroundColor: val}})
+ }
+
+ /**
+ * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏�
+ */
+ changeBackgroundColorInput = (e) => {
+ this.setState({
+ backgroundColor: e.target.value
+ })
}
render () {
- const { editElem } = this.props
+ const { card, fontColor, backgroundColor } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -40,19 +171,20 @@
sm: { span: 16 }
}
}
+
return (
<div className="mob-controller">
<Form {...formItemLayout}>
- {editElem ? <Collapse expandIconPosition="right" accordion={true}>
- {editElem.items.includes('font') ? <Panel header="瀛椾綋" key="0">
+ {card ? <Collapse expandIconPosition="right" defaultActiveKey={card.items[0]} accordion={true}>
+ {card.items.includes('font') ? <Panel header="瀛椾綋" key="font">
<Col span={12}>
<Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}>
- <InputNumber min={12} max={100} precision={0} />
+ <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}>
- <Select defaultValue="normal" onChange={this.boldChange}>
+ <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
<Option value="normal">normal</Option>
<Option value="bold">bold</Option>
<Option value="bolder">bolder</Option>
@@ -71,12 +203,12 @@
</Col>
<Col span={12}>
<Form.Item colon={false} label={<Icon title="琛岄棿璺�" type="line-height" />}>
- <InputNumber min={1} max={10} precision={1} />
+ <InputNumber defaultValue={card.lineHeight || 1.5} 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 min={0} max={100} precision={0} />
+ <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -85,19 +217,73 @@
label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch />
- <Input />
+ <ColorSketch color={card.color || '#000000'} changeColor={this.changeFontColor} />
+ <Input value={fontColor} onChange={this.changeFontColorInput} />
</Form.Item>
</Col>
- <Col span={12}>
- <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}>
- <Input />
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={' '}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}>
+ <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button>
+ <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button>
+ <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={' '}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={this.changeTextAlign}>
+ <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button>
+ <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button>
+ <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={' '}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}>
+ <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button>
+ <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button>
+ <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button>
+ <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button>
+ </Radio.Group>
</Form.Item>
</Col>
</Panel> : null}
- <Panel header="鑳屾櫙" key="1">
- 鑳屾櫙
- </Panel>
+ {card.items.includes('background') ? <Panel header="鑳屾櫙" key="1">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
+ <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鑳屾櫙鍥剧墖" type="picture" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
+ <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
+ </Form.Item>
+ </Col>
+ </Panel> : null}
<Panel header="杈硅窛" key="2">
杈硅窛
</Panel>
diff --git a/src/mob/controller/index.scss b/src/mob/controller/index.scss
index a06a8f6..7a70d78 100644
--- a/src/mob/controller/index.scss
+++ b/src/mob/controller/index.scss
@@ -54,8 +54,10 @@
}
.color-sketch-block + .ant-input {
float: right;
- width: 60%;
+ width: 70%;
margin-top: 9px;
+ padding-right: 5px;
+ padding-left: 5px;
}
.ant-select-arrow {
color: inherit;
@@ -72,6 +74,17 @@
background: transparent;
}
}
+ .ant-radio-group {
+ .ant-radio-button-wrapper {
+ background: transparent;
+ color: rgba(255, 255, 255, 0.65);
+ height: 27px;
+ line-height: 25px;
+ span {
+ font-style: inherit;
+ }
+ }
+ }
}
}
}
diff --git a/src/mob/contupdate/index.jsx b/src/mob/contupdate/index.jsx
index 3282b3c..bbdf676 100644
--- a/src/mob/contupdate/index.jsx
+++ b/src/mob/contupdate/index.jsx
@@ -13,6 +13,7 @@
class ContentUpdate extends Component {
static propTpyes = {
+ deletable: PropTypes.any,
element: PropTypes.object,
updateContent: PropTypes.func
}
@@ -91,13 +92,13 @@
}
render () {
- const { element } = this.props
+ const { element, deletable } = this.props
const { getFieldDecorator } = this.props.form
const { visible, images } = this.state
return (
<div className="mob-content-update">
- <Icon type="delete" onClick={this.deleteElement} />
+ {deletable !== false ? <Icon type="delete" onClick={this.deleteElement} /> : null}
<Popover content={
<div>
{element.eleType === 'img' ? <FileUpload value={images} maxFile={1} fileType="text" onChange={this.imgChange}/> : null}
diff --git a/src/mob/contupdate/index.scss b/src/mob/contupdate/index.scss
index 8527354..465e2a5 100644
--- a/src/mob/contupdate/index.scss
+++ b/src/mob/contupdate/index.scss
@@ -6,6 +6,7 @@
color: #ffffff;
font-size: 14px;
display: none;
+ line-height: 1.5;
i {
padding: 2px 5px;
diff --git a/src/mob/login/index.jsx b/src/mob/login/index.jsx
index 11f7869..152a2d9 100644
--- a/src/mob/login/index.jsx
+++ b/src/mob/login/index.jsx
@@ -59,9 +59,10 @@
const { card } = this.props
e.stopPropagation()
let element = {
+ ...fromJS(card.logo.style).toJS(),
+ componentId: card.uuid,
uuid: card.logo.uuid,
- items: ['picture'],
- item: fromJS(card.logo).toJS()
+ items: []
}
this.props.triggerEdit(element)
}
@@ -70,9 +71,10 @@
const { card } = this.props
e.stopPropagation()
let element = {
+ ...fromJS(card.title.style).toJS(),
+ componentId: card.uuid,
uuid: card.title.uuid,
items: ['font'],
- item: fromJS(card.title).toJS()
}
this.props.triggerEdit(element)
}
@@ -81,9 +83,22 @@
const { card } = this.props
e.stopPropagation()
let element = {
+ ...fromJS(card.copyright.style).toJS(),
+ componentId: card.uuid,
uuid: card.copyright.uuid,
items: ['font'],
- item: fromJS(card.copyright).toJS()
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editLogin = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.login.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.login.uuid,
+ items: ['font', 'background']
}
this.props.triggerEdit(element)
}
@@ -92,9 +107,10 @@
const { card } = this.props
e.stopPropagation()
let element = {
+ ...fromJS(card.box.style).toJS(),
+ componentId: card.uuid,
uuid: card.box.uuid,
items: ['font', 'padding', 'background'],
- item: fromJS(card.box).toJS()
}
this.props.triggerEdit(element)
}
@@ -109,12 +125,12 @@
const { rember } = this.state
return (
- <div className="mob-login" onClick={this.editBox} style={{paddingTop: `calc(17vh - 10px)`}}>
+ <div className="mob-login" onClick={this.editBox} style={card.box.style}>
{card.logo ? <div className={'logo ' + (editId === card.logo.uuid ? 'editing' : '')} onClick={this.editLogo}>
<ContentUpdate element={card.logo} updateContent={(ele) => this.updateContent({...card, logo: ele})}/>
<img src={card.logo.content} alt=""/>
</div> : null}
- {card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} onClick={this.editTitle}>
+ {card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} style={card.title.style} onClick={this.editTitle}>
<ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
{card.title.content}
</div> : null}
@@ -149,10 +165,19 @@
<List.Item className="lang">涓枃绠�浣�</List.Item>
<div className="clear-both"></div>
</div>
- <Button type="primary" onDoubleClick={() => this.props.doubleClickCard(card.login)}>鐧诲綍</Button>
- {card.copyright ? <div className={'company-msg ' + (editId === card.copyright.uuid ? 'editing' : '')} onClick={this.editMsg}>
+ <Button
+ type="primary"
+ className={'login ' + (editId === card.login.uuid ? 'editing' : '')}
+ onDoubleClick={() => this.props.doubleClickCard(card.login)}
+ style={card.login.style}
+ onClick={this.editLogin}
+ >
+ <ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
+ {card.login.content}
+ </Button>
+ {card.copyright ? <div className={'company-msg ' + (editId === card.copyright.uuid ? 'editing' : '')} style={card.copyright.style} onClick={this.editMsg}>
<ContentUpdate element={card.copyright} updateContent={(ele) => this.updateContent({...card, copyright: ele})}/>
- <p>{card.copyright.content}</p>
+ {card.copyright.content}
</div> : null}
</div>
)
diff --git a/src/mob/login/index.scss b/src/mob/login/index.scss
index 13853ca..24ae6af 100644
--- a/src/mob/login/index.scss
+++ b/src/mob/login/index.scss
@@ -3,15 +3,17 @@
width: 100%;
height: 100%;
overflow: hidden;
- background: linear-gradient(#378DBE, #46C29E, #48A9D6);
+ // background-image: linear-gradient(#378DBE, #46C29E, #48A9D6);
.logo {
position: relative;
+ font-size: 14px;
max-width: 280px;
min-height: 10px;
margin: 0 auto;
margin-bottom: 15px;
text-align: center;
+ line-height: 1.5;
border: 1px dotted transparent;
img {
max-width: 100%;
@@ -33,9 +35,11 @@
margin-top: 15px;
margin-bottom: 30px;
text-align: center;
+ line-height: 1.5;
font-size: 20px;
color: #ffffff;
font-weight: bold;
+ letter-spacing: 0px;
border: 1px dotted transparent;
}
.plat-name.editing {
@@ -54,30 +58,32 @@
position: relative;
z-index: 1;
width: 245px;
+ font-size: 14px;
max-width: 270px;
+ line-height: 1.5;
margin: 0 auto;
margin-bottom: 10px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.3);
.am-input-label {
width: 30px;
- color: #ffffff;
+ color: inherit;
padding-top: 10px;
}
input {
- color: #fafafa;
+ color: inherit;
}
input::-webkit-input-placeholder {
- color: #ffffff;
+ color: inherit;
}
input:-moz-placeholder {
- color: #ffffff;
+ color: inherit;
}
input::-moz-placeholder {
- color: #ffffff;
+ color: inherit;
}
input:-ms-input-placeholder {
- color: #ffffff;
+ color: inherit;
}
.am-input-control input:disabled {
@@ -90,8 +96,10 @@
.other-setting {
position: relative;
z-index: 1;
+ font-size: 14px;
width: 245px;
max-width: 270px;
+ line-height: 1.5;
margin: 0 auto;
margin-bottom: 10px;
.am-list-item {
@@ -114,7 +122,7 @@
}
.am-list-line .am-list-content {
font-size: 14px;
- color: #fafafa;
+ color: inherit;
cursor: pointer;
}
.am-list-extra {
@@ -141,6 +149,12 @@
margin: 0 auto;
border-radius: 30px;
border: 1px dotted transparent;
+ overflow: visible;
+ letter-spacing: 0px;
+ span {
+ font-style: inherit;
+ font-weight: inherit;
+ }
}
>.am-button:hover {
color: #fff;
@@ -156,6 +170,8 @@
font-size: 12px;
color: #fafafa;
text-align: center;
+ line-height: 1.5;
+ letter-spacing: 0px;
border: 1px dotted transparent;
}
.company-msg.editing {
diff --git a/src/mob/modelsource/option.jsx b/src/mob/modelsource/option.jsx
index f06e740..5418f89 100644
--- a/src/mob/modelsource/option.jsx
+++ b/src/mob/modelsource/option.jsx
@@ -14,11 +14,11 @@
sourceType: 'mob-login-1', type: 'mob', url: mobLogin1, style: {},
param: {
type: 'login', subtype: 'mob-login-1',
- box: { editable: true, eleType: 'box', paddingTop: '17vh', background: '', color: '#ffffff' },
- logo: { editable: true, eleType: 'img', content: mklogo },
- title: { editable: true, eleType: 'text', content: '鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�', fontSize: '20px', fontWeight: 'bold', color: '#ffffff' },
- login: { editable: true, eleType: 'button', content: '鐧诲綍', fontSize: '20px', fontWeight: 'bold', color: '#ffffff' },
- copyright: { editable: true, eleType: 'textarea', content: 'Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�', fontSize: '12px', color: '#ffffff' }
+ box: { editable: true, eleType: 'box', style: {paddingTop: '17vh', color: '#ffffff', backgroundImage: 'linear-gradient(#378DBE, #46C29E, #48A9D6)'}},
+ logo: { editable: true, eleType: 'img', content: mklogo, style: {} },
+ title: { editable: true, eleType: 'text', content: '鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�', style: {fontSize: '20px', fontWeight: 'bold', color: '#ffffff', textAlign: 'center'}},
+ login: { editable: true, eleType: 'button', content: '鐧诲綍', style: {fontSize: '18px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4}},
+ copyright: { editable: true, eleType: 'textarea', content: 'Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�', style: {fontSize: '12px', color: '#ffffff', textAlign: 'center'} }
}
},
]
diff --git a/src/views/mobdesign/index.jsx b/src/views/mobdesign/index.jsx
index 22748d1..5a2f0b8 100644
--- a/src/views/mobdesign/index.jsx
+++ b/src/views/mobdesign/index.jsx
@@ -125,6 +125,22 @@
})
}
+ updateStyle = (proper) => {
+ const { config } = this.state
+
+ config.components = config.components.map(component => {
+ if (component.uuid === proper.componentId) {
+ Object.keys(component).forEach(key => {
+ if (component[key].editable && component[key].uuid === proper.uuid) {
+ component[key].style = {...component[key].style, ...proper.style}
+ }
+ })
+ }
+ return component
+ })
+ this.setState({config})
+ }
+
updateConfig = (config) => {
this.setState({
config: config
@@ -162,10 +178,10 @@
</div> : null
}
<div className="mob-setting">
- {config ? <Tabs defaultActiveKey="2" animated={false} size="small">
+ {config ? <Tabs defaultActiveKey="1" animated={false} size="small">
<TabPane tab="閰嶇疆" key="1">
{/* <SketchPicker /> */}
- <Controller editElem={editElem} />
+ <Controller editElem={editElem} updateStyle={this.updateStyle} />
</TabPane>
<TabPane tab="鏁版嵁婧�" key="2">
<DataSource config={config} updateConfig={this.updateConfig} />
--
Gitblit v1.8.0