From 269f0759a64927c2ea06a9d7de92ecfd0be7df5b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 13 七月 2020 10:00:04 +0800
Subject: [PATCH] 2020-07-13
---
src/mob/components/login/mob-login-2/index.scss | 132 ++++++
src/mob/modelsource/dragsource/index.scss | 6
src/mob/controller/index.jsx | 169 ++++++++
src/mob/modelsource/index.jsx | 4
src/assets/mobimg/mob-login2.png | 0
src/templates/zshare/formconfig.jsx | 14
src/mob/mobshell/index.jsx | 12
src/mob/components/login/mob-login-1/index.scss | 27
src/mob/controller/index.scss | 32 +
src/mob/components/login/mob-login-1/index.jsx | 225 +++++++++++
src/locales/zh-CN/model.js | 1
/dev/null | 187 ---------
src/mob/components/login/mob-login-2/index.jsx | 207 ++++++++++
src/locales/en-US/model.js | 1
src/mob/modelsource/option.jsx | 15
src/views/mobdesign/index.scss | 24
src/views/mobmanage/index.scss | 6
src/mob/header/index.scss | 4
src/mob/contupdate/index.scss | 1
src/views/mobdesign/index.jsx | 9
src/mob/mobshell/card.jsx | 7
src/mob/mobshell/index.scss | 2
22 files changed, 828 insertions(+), 257 deletions(-)
diff --git a/src/assets/mobimg/mob-login2.png b/src/assets/mobimg/mob-login2.png
new file mode 100644
index 0000000..1ab9edf
--- /dev/null
+++ b/src/assets/mobimg/mob-login2.png
Binary files differ
diff --git a/src/locales/en-US/model.js b/src/locales/en-US/model.js
index ee775a7..61da219 100644
--- a/src/locales/en-US/model.js
+++ b/src/locales/en-US/model.js
@@ -131,6 +131,7 @@
'model.form.multiselect': 'Multi-select',
'model.form.href': 'Link',
'model.form.link': 'Linkage menu',
+ 'model.form.linkform': 'Linkage form',
'model.form.dateday': 'Date(Day)',
'model.form.datetime': 'Date(Second)',
'model.form.dateweek': 'Date(Week)',
diff --git a/src/locales/zh-CN/model.js b/src/locales/zh-CN/model.js
index 953d2cd..f3fb78e 100644
--- a/src/locales/zh-CN/model.js
+++ b/src/locales/zh-CN/model.js
@@ -131,6 +131,7 @@
'model.form.multiselect': '涓嬫媺澶氶��',
'model.form.href': '閾炬帴',
'model.form.link': '鑱斿姩鑿滃崟',
+ 'model.form.linkform': '鍏宠仈琛ㄥ崟',
'model.form.dateday': '鏃ユ湡锛堝ぉ锛�',
'model.form.datetime': '鏃ユ湡锛堢锛�',
'model.form.dateweek': '鏃ユ湡锛堝懆锛�',
diff --git a/src/mob/components/login/mob-login-1/index.jsx b/src/mob/components/login/mob-login-1/index.jsx
new file mode 100644
index 0000000..bc7aed8
--- /dev/null
+++ b/src/mob/components/login/mob-login-1/index.jsx
@@ -0,0 +1,225 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { InputItem, Icon, Checkbox, List, Button } from 'antd-mobile'
+import { createForm } from 'rc-form'
+
+import zhCN from '@/locales/zh-CN/mob.js'
+import enUS from '@/locales/en-US/mob.js'
+import Utils from '@/utils/utils.js'
+import ContentUpdate from '@/mob/contupdate'
+import mklogo from '@/assets/mobimg/mklogo.png'
+import './index.scss'
+
+const CheckboxItem = Checkbox.CheckboxItem
+
+class MobLogin extends Component {
+ static propTpyes = {
+ card: PropTypes.object,
+ editId: PropTypes.any,
+ triggerEdit: PropTypes.func,
+ updateConfig: PropTypes.func,
+ onDoubleClick: PropTypes.func
+ }
+
+ state = {
+ dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ rember: true,
+ param: {
+ type: 'login',
+ subtype: 'mob-login-1',
+ box: { uuid: Utils.getuuid(), eleType: 'box', style: {color: '#ffffff', backgroundImage: 'linear-gradient(#378DBE, #46C29E, #48A9D6)'}},
+ logo: { uuid: Utils.getuuid(), eleType: 'img', content: mklogo, style: {} },
+ title: { uuid: Utils.getuuid(), eleType: 'text', content: '鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�', style: {fontSize: '20px', fontWeight: 'bold', color: '#ffffff', textAlign: 'center', marginTop: '15px', marginBottom: '30px'}},
+ login: { uuid: Utils.getuuid(), eleType: 'button', content: '鐧诲綍', style: {fontSize: '18px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, borderRadius: '25px'}},
+ copyright: { uuid: Utils.getuuid(), eleType: 'textarea', content: 'Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�', style: {fontSize: '12px', color: '#ffffff', textAlign: 'center'} }
+ }
+ }
+
+ UNSAFE_componentWillMount () {
+ const { card } = this.props
+ const { param } = this.state
+
+ if (!card.box) {
+ this.props.updateConfig({...param, ...card})
+ }
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ onChange = (e) => {
+ const { rember } = this.state
+ e.stopPropagation()
+
+ this.setState({
+ rember: !rember
+ })
+ }
+
+ onChangeLang = (value) => {
+ this.setState({
+ lang: value
+ })
+ }
+
+ editLogo = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.logo.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.logo.uuid,
+ items: ['margin']
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editTitle = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.title.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.title.uuid,
+ items: ['font', 'margin'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editMsg = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.copyright.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.copyright.uuid,
+ items: ['font'],
+ }
+ 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', 'border']
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editBox = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.box.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.box.uuid,
+ items: ['font', 'padding', 'background'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ updateContent = (card) => {
+ Object.keys(card).forEach(key => {
+ if (card[key] === null) {
+ delete card[key]
+ }
+ })
+ this.props.updateConfig(card)
+ }
+
+ render () {
+ const { card, editId } = this.props
+ const { getFieldProps } = this.props.form
+ const { rember } = this.state
+
+ if (!card.box) return null
+
+ let logoStyle = card.logo && card.logo.style ? fromJS(card.logo.style).toJS() : null
+ if (logoStyle && logoStyle.marginTop && /vh$/ig.test(logoStyle.marginTop)) {
+ let percent = parseInt(logoStyle.marginTop)
+ logoStyle.marginTop = `calc(${(percent / 100) * 615}px)`
+ }
+ if (logoStyle && logoStyle.marginBottom && /vh$/ig.test(logoStyle.marginBottom)) {
+ let percent = parseInt(logoStyle.marginBottom)
+ logoStyle.marginBottom = `calc(${(percent / 100) * 625}px)`
+ }
+
+ let titleStyle = card.title && card.title.style ? fromJS(card.title.style).toJS() : null
+ if (titleStyle && titleStyle.marginTop && /vh$/ig.test(titleStyle.marginTop)) {
+ let percent = parseInt(titleStyle.marginTop)
+ titleStyle.marginTop = `calc(${(percent / 100) * 615}px)`
+ }
+ if (titleStyle && titleStyle.marginBottom && /vh$/ig.test(titleStyle.marginBottom)) {
+ let percent = parseInt(titleStyle.marginBottom)
+ titleStyle.marginBottom = `calc(${(percent / 100) * 615}px)`
+ }
+
+ return (
+ <div className="mob-login-1" onClick={this.editBox} style={card.box.style}>
+ <div className="mob-login-body">
+ {card.logo ? <div className={'logo ' + (editId === card.logo.uuid ? 'editing' : '')} style={logoStyle} 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' : '')} style={titleStyle} onClick={this.editTitle}>
+ <ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
+ {card.title.content}
+ </div> : null}
+ <InputItem
+ placeholder="UserName"
+ prefixListCls="mk-login-item am-list"
+ {...getFieldProps('userName', {
+ initialValue: 'admin',
+ })}
+ disabled={true}
+ >
+ <Icon type="check-circle-o" />
+ </InputItem>
+ <InputItem
+ placeholder="Password"
+ prefixListCls="mk-login-item am-list"
+ {...getFieldProps('password', {
+ initialValue: '123456',
+ })}
+ type={'password'}
+ disabled={true}
+ >
+ <Icon type="check-circle" />
+ </InputItem>
+ <div className="other-setting">
+ <CheckboxItem checked={rember} onChange={this.onChange}>
+ <span onClick={this.onChange}>璁颁綇瀵嗙爜</span>
+ </CheckboxItem>
+ {/* <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss">
+ <List.Item>{lang}</List.Item>
+ </Picker> */}
+ <List.Item className="lang">涓枃绠�浣�</List.Item>
+ <div className="clear-both"></div>
+ </div>
+ <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>
+ </div>
+ {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})}/>
+ {card.copyright.content}
+ </div> : null}
+ </div>
+ )
+ }
+}
+
+export default createForm()(MobLogin)
\ No newline at end of file
diff --git a/src/mob/login/index.scss b/src/mob/components/login/mob-login-1/index.scss
similarity index 90%
rename from src/mob/login/index.scss
rename to src/mob/components/login/mob-login-1/index.scss
index 89b6cdd..1648d5e 100644
--- a/src/mob/login/index.scss
+++ b/src/mob/components/login/mob-login-1/index.scss
@@ -1,13 +1,17 @@
-.mob-login {
+.mob-login-1 {
position: relative;
width: 100%;
- height: 100%;
- overflow: hidden;
- // background-image: linear-gradient(#378DBE, #46C29E, #48A9D6);
+ min-height: 100%;
+ overflow-x: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
+ .mob-login-body {
+ min-height: calc((80 / 100) * 615px);
+ border-top: 1px solid transparent;
+ margin-bottom: 20px;
+ }
.logo {
position: relative;
@@ -19,6 +23,7 @@
text-align: center;
line-height: 1.5;
border: 1px dotted transparent;
+ margin-top: calc((17 / 100) * 615px);
img {
max-width: 100%;
}
@@ -52,10 +57,6 @@
}
.plat-name:not(.editing):hover {
border-color: #535353;
- }
-
- .plat-name + .mk-login-item.am-list-item, .logo + .mk-login-item.am-list-item {
- margin-top: 30px;
}
.mk-login-item.am-list-item {
@@ -145,13 +146,12 @@
}
}
}
- >.am-button {
+ .am-button {
position: relative;
z-index: 1;
width: 245px;
max-width: 270px;
margin: 0 auto;
- border-radius: 30px;
border: 1px dotted transparent;
overflow: visible;
letter-spacing: 0px;
@@ -164,17 +164,14 @@
font-weight: inherit;
}
}
- >.am-button:hover {
+ .am-button:hover {
color: #fff;
border-color: #535353;
}
.company-msg {
- position: absolute;
width: 88%;
min-height: 10px;
- bottom: 20px;
- bottom: 20px;
- left: 6%;
+ margin-left: 6%;
font-size: 12px;
color: #fafafa;
text-align: center;
diff --git a/src/mob/components/login/mob-login-2/index.jsx b/src/mob/components/login/mob-login-2/index.jsx
new file mode 100644
index 0000000..d9a4653
--- /dev/null
+++ b/src/mob/components/login/mob-login-2/index.jsx
@@ -0,0 +1,207 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { InputItem, Button } from 'antd-mobile'
+
+import zhCN from '@/locales/zh-CN/mob.js'
+import enUS from '@/locales/en-US/mob.js'
+import Utils from '@/utils/utils.js'
+import ContentUpdate from '@/mob/contupdate'
+import './index.scss'
+
+class MobLogin2 extends Component {
+ static propTpyes = {
+ card: PropTypes.object,
+ editId: PropTypes.any,
+ triggerEdit: PropTypes.func,
+ updateConfig: PropTypes.func,
+ onDoubleClick: PropTypes.func
+ }
+
+ state = {
+ dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ view: 'account',
+ param: {
+ type: 'login',
+ subtype: 'mob-login-2',
+ box: { uuid: Utils.getuuid(), eleType: 'box', style: {}},
+ title: { uuid: Utils.getuuid(), eleType: 'text', content: '鐧诲綍', style: {fontSize: '18px', fontWeight: 'bold', color: '#000000', textAlign: 'center', marginTop: '10vh', marginBottom: '10vh'}},
+ user: { uuid: Utils.getuuid(), eleType: 'input', content: '閭/鎵嬫満', style: {}},
+ password: { uuid: Utils.getuuid(), eleType: 'input', content: '瀵嗙爜', style: {}},
+ login: { uuid: Utils.getuuid(), eleType: 'button', content: '鐧诲綍', style: {fontSize: '16px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, backgroundColor: '#44a8f2'}},
+ phone: { uuid: Utils.getuuid(), eleType: 'button', content: '鎵嬫満鐭俊鐧诲綍/娉ㄥ唽', style: {fontSize: '16px', color: '#44a8f2', textAlign: 'center', lineHeight: 2.4, border: '1px solid #44a8f2'}},
+ lose: { uuid: Utils.getuuid(), eleType: 'text', content: '蹇樿瀵嗙爜锛�', style: {fontSize: '12px', color: '#44a8f2', textAlign: 'right', textDecoration: 'underline'}},
+ register: { uuid: Utils.getuuid(), eleType: 'text', content: '娉ㄥ唽鏄庣璐﹀彿', style: {fontSize: '16px', color: '#44a8f2', textAlign: 'center', marginTop: '20px', marginBottom: '30px'}},
+ copyright: { uuid: Utils.getuuid(), eleType: 'textarea', content: 'Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�', style: {fontSize: '12px', textAlign: 'center'} }
+ }
+ }
+
+ UNSAFE_componentWillMount () {
+ const { card } = this.props
+ const { param } = this.state
+
+ if (!card.box) {
+ this.props.updateConfig({...param, ...card})
+ }
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ editTitle = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.title.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.title.uuid,
+ items: ['font', 'margin'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editPlaceholder = (e, type) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ componentId: card.uuid,
+ uuid: card[type].uuid,
+ items: [''],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editMsg = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.copyright.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.copyright.uuid,
+ items: ['font'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editLogin = (e, type) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card[type].style).toJS(),
+ componentId: card.uuid,
+ uuid: card[type].uuid,
+ items: ['font', 'background', 'border']
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editLose = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.lose.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.lose.uuid,
+ items: ['font'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editRegister = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.register.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.register.uuid,
+ items: ['font', 'margin'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ editBox = (e) => {
+ const { card } = this.props
+ e.stopPropagation()
+ let element = {
+ ...fromJS(card.box.style).toJS(),
+ componentId: card.uuid,
+ uuid: card.box.uuid,
+ items: ['font', 'padding', 'background'],
+ }
+ this.props.triggerEdit(element)
+ }
+
+ updateContent = (card) => {
+ this.props.updateConfig(card)
+ }
+
+ render () {
+ const { card, editId } = this.props
+ const { view } = this.state
+
+ if (!card.box) return null
+
+ let titleStyle = card.title && card.title.style ? fromJS(card.title.style).toJS() : null
+ if (titleStyle && titleStyle.marginTop && /vh$/ig.test(titleStyle.marginTop)) {
+ let percent = parseInt(titleStyle.marginTop)
+ titleStyle.marginTop = `calc(${(percent / 100) * 615}px)`
+ }
+ if (titleStyle && titleStyle.marginBottom && /vh$/ig.test(titleStyle.marginBottom)) {
+ let percent = parseInt(titleStyle.marginBottom)
+ titleStyle.marginBottom = `calc(${(percent / 100) * 615}px)`
+ }
+
+ if (view === 'account') return (
+ <div className="mob-login-2" onClick={this.editBox} style={card.box.style}>
+ <div className="mob-login-body">
+ {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}
+
+ <div className={`mk-login-input ${editId === card.user.uuid ? 'editing' : ''}`} onClick={(e) => this.editPlaceholder(e, 'user')}>
+ <ContentUpdate element={card.user} deletable={false} updateContent={(ele) => this.updateContent({...card, user: ele})}/>
+ <InputItem placeholder={card.user.content}></InputItem>
+ </div>
+ <div className={`mk-login-input ${editId === card.password.uuid ? 'editing' : ''}`} onClick={(e) => this.editPlaceholder(e, 'password')}>
+ <ContentUpdate element={card.password} deletable={false} updateContent={(ele) => this.updateContent({...card, password: ele})}/>
+ <InputItem placeholder={card.password.content}></InputItem>
+ </div>
+ <Button
+ className={'login ' + (editId === card.login.uuid ? 'editing' : '')}
+ onDoubleClick={() => this.props.doubleClickCard(card.login)}
+ style={card.login.style}
+ onClick={(e) => this.editLogin(e, 'login')}
+ >
+ <ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
+ {card.login.content}
+ </Button>
+ <Button
+ className={'login ' + (editId === card.phone.uuid ? 'editing' : '')}
+ onDoubleClick={() => this.props.doubleClickCard(card.phone)}
+ style={card.phone.style}
+ onClick={(e) => this.editLogin(e, 'phone')}
+ >
+ <ContentUpdate element={card.phone} deletable={false} updateContent={(ele) => this.updateContent({...card, phone: ele})}/>
+ {card.phone.content}
+ </Button>
+ {card.lose ? <div className={'plat-name ' + (editId === card.lose.uuid ? 'editing' : '')} style={card.lose.style} onClick={this.editLose}>
+ <ContentUpdate element={card.lose} updateContent={(ele) => this.updateContent({...card, lose: ele})}/>
+ {card.lose.content}
+ </div> : null}
+ {card.register ? <div className={'plat-name ' + (editId === card.register.uuid ? 'editing' : '')} style={card.register.style} onClick={this.editRegister}>
+ <ContentUpdate element={card.register} updateContent={(ele) => this.updateContent({...card, register: ele})}/>
+ {card.register.content}
+ </div> : null}
+ </div>
+ {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})}/>
+ {card.copyright.content}
+ </div> : null}
+ </div>
+ )
+ }
+}
+
+export default MobLogin2
\ No newline at end of file
diff --git a/src/mob/components/login/mob-login-2/index.scss b/src/mob/components/login/mob-login-2/index.scss
new file mode 100644
index 0000000..a833946
--- /dev/null
+++ b/src/mob/components/login/mob-login-2/index.scss
@@ -0,0 +1,132 @@
+.mob-login-2 {
+ position: relative;
+ width: 100%;
+ min-height: 100%;
+ overflow-x: hidden;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+
+ .mob-login-body {
+ min-height: calc((80 / 100) * 615px);
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ margin-bottom: 10px;
+ }
+
+ .plat-name {
+ position: relative;
+ max-width: 280px;
+ min-height: 10px;
+ margin: 0 auto;
+ text-align: center;
+ line-height: 1.5;
+ font-size: 18px;
+ color: #ffffff;
+ border: 1px dotted transparent;
+ }
+ .plat-name.editing {
+ border: 1px solid #1890ff;
+ box-shadow: 0px 0px 2px #1890ff;
+ }
+ .plat-name:not(.editing):hover {
+ border-color: #535353;
+ }
+
+ .am-list-item {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ font-size: 14px;
+ height: 38px;
+ min-height: 38px;
+ line-height: 1.5;
+ margin-bottom: 10px;
+ border: 1px solid #dddddd;
+
+ .am-input-label {
+ width: 30px;
+ color: inherit;
+ padding-top: 10px;
+ }
+ input {
+ font-size: 14px;
+ color: inherit;
+ }
+ input::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.5;
+ }
+ input:-moz-placeholder {
+ color: inherit;
+ opacity: 0.5;
+ }
+ input::-moz-placeholder {
+ color: inherit;
+ opacity: 0.5;
+ }
+ input:-ms-input-placeholder {
+ color: inherit;
+ opacity: 0.5;
+ }
+ }
+ .am-list-item:not(:last-child) .am-list-line {
+ border: none;
+ }
+
+ .mk-login-input {
+ width: 280px;
+ position: relative;
+ margin: 0 auto;
+ }
+
+ .am-button {
+ position: relative;
+ z-index: 1;
+ width: 280px;
+ margin: 0 auto 10px;
+ border: 1px dotted transparent;
+ overflow: visible;
+ letter-spacing: 0px;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+ border-radius: 0;
+
+ span {
+ font-style: inherit;
+ font-weight: inherit;
+ }
+ }
+ .am-button:hover {
+ color: unset;
+ border-color: #535353;
+ }
+ .company-msg {
+ width: 88%;
+ min-height: 10px;
+ margin-left: 6%;
+ font-size: 12px;
+ text-align: center;
+ line-height: 1.5;
+ letter-spacing: 0px;
+ border: 1px dotted transparent;
+ }
+ .company-msg.editing {
+ border: 1px solid #1890ff;
+ box-shadow: 0px 0px 2px #1890ff;
+ }
+ .company-msg:not(.editing):hover {
+ border-color: #535353;
+ }
+}
+.am-picker-popup-wrap {
+ left: calc(50vw - 305px);
+ right: calc(50vw - 45px);
+ bottom: 54px;
+ overflow: hidden;
+}
+.clear-both {
+ float: none!important;
+ clear: both;
+}
\ No newline at end of file
diff --git a/src/mob/controller/index.jsx b/src/mob/controller/index.jsx
index c6f5e17..6e822f7 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, Radio } from 'antd'
+import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Popover, Menu } from 'antd'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -23,7 +23,11 @@
card: null,
fontColor: '#000000',
backgroundColor: '#ffffff',
- bgimages: []
+ bgimages: [],
+ marginTop: '',
+ marginTopVal: '',
+ marginBottom: '',
+ marginBottomVal: '',
}
UNSAFE_componentWillReceiveProps (nextProps) {
@@ -48,6 +52,10 @@
fontColor: _card.color || '#000000',
backgroundColor: _card.backgroundColor || '#ffffff',
backgroundImage: bgImg,
+ marginTop: _card.marginTop ? _card.marginTop : '',
+ marginTopVal: _card.marginTop ? parseInt(_card.marginTop) : '',
+ marginBottom: _card.marginBottom ? _card.marginBottom : '',
+ marginBottomVal: _card.marginBottomVal ? parseInt(_card.marginBottomVal) : ''
})
})
}
@@ -205,8 +213,71 @@
this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {backgroundImage: val}})
}
+ submitBorder = (val, type) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {[type]: val}})
+ }
+
+ changeBorderRadius = (val) => {
+ const { card } = this.state
+ let value = parseFloat(val)
+
+ if (isNaN(value) || value < 0 || value > 500) return
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {borderRadius: `${value}px`}})
+ }
+
+ changeMarginTop = (e) => {
+ let val = e.target.value
+ let _val = parseInt(val)
+
+ this.setState({
+ marginTop: val
+ })
+
+ if (isNaN(_val)) return
+
+ this.setState({
+ marginTopVal: _val
+ })
+ }
+
+ submitMarginTop = (val) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {marginTop: val}})
+ this.setState({
+ marginTop: val
+ })
+ }
+
+ changeMarginBottom = (e) => {
+ let val = e.target.value
+ let _val = parseInt(val)
+
+ this.setState({
+ marginBottom: val
+ })
+
+ if (isNaN(_val)) return
+
+ this.setState({
+ marginBottomVal: _val
+ })
+ }
+
+ submitMarginBottom = (val) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {marginBottom: val}})
+ this.setState({
+ marginBottom: val
+ })
+ }
+
render () {
- const { card, fontColor, backgroundColor, backgroundImage, bgimages } = this.state
+ const { card, fontColor, backgroundColor, backgroundImage, bgimages, marginTop, marginTopVal, marginBottom, marginBottomVal } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -331,15 +402,95 @@
</Col>
</Panel> : null}
{card.items.includes('border') ? <Panel header="杈规" key="border">
- <Col span={12}>
- <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}>
- <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="澶栬竟妗�" type="border-outer" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input placeholder="" defaultValue={card.border || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'border')} onPressEnter={(e) => this.submitBorder(e.target.value, 'border')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="宸﹁竟妗�" type="border-left" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input placeholder="" defaultValue={card.borderLeft || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderLeft')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderLeft')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鍙宠竟妗�" type="border-right" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input placeholder="" defaultValue={card.borderRight || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderRight')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderRight')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓婅竟妗�" type="border-top" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input placeholder="" defaultValue={card.borderTop || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderTop')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderTop')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓嬭竟妗�" type="border-bottom" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input placeholder="" defaultValue={card.borderBottom || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderBottom')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderBottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鍦嗚" type="radius-setting" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <InputNumber defaultValue={card.borderRadius || 0} min={0} max={500} precision={0} onChange={this.changeBorderRadius}/>
</Form.Item>
</Col>
</Panel> : null}
- <Panel header="鍏朵粬" key="3">
- 鍏朵粬
- </Panel>
+ {card.items.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓婅竟璺�" type="vertical-align-top"/>}
+ >
+ <Popover placement="bottom" overlayClassName="margin-popover" content={
+ marginTopVal !== '' ?
+ <Menu>
+ <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}px`)}>{marginTopVal} px</Menu.Item>
+ <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}vh`)}>{marginTopVal} vh</Menu.Item>
+ </Menu> : null
+ } trigger="hover">
+ <Input value={marginTop} onChange={this.changeMarginTop}/>
+ </Popover>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓嬭竟璺�" type="vertical-align-bottom"/>}
+ >
+ <Popover placement="bottom" overlayClassName="margin-popover" content={
+ marginBottomVal !== '' ?
+ <Menu>
+ <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}px`)}>{marginBottomVal} px</Menu.Item>
+ <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}vh`)}>{marginBottomVal} vh</Menu.Item>
+ </Menu> : null
+ } trigger="hover">
+ <Input value={marginBottom} onChange={this.changeMarginBottom}/>
+ </Popover>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
</Collapse> : null}
</Form>
</div>
diff --git a/src/mob/controller/index.scss b/src/mob/controller/index.scss
index 6b87772..6acbf69 100644
--- a/src/mob/controller/index.scss
+++ b/src/mob/controller/index.scss
@@ -17,7 +17,9 @@
color: rgba(255, 255, 255, 0.85);
background-color: #202735;
border-top: 1px solid #202735;
-
+ .ant-input-number {
+ width: 100%;
+ }
.ant-form-item {
margin-bottom: 5px;
@@ -114,4 +116,32 @@
}
}
}
+}
+
+.margin-popover {
+ padding-top: 0px;
+ .ant-popover-inner-content {
+ width: 90px;
+ padding: 0px 5px;
+ .ant-menu-root.ant-menu-vertical {
+ border: 0;
+ .ant-menu-item {
+ height: 30px;
+ cursor: pointer;
+ line-height: 30px;
+ }
+ .ant-menu-item:not(:last-child) {
+ margin-bottom: 0px;
+ }
+ .ant-menu-item:first-child {
+ margin-top: 10px;
+ }
+ .ant-menu-item:last-child {
+ margin-bottom: 10px;
+ }
+ }
+ }
+ .ant-popover-arrow {
+ display: none;
+ }
}
\ No newline at end of file
diff --git a/src/mob/contupdate/index.scss b/src/mob/contupdate/index.scss
index 465e2a5..7e15ba9 100644
--- a/src/mob/contupdate/index.scss
+++ b/src/mob/contupdate/index.scss
@@ -7,6 +7,7 @@
font-size: 14px;
display: none;
line-height: 1.5;
+ z-index: 1;
i {
padding: 2px 5px;
diff --git a/src/mob/header/index.scss b/src/mob/header/index.scss
index f6a1e0e..a71158f 100644
--- a/src/mob/header/index.scss
+++ b/src/mob/header/index.scss
@@ -1,7 +1,11 @@
.mob-header-container {
width: 100%;
height: 48px;
+ padding-right: 320px;
color: rgba(255, 255, 255, 0.65);
+ position: fixed;
+ top: 0px;
+ z-index: 10;
background: #001529;
border-bottom: 1px solid #000;
diff --git a/src/mob/login/index.jsx b/src/mob/login/index.jsx
deleted file mode 100644
index 152a2d9..0000000
--- a/src/mob/login/index.jsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import { is, fromJS } from 'immutable'
-import { InputItem, Icon, Checkbox, List, Button } from 'antd-mobile'
-import { createForm } from 'rc-form'
-
-import zhCN from '@/locales/zh-CN/mob.js'
-import enUS from '@/locales/en-US/mob.js'
-import ContentUpdate from '@/mob/contupdate'
-import './index.scss'
-
-const CheckboxItem = Checkbox.CheckboxItem
-// const PlaceHolder = ({ active = false, children}) => (
-// <div>{active ? <div></div> : null}{children}</div>
-// )
-
-class MobLogin extends Component {
- static propTpyes = {
- card: PropTypes.object,
- editId: PropTypes.any,
- triggerEdit: PropTypes.func,
- updateConfig: PropTypes.func,
- onDoubleClick: PropTypes.func
- }
-
- state = {
- dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- rember: true,
- param: {
- background: {color: '#000000', image: ''},
- logo: {width: ''}
- }
- }
-
- UNSAFE_componentWillMount () {
-
- }
-
- shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
- }
-
- onChange = (e) => {
- const { rember } = this.state
- e.stopPropagation()
-
- this.setState({
- rember: !rember
- })
- }
-
- onChangeLang = (value) => {
- this.setState({
- lang: value
- })
- }
-
- editLogo = (e) => {
- const { card } = this.props
- e.stopPropagation()
- let element = {
- ...fromJS(card.logo.style).toJS(),
- componentId: card.uuid,
- uuid: card.logo.uuid,
- items: []
- }
- this.props.triggerEdit(element)
- }
-
- editTitle = (e) => {
- const { card } = this.props
- e.stopPropagation()
- let element = {
- ...fromJS(card.title.style).toJS(),
- componentId: card.uuid,
- uuid: card.title.uuid,
- items: ['font'],
- }
- this.props.triggerEdit(element)
- }
-
- editMsg = (e) => {
- const { card } = this.props
- e.stopPropagation()
- let element = {
- ...fromJS(card.copyright.style).toJS(),
- componentId: card.uuid,
- uuid: card.copyright.uuid,
- items: ['font'],
- }
- 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)
- }
-
- editBox = (e) => {
- const { card } = this.props
- e.stopPropagation()
- let element = {
- ...fromJS(card.box.style).toJS(),
- componentId: card.uuid,
- uuid: card.box.uuid,
- items: ['font', 'padding', 'background'],
- }
- this.props.triggerEdit(element)
- }
-
- updateContent = (card) => {
- this.props.updateConfig(card)
- }
-
- render () {
- const { card, editId } = this.props
- const { getFieldProps } = this.props.form
- const { rember } = this.state
-
- return (
- <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' : '')} style={card.title.style} onClick={this.editTitle}>
- <ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
- {card.title.content}
- </div> : null}
- <InputItem
- placeholder="UserName"
- prefixListCls="mk-login-item am-list"
- {...getFieldProps('userName', {
- initialValue: 'admin',
- })}
- disabled={true}
- >
- <Icon type="check-circle-o" />
- </InputItem>
- <InputItem
- placeholder="Password"
- prefixListCls="mk-login-item am-list"
- {...getFieldProps('password', {
- initialValue: '123456',
- })}
- type={'password'}
- disabled={true}
- >
- <Icon type="check-circle" />
- </InputItem>
- <div className="other-setting">
- <CheckboxItem checked={rember} onChange={this.onChange}>
- <span onClick={this.onChange}>璁颁綇瀵嗙爜</span>
- </CheckboxItem>
- {/* <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss">
- <List.Item>{lang}</List.Item>
- </Picker> */}
- <List.Item className="lang">涓枃绠�浣�</List.Item>
- <div className="clear-both"></div>
- </div>
- <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})}/>
- {card.copyright.content}
- </div> : null}
- </div>
- )
- }
-}
-
-export default createForm()(MobLogin)
\ No newline at end of file
diff --git a/src/mob/mobshell/card.jsx b/src/mob/mobshell/card.jsx
index 2cf4204..4c243e9 100644
--- a/src/mob/mobshell/card.jsx
+++ b/src/mob/mobshell/card.jsx
@@ -7,7 +7,8 @@
import './index.scss'
// const Home = asyncComponent(() => import('@/mob/home'))
-const Login = asyncComponent(() => import('@/mob/login'))
+const MobLogin1 = asyncComponent(() => import('@/mob/components/login/mob-login-1'))
+const MobLogin2 = asyncComponent(() => import('@/mob/components/login/mob-login-2'))
const Card = ({ id, card, moveCard, findCard, editId, editCard, delCard, hasDrop, doubleClickCard, updateConfig }) => {
const originalIndex = findCard(id).index
@@ -45,7 +46,9 @@
const getCardComponent = () => {
if (card.type === 'login') {
if (card.subtype === 'mob-login-1') {
- return (<Login card={card} triggerEdit={editCard} editId={editId} onDoubleClick={doubleClickCard} updateConfig={updateConfig} />)
+ return (<MobLogin1 card={card} triggerEdit={editCard} editId={editId} onDoubleClick={doubleClickCard} updateConfig={updateConfig} />)
+ } else if (card.subtype === 'mob-login-2') {
+ return (<MobLogin2 card={card} triggerEdit={editCard} editId={editId} onDoubleClick={doubleClickCard} updateConfig={updateConfig} />)
}
}
}
diff --git a/src/mob/mobshell/index.jsx b/src/mob/mobshell/index.jsx
index 12010de..f293e7b 100644
--- a/src/mob/mobshell/index.jsx
+++ b/src/mob/mobshell/index.jsx
@@ -50,13 +50,11 @@
return
}
- let newcard = fromJS(item.param).toJS()
- Object.keys(newcard).forEach(key => {
- if (newcard[key].editable) {
- newcard[key].uuid = Utils.getuuid()
- }
- })
- newcard.uuid = Utils.getuuid()
+ let newcard = {
+ uuid: Utils.getuuid(),
+ type: item.componentType,
+ subtype: item.subtype,
+ }
let targetId = cards.length > 0 ? cards[cards.length - 1].uuid : 0
if (target) {
diff --git a/src/mob/mobshell/index.scss b/src/mob/mobshell/index.scss
index 09697c5..58629e7 100644
--- a/src/mob/mobshell/index.scss
+++ b/src/mob/mobshell/index.scss
@@ -5,7 +5,7 @@
position: absolute;
right: 2px;
top: 50%;
- background: #2f54eb;
+ background: #ff4d4f;
border-radius: 2px;
padding: 4px;
color: #ffffff;
diff --git a/src/mob/modelsource/dragsource/index.scss b/src/mob/modelsource/dragsource/index.scss
index 3b86b2a..9884d46 100644
--- a/src/mob/modelsource/dragsource/index.scss
+++ b/src/mob/modelsource/dragsource/index.scss
@@ -4,10 +4,10 @@
margin-right: 15px;
cursor: move;
height: 130px;
- box-shadow: 0px 0px 3px #dddddd;
+ box-shadow: 0px 0px 3px #cdcdcd;
- background-size: contain;
- background-position: center center;
+ background-size: cover;
+ background-position: top center;
background-repeat: no-repeat;
.tooltip-block {
diff --git a/src/mob/modelsource/index.jsx b/src/mob/modelsource/index.jsx
index b85bea0..9adfe9c 100644
--- a/src/mob/modelsource/index.jsx
+++ b/src/mob/modelsource/index.jsx
@@ -18,9 +18,11 @@
}
render() {
+ const { appType } = this.props
+
return (
<div className="mob-card-source-box">
- {mobOptions.map((item, index) => (
+ {appType === 'mob' && mobOptions.map((item, index) => (
<div key={index}>
<p>{item.title}</p>
{item.options.map((cell, i) => (<SourceWrap key={i} content={cell} />))}
diff --git a/src/mob/modelsource/option.jsx b/src/mob/modelsource/option.jsx
index 5418f89..0123971 100644
--- a/src/mob/modelsource/option.jsx
+++ b/src/mob/modelsource/option.jsx
@@ -1,7 +1,7 @@
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import mobLogin1 from '@/assets/mobimg/mob-login1.png'
-import mklogo from '@/assets/mobimg/mklogo.png'
+import mobLogin2 from '@/assets/mobimg/mob-login2.png'
const _dict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
@@ -10,16 +10,7 @@
title: _dict['mob.login'],
sourceType: 'login',
options: [
- {
- sourceType: 'mob-login-1', type: 'mob', url: mobLogin1, style: {},
- param: {
- type: 'login', subtype: 'mob-login-1',
- 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'} }
- }
- },
+ { subtype: 'mob-login-1', componentType: 'login', type: 'mob', url: mobLogin1, style: {} },
+ { subtype: 'mob-login-2', componentType: 'login', type: 'mob', url: mobLogin2, style: {} },
]
}]
diff --git a/src/templates/zshare/formconfig.jsx b/src/templates/zshare/formconfig.jsx
index 7680c60..a040eef 100644
--- a/src/templates/zshare/formconfig.jsx
+++ b/src/templates/zshare/formconfig.jsx
@@ -2289,13 +2289,6 @@
options: []
},
{
- type: 'multiselect',
- key: 'linkSubField',
- label: Formdict['model.form.link'],
- initVal: card.linkSubField || [],
- options: inputfields
- },
- {
type: 'select',
key: 'fileType',
label: '鏄剧ず鏂瑰紡',
@@ -2414,6 +2407,13 @@
},
{
type: 'multiselect',
+ key: 'linkSubField',
+ label: Formdict['model.form.linkform'],
+ initVal: card.linkSubField || [],
+ options: inputfields
+ },
+ {
+ type: 'multiselect',
key: 'blacklist',
label: Formdict['header.form.blacklist'],
initVal: card.blacklist || [],
diff --git a/src/views/mobdesign/index.jsx b/src/views/mobdesign/index.jsx
index 5a2f0b8..744fa84 100644
--- a/src/views/mobdesign/index.jsx
+++ b/src/views/mobdesign/index.jsx
@@ -131,8 +131,14 @@
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) {
+ if (component[key].uuid === proper.uuid) {
component[key].style = {...component[key].style, ...proper.style}
+ // eslint-disable-next-line
+ for (let index in component[key].style) {
+ if (component[key].style[index] === '') {
+ delete component[key].style[index]
+ }
+ }
}
})
}
@@ -180,7 +186,6 @@
<div className="mob-setting">
{config ? <Tabs defaultActiveKey="1" animated={false} size="small">
<TabPane tab="閰嶇疆" key="1">
- {/* <SketchPicker /> */}
<Controller editElem={editElem} updateStyle={this.updateStyle} />
</TabPane>
<TabPane tab="鏁版嵁婧�" key="2">
diff --git a/src/views/mobdesign/index.scss b/src/views/mobdesign/index.scss
index b496b3a..7251e22 100644
--- a/src/views/mobdesign/index.scss
+++ b/src/views/mobdesign/index.scss
@@ -1,17 +1,18 @@
.mobile-view {
background: #000;
+ min-height: 100vh;
.mob-body {
width: 100vw;
- height: calc(100vh - 50px);
- overflow: hidden;
+ height: 100vh;
+ overflow-x: hidden;
position: relative;
background: #262626;
- padding: 0px 300px 0px 40px;
+ padding: 50px 300px 0px 40px;
.mob-tool {
- position: absolute;
+ position: fixed;
left: 0;
- top: 0;
+ top: 48px;
height: 100%;
width: 40px;
background: #262626;
@@ -63,9 +64,10 @@
}
.mob-setting {
- position: absolute;
+ position: fixed;
right: 0;
top: 0;
+ z-index: 10;
height: 100%;
width: 300px;
background: #202735;
@@ -75,7 +77,9 @@
>.ant-tabs-bar {
border-bottom: 1px solid #181F29;
margin-bottom: 0px;
+ min-height: 48px;
.ant-tabs-tab {
+ padding: 14px 16px;
color: rgba(255, 255, 255, 0.85);
}
.ant-tabs-tab-active.ant-tabs-tab {
@@ -87,11 +91,11 @@
.mob-shell {
width: 375px;
- height: calc(100vh - 70px);
+ height: 680px;
margin: 0 auto;
background: #ffffff;
background-size: 100% 100%;
- padding: 5vh 13px 6vh;
+ padding: 25px 13px 40px;
border-radius: 30px;
.mob-shell-inner {
@@ -99,10 +103,10 @@
height: 100%;
overflow-y: auto;
overflow-x: hidden;
- box-shadow: 0px 0px 3px #d1d1d5;
+ box-shadow: 0px 0px 2px #000000;
}
.mob-shell-inner::-webkit-scrollbar {
- width: 4px;
+ width: 2px;
}
.mob-shell-inner::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
diff --git a/src/views/mobmanage/index.scss b/src/views/mobmanage/index.scss
index 0dff349..3178be3 100644
--- a/src/views/mobmanage/index.scss
+++ b/src/views/mobmanage/index.scss
@@ -1,4 +1,10 @@
.mobile-manage {
background: #fff;
min-height: 100vh;
+
+ .mob-header-container {
+ padding-right: 0px;
+ position: relative;
+ z-index: 10;
+ }
}
--
Gitblit v1.8.0