import React, { Component } from 'react';
import './LeftContentDisplay.scss';

export default class LeftContentDisplay extends Component {
  static displayName = 'LeftContentDisplay';

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="left-content-display" style={styles.container}>
        <div style={styles.content}>
          <div style={styles.col}>
            <h2 style={styles.title}>天下武功 唯快不破</h2>
            <p style={styles.description}>
              ICE 提供了全链路一站式的解决方案，面对中后台业务需求，快上加快。
            </p>
          </div>
          <div style={styles.col}>
            <img
              src="https://img.alicdn.com/tps/TB1rozhNpXXXXX5XXXXXXXXXXXX-575-509.png"
              alt="img"
              style={styles.image}
            />
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    margin: '0 auto',
    width: '1080px',
  },
  content: {
    display: 'flex',
    position: 'relative',
    alignItems: 'center',
    overflow: 'hidden',
    height: '600px',
  },
  col: {
    width: '50%',
  },
  title: {
    fontSize: '28px',
    fontWeight: 'bold',
  },
  description: {
    color: '#666',
    marginTop: '20px',
    lineHeight: '22px',
  },
  image: {
    position: 'absolute',
    top: '120px',
    width: '40%',
  },
};