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

fix home page style

Browse Source
This commit is contained in:
afc163 2016-01-07 17:47:56 +08:00
commit 4647e8391a
3 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
scripts/home.js
View File

@ -45,11 +45,17 @@ class Banner extends React.Component {
render() {
return (
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
<h1 key="h1">ANT DESIGN</h1>
<p key="content">一套 UI 设计语言</p>
<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</h1>
<p key="content">一个 UI 设计语言</p>
<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}]}>
<Icon type="down"/>
</TweenOne>
</div>
)
}
}
@ -64,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);
@ -75,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}}/>
@ -84,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">数十个基础设计组件</h1>
<h1 key="h1">40+ 基础设计组件</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>

6
site/static/style.css
View File

@ -89,7 +89,7 @@ a.logo {
line-height: 40px;
margin: 17px 0 17px 4%;
text-transform: uppercase;
font-size: 16px;
font-size: 14px;
font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
color: #2db7f5;
width: 219px;
@ -103,9 +103,9 @@ a.logo {
.search {
float: left;
height: 22px;
height: 20px;
padding: 0px 0 0 30px;
margin: 32px auto 0;
margin: 28px auto 0;
border-left: 1px solid #EBEDEE;
position: relative;
}

20
site/templates/home.html
View File

@ -12,11 +12,15 @@
header {
position: fixed;
z-index: 999;
background: rgba(0, 0, 0, 0.75);
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);
}
header .nav ul li a {
color: #eee;
}
.global-hint {
display: none;
}
@ -43,8 +47,6 @@
.search {
border-left-color: rgba(235, 237, 238, .5);
height: 20px;
margin-top: 28px;
transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@ -128,6 +130,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 +235,8 @@
footer ul li > h2 {
color: #656975;
}
footer ul li > a{
footer ul li > a {
color: #BEC4C8
}
</style>