2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

 src/pc/bgcontroller/index.jsx

@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Icon, Select } from 'antd'
import { Form, Select } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

@@ -20,12 +19,11 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    backgroundColor: '',
    backgroundImage: '',
    backgroundSize: '',
    backgroundRepeat: '',
    backgroundPositon: '',
    backgroundPosition: '',
    opacity: '',
  }

@@ -44,7 +42,7 @@
      backgroundImage: bgImg,
      backgroundSize: config.style.backgroundSize || '100%',
      backgroundRepeat: config.style.backgroundRepeat || 'repeat',
      backgroundPositon: config.style.backgroundPositon || 'center'
      backgroundPosition: config.style.backgroundPosition || 'center'
    })
  }

@@ -116,18 +114,18 @@

  backgroundPositonChange = (val) => {
    this.setState({
      backgroundPositon: val
      backgroundPosition: val
    })

    let config = fromJS(this.props.config).toJS()
    config.style.backgroundPositon = val
    config.style.backgroundPosition = val

    this.props.updateConfig(config)
  }

  render () {
    const { config } = this.props
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPositon } = this.state
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -145,6 +143,7 @@
          <Form.Item
            colon={false}
            label="宽度"
            className="normal-view"
          >
            <StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/>
          </Form.Item>
@@ -172,59 +171,67 @@
            </Select>
          </Form.Item>
          <Form.Item colon={false} label="位置">
            <Select defaultValue={backgroundPositon} onChange={this.backgroundPositonChange}>
            <Select defaultValue={backgroundPosition} onChange={this.backgroundPositonChange}>
              <Option value="center">center</Option>
              <Option value="top">top</Option>
              <Option value="bottom">bottom</Option>
            </Select>
          </Form.Item>
          <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
          <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
          <Form.Item
            colon={false}
            label={<Icon title="上边距" type="arrow-up"/>}
            className="normal-view"
            label={<ArrowUpOutlined title="上边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="下边距" type="arrow-down"/>}
            className="normal-view"
            label={<ArrowDownOutlined title="下边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="左边距" type="arrow-left"/>}
            className="normal-view"
            label={<ArrowLeftOutlined title="左边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="右边距" type="arrow-right"/>}
            className="normal-view"
            label={<ArrowRightOutlined title="右边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/>
          </Form.Item>
          <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>外边距</p>
          <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>外边距</p>
          <Form.Item
            colon={false}
            label={<Icon title="上边距" type="arrow-up"/>}
            className="normal-view"
            label={<ArrowUpOutlined title="上边距"/>}
          >
            <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="下边距" type="arrow-down"/>}
            className="normal-view"
            label={<ArrowDownOutlined title="下边距"/>}
          >
            <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="左边距" type="arrow-left"/>}
            className="normal-view"
            label={<ArrowLeftOutlined title="左边距"/>}
          >
            <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="右边距" type="arrow-right"/>}
            className="normal-view"
            label={<ArrowRightOutlined title="右边距"/>}
          >
            <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
          </Form.Item>