mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
add new home
This commit is contained in:
jljsj
parent
c3e404f6ea
commit
7e341a1be9
@ -70,6 +70,8 @@
|
||||
"warning": "~2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rc-scroll-anim": "0.0.5",
|
||||
"rc-tween-one": "0.1.5",
|
||||
"autoprefixer-loader": "^3.1.0",
|
||||
"babel-cli": "^6.2.0",
|
||||
"babel-core": "^6.2.1",
|
||||
|
||||
111
scripts/home.js
111
scripts/home.js
@ -1,8 +1,111 @@
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
import { QueueAnim, Icon, Button } from '../index';
|
||||
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
console.log(EventDispatcher)
|
||||
const DivId = ['page4', 'page3', 'page2', 'page1', 'banner'];
|
||||
const header = document.getElementById('header');
|
||||
DivId.forEach(id=> {
|
||||
const page = document.createElement('section');
|
||||
page.id = id;
|
||||
if (id.indexOf('page') >= 0) {
|
||||
page.className = 'page';
|
||||
}
|
||||
document.body.insertBefore(page, header.nextSibling);
|
||||
});
|
||||
|
||||
// 导航处理；
|
||||
function scrollNavEvent() {
|
||||
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
if (scrollTop >= clientHeight) {
|
||||
header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom';
|
||||
} else {
|
||||
header.className = header.className.replace(/home-nav-bottom/ig, '');
|
||||
}
|
||||
}
|
||||
|
||||
EventDispatcher.addEventListener('scroll.scrollNavEvent', scrollNavEvent);
|
||||
|
||||
class Banner extends React.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
typeFunc(a) {
|
||||
if (a.key === 'line') {
|
||||
return 'right';
|
||||
} else if (a.key === 'button') {
|
||||
return 'bottom';
|
||||
}
|
||||
return 'left';
|
||||
}
|
||||
|
||||
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>)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Banner />, banner);
|
||||
|
||||
|
||||
// page1
|
||||
ReactDOM.render((
|
||||
<div className="home-page">
|
||||
首页坑位
|
||||
</div>
|
||||
), document.getElementById('home-container'));
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<TweenOne key="image" className="image1 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>
|
||||
<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>
|
||||
</QueueAnim>
|
||||
</ScrollOverPack>
|
||||
), page1);
|
||||
|
||||
//page2
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<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>
|
||||
</QueueAnim>
|
||||
<TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
|
||||
style={{transform: 'translateX(100px)', opacity: 0}}/>
|
||||
</ScrollOverPack>
|
||||
), page2);
|
||||
|
||||
//page3
|
||||
ReactDOM.render((
|
||||
<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>
|
||||
</QueueAnim>
|
||||
</ScrollOverPack>
|
||||
), page3);
|
||||
|
||||
|
||||
//page4
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper" >
|
||||
|
||||
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
|
||||
<h1 key="h1">微小·确定·幸福</h1>
|
||||
<p key="p">为中后台设计中反复出现的问题提供一套相应的解决方案</p>
|
||||
</QueueAnim>
|
||||
<TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
|
||||
style={{transform: 'translateY(50px)', opacity: 0}}/>
|
||||
</ScrollOverPack>
|
||||
), page4);
|
||||
|
||||
@ -3,13 +3,229 @@
|
||||
{% block bodyAttribute %}class="index-page"{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="home-container"></div>
|
||||
<script src="{{static_url('../dist/home.js')}}"></script>
|
||||
<style>
|
||||
.home-page {
|
||||
text-align: center;
|
||||
min-height: 560px;
|
||||
padding-top: 200px;
|
||||
}
|
||||
html, body, div, section, {
|
||||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
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);
|
||||
}
|
||||
|
||||
.global-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.logo {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
text-indent: 5px;
|
||||
}
|
||||
|
||||
a.logo img {
|
||||
width: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav ul li a {
|
||||
transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.search #autoComplete .ant-select-selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#banner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url("https://t.alipayobjects.com/images/T1OhFkXfpgXXXXXXXX.png") no-repeat center / cover;
|
||||
}
|
||||
|
||||
.banner-text-wrapper {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 60%;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header.home-nav-bottom {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #EBEDEE;
|
||||
}
|
||||
|
||||
.home-nav-bottom .search {
|
||||
border-left-color: #EBEDEE;
|
||||
}
|
||||
|
||||
.home-nav-bottom .nav a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.banner-text-wrapper h1 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.banner-text-wrapper h1 p {
|
||||
color: #FF3171;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.banner-text-wrapper .line {
|
||||
width: 1px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
top: 10px;
|
||||
right: -25px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.banner-text-wrapper > p {
|
||||
margin: 10px auto 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.banner-text-wrapper a {
|
||||
float: right;
|
||||
width: 155px;
|
||||
height: 45px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #00AAEE;
|
||||
color: #00AAEE;
|
||||
font-size: 18px;
|
||||
background: transparent;
|
||||
transition: box-shadow .45s ease-out;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.banner-text-wrapper a:hover {
|
||||
box-shadow: 0 0 10px #00AAEE;
|
||||
}
|
||||
|
||||
.banner-text-wrapper a span {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1850px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-wrapper .image-wrapper {
|
||||
width: 65%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px;
|
||||
height: 511px;
|
||||
top: 50%;
|
||||
margin-top: -256px;
|
||||
}
|
||||
|
||||
.image2 {
|
||||
background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px;
|
||||
height: 474px;
|
||||
top: 50%;
|
||||
margin-top: -266px;
|
||||
}
|
||||
|
||||
.image3 {
|
||||
padding-right: 10%;
|
||||
background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px;
|
||||
background-origin: content-box;
|
||||
height: 500px;
|
||||
top: 50%;
|
||||
margin-top: -250px;
|
||||
}
|
||||
|
||||
.image4 {
|
||||
background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px;
|
||||
height: 364px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content-wrapper .text-wrapper {
|
||||
width: 35%;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.content-wrapper .text-wrapper h1 {
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.content-wrapper .text-wrapper p {
|
||||
margin: 10px 0 20px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.content-wrapper .left-text {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.text-wrapper-bottom {
|
||||
text-align: center;
|
||||
margin: 10% auto 40px;
|
||||
}
|
||||
|
||||
.text-wrapper-bottom p {
|
||||
margin: 20px auto;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
footer ul li > h2 {
|
||||
color: #656975;
|
||||
}
|
||||
footer ul li > a{
|
||||
color: #BEC4C8
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -35,9 +35,9 @@
|
||||
@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
@ease-out-back : cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
@ease-in-back : cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
@ease-in-out-back : cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
|
||||
@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||
@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user