mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-12 04:13:13 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Home fix (#3807)

Browse Source 
* fix home

* update Banner min height
This commit is contained in:
jiang 2016-11-11 17:56:05 +08:00 committed by 偏右
parent f206cc4c90
commit f703e00c0f
8 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -56,7 +56,6 @@
"rc-notification": "~1.3.4", "rc-notification": "~1.3.4",
"rc-pagination": "~1.5.3", "rc-pagination": "~1.5.3",
"rc-progress": "~2.0.1", "rc-progress": "~2.0.1",
"rc-queue-anim": "~0.12.4",
"rc-radio": "~2.0.0", "rc-radio": "~2.0.0",
"rc-rate": "~1.1.2", "rc-rate": "~1.1.2",
"rc-select": "~6.6.1", "rc-select": "~6.6.1",
@ -112,8 +111,9 @@
"moment-timezone": "^0.5.5", "moment-timezone": "^0.5.5",
"pre-commit": "1.x", "pre-commit": "1.x",
"querystring": "^0.2.0", "querystring": "^0.2.0",
"rc-scroll-anim": "~0.3.0", "rc-scroll-anim": "~0.5.0",
"rc-tween-one": "~0.6.20", "rc-tween-one": "~0.11.0",
"rc-queue-anim": "~0.12.4",
"react": "^15.0.0", "react": "^15.0.0",
"react-addons-test-utils": "^15.0.0", "react-addons-test-utils": "^15.0.0",
"react-copy-to-clipboard": "^4.0.1", "react-copy-to-clipboard": "^4.0.1",

2
site/theme/static/home.less
View File

@ -25,6 +25,7 @@
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover; background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover;
} }
.banner-text-wrapper { .banner-text-wrapper {
@ -111,6 +112,7 @@
.content-wrapper { .content-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 1500px;
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;

8
site/theme/template/Home/Banner.jsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
import GitHubButton from 'react-github-button'; import GitHubButton from 'react-github-button';
import 'react-github-button/assets/style.css'; import 'react-github-button/assets/style.css';
import { Icon } from 'antd'; import { Icon } from 'antd';
@ -19,8 +19,8 @@ function typeFunc(a) {
export default function Banner({ location, onEnterChange }) { export default function Banner({ location, onEnterChange }) {
const query = location.query; const query = location.query;
return ( return (
<section id="banner"> <section id="banner" className="page">
<ScrollOverPack scrollName="banner" className="page" onChange={({ mode }) => onEnterChange(mode)} replay> <ScrollElement id="banner" onChange={({ mode }) => onEnterChange(mode)}>
<QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300} key="banner"> <QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300} key="banner">
<h2 key="h2">ANT <p>DESIGN</p></h2> <h2 key="h2">ANT <p>DESIGN</p></h2>
<p key="content"><FormattedMessage id="app.home.slogan" /></p> <p key="content"><FormattedMessage id="app.home.slogan" /></p>
@ -38,7 +38,7 @@ export default function Banner({ location, onEnterChange }) {
/> />
</QueueAnim> </QueueAnim>
<Icon type="down" className="down" /> <Icon type="down" className="down" />
</ScrollOverPack> </ScrollElement>
</section> </section>
); );
} }

10
site/theme/template/Home/Link.jsx
View File

@ -10,11 +10,11 @@ export default class Link extends React.Component {
render() { render() {
return ( return (
<div id="list"> <div id="list">
<ScrollLink className="list-point" location="banner" /> <ScrollLink className="list-point" to="banner" toHash={false} />
<ScrollLink className="list-point" location="page1" /> <ScrollLink className="list-point" to="page1" toHash={false} />
<ScrollLink className="list-point" location="page2" /> <ScrollLink className="list-point" to="page2" toHash={false} />
<ScrollLink className="list-point" location="page3" /> <ScrollLink className="list-point" to="page3" toHash={false} />
<ScrollLink className="list-point" location="page4" /> <ScrollLink className="list-point" to="page4" toHash={false} />
</div> </div>
); );
} }

6
site/theme/template/Home/Page1.jsx
View File

@ -20,15 +20,15 @@ function onScrollEvent(e) {
export default function Page1({ location }) { export default function Page1({ location }) {
return ( return (
<ScrollOverPack scrollName="page1" className="content-wrapper page" <ScrollOverPack id="page1" className="content-wrapper page"
playScale={1} replay scrollEvent={onScrollEvent} playScale={1} replay scrollEvent={onScrollEvent}
hideProps={{ image: { reverse: true } }} hideProps={{ image: { reverse: true } }}
> >
<TweenOne key="image" className="image1 image-wrapper" <TweenOne key="image" className="image1 image-wrapper"
animation={{ x: 0, opacity: 1, duration: 550 }} animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
style={{ transform: 'translateX(-100px)', opacity: 0 }} style={{ transform: 'translateX(-100px)', opacity: 0 }}
/> />
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse> <QueueAnim className="text-wrapper" key="text" leaveReverse>
<h2 key="h2"><FormattedMessage id="app.home.best-practice" /></h2> <h2 key="h2"><FormattedMessage id="app.home.best-practice" /></h2>
<p key="p" style={{ maxWidth: 310 }}><FormattedMessage id="app.home.experience" /></p> <p key="p" style={{ maxWidth: 310 }}><FormattedMessage id="app.home.experience" /></p>
<div key="button"> <div key="button">

8
site/theme/template/Home/Page2.jsx
View File

@ -8,12 +8,12 @@ import QueueAnim from 'rc-queue-anim';
export default function Page2({ location }) { export default function Page2({ location }) {
return ( return (
<ScrollOverPack scrollName="page2" <ScrollOverPack id="page2"
className="content-wrapper page" playScale={1} replay className="content-wrapper page" playScale={1} replay
hideProps={{ image: { reverse: true } }} hideProps={{ image: { reverse: true } }}
> >
<QueueAnim className="text-wrapper left-text" delay={300} key="text" <QueueAnim className="text-wrapper left-text" key="text"
duration={550} type="bottom" leaveReverse duration={450} type="bottom" leaveReverse
> >
<h2 key="h2"><FormattedMessage id="app.home.design-pattern" /></h2> <h2 key="h2"><FormattedMessage id="app.home.design-pattern" /></h2>
<p key="p" style={{ maxWidth: 260 }}><FormattedMessage id="app.home.pattern" /></p> <p key="p" style={{ maxWidth: 260 }}><FormattedMessage id="app.home.pattern" /></p>
@ -27,7 +27,7 @@ export default function Page2({ location }) {
</div> </div>
</QueueAnim> </QueueAnim>
<TweenOne key="image" className="image2 image-wrapper" <TweenOne key="image" className="image2 image-wrapper"
animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }} animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
style={{ transform: 'translateX(100px)', opacity: 0 }} style={{ transform: 'translateX(100px)', opacity: 0 }}
/> />
</ScrollOverPack> </ScrollOverPack>

6
site/theme/template/Home/Page3.jsx
View File

@ -8,14 +8,14 @@ import QueueAnim from 'rc-queue-anim';
export default function Page3({ location }) { export default function Page3({ location }) {
return ( return (
<ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay <ScrollOverPack id="page3" className="content-wrapper page" playScale={1} replay
hideProps={{ image: { reverse: true } }} hideProps={{ image: { reverse: true } }}
> >
<TweenOne key="image" className="image3 image-wrapper" <TweenOne key="image" className="image3 image-wrapper"
animation={{ x: 0, opacity: 1, duration: 550 }} animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
style={{ transform: 'translateX(-100px)', opacity: 0 }} style={{ transform: 'translateX(-100px)', opacity: 0 }}
/> />
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} <QueueAnim className="text-wrapper" key="text"
leaveReverse style={{ top: '40%' }} leaveReverse style={{ top: '40%' }}
> >
<h2 key="h2"><FormattedMessage id="app.home.reusable-components" /></h2> <h2 key="h2"><FormattedMessage id="app.home.reusable-components" /></h2>

7
site/theme/template/Home/Page4.jsx
View File

@ -6,16 +6,17 @@ import QueueAnim from 'rc-queue-anim';
export default function Page4() { export default function Page4() {
return ( return (
<ScrollOverPack scrollName="page4" className="content-wrapper page" <ScrollOverPack id="page4" className="content-wrapper page"
playScale={1} hideProps={{ image: { reverse: true } }} playScale={1} hideProps={{ image: { reverse: true } }}
> >
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} <QueueAnim className="text-wrapper-bottom" key="text"
leaveReverse type="bottom" leaveReverse type="bottom"
> >
<h2 key="h2"><FormattedMessage id="app.home.sub-slogan" /></h2> <h2 key="h2"><FormattedMessage id="app.home.sub-slogan" /></h2>
<p key="p"><FormattedMessage id="app.home.vision" /></p> <p key="p"><FormattedMessage id="app.home.vision" /></p>
</QueueAnim> </QueueAnim>
<TweenOne key="image" className="image4 bottom-wrapper" animation={{ y: 0, opacity: 1, duration: 550, delay: 550 }} <TweenOne key="image" className="image4 bottom-wrapper"
animation={{ y: 0, opacity: 1, duration: 550, delay: 150, ease: 'easeOutQuad' }}
style={{ transform: 'translateY(50px)', opacity: 0 }} style={{ transform: 'translateY(50px)', opacity: 0 }}
/> />
</ScrollOverPack> </ScrollOverPack>