ant-design/site/theme/template/Home/index.jsx

82 lines
2.0 KiB
React
Raw Normal View History

2016-02-29 14:08:40 +08:00
import React from 'react';
import { injectIntl } from 'react-intl';
import DocumentTitle from 'react-document-title';
2018-01-04 20:00:38 +08:00
import PropTypes from 'prop-types';
2016-03-03 17:23:08 +08:00
import Banner from './Banner';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
// To store style which is only for Home and has conflicts with others.
function getStyle() {
return `
.main-wrapper {
padding: 0;
}
2017-12-01 20:27:44 +08:00
#header {
box-shadow: none;
max-width: 1200px;
2017-12-01 20:27:44 +08:00
width: 100%;
margin: 20px auto 0;
padding: 0 24px;
2017-12-01 20:27:44 +08:00
}
#header,
#header .ant-select-selection,
#header .ant-menu {
background: transparent;
}
#header #logo {
padding: 0;
}
2018-01-08 12:16:59 +08:00
#header .ant-row > div:last-child .ant-menu,
#header .nav-phone-icon {
display: none;
}
2018-01-08 12:16:59 +08:00
#header .ant-row > div:last-child .header-lang-button {
margin-right: 0;
}
2018-03-26 15:31:11 +08:00
footer .footer-wrap {
width: 100%;
padding: 0;
}
2018-03-26 15:31:11 +08:00
footer .footer-wrap .ant-row {
width: 100%;
max-width: 1200px;
padding: 86px 24px 93px 24px;
margin: auto;
}
@media only screen and (max-width: 767.99px) {
#footer .footer-wrap{
padding: 40px 24px
}
footer .footer-wrap .ant-row {
padding: 0;
}
}
`;
}
2016-03-23 14:15:00 +08:00
2018-01-12 21:05:48 +08:00
/* eslint-disable react/prefer-stateless-function */
2017-12-18 17:58:45 +08:00
class Home extends React.Component {
2018-01-04 20:00:38 +08:00
static contextTypes = {
2018-01-05 14:07:10 +08:00
intl: PropTypes.object.isRequired,
2018-01-05 17:23:59 +08:00
isMobile: PropTypes.bool.isRequired,
2018-01-04 20:00:38 +08:00
}
2017-12-18 17:58:45 +08:00
render() {
2018-01-05 17:23:59 +08:00
const { isMobile, intl } = this.context;
const childProps = { ...this.props, isMobile, locale: intl.locale };
2017-12-18 17:58:45 +08:00
return (
<DocumentTitle title={`Ant Design - ${this.props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
<div className="main-wrapper">
2018-01-04 20:00:38 +08:00
<Banner {...childProps} />
<Page1 {...childProps} />
<Page2 {...childProps} />
<Page3 {...childProps} />
2017-12-18 17:58:45 +08:00
<style dangerouslySetInnerHTML={{ __html: getStyle() }} />
</div>
</DocumentTitle>
);
}
2016-02-29 14:08:40 +08:00
}
export default injectIntl(Home);