mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

add home down icon

Browse Source
This commit is contained in:
jljsj 2016-01-07 17:24:44 +08:00
parent 4660a7f69e
commit 6d885bb171
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
scripts/home.js
View File

@ -45,12 +45,17 @@ class Banner extends React.Component {
render() {
return (
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
<h1 key="h1">ANT DESIGN <p>V1.0</p></h1>
<p key="content">一套面向中后台的设计解决方案</p>
<span className="line" key="line"/>
<a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
</QueueAnim>)
<div>
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
<h1 key="h1">ANT DESIGN <p>V1.0</p></h1>
<p key="content">一套面向中后台的设计解决方案</p>
<span className="line" key="line"/>
<a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
</QueueAnim>
<TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]} style={{opacity: 0}}>
<Icon type="down"/>
</TweenOne>
</div>)
}
}
@ -65,7 +70,8 @@ ReactDOM.render((
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
<h1 key="h1">实例/优秀的设计实践</h1>
<p key="p" style={{maxWidth: 310}}>近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。</p>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon type="right"/></Button></div>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
</ScrollOverPack>
), page1);
@ -76,7 +82,9 @@ ReactDOM.render((
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
<h1 key="h1">设计模式库</h1>
<p key="p" style={{maxWidth: 260}}>为中后台设计中反复出现的问题提供一套相应的解决方案</p>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button></div>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
</div>
</QueueAnim>
<TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
style={{transform: 'translateX(100px)', opacity: 0}}/>
@ -85,20 +93,22 @@ ReactDOM.render((
//page3
ReactDOM.render((
<ScrollOverPack className="content-wrapper" >
<ScrollOverPack className="content-wrapper">
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
<h1 key="h1">30+的基础设计组件</h1>
<p key="p" style={{maxWidth: 280}}>为中后台设计中反复出现的问题提供一套相应的解决方案</p>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon type="right"/></Button></div>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
</ScrollOverPack>
), page3);
//page4
ReactDOM.render((
<ScrollOverPack className="content-wrapper" >
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
<h1 key="h1">微小·确定·幸福</h1>

12
site/templates/home.html
View File

@ -128,6 +128,15 @@
margin-left: 15px;
}
.down {
text-align: center;
position: absolute;
bottom: 30px;
color: rgba(255, 255, 255, .75);
left: 50%;
margin-left: -7px;
}
section {
height: 100%;
width: 100%;
@ -224,7 +233,8 @@
footer ul li > h2 {
color: #656975;
}
footer ul li > a{
footer ul li > a {
color: #BEC4C8
}
</style>