├── .gitignore ├── src └── Home │ ├── static │ ├── style.js │ ├── custom.less │ ├── default.less │ ├── footer.less │ ├── header.less │ ├── responsive.less │ └── home.less │ ├── Page4.jsx │ ├── Header.jsx │ ├── index.jsx │ ├── Page3.jsx │ ├── Banner.jsx │ ├── Footer.jsx │ ├── Page2.jsx │ ├── Page1.jsx │ ├── data.js │ └── technology-comp │ ├── Tetris.jsx │ ├── Coordinate.jsx │ ├── Column.jsx │ └── Building.jsx ├── index.js ├── deploy.js ├── .eslintrc ├── webpack.config.js ├── README.md ├── index.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .DS_Store -------------------------------------------------------------------------------- /src/Home/static/style.js: -------------------------------------------------------------------------------- 1 | import './header.less'; 2 | import './home.less'; 3 | import './footer.less'; 4 | import './responsive.less'; 5 | -------------------------------------------------------------------------------- /src/Home/static/custom.less: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | } 4 | 5 | .text-center { 6 | text-align: center!important; 7 | } 8 | a:focus { 9 | text-decoration: none; 10 | } 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Home from './src/Home'; 4 | 5 | function App() { 6 | return ( 7 | 8 | ); 9 | } 10 | 11 | ReactDOM.render(, document.getElementById('root')); 12 | -------------------------------------------------------------------------------- /deploy.js: -------------------------------------------------------------------------------- 1 | var ghPages = require('gh-pages'); 2 | var path = require('path'); 3 | ghPages.publish(path.join(process.cwd(), 'dist'), { 4 | depth: 1, 5 | logger: function (message) { 6 | console.log(message); 7 | } 8 | }, function (err) { 9 | if (err) { 10 | throw err; 11 | } 12 | console.log('Site has been published.'); 13 | }); -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "parser": "babel-eslint", 4 | "rules": { 5 | "import/no-unresolved": 0, 6 | "react/jsx-no-target-blank": 0, 7 | "jsx-a11y/anchor-is-valid": 0, 8 | "react/jsx-no-comment-textnodes": 0, 9 | "react/prop-types": 0, 10 | "no-mixed-operators": 0, 11 | "no-undef": 0 12 | } 13 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // Learn more on how to config. 2 | // - https://github.com/ant-tool/atool-build#配置扩展 3 | 4 | module.exports = function(webpackConfig) { 5 | webpackConfig.babel.plugins.push('transform-runtime'); 6 | webpackConfig.babel.plugins.push(['import', { 7 | libraryName: 'antd', 8 | style: 'css', 9 | }]); 10 | 11 | return webpackConfig; 12 | }; 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### experience-cloud 2 | 3 | 体验云的 landing page. 4 | 5 | 脚手架使用的是： [antd-init](https://github.com/ant-design/antd-init); 6 | 7 | ## preview 8 | 9 | https://xcloud.alipay.com/ 10 | 11 | https://ant-motion.github.io/experience-cloud-landing-page/ 12 | 13 | 14 | ## install 15 | ``` 16 | $ npm i 17 | ``` 18 | 19 | ## Development 20 | 21 | ``` 22 | $ npm start 23 | ``` -------------------------------------------------------------------------------- /src/Home/static/default.less: -------------------------------------------------------------------------------- 1 | @import "~antd/lib/style/themes/default.less"; 2 | 3 | @banner-text-color: #5C6899; 4 | 5 | 6 | .card-style() { 7 | background: linear-gradient(to bottom, #2469F4, #113BBF); 8 | box-shadow: 0px 16px 40px #0F2DA0; 9 | transition: transform .3s @ease-in-out, box-shadow .3s @ease-in-out; 10 | &:hover { 11 | transform: translateY(-4px); 12 | box-shadow: 0px 20px 40px #0F2DA0; 13 | } 14 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Demo 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/Home/static/footer.less: -------------------------------------------------------------------------------- 1 | .footer { 2 | background:linear-gradient(to bottom, #031D6A, #000E48); 3 | color: #fff; 4 | } 5 | .footer-wrap { 6 | padding: 72px 24px 144px; 7 | .footer-item { 8 | display: inline-block; 9 | text-align: left; 10 | h2 { 11 | margin-bottom: 24px; 12 | color: #fff; 13 | font-size: 16px; 14 | } 15 | div { 16 | margin-bottom: 12px; 17 | font-size: 14px; 18 | a { 19 | color: rgba(256, 256, 256, 0.9); 20 | } 21 | } 22 | } 23 | } 24 | .footer-bottom { 25 | border-top: 1px solid rgba(255, 255, 255, 0.15); 26 | padding: 21px 0; 27 | line-height: 22px; 28 | text-align: right; 29 | color: rgba(255, 255, 255, 0.6); 30 | a { 31 | color: rgba(255, 255, 255, 0.6); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/Home/Page4.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col } from 'antd'; 3 | import QueueAnim from 'rc-queue-anim'; 4 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 5 | import { page4 } from './data'; 6 | 7 | export default function Page4() { 8 | const children = page4.children.map((img, i) => ( 9 | 10 | img 11 | 12 | )); 13 | return ( 14 |
15 |
16 |

{page4.title}

17 | 18 | 19 | 26 | {children} 27 | 28 | 29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/Home/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, Tooltip } from 'antd'; 3 | import { header } from './data'; 4 | 5 | export default function Header(props) { 6 | const menuChild = header.map((item, i) => { 7 | const content = item.children.map((child, ii) => ( 8 | 9 | img 10 |
11 | {child.title} 12 |
{child.desc}
13 |
14 | 15 | )); 16 | return ( 17 | 18 | 19 | {item.title} 20 | 21 | 22 | ); 23 | }); 24 | return ( 25 |
26 | 27 | {menuChild} 28 | 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/Home/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import DocumentTitle from 'react-document-title'; 3 | import { enquireScreen } from 'enquire-js'; 4 | import Header from './Header'; 5 | import Banner from './Banner'; 6 | import Page1 from './Page1'; 7 | import Page2 from './Page2'; 8 | import Page3 from './Page3'; 9 | import Page4 from './Page4'; 10 | import Footer from './Footer'; 11 | import './static/style'; 12 | 13 | 14 | let isMobile = false; 15 | enquireScreen((b) => { 16 | isMobile = b; 17 | }); 18 | 19 | 20 | class Home extends React.PureComponent { 21 | state = { 22 | isMobile, 23 | showShadow: false, 24 | }; 25 | 26 | componentDidMount() { 27 | enquireScreen((b) => { 28 | this.setState({ 29 | isMobile: !!b, 30 | }); 31 | }); 32 | } 33 | navToShadow = (e) => { 34 | this.setState({ showShadow: e.mode === 'leave' }); 35 | } 36 | render() { 37 | return ( 38 | [ 39 |
, 40 | , 41 | , 42 | , 43 | , 44 | , 45 |