import React from 'react';

const BG = 'https://gw.alicdn.com/tfs/TB1xEgol8fH8KJjy1XbXXbLdXXa-500-826.png';

export default (props) => {
  return (
    <div>
      <div style={styles.image} />
      <div style={styles.container}>
        <h1 style={styles.title}>企业级中后台解决方案</h1>
        <h2 style={styles.subTitle}>更优，更快，更 Cool !</h2>
        <p style={styles.desc}>请使用 PC 端打开</p>
      </div>
    </div>
  );
};

const styles = {
  container: {
    position: 'relative',
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: '58px',
    marginBottom: '65px',
  },
  subTitle: {
    color: '#fff',
    fontSize: '38px',
    marginBottom: '45px',
  },
  desc: {
    position: 'absolute',
    bottom: 0,
    color: '#fff',
  },
  image: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    backgroundImage: `url(${BG})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
};