ant-design/site/component/Home/index.jsx

87 lines
2.0 KiB
React
Raw Normal View History

2016-02-29 14:08:40 +08:00
import React from 'react';
2016-03-03 17:23:08 +08:00
import Link from './Link';
import Banner from './Banner';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from './Page4';
2016-02-29 14:08:40 +08:00
import './index.less';
2016-03-03 17:23:08 +08:00
2016-03-23 14:15:00 +08:00
import * as utils from '../utils';
2016-03-03 17:23:08 +08:00
export default class Home extends React.Component {
2016-03-23 14:15:00 +08:00
componentDidMount() {
this.componentDidUpdate();
}
componentDidUpdate() {
utils.setTitle('Ant Design - 一个 UI 设计语言');
}
2016-03-03 17:23:08 +08:00
// To store style which is only for Home and has conflicts with others.
getStyle() {
return `
2016-03-23 22:36:26 +08:00
#react-content,
#react-content > div {
2016-03-03 17:23:08 +08:00
height: 100%;
2016-03-23 22:36:26 +08:00
}
.main-wrapper {
2016-03-03 17:23:08 +08:00
background: transparent;
width: auto;
margin: 0;
border-radius: 0;
padding: 0;
overflow: unset;
display: inline;
min-height: 600px;
2016-03-23 22:36:26 +08:00
}
#header {
2016-03-03 17:23:08 +08:00
position: fixed;
z-index: 999;
background: rgba(0, 0, 0, 0.25);
border-bottom: 1px solid transparent;
transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
2016-03-23 22:36:26 +08:00
}
#header .ant-select-selection,
#header .ant-menu {
2016-03-03 17:23:08 +08:00
background: transparent;
2016-03-23 22:36:26 +08:00
}
#nav a {
2016-03-03 17:23:08 +08:00
color: #eee;
transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
2016-03-23 22:36:26 +08:00
}
#search-box {
2016-03-03 17:23:08 +08:00
border-left-color: rgba(235, 237, 238, .5);
transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
2016-03-23 22:36:26 +08:00
}
section {
2016-03-03 17:23:08 +08:00
height: 100%;
width: 100%;
background: #fff;
2016-03-23 22:36:26 +08:00
}
#footer {
2016-03-03 17:23:08 +08:00
background: #000;
2016-03-23 22:36:26 +08:00
}
#footer,
#footer h2 {
2016-03-03 17:23:08 +08:00
color: #999;
2016-03-23 22:36:26 +08:00
}
#footer a {
2016-03-03 17:23:08 +08:00
color: #eee;
2016-03-23 22:36:26 +08:00
}
`;
2016-03-03 17:23:08 +08:00
}
render() {
return (
<div className="main-wrapper">
<Link />
<Banner />
<Page1 />
<Page2 />
<Page3 />
<Page4 />
<style dangerouslySetInnerHTML={{ __html: this.getStyle() }} />
</div>
);
}
2016-02-29 14:08:40 +08:00
}