2020-07-13

king

2020-07-13 269f0759a64927c2ea06a9d7de92ecfd0be7df5b

2020-07-13

 src/assets/mobimg/mob-login2.png

 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)',

 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': '日期（周）',

 src/mob/components/login/mob-login-1/index.jsx

New file
@@ -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)

 src/mob/components/login/mob-login-1/index.scss

File was renamed from src/mob/login/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;

 src/mob/components/login/mob-login-2/index.jsx

New file
@@ -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

 src/mob/components/login/mob-login-2/index.scss

New file
@@ -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;
}

 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>

 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;
  }
}

 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;

 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;

 src/mob/login/index.jsx

File was deleted

 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} />)
      }
    }
  }

 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) {

 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;

 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 {

 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} />))}

 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: {} },
  ]
}]

 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 || [],

 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">

 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);

 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;
  }
}