├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── Home
    │   ├── documentation.md
    │   ├── less
    │   │   ├── antMotionStyle.less
    │   │   ├── edit.less
    │   │   ├── common.less
    │   │   ├── custom.less
    │   │   ├── content.less
    │   │   ├── content0.less
    │   │   ├── content3.less
    │   │   ├── feature5.less
    │   │   ├── content5.less
    │   │   ├── footer1.less
    │   │   ├── banner1.less
    │   │   └── nav3.less
    │   ├── utils.js
    │   ├── Content0.jsx
    │   ├── Content5.jsx
    │   ├── Footer1.jsx
    │   ├── Banner1.jsx
    │   ├── Content3.jsx
    │   ├── index.jsx
    │   ├── Feature5.jsx
    │   ├── Nav3.jsx
    │   └── data.source.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── App.css
    ├── App.js
    ├── logo.svg
    └── serviceWorker.js
├── README.md
├── config-overrides.js
├── .gitignore
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ant-motion/landing-create-react-app-example/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/Home/documentation.md:
--------------------------------------------------------------------------------
1 | # 如何使用：
2 | 
3 | - umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。
4 | - 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Landing create-react-app Example
2 | 
3 | 详细使用请查看 landing 里的 [use in create-react-app](https://landing.ant.design/docs/use/create-react-app)
4 | 
5 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
6 | 
7 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/config-overrides.js:
--------------------------------------------------------------------------------
 1 | const { override, fixBabelImports, addLessLoader } = require('customize-cra');
 2 | 
 3 | module.exports = override(
 4 |    fixBabelImports('import', {
 5 |     libraryName: 'antd',
 6 |     libraryDirectory: 'es',
 7 |     style: true,
 8 |   }),
 9 |   addLessLoader({
10 |     javascriptEnabled: true,
11 |   }),
12 |  );


--------------------------------------------------------------------------------
/src/Home/less/antMotionStyle.less:
--------------------------------------------------------------------------------
 1 | @import './common.less';
 2 | @import './custom.less';
 3 | @import './content.less';
 4 | @import './nav3.less';
 5 | @import './banner1.less';
 6 | @import './content0.less';
 7 | @import './content5.less';
 8 | @import './content3.less';
 9 | @import './feature5.less';
10 | @import './footer1.less';
11 | @import './edit.less';


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 5 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/Home/less/edit.less:
--------------------------------------------------------------------------------
 1 | #Content0_0 .home-page > div > .k9h76g7v2q-editor_css {
 2 |   justify-content: center;
 3 | }
 4 | #Footer1_0 .ant-col > div > .k9h7irl6jgj-editor_css {
 5 |   display: flex;
 6 |   justify-content: center;
 7 | }
 8 | #Footer1_0 .ant-col > div > .k9h7jbsf8ap-editor_css {
 9 |   display: flex;
10 |   justify-content: center;
11 | }
12 | #Footer1_0 .ant-row > .ant-col > .k9h7k134cu-editor_css {
13 |   display: flex;
14 |   justify-content: center;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './Home';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: http://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/src/Home/less/common.less:
--------------------------------------------------------------------------------
 1 | 
 2 | // @import "~antd/lib/style/v2-compatible-reset.less";
 3 | 
 4 | body {
 5 |   word-wrap: break-word;
 6 | }
 7 | 
 8 | body,
 9 | div,
10 | dl,
11 | dt,
12 | dd,
13 | ul,
14 | ol,
15 | li,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6 {
22 |   margin: 0;
23 |   padding: 0;
24 | }
25 | 
26 | /* .content-wrapper > .tween-one-leaving,
27 | .queue-anim-leaving {
28 |   // position: absolute !important;
29 |   // width: 100%;
30 | } */
31 | 
32 | .video {
33 |   max-width: 800px;
34 | }
35 | 
36 | #react-content {
37 |   min-height: 100%;
38 | }
39 | .home-page-wrapper p {
40 |   padding: 0;
41 |   margin: 0;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 40vmin;
 8 |   pointer-events: none;
 9 | }
10 | 
11 | .App-header {
12 |   background-color: #282c34;
13 |   min-height: 100vh;
14 |   display: flex;
15 |   flex-direction: column;
16 |   align-items: center;
17 |   justify-content: center;
18 |   font-size: calc(10px + 2vmin);
19 |   color: white;
20 | }
21 | 
22 | .App-link {
23 |   color: #61dafb;
24 | }
25 | 
26 | @keyframes App-logo-spin {
27 |   from {
28 |     transform: rotate(0deg);
29 |   }
30 |   to {
31 |     transform: rotate(360deg);
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import logo from './logo.svg';
 3 | import './App.css';
 4 | 
 5 | class App extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="App">
 9 |         <header className="App-header">
10 |           <img src={logo} className="App-logo" alt="logo" />
11 |           <p>
12 |             Edit <code>src/App.js</code> and save to reload.
13 |           </p>
14 |           <a
15 |             className="App-link"
16 |             href="https://reactjs.org"
17 |             target="_blank"
18 |             rel="noopener noreferrer"
19 |           >
20 |             Learn React
21 |           </a>
22 |         </header>
23 |       </div>
24 |     );
25 |   }
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/src/Home/utils.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react';
 3 | import { Button } from 'antd';
 4 | 
 5 | export const isImg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/;
 6 | export const getChildrenToRender = (item, i) => {
 7 |   let tag = item.name.indexOf('title') === 0 ? 'h1' : 'div';
 8 |   tag = item.href ? 'a' : tag;
 9 |   let children = typeof item.children === 'string' && item.children.match(isImg)
10 |     ? React.createElement('img', { src: item.children, alt: 'img' })
11 |     : item.children;
12 |   if (item.name.indexOf('button') === 0 && typeof item.children === 'object') {
13 |     children = React.createElement(Button, {
14 |       ...item.children
15 |     });
16 |   }
17 |   return React.createElement(tag, { key: i.toString(), ...item }, children);
18 | };
19 | 


--------------------------------------------------------------------------------
/src/Home/less/custom.less:
--------------------------------------------------------------------------------
 1 | @import "~antd/lib/style/themes/default.less";
 2 | 
 3 | @line-color: #e9e9e9;
 4 | 
 5 | @shadow-color: rgba(0, 0, 0, 0.15);
 6 | 
 7 | @bottom-bar-bg-color: #262626;
 8 | @bottom-bar-line-color: #000;
 9 | 
10 | @template-bg-color: #001529;
11 | @template-bg-color-light: #ececec;
12 | @template-nav-bg-color: #001529;
13 | @template-text-color: #ccc;
14 | @template-text-title-color: #bcbcbc;
15 | @template-text-color-light: #fff;
16 | @template-footer-text-color: #999;
17 | 
18 | @animate-duration: .45s;
19 | 
20 | /* 详细页图片或框框的样式;
21 | */
22 | .page-shadow() {
23 |   box-shadow: 0 5px 8px @shadow-color;
24 | }
25 | 
26 | .page-pro() {
27 |   border-radius: 6px;
28 |   border: 1px solid @line-color;
29 |   transform: translateY(0);
30 |   transition: transform .3s @ease-out, box-shadow .3s @ease-out;
31 |   &:hover {
32 |     .page-shadow();
33 |     transform: translateY(-5px);
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/Home/less/content.less:
--------------------------------------------------------------------------------
 1 | @homepage: home-page;
 2 | .@{homepage}-wrapper {
 3 |   width: 100%;
 4 |   position: relative;
 5 |   overflow: hidden;
 6 |   .@{homepage} {
 7 |     height: 100%;
 8 |     max-width: 1200px;
 9 |     position: relative;
10 |     margin: auto;
11 |     will-change: transform;
12 |   }
13 |   .title-wrapper > h1, > h1 {
14 |     font-size: 32px;
15 |     color: @text-color;
16 |     margin-bottom: 16px;
17 |   }
18 |   .title-wrapper {
19 |     margin: 0 auto 64px;
20 |     text-align: center;
21 |   }
22 | }
23 | 
24 | .@{homepage} {
25 |   padding: 128px 24px;
26 | }
27 | 
28 | @media screen and (max-width: 767px) {
29 |   .@{homepage}-wrapper {
30 |     .@{homepage} {
31 |       padding: 56px 24px;
32 |       >h1 {
33 |         font-size: 24px;
34 |         margin: 0 auto 32px;
35 |         &.title-h1 {
36 |           margin-bottom: 8px;
37 |         }
38 |       }
39 |       >p {
40 |         margin-bottom: 32px;
41 |       }
42 |     }
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "landing-create-react-app-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "./",
 6 |   "dependencies": {
 7 |     "@ant-design/compatible": "^1.0.2",
 8 |     "antd": "^4.0.1",
 9 |     "enquire-js": "^0.2.1",
10 |     "rc-banner-anim": "^2.2.2",
11 |     "rc-queue-anim": "^1.6.12",
12 |     "rc-scroll-anim": "^2.5.6",
13 |     "rc-tween-one": "^2.3.4",
14 |     "react": "^16.8.3",
15 |     "react-dom": "^16.8.3",
16 |     "react-scripts": "2.1.5"
17 |   },
18 |   "scripts": {
19 |     "start": "react-app-rewired start",
20 |     "build": "react-app-rewired build",
21 |     "test": "react-app-rewired test",
22 |     "eject": "react-app-rewired eject"
23 |   },
24 |   "eslintConfig": {
25 |     "extends": "react-app"
26 |   },
27 |   "browserslist": [
28 |     ">0.2%",
29 |     "not dead",
30 |     "not ie <= 11",
31 |     "not op_mini all"
32 |   ],
33 |   "devDependencies": {
34 |     "babel-plugin-import": "^1.11.0",
35 |     "customize-cra": "^0.2.12",
36 |     "less": "^3.9.0",
37 |     "less-loader": "^4.1.0",
38 |     "react-app-rewired": "^2.1.0"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/Home/less/content0.less:
--------------------------------------------------------------------------------
 1 | @content0: content0;
 2 | 
 3 | .@{content0}-wrapper {
 4 |   min-height: 446px;
 5 |   overflow: hidden;
 6 | 
 7 |   .@{content0} {
 8 |     height: 100%;
 9 |     padding: 64px 24px;
10 | 
11 |     >.title-wrapper {
12 |       margin: 0 auto 48px;
13 |     }
14 | 
15 |     &-block {
16 |       padding: 0 4%;
17 |       display: inline-block;
18 |       text-align: center;
19 |       min-height: 200px;
20 |       margin-bottom: 24px;
21 |       img {
22 |         width: 100%;
23 |       }
24 | 
25 |       &-wrapper {
26 |         position: relative;
27 |         height: 100%;
28 |         top: 25%;
29 |         padding: 20px 0;
30 |       }
31 | 
32 |       &.queue-anim-leaving {
33 |         position: relative !important;
34 |       }
35 | 
36 |       &-icon {
37 |         width: 100px;
38 |         height: 100px;
39 |         margin: auto;
40 |       }
41 | 
42 |       &-title {
43 |         line-height: 32px;
44 |         margin: 10px auto;
45 |         font-size: 24px;
46 |       }
47 |     }
48 |   }
49 | }
50 | 
51 | @media screen and (max-width: 767px) {
52 |   .@{content0}-wrapper {
53 |     min-height: 880px;
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/Home/less/content3.less:
--------------------------------------------------------------------------------
 1 | @content3: content3;
 2 | .@{content3}-wrapper {
 3 |   min-height: 764px;
 4 |   .@{content3} {
 5 |     height: 100%;
 6 |     overflow: hidden;
 7 |     & .title-content {
 8 |       text-align: center;
 9 |     }
10 |     &-block-wrapper {
11 |       position: relative;
12 |       .@{content3}-block {
13 |         display: inline-block;
14 |         padding: 48px 24px;
15 |         vertical-align: top;
16 |         .@{content3}-icon {
17 |           display: inline-block;
18 |           width: 15%;
19 |           vertical-align: top;
20 |         }
21 |         .@{content3}-text {
22 |           width: 85%;
23 |           display: inline-block;
24 |           padding-left: 8%;
25 |         }
26 |         &.clear-both {
27 |           clear: both;
28 |         }
29 |       }
30 |     }
31 |   }
32 | }
33 | 
34 | @media screen and (max-width: 767px) {
35 |   .@{content3}-wrapper {
36 |     min-height: 1080px;
37 |     .@{content3} {
38 |       &-block-wrapper {
39 |         margin: 20px auto;
40 |         height: auto;
41 |         .@{content3}-block {
42 |           .@{content3}-title {
43 |             font-size: 20px;
44 |           }
45 |           &.queue-anim-leaving {
46 |             position: relative !important;
47 |           }
48 |         }
49 |       }
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/Home/Content0.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import QueueAnim from 'rc-queue-anim';
 3 | import { Row, Col } from 'antd';
 4 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 5 | import { getChildrenToRender } from './utils';
 6 | 
 7 | class Content extends React.PureComponent {
 8 |   render() {
 9 |     const { dataSource, isMobile, ...props } = this.props;
10 |     const {
11 |       wrapper,
12 |       titleWrapper,
13 |       page,
14 |       OverPack: overPackData,
15 |       childWrapper,
16 |     } = dataSource;
17 |     return (
18 |       <div {...props} {...wrapper}>
19 |         <div {...page}>
20 |           <div {...titleWrapper}>
21 |             {titleWrapper.children.map(getChildrenToRender)}
22 |           </div>
23 |           <OverPack {...overPackData}>
24 |             <QueueAnim
25 |               type="bottom"
26 |               key="block"
27 |               leaveReverse
28 |               component={Row}
29 |               componentProps={childWrapper}
30 |             >
31 |               {childWrapper.children.map((block, i) => {
32 |                 const { children: item, ...blockProps } = block;
33 |                 return (
34 |                   <Col key={i.toString()} {...blockProps}>
35 |                     <div {...item}>
36 |                       {item.children.map(getChildrenToRender)}
37 |                     </div>
38 |                   </Col>
39 |                 );
40 |               })}
41 |             </QueueAnim>
42 |           </OverPack>
43 |         </div>
44 |       </div>
45 |     );
46 |   }
47 | }
48 | 
49 | export default Content;
50 | 


--------------------------------------------------------------------------------
/src/Home/less/feature5.less:
--------------------------------------------------------------------------------
 1 | @content7: content7;
 2 | .@{content7}-wrapper {
 3 |   min-height: 720px;
 4 |   .@{content7} {
 5 |     >h1,
 6 |     >p {
 7 |       text-align: center;
 8 |     }
 9 |     &-tag {
10 |       & i {
11 |         width: 12px;
12 |         height: 14px;
13 |         display: inline-block;
14 |         vertical-align: middle;
15 |         margin-right: 5px;
16 |       }
17 |       &-name {
18 |         display: inline-block;
19 |       }
20 |     }
21 |     .ant-tabs-bar {
22 |       text-align: center;
23 |     }
24 |     .ant-tabs {
25 |       .ant-tabs-nav {
26 |         float: none;
27 |         text-align: center;
28 |       }
29 |     }
30 |     &-tabs-wrapper {
31 |       position: relative;
32 |       margin-top: 24px;
33 |     }
34 |     &-content {
35 |       display: flex;
36 |       align-items: center;
37 |     }
38 |     &-text {
39 |       padding: 24px 48px;
40 |     }
41 |     &-img {
42 |       padding: 24px 48px;
43 |     }
44 |     .ant-tabs-tabpane {
45 |       margin-top: 40px;
46 |     }
47 |   }
48 | }
49 | 
50 | @media screen and (max-width: 767px) {
51 |   .@{content7}-wrapper {
52 |     min-height: 980px;
53 |     overflow: hidden;
54 |     .@{content7} {
55 |       max-width: 100%;
56 |       &-content {
57 |         display: block;
58 |       }
59 |       &-text,
60 |       &-img {
61 |         text-align: left;
62 |         padding: 0;
63 |       }
64 |       &-img {
65 |         margin-top: 32px;
66 |       }
67 |       .ant-tabs-bar {
68 |         width: auto;
69 |         .ant-tabs-nav {
70 |           float: left;
71 |         }
72 |       }
73 |     }
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/Home/less/content5.less:
--------------------------------------------------------------------------------
 1 | @content5: content5;
 2 | .@{content5}-wrapper {
 3 |   background-color: #fafafa;
 4 |   min-height: 720px;
 5 |   .@{content5} {
 6 |     >p {
 7 |       text-align: center;
 8 |     }
 9 |     &-img-wrapper {
10 |       margin: 0 auto;
11 |       left: 0;
12 |       right: 0;
13 |       .block {
14 |         margin-bottom: 24px;
15 |         .content5-block-content {
16 |           display: block;
17 |           background: #fff;
18 |           border-radius: 4px;
19 |           padding: 10px;
20 |           text-align: center;
21 |           position: relative;
22 |           overflow: hidden;
23 |           .page-pro();
24 |           border: none;
25 |           transition: box-shadow .3s @ease-out, transform .3s @ease-out;
26 |           & > span {
27 |             width: 100%;
28 |             height: 160px;
29 |             display: block;
30 |             background: @line-color;
31 |             padding: 5%;
32 |           }
33 |           & p {
34 |             width: 100%;
35 |             line-height: 30px;
36 |           }
37 |           &:hover {
38 |             & p {
39 |               bottom: 0;
40 |             }
41 |           }
42 |         }
43 |       }
44 |     }
45 |   }
46 | }
47 | 
48 | @media screen and (max-width: 767px) {
49 |   .@{content5}-wrapper {
50 |     height: 2000px;
51 |     overflow: hidden;
52 |     .@{content5} {
53 |       ul {
54 |         li {
55 |           display: block;
56 |           width: 100%;
57 |           padding: 2%;
58 |           span {
59 |             height: 168px;
60 |           }
61 |           p {
62 |             position: relative;
63 |             bottom: 0;
64 |           }
65 |         }
66 |       }
67 |     }
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/src/Home/Content5.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Row, Col } from 'antd';
 3 | import { TweenOneGroup } from 'rc-tween-one';
 4 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 5 | import { getChildrenToRender } from './utils';
 6 | 
 7 | class Content5 extends React.PureComponent {
 8 |   getChildrenToRender = (data) =>
 9 |     data.map((item) => {
10 |       return (
11 |         <Col key={item.name} {...item}>
12 |           <div {...item.children.wrapper}>
13 |             <span {...item.children.img}>
14 |               <img src={item.children.img.children} height="100%" alt="img" />
15 |             </span>
16 |             <p {...item.children.content}>{item.children.content.children}</p>
17 |           </div>
18 |         </Col>
19 |       );
20 |     });
21 | 
22 |   render() {
23 |     const { ...props } = this.props;
24 |     const { dataSource } = props;
25 |     delete props.dataSource;
26 |     delete props.isMobile;
27 |     const childrenToRender = this.getChildrenToRender(
28 |       dataSource.block.children
29 |     );
30 |     return (
31 |       <div {...props} {...dataSource.wrapper}>
32 |         <div {...dataSource.page}>
33 |           <div key="title" {...dataSource.titleWrapper}>
34 |             {dataSource.titleWrapper.children.map(getChildrenToRender)}
35 |           </div>
36 |           <OverPack
37 |             className={`content-template ${props.className}`}
38 |             {...dataSource.OverPack}
39 |           >
40 |             <TweenOneGroup
41 |               component={Row}
42 |               key="ul"
43 |               enter={{
44 |                 y: '+=30',
45 |                 opacity: 0,
46 |                 type: 'from',
47 |                 ease: 'easeInOutQuad',
48 |               }}
49 |               leave={{ y: '+=30', opacity: 0, ease: 'easeInOutQuad' }}
50 |               {...dataSource.block}
51 |             >
52 |               {childrenToRender}
53 |             </TweenOneGroup>
54 |           </OverPack>
55 |         </div>
56 |       </div>
57 |     );
58 |   }
59 | }
60 | 
61 | export default Content5;
62 | 


--------------------------------------------------------------------------------
/src/Home/less/footer1.less:
--------------------------------------------------------------------------------
 1 | .footer1-wrapper {
 2 |   background: @template-bg-color;
 3 |   overflow: hidden;
 4 |   position: relative;
 5 |   min-height: 360px;
 6 |   color: @template-footer-text-color;
 7 |   .footer1 {
 8 |     .home-page {
 9 |       padding: 64px 24px 80px;
10 |     }
11 |   }
12 |   .block {
13 |     padding: 0 32px;
14 |     .logo {
15 |       max-width: 180px;
16 |     }
17 |     .slogan {
18 |       font-size: 12px;
19 |       margin-top: -20px;
20 |     }
21 |     >h2 {
22 |       margin-bottom: 24px;
23 |       color: @template-text-color;
24 |     }
25 |     a {
26 |       color: @template-footer-text-color;
27 |       margin-bottom: 12px;
28 |       float: left;
29 |       clear: both;
30 |       &:hover {
31 |         color: @primary-color;
32 |       }
33 |     }
34 |   }
35 |   .copyright-wrapper {
36 |     width: 100%;
37 |     border-top: 1px solid fade(@line-color, 10);
38 |     .home-page {
39 |       padding: 0 24px;
40 |       overflow: hidden;
41 |     }
42 |     .copyright {
43 |       height: 80px;
44 |       text-align: center;
45 |       line-height: 80px;
46 |     }
47 |   }
48 | }
49 | 
50 | @media screen and (max-width: 767px) {
51 |   .footer1 {
52 |     min-height: 550px;
53 |     &-wrapper {
54 |       .footer1 {
55 |         .home-page {
56 |           padding: 64px 24px 32px;
57 |         }
58 |       }
59 |     }
60 |     .logo {
61 |       margin: 0 auto 24px;
62 |     }
63 |     .block {
64 |       text-align: center;
65 |       margin-bottom: 32px;
66 |       padding: 0;
67 |     }
68 |     >ul {
69 |       width: 90%;
70 |       margin: 20px auto 0;
71 |       padding: 10px 0;
72 |       >li {
73 |         width: 100%;
74 |         h2 {
75 |           margin-bottom: 10px;
76 |         }
77 |         li {
78 |           display: inline-block;
79 |           margin-right: 10px;
80 |         }
81 |       }
82 |     }
83 |     .copyright {
84 |       &-wrapper {
85 |         .home-page {
86 |           padding: 0;
87 |           .copyright {
88 |             font-size: 12px;
89 |           }
90 |         }
91 |       }
92 | 
93 |       span {
94 |         width: 90%;
95 |       }
96 |     }
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/Home/Footer1.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TweenOne from 'rc-tween-one';
 3 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 4 | import QueueAnim from 'rc-queue-anim';
 5 | import { Row, Col } from 'antd';
 6 | import { getChildrenToRender } from './utils';
 7 | import { isImg } from './utils';
 8 | 
 9 | class Footer extends React.Component {
10 |   static defaultProps = {
11 |     className: 'footer1',
12 |   };
13 | 
14 |   getLiChildren = (data) =>
15 |     data.map((item, i) => {
16 |       const { title, childWrapper, ...itemProps } = item;
17 |       return (
18 |         <Col key={i.toString()} {...itemProps} title={null} content={null}>
19 |           <h2 {...title}>
20 |             {typeof title.children === 'string' &&
21 |             title.children.match(isImg) ? (
22 |               <img src={title.children} width="100%" alt="img" />
23 |             ) : (
24 |               title.children
25 |             )}
26 |           </h2>
27 |           <div {...childWrapper}>
28 |             {childWrapper.children.map(getChildrenToRender)}
29 |           </div>
30 |         </Col>
31 |       );
32 |     });
33 | 
34 |   render() {
35 |     const { ...props } = this.props;
36 |     const { dataSource } = props;
37 |     delete props.dataSource;
38 |     delete props.isMobile;
39 |     const childrenToRender = this.getLiChildren(dataSource.block.children);
40 |     return (
41 |       <div {...props} {...dataSource.wrapper}>
42 |         <OverPack {...dataSource.OverPack}>
43 |           <QueueAnim
44 |             type="bottom"
45 |             key="ul"
46 |             leaveReverse
47 |             component={Row}
48 |             {...dataSource.block}
49 |           >
50 |             {childrenToRender}
51 |           </QueueAnim>
52 |           <TweenOne
53 |             animation={{ y: '+=30', opacity: 0, type: 'from' }}
54 |             key="copyright"
55 |             {...dataSource.copyrightWrapper}
56 |           >
57 |             <div {...dataSource.copyrightPage}>
58 |               <div {...dataSource.copyright}>
59 |                 {dataSource.copyright.children}
60 |               </div>
61 |             </div>
62 |           </TweenOne>
63 |         </OverPack>
64 |       </div>
65 |     );
66 |   }
67 | }
68 | 
69 | export default Footer;
70 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/Home/Banner1.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'antd';
 3 | import { DownOutlined } from '@ant-design/icons';
 4 | import QueueAnim from 'rc-queue-anim';
 5 | import TweenOne, { TweenOneGroup } from 'rc-tween-one';
 6 | import BannerAnim, { Element } from 'rc-banner-anim';
 7 | import { isImg } from './utils';
 8 | import 'rc-banner-anim/assets/index.css';
 9 | 
10 | const { BgElement } = Element;
11 | class Banner extends React.PureComponent {
12 |   render() {
13 |     const { ...props } = this.props;
14 |     const { dataSource } = props;
15 |     delete props.dataSource;
16 |     delete props.isMobile;
17 |     const childrenToRender = dataSource.BannerAnim.children.map((item, i) => {
18 |       const elem = item.BannerElement;
19 |       const elemClassName = elem.className;
20 |       delete elem.className;
21 |       const { bg, textWrapper, title, content, button } = item;
22 |       return (
23 |         <Element key={i.toString()} {...elem} prefixCls={elemClassName}>
24 |           <BgElement key="bg" {...bg} />
25 |           <QueueAnim
26 |             type={['bottom', 'top']}
27 |             delay={200}
28 |             key="text"
29 |             {...textWrapper}
30 |           >
31 |             <div key="logo" {...title}>
32 |               {typeof title.children === 'string' &&
33 |               title.children.match(isImg) ? (
34 |                 <img src={title.children} width="100%" alt="img" />
35 |               ) : (
36 |                 title.children
37 |               )}
38 |             </div>
39 |             <div key="content" {...content}>
40 |               {content.children}
41 |             </div>
42 |             <Button ghost key="button" {...button}>
43 |               {button.children}
44 |             </Button>
45 |           </QueueAnim>
46 |         </Element>
47 |       );
48 |     });
49 |     return (
50 |       <div {...props} {...dataSource.wrapper}>
51 |         <TweenOneGroup
52 |           key="bannerGroup"
53 |           enter={{ opacity: 0, type: 'from' }}
54 |           leave={{ opacity: 0 }}
55 |           component=""
56 |         >
57 |           <div className="banner1-wrapper" key="wrapper">
58 |             <BannerAnim key="BannerAnim" {...dataSource.BannerAnim}>
59 |               {childrenToRender}
60 |             </BannerAnim>
61 |           </div>
62 |         </TweenOneGroup>
63 |         <TweenOne
64 |           animation={{
65 |             y: '-=20',
66 |             yoyo: true,
67 |             repeat: -1,
68 |             duration: 1000,
69 |           }}
70 |           className="banner1-icon"
71 |           style={{ bottom: 40 }}
72 |           key="icon"
73 |         >
74 |           <DownOutlined />
75 |         </TweenOne>
76 |       </div>
77 |     );
78 |   }
79 | }
80 | 
81 | export default Banner;
82 | 


--------------------------------------------------------------------------------
/src/Home/Content3.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import QueueAnim from 'rc-queue-anim';
 3 | import TweenOne from 'rc-tween-one';
 4 | import { Row, Col } from 'antd';
 5 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 6 | import { getChildrenToRender } from './utils';
 7 | 
 8 | class Content3 extends React.PureComponent {
 9 |   getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
10 | 
11 |   render() {
12 |     const { ...props } = this.props;
13 |     const { dataSource, isMobile } = props;
14 |     delete props.dataSource;
15 |     delete props.isMobile;
16 |     let clearFloatNum = 0;
17 |     const children = dataSource.block.children.map((item, i) => {
18 |       const childObj = item.children;
19 |       const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
20 |       const liAnim = {
21 |         opacity: 0,
22 |         type: 'from',
23 |         ease: 'easeOutQuad',
24 |         delay,
25 |       };
26 |       const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100 };
27 |       clearFloatNum += item.md;
28 |       clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
29 |       return (
30 |         <TweenOne
31 |           component={Col}
32 |           animation={liAnim}
33 |           key={item.name}
34 |           {...item}
35 |           componentProps={{ md: item.md, xs: item.xs }}
36 |           className={
37 |             !clearFloatNum
38 |               ? `${item.className || ''} clear-both`.trim()
39 |               : item.className
40 |           }
41 |         >
42 |           <TweenOne
43 |             animation={{
44 |               x: '-=10',
45 |               opacity: 0,
46 |               type: 'from',
47 |               ease: 'easeOutQuad',
48 |             }}
49 |             key="img"
50 |             {...childObj.icon}
51 |           >
52 |             <img src={childObj.icon.children} width="100%" alt="img" />
53 |           </TweenOne>
54 |           <div {...childObj.textWrapper}>
55 |             <TweenOne
56 |               key="h2"
57 |               animation={childrenAnim}
58 |               component="h2"
59 |               {...childObj.title}
60 |             >
61 |               {childObj.title.children}
62 |             </TweenOne>
63 |             <TweenOne
64 |               key="p"
65 |               animation={{ ...childrenAnim, delay: delay + 200 }}
66 |               component="div"
67 |               {...childObj.content}
68 |             >
69 |               {childObj.content.children}
70 |             </TweenOne>
71 |           </div>
72 |         </TweenOne>
73 |       );
74 |     });
75 |     return (
76 |       <div {...props} {...dataSource.wrapper}>
77 |         <div {...dataSource.page}>
78 |           <div {...dataSource.titleWrapper}>
79 |             {dataSource.titleWrapper.children.map(getChildrenToRender)}
80 |           </div>
81 |           <OverPack {...dataSource.OverPack}>
82 |             <QueueAnim key="u" type="bottom">
83 |               <Row key="row" {...dataSource.block}>
84 |                 {children}
85 |               </Row>
86 |             </QueueAnim>
87 |           </OverPack>
88 |         </div>
89 |       </div>
90 |     );
91 |   }
92 | }
93 | 
94 | export default Content3;
95 | 


--------------------------------------------------------------------------------
/src/Home/less/banner1.less:
--------------------------------------------------------------------------------
  1 | 
  2 | @banner1: banner1;
  3 | .@{banner1} {
  4 |   // 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
  5 |   width: 100%;
  6 |   height: 100vh;
  7 |   position: relative;
  8 |   border-color: #666;
  9 |   background: #fff;
 10 |   &-wrapper, .banner-anim {
 11 |     height: 100%;
 12 |   }
 13 |   & .queue-anim-leaving {
 14 |     position: relative !important;
 15 |   }
 16 |   .banner-user-elem {
 17 |     height: 100%;
 18 |     color: #fff;
 19 |     position: relative;
 20 |     overflow: hidden;
 21 |   }
 22 |   .bg0 {
 23 |     background: url("https://zos.alipayobjects.com/rmsportal/hzPBTkqtFpLlWCi.jpg") center;
 24 |   }
 25 |   .bg1 {
 26 |     background: url("https://zos.alipayobjects.com/rmsportal/xHxWkcvaIcuAdQl.jpg") center;
 27 |   }
 28 |   .bg {
 29 |     width: 100%;
 30 |     height: 100%;
 31 |     position: absolute;
 32 |     top: 0;
 33 |     left: 0;
 34 |     overflow: hidden;
 35 |     background-size: cover;
 36 |   }
 37 |   .banner-user-elem .banner-user-title {
 38 |     font-size: 22px;
 39 |     top: 40%;
 40 |   }
 41 |   .banner-user-elem .banner-user-text {
 42 |     top: 40%;
 43 |   }
 44 |   & &-text-wrapper {
 45 |     display: block;
 46 |     position: relative;
 47 |     top: 20%;
 48 |     left: 0;
 49 |     right: 0;
 50 |     margin: auto;
 51 |     font-size: 14px;
 52 |     color: @template-text-color-light;
 53 |     width: 550px;
 54 |     text-align: center;
 55 |   }
 56 |   & &-title {
 57 |     width: 350px;
 58 |     left: 30px;
 59 |     margin: auto;
 60 |     display: inline-block;
 61 |     font-size: 40px;
 62 |     position: relative;
 63 |   }
 64 |   & &-content {
 65 |     margin-bottom: 20px;
 66 |     word-wrap: break-word;
 67 |   }
 68 |   & &-button {
 69 |     border: 1px solid #fff;
 70 |     color: #fff;
 71 |     background: transparent;
 72 |     box-shadow: 0 0 0 transparent;
 73 |     transition: background .45s @ease-out, box-shadow .45s @ease-out;
 74 |     line-height: 36px;
 75 |     font-size: 16px;
 76 |     height: 36px;
 77 |     & span {
 78 |       text-shadow: 0 0 0 rgba(0, 0, 0, 0);
 79 |       transition: text-shadow .45s @ease-out;
 80 |     }
 81 |     &:hover {
 82 |       color: #fff;
 83 |       border-color: #fff;
 84 |       background: rgba(255, 255, 255, 0.1);
 85 |       box-shadow: 0 0 10px rgba(50, 250, 255, 0.75);
 86 |       & span {
 87 |         text-shadow: 1px 1px 3px rgba(0, 0, 0, .35);
 88 |       }
 89 |     }
 90 | 
 91 |     &.queue-anim-leaving {
 92 |       width: auto;
 93 |     }
 94 |   }
 95 |   & &-icon {
 96 |     bottom: 20px;
 97 |     font-size: 24px;
 98 |     position: absolute;
 99 |     z-index: 10;
100 |     left: 50%;
101 |     margin-left: -12px;
102 |     color: @template-text-color-light;
103 |   }
104 | }
105 | 
106 | .banner-anim-thumb-default span {
107 |   width: 10px;
108 |   height: 10px;
109 |   border-radius: 10px;
110 |   background: rgba(255, 255, 255, .5);
111 | }
112 | 
113 | @media screen and (max-width: 767px) {
114 |   .@{banner1} {
115 |     & &-text-wrapper {
116 |       width: 90%;
117 |       .@{banner1}-title {
118 |         width: 90%;
119 |         left: 0;
120 |       }
121 |     }
122 |     .bg {
123 |       background-attachment: inherit;
124 |     }
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/src/Home/index.jsx:
--------------------------------------------------------------------------------
  1 | /* eslint no-undef: 0 */
  2 | /* eslint arrow-parens: 0 */
  3 | import React from 'react';
  4 | import { enquireScreen } from 'enquire-js';
  5 | 
  6 | import Nav3 from './Nav3';
  7 | import Banner1 from './Banner1';
  8 | import Content0 from './Content0';
  9 | import Content5 from './Content5';
 10 | import Content3 from './Content3';
 11 | import Feature5 from './Feature5';
 12 | import Footer1 from './Footer1';
 13 | 
 14 | import {
 15 |   Nav30DataSource,
 16 |   Banner10DataSource,
 17 |   Content00DataSource,
 18 |   Content50DataSource,
 19 |   Content30DataSource,
 20 |   Feature50DataSource,
 21 |   Footer10DataSource,
 22 | } from './data.source';
 23 | import './less/antMotionStyle.less';
 24 | 
 25 | let isMobile;
 26 | enquireScreen((b) => {
 27 |   isMobile = b;
 28 | });
 29 | 
 30 | const { location } = window;
 31 | 
 32 | export default class Home extends React.Component {
 33 |   constructor(props) {
 34 |     super(props);
 35 |     this.state = {
 36 |       isMobile,
 37 |       show: !location.port, // 如果不是 dva 2.0 请删除
 38 |     };
 39 |   }
 40 | 
 41 |   componentDidMount() {
 42 |     // 适配手机屏幕;
 43 |     enquireScreen((b) => {
 44 |       this.setState({ isMobile: !!b });
 45 |     });
 46 |     // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
 47 |     /* 如果不是 dva 2.0 请删除 start */
 48 |     if (location.port) {
 49 |       // 样式 build 时间在 200-300ms 之间;
 50 |       setTimeout(() => {
 51 |         this.setState({
 52 |           show: true,
 53 |         });
 54 |       }, 500);
 55 |     }
 56 |     /* 如果不是 dva 2.0 请删除 end */
 57 |   }
 58 | 
 59 |   render() {
 60 |     const children = [
 61 |       <Nav3
 62 |         id="Nav3_0"
 63 |         key="Nav3_0"
 64 |         dataSource={Nav30DataSource}
 65 |         isMobile={this.state.isMobile}
 66 |       />,
 67 |       <Banner1
 68 |         id="Banner1_0"
 69 |         key="Banner1_0"
 70 |         dataSource={Banner10DataSource}
 71 |         isMobile={this.state.isMobile}
 72 |       />,
 73 |       <Content0
 74 |         id="Content0_0"
 75 |         key="Content0_0"
 76 |         dataSource={Content00DataSource}
 77 |         isMobile={this.state.isMobile}
 78 |       />,
 79 |       <Content5
 80 |         id="Content5_0"
 81 |         key="Content5_0"
 82 |         dataSource={Content50DataSource}
 83 |         isMobile={this.state.isMobile}
 84 |       />,
 85 |       <Content3
 86 |         id="Content3_0"
 87 |         key="Content3_0"
 88 |         dataSource={Content30DataSource}
 89 |         isMobile={this.state.isMobile}
 90 |       />,
 91 |       <Feature5
 92 |         id="Feature5_0"
 93 |         key="Feature5_0"
 94 |         dataSource={Feature50DataSource}
 95 |         isMobile={this.state.isMobile}
 96 |       />,
 97 |       <Footer1
 98 |         id="Footer1_0"
 99 |         key="Footer1_0"
100 |         dataSource={Footer10DataSource}
101 |         isMobile={this.state.isMobile}
102 |       />,
103 |     ];
104 |     return (
105 |       <div
106 |         className="templates-wrapper"
107 |         ref={(d) => {
108 |           this.dom = d;
109 |         }}
110 |       >
111 |         {/* 如果不是 dva 2.0 替换成 {children} start */}
112 |         {this.state.show && children}
113 |         {/* 如果不是 dva 2.0 替换成 {children} end */}
114 |       </div>
115 |     );
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/Home/Feature5.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import TweenOne from 'rc-tween-one';
  3 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
  4 | import { Tabs, Row, Col } from 'antd';
  5 | import { Icon } from '@ant-design/compatible';
  6 | import { getChildrenToRender } from './utils';
  7 | 
  8 | const TabPane = Tabs.TabPane;
  9 | 
 10 | class Content7 extends React.Component {
 11 |   constructor(props) {
 12 |     super(props);
 13 |     this.state = {
 14 |       current: 1,
 15 |     };
 16 |   }
 17 | 
 18 |   onChange = (key) => {
 19 |     this.setState({ current: parseFloat(key) });
 20 |   };
 21 | 
 22 |   getBlockChildren = (item, i) => {
 23 |     const { tag, content } = item;
 24 |     const { text, img } = content;
 25 |     const textChildren = text.children;
 26 |     const { icon } = tag;
 27 |     const iconChildren = icon.children;
 28 |     const tagText = tag.text;
 29 |     return (
 30 |       <TabPane
 31 |         key={i + 1}
 32 |         tab={
 33 |           <div className={tag.className}>
 34 |             <Icon type={iconChildren} className={icon.className} />
 35 |             <div {...tagText}>{tagText.children}</div>
 36 |           </div>
 37 |         }
 38 |         className={item.className}
 39 |       >
 40 |         <TweenOne.TweenOneGroup
 41 |           enter={{
 42 |             y: 30,
 43 |             delay: 300,
 44 |             opacity: 0,
 45 |             type: 'from',
 46 |             ease: 'easeOutQuad',
 47 |           }}
 48 |           leave={null}
 49 |           component=""
 50 |         >
 51 |           {this.state.current === i + 1 && (
 52 |             <Row
 53 |               key="content"
 54 |               className={content.className}
 55 |               gutter={content.gutter}
 56 |             >
 57 |               <Col className={text.className} xs={text.xs} md={text.md}>
 58 |                 {textChildren}
 59 |               </Col>
 60 |               <Col className={img.className} xs={img.xs} md={img.md}>
 61 |                 <img src={img.children} width="100%" alt="img" />
 62 |               </Col>
 63 |             </Row>
 64 |           )}
 65 |         </TweenOne.TweenOneGroup>
 66 |       </TabPane>
 67 |     );
 68 |   };
 69 | 
 70 |   render() {
 71 |     const { ...props } = this.props;
 72 |     const { dataSource } = props;
 73 |     delete props.dataSource;
 74 |     delete props.isMobile;
 75 |     const tabsChildren = dataSource.block.children.map(this.getBlockChildren);
 76 |     return (
 77 |       <div {...props} {...dataSource.wrapper}>
 78 |         <div {...dataSource.page}>
 79 |           <div {...dataSource.titleWrapper}>
 80 |             {dataSource.titleWrapper.children.map(getChildrenToRender)}
 81 |           </div>
 82 | 
 83 |           <OverPack {...dataSource.OverPack}>
 84 |             <TweenOne.TweenOneGroup
 85 |               key="tabs"
 86 |               enter={{
 87 |                 y: 30,
 88 |                 opacity: 0,
 89 |                 delay: 200,
 90 |                 type: 'from',
 91 |               }}
 92 |               leave={{ y: 30, opacity: 0 }}
 93 |               {...dataSource.tabsWrapper}
 94 |             >
 95 |               <Tabs
 96 |                 key="tabs"
 97 |                 onChange={this.onChange}
 98 |                 activeKey={`${this.state.current}`}
 99 |                 {...dataSource.block}
100 |               >
101 |                 {tabsChildren}
102 |               </Tabs>
103 |             </TweenOne.TweenOneGroup>
104 |           </OverPack>
105 |         </div>
106 |       </div>
107 |     );
108 |   }
109 | }
110 | 
111 | export default Content7;
112 | 


--------------------------------------------------------------------------------
/src/Home/less/nav3.less:
--------------------------------------------------------------------------------
  1 | @header3: header3;
  2 | 
  3 | .@{header3} {
  4 |   background: #fff;
  5 |   width: 100%;
  6 |   z-index: 1;
  7 |   box-shadow: 0 4px 6px fade(#000, 5);
  8 |   position: relative;
  9 |   top: 0;
 10 | 
 11 |   .home-page {
 12 |     padding: 0 24px;
 13 |   }
 14 | 
 15 |   &-logo {
 16 |     display: inline-block;
 17 |     position: relative;
 18 |     width: 150px;
 19 |     line-height: 64px;
 20 | 
 21 |     & img {
 22 |       vertical-align: middle;
 23 |       display: inline-block;
 24 |     }
 25 | 
 26 |     & a {
 27 |       display: block;
 28 |     }
 29 |   }
 30 | 
 31 |   &-menu {
 32 |     float: right;
 33 |     .ant-menu-horizontal {
 34 |       border-bottom: none;
 35 |     }
 36 |     .ant-menu {
 37 |       line-height: 62px;
 38 |       height: 64px;
 39 |       background: transparent;
 40 | 
 41 |       a {
 42 |         display: block;
 43 |       }
 44 |     }
 45 |   }
 46 | 
 47 |   &-item {
 48 |     &-block {
 49 |       padding: 0 8px;
 50 | 
 51 |       >* {
 52 |         display: inline-block;
 53 |       }
 54 |     }
 55 |   }
 56 | 
 57 |   &-item,
 58 |   &-item-child,
 59 |   &-menu {
 60 | 
 61 |     .ant-menu-sub .ant-menu-item,
 62 |     .ant-menu-inline .ant-menu-item {
 63 |       height: auto;
 64 |       line-height: 1.5;
 65 |     }
 66 | 
 67 |     .item {
 68 |       &-sub-item {
 69 |         display: block;
 70 |         padding: 8px 24px;
 71 |       }
 72 | 
 73 |       &-image {
 74 |         float: left;
 75 |         margin-right: 16px;
 76 |         margin-top: 4px;
 77 |         position: relative;
 78 |         z-index: 1;
 79 |       }
 80 | 
 81 |       &-title {
 82 |         font-size: 14px;
 83 |         color: @text-color;
 84 |         margin-left: 46px;
 85 |       }
 86 | 
 87 |       &-content {
 88 |         font-size: 12px;
 89 |         color: fade(@text-color, 75);
 90 |         margin-left: 46px;
 91 |       }
 92 |     }
 93 |   }
 94 | }
 95 | 
 96 | @media screen and (max-width: 767px) {
 97 |   .@{header3} {
 98 |     &-logo {
 99 |       z-index: 101;
100 |     }
101 | 
102 |     &.home-page-wrapper .home-page {
103 |       padding: 0 24px;
104 |     }
105 | 
106 |     &-menu {
107 |       height: auto;
108 |       float: inherit;
109 |       position: relative;
110 |       left: -24px;
111 |       width: ~"calc(100% + 48px)";
112 |       opacity: 0;
113 |       transition: opacity .3s @ease-in-out;
114 |       background: #fff;
115 | 
116 |       & li {
117 |         padding: 0 24px;
118 | 
119 |         &.ant-menu-submenu {
120 |           padding: 0;
121 |         }
122 |       }
123 |       .item {
124 |         &-sub-item {
125 |           padding: 8px 0;
126 |         }
127 |       }
128 |     }
129 | 
130 |     &-mobile-menu {
131 |       width: 16px;
132 |       height: 14px;
133 |       cursor: pointer;
134 |       position: absolute;
135 |       top: 24px;
136 |       right: 24px;
137 |       z-index: 100;
138 | 
139 |       em {
140 |         display: block;
141 |         width: 100%;
142 |         height: 2px;
143 |         background: @template-nav-bg-color;
144 |         margin-top: 4px;
145 |         transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
146 |       }
147 | 
148 |       :first-child {
149 |         margin-top: 0;
150 |       }
151 |     }
152 | 
153 |     .ant-menu {
154 |       height: auto;
155 |       overflow: hidden;
156 | 
157 |       .ant-menu-item-selected {
158 |         border: none;
159 |       }
160 |     }
161 | 
162 |     & .open {
163 |       height: auto;
164 | 
165 |       .@{header3}-mobile-menu {
166 |         em {
167 |           &:nth-child(1) {
168 |             transform: translateY(6px) rotate(45deg);
169 |           }
170 | 
171 |           &:nth-child(2) {
172 |             opacity: 0;
173 |           }
174 | 
175 |           &:nth-child(3) {
176 |             transform: translateY(-6px) rotate(-45deg);
177 |           }
178 |         }
179 |       }
180 | 
181 |       >.@{header3}-menu {
182 |         opacity: 1;
183 |         pointer-events: auto;
184 |       }
185 |     }
186 |     &-item-block {
187 |       height: 40px;
188 |       line-height: 40px;
189 |     }
190 |   }
191 | }
192 | 


--------------------------------------------------------------------------------
/src/Home/Nav3.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import TweenOne from 'rc-tween-one';
  3 | import { Menu } from 'antd';
  4 | import { getChildrenToRender } from './utils';
  5 | 
  6 | const { Item, SubMenu } = Menu;
  7 | 
  8 | class Header3 extends React.Component {
  9 |   constructor(props) {
 10 |     super(props);
 11 |     this.state = {
 12 |       phoneOpen: undefined,
 13 |     };
 14 |   }
 15 | 
 16 |   phoneClick = () => {
 17 |     const phoneOpen = !this.state.phoneOpen;
 18 |     this.setState({
 19 |       phoneOpen,
 20 |     });
 21 |   };
 22 | 
 23 |   render() {
 24 |     const { dataSource, isMobile, ...props } = this.props;
 25 |     const { phoneOpen } = this.state;
 26 |     const navData = dataSource.Menu.children;
 27 |     const navChildren = navData.map((item) => {
 28 |       const { children: a, subItem, ...itemProps } = item;
 29 |       if (subItem) {
 30 |         return (
 31 |           <SubMenu
 32 |             key={item.name}
 33 |             {...itemProps}
 34 |             title={
 35 |               <div
 36 |                 {...a}
 37 |                 className={`header3-item-block ${a.className}`.trim()}
 38 |               >
 39 |                 {a.children.map(getChildrenToRender)}
 40 |               </div>
 41 |             }
 42 |             popupClassName="header3-item-child"
 43 |           >
 44 |             {subItem.map(($item, ii) => {
 45 |               const { children: childItem } = $item;
 46 |               const child = childItem.href ? (
 47 |                 <a {...childItem}>
 48 |                   {childItem.children.map(getChildrenToRender)}
 49 |                 </a>
 50 |               ) : (
 51 |                 <div {...childItem}>
 52 |                   {childItem.children.map(getChildrenToRender)}
 53 |                 </div>
 54 |               );
 55 |               return (
 56 |                 <Item key={$item.name || ii.toString()} {...$item}>
 57 |                   {child}
 58 |                 </Item>
 59 |               );
 60 |             })}
 61 |           </SubMenu>
 62 |         );
 63 |       }
 64 |       return (
 65 |         <Item key={item.name} {...itemProps}>
 66 |           <a {...a} className={`header3-item-block ${a.className}`.trim()}>
 67 |             {a.children.map(getChildrenToRender)}
 68 |           </a>
 69 |         </Item>
 70 |       );
 71 |     });
 72 |     const moment = phoneOpen === undefined ? 300 : null;
 73 |     return (
 74 |       <TweenOne
 75 |         component="header"
 76 |         animation={{ opacity: 0, type: 'from' }}
 77 |         {...dataSource.wrapper}
 78 |         {...props}
 79 |       >
 80 |         <div
 81 |           {...dataSource.page}
 82 |           className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
 83 |         >
 84 |           <TweenOne
 85 |             animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
 86 |             {...dataSource.logo}
 87 |           >
 88 |             <img width="100%" src={dataSource.logo.children} alt="img" />
 89 |           </TweenOne>
 90 |           {isMobile && (
 91 |             <div
 92 |               {...dataSource.mobileMenu}
 93 |               onClick={() => {
 94 |                 this.phoneClick();
 95 |               }}
 96 |             >
 97 |               <em />
 98 |               <em />
 99 |               <em />
100 |             </div>
101 |           )}
102 |           <TweenOne
103 |             {...dataSource.Menu}
104 |             animation={
105 |               isMobile
106 |                 ? {
107 |                     x: 0,
108 |                     height: 0,
109 |                     duration: 300,
110 |                     onComplete: (e) => {
111 |                       if (this.state.phoneOpen) {
112 |                         e.target.style.height = 'auto';
113 |                       }
114 |                     },
115 |                     ease: 'easeInOutQuad',
116 |                   }
117 |                 : null
118 |             }
119 |             moment={moment}
120 |             reverse={!!phoneOpen}
121 |           >
122 |             <Menu
123 |               mode={isMobile ? 'inline' : 'horizontal'}
124 |               defaultSelectedKeys={['sub0']}
125 |               theme="light"
126 |             >
127 |               {navChildren}
128 |             </Menu>
129 |           </TweenOne>
130 |         </div>
131 |       </TweenOne>
132 |     );
133 |   }
134 | }
135 | 
136 | export default Header3;
137 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/Home/data.source.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | export const Nav30DataSource = {
  3 |   wrapper: { className: 'header3 home-page-wrapper' },
  4 |   page: { className: 'home-page' },
  5 |   logo: {
  6 |     className: 'header3-logo',
  7 |     children:
  8 |       'https://gw.alipayobjects.com/zos/basement_prod/b30cdc2a-d91c-4c78-be9c-7c63b308d4b3.svg',
  9 |   },
 10 |   Menu: {
 11 |     className: 'header3-menu',
 12 |     children: [
 13 |       {
 14 |         name: 'item0',
 15 |         className: 'header3-item',
 16 |         children: {
 17 |           href: '#',
 18 |           children: [
 19 |             {
 20 |               children: (
 21 |                 <span>
 22 |                   <p>网站首页</p>
 23 |                 </span>
 24 |               ),
 25 |               name: 'text',
 26 |             },
 27 |           ],
 28 |         },
 29 |       },
 30 |       {
 31 |         name: 'item1',
 32 |         className: 'header3-item',
 33 |         children: {
 34 |           href: '#',
 35 |           children: [
 36 |             {
 37 |               children: (
 38 |                 <span>
 39 |                   <p>公司简介</p>
 40 |                 </span>
 41 |               ),
 42 |               name: 'text',
 43 |             },
 44 |           ],
 45 |         },
 46 |       },
 47 |       {
 48 |         name: 'item2',
 49 |         className: 'header3-item',
 50 |         children: {
 51 |           href: '#',
 52 |           children: [
 53 |             {
 54 |               children: (
 55 |                 <span>
 56 |                   <p>回收项目</p>
 57 |                 </span>
 58 |               ),
 59 |               name: 'text',
 60 |             },
 61 |           ],
 62 |         },
 63 |       },
 64 |       {
 65 |         name: 'item3',
 66 |         className: 'header3-item',
 67 |         children: {
 68 |           href: '#',
 69 |           children: [
 70 |             {
 71 |               children: (
 72 |                 <span>
 73 |                   <p>成功案例</p>
 74 |                 </span>
 75 |               ),
 76 |               name: 'text',
 77 |             },
 78 |           ],
 79 |         },
 80 |       },
 81 |       {
 82 |         name: 'item4',
 83 |         className: 'header3-item',
 84 |         children: {
 85 |           href: '#',
 86 |           children: [
 87 |             {
 88 |               children: (
 89 |                 <span>
 90 |                   <span>
 91 |                     <span>
 92 |                       <span>
 93 |                         <span>
 94 |                           <p>新闻咨询</p>
 95 |                         </span>
 96 |                       </span>
 97 |                     </span>
 98 |                   </span>
 99 |                 </span>
100 |               ),
101 |               name: 'text',
102 |             },
103 |           ],
104 |         },
105 |       },
106 |       {
107 |         name: 'item5',
108 |         className: 'header3-item',
109 |         children: {
110 |           href: '#',
111 |           children: [
112 |             {
113 |               children: (
114 |                 <span>
115 |                   <span>
116 |                     <span>
117 |                       <p>在线留言</p>
118 |                     </span>
119 |                   </span>
120 |                 </span>
121 |               ),
122 |               name: 'text',
123 |             },
124 |           ],
125 |         },
126 |       },
127 |       {
128 |         name: 'item6',
129 |         className: 'header3-item',
130 |         children: {
131 |           href: '#',
132 |           children: [
133 |             {
134 |               children: (
135 |                 <span>
136 |                   <span>
137 |                     <span>
138 |                       <p>联系我们</p>
139 |                     </span>
140 |                   </span>
141 |                 </span>
142 |               ),
143 |               name: 'text',
144 |             },
145 |           ],
146 |         },
147 |       },
148 |     ],
149 |   },
150 |   mobileMenu: { className: 'header3-mobile-menu' },
151 | };
152 | export const Banner10DataSource = {
153 |   wrapper: { className: 'banner1' },
154 |   BannerAnim: {
155 |     children: [
156 |       {
157 |         name: 'elem0',
158 |         BannerElement: { className: 'banner-user-elem' },
159 |         textWrapper: { className: 'banner1-text-wrapper' },
160 |         bg: { className: 'bg bg0' },
161 |         title: {
162 |           className: 'banner1-title',
163 |           children:
164 |             'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
165 |         },
166 |         content: {
167 |           className: 'banner1-content',
168 |           children: '一个高效的页面动画解决方案',
169 |         },
170 |         button: { className: 'banner1-button', children: 'Learn More' },
171 |       },
172 |       {
173 |         name: 'elem1',
174 |         BannerElement: { className: 'banner-user-elem' },
175 |         textWrapper: { className: 'banner1-text-wrapper' },
176 |         bg: { className: 'bg bg1' },
177 |         title: {
178 |           className: 'banner1-title',
179 |           children:
180 |             'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
181 |         },
182 |         content: {
183 |           className: 'banner1-content',
184 |           children: '一个高效的页面动画解决方案',
185 |         },
186 |         button: { className: 'banner1-button', children: 'Learn More' },
187 |       },
188 |       {
189 |         name: 'elem2',
190 |         BannerElement: { className: 'banner-user-elem' },
191 |         textWrapper: { className: 'banner1-text-wrapper' },
192 |         bg: { className: 'bg bg1' },
193 |         title: {
194 |           className: 'banner1-title',
195 |           children:
196 |             'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
197 |         },
198 |         content: {
199 |           className: 'banner1-content',
200 |           children: '一个高效的页面动画解决方案',
201 |         },
202 |         button: { className: 'banner1-button', children: 'Learn More' },
203 |       },
204 |     ],
205 |   },
206 | };
207 | export const Content00DataSource = {
208 |   wrapper: { className: 'home-page-wrapper content0-wrapper' },
209 |   page: { className: 'home-page content0' },
210 |   OverPack: { playScale: 0.3, className: '' },
211 |   titleWrapper: {
212 |     className: 'title-wrapper',
213 |     children: [
214 |       {
215 |         name: 'title',
216 |         children: (
217 |           <span>
218 |             <p>回收项目</p>
219 |           </span>
220 |         ),
221 |       },
222 |     ],
223 |   },
224 |   childWrapper: {
225 |     className: 'content0-block-wrapper k9h76g7v2q-editor_css',
226 |     children: [
227 |       {
228 |         name: 'block0',
229 |         className: 'content0-block',
230 |         md: 8,
231 |         xs: 24,
232 |         children: {
233 |           className: 'content0-block-item',
234 |           children: [
235 |             {
236 |               name: 'image',
237 |               className: 'content0-block-icon',
238 |               children:
239 |                 'https://zos.alipayobjects.com/rmsportal/WBnVOjtIlGWbzyQivuyq.png',
240 |             },
241 |             {
242 |               name: 'title',
243 |               className: 'content0-block-title',
244 |               children: (
245 |                 <span>
246 |                   <span>
247 |                     <span>
248 |                       <p>电梯回收</p>
249 |                     </span>
250 |                   </span>
251 |                 </span>
252 |               ),
253 |             },
254 |             {
255 |               name: 'content',
256 |               children: (
257 |                 <span>
258 |                   <p>Elevator recovery</p>
259 |                 </span>
260 |               ),
261 |             },
262 |           ],
263 |         },
264 |       },
265 |       {
266 |         name: 'block1',
267 |         className: 'content0-block',
268 |         md: 8,
269 |         xs: 24,
270 |         children: {
271 |           className: 'content0-block-item',
272 |           children: [
273 |             {
274 |               name: 'image',
275 |               className: 'content0-block-icon',
276 |               children:
277 |                 'https://zos.alipayobjects.com/rmsportal/YPMsLQuCEXtuEkmXTTdk.png',
278 |             },
279 |             {
280 |               name: 'title',
281 |               className: 'content0-block-title',
282 |               children: (
283 |                 <span>
284 |                   <p>铁铝铜回收</p>
285 |                 </span>
286 |               ),
287 |             },
288 |             {
289 |               name: 'content',
290 |               children: (
291 |                 <span>
292 |                   <span>
293 |                     <span>
294 |                       <p>Iron copper recovery</p>
295 |                     </span>
296 |                   </span>
297 |                 </span>
298 |               ),
299 |             },
300 |           ],
301 |         },
302 |       },
303 |       {
304 |         name: 'block2',
305 |         className: 'content0-block',
306 |         md: 8,
307 |         xs: 24,
308 |         children: {
309 |           className: 'content0-block-item',
310 |           children: [
311 |             {
312 |               name: 'image',
313 |               className: 'content0-block-icon',
314 |               children:
315 |                 'https://zos.alipayobjects.com/rmsportal/EkXWVvAaFJKCzhMmQYiX.png',
316 |             },
317 |             {
318 |               name: 'title',
319 |               className: 'content0-block-title',
320 |               children: (
321 |                 <span>
322 |                   <p>不锈钢回收</p>
323 |                 </span>
324 |               ),
325 |             },
326 |             {
327 |               name: 'content',
328 |               children: (
329 |                 <span>
330 |                   <p>Stainless steel recovery</p>
331 |                 </span>
332 |               ),
333 |             },
334 |           ],
335 |         },
336 |       },
337 |       {
338 |         name: 'block3',
339 |         className: 'content0-block',
340 |         md: 8,
341 |         xs: 24,
342 |         children: {
343 |           className: 'content0-block-item',
344 |           children: [
345 |             {
346 |               name: 'image',
347 |               className: 'content0-block-icon',
348 |               children:
349 |                 'https://zos.alipayobjects.com/rmsportal/EkXWVvAaFJKCzhMmQYiX.png',
350 |             },
351 |             {
352 |               name: 'title',
353 |               className: 'content0-block-title',
354 |               children: (
355 |                 <span>
356 |                   <span>
357 |                     <p>工程拆除</p>
358 |                   </span>
359 |                 </span>
360 |               ),
361 |             },
362 |             {
363 |               name: 'content',
364 |               children: (
365 |                 <span>
366 |                   <p>Engineering dismantling</p>
367 |                 </span>
368 |               ),
369 |             },
370 |           ],
371 |         },
372 |       },
373 |       {
374 |         name: 'block4',
375 |         className: 'content0-block',
376 |         md: 8,
377 |         xs: 24,
378 |         children: {
379 |           className: 'content0-block-item',
380 |           children: [
381 |             {
382 |               name: 'image',
383 |               className: 'content0-block-icon',
384 |               children:
385 |                 'https://zos.alipayobjects.com/rmsportal/EkXWVvAaFJKCzhMmQYiX.png',
386 |             },
387 |             {
388 |               name: 'title',
389 |               className: 'content0-block-title',
390 |               children: (
391 |                 <span>
392 |                   <span>
393 |                     <p>中央空调回收</p>
394 |                   </span>
395 |                 </span>
396 |               ),
397 |             },
398 |             {
399 |               name: 'content',
400 |               children: (
401 |                 <span>
402 |                   <p>Air conditioning recovery</p>
403 |                 </span>
404 |               ),
405 |             },
406 |           ],
407 |         },
408 |       },
409 |     ],
410 |   },
411 | };
412 | export const Content50DataSource = {
413 |   wrapper: { className: 'home-page-wrapper content5-wrapper' },
414 |   page: { className: 'home-page content5' },
415 |   OverPack: { playScale: 0.3, className: '' },
416 |   titleWrapper: {
417 |     className: 'title-wrapper',
418 |     children: [
419 |       {
420 |         name: 'title',
421 |         children: (
422 |           <span>
423 |             <p>成功案例</p>
424 |           </span>
425 |         ),
426 |         className: 'title-h1',
427 |       },
428 |     ],
429 |   },
430 |   block: {
431 |     className: 'content5-img-wrapper',
432 |     gutter: 16,
433 |     children: [
434 |       {
435 |         name: 'block0',
436 |         className: 'block',
437 |         md: 6,
438 |         xs: 24,
439 |         children: {
440 |           wrapper: { className: 'content5-block-content' },
441 |           img: {
442 |             children:
443 |               'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
444 |           },
445 |           content: { children: 'Ant Design' },
446 |         },
447 |       },
448 |       {
449 |         name: 'block1',
450 |         className: 'block',
451 |         md: 6,
452 |         xs: 24,
453 |         children: {
454 |           wrapper: { className: 'content5-block-content' },
455 |           img: {
456 |             children:
457 |               'https://zos.alipayobjects.com/rmsportal/faKjZtrmIbwJvVR.svg',
458 |           },
459 |           content: { children: 'Ant Motion' },
460 |         },
461 |       },
462 |       {
463 |         name: 'block2',
464 |         className: 'block',
465 |         md: 6,
466 |         xs: 24,
467 |         children: {
468 |           wrapper: { className: 'content5-block-content' },
469 |           img: {
470 |             children:
471 |               'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
472 |           },
473 |           content: { children: 'Ant Design' },
474 |         },
475 |       },
476 |       {
477 |         name: 'block3',
478 |         className: 'block',
479 |         md: 6,
480 |         xs: 24,
481 |         children: {
482 |           wrapper: { className: 'content5-block-content' },
483 |           img: {
484 |             children:
485 |               'https://zos.alipayobjects.com/rmsportal/faKjZtrmIbwJvVR.svg',
486 |           },
487 |           content: { children: 'Ant Motion' },
488 |         },
489 |       },
490 |       {
491 |         name: 'block4',
492 |         className: 'block',
493 |         md: 6,
494 |         xs: 24,
495 |         children: {
496 |           wrapper: { className: 'content5-block-content' },
497 |           img: {
498 |             children:
499 |               'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
500 |           },
501 |           content: { children: 'Ant Design' },
502 |         },
503 |       },
504 |       {
505 |         name: 'block5',
506 |         className: 'block',
507 |         md: 6,
508 |         xs: 24,
509 |         children: {
510 |           wrapper: { className: 'content5-block-content' },
511 |           img: {
512 |             children:
513 |               'https://zos.alipayobjects.com/rmsportal/faKjZtrmIbwJvVR.svg',
514 |           },
515 |           content: { children: 'Ant Motion' },
516 |         },
517 |       },
518 |       {
519 |         name: 'block6',
520 |         className: 'block',
521 |         md: 6,
522 |         xs: 24,
523 |         children: {
524 |           wrapper: { className: 'content5-block-content' },
525 |           img: {
526 |             children:
527 |               'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
528 |           },
529 |           content: { children: 'Ant Design' },
530 |         },
531 |       },
532 |       {
533 |         name: 'block7',
534 |         className: 'block',
535 |         md: 6,
536 |         xs: 24,
537 |         children: {
538 |           wrapper: { className: 'content5-block-content' },
539 |           img: {
540 |             children:
541 |               'https://zos.alipayobjects.com/rmsportal/faKjZtrmIbwJvVR.svg',
542 |           },
543 |           content: { children: 'Ant Motion' },
544 |         },
545 |       },
546 |     ],
547 |   },
548 | };
549 | export const Content30DataSource = {
550 |   wrapper: { className: 'home-page-wrapper content3-wrapper' },
551 |   page: { className: 'home-page content3' },
552 |   OverPack: { playScale: 0.3 },
553 |   titleWrapper: {
554 |     className: 'title-wrapper',
555 |     children: [
556 |       {
557 |         name: 'title',
558 |         children: (
559 |           <span>
560 |             <p>公司简介</p>
561 |           </span>
562 |         ),
563 |         className: 'title-h1',
564 |       },
565 |       {
566 |         name: 'content',
567 |         className: 'title-content',
568 |         children: (
569 |           <span>
570 |             <span>
571 |               <span>
572 |                 <h2>苏州子浩物资回收有限公司</h2>
573 |               </span>
574 |             </span>
575 |           </span>
576 |         ),
577 |       },
578 |     ],
579 |   },
580 |   block: {
581 |     className: 'content3-block-wrapper',
582 |     children: [
583 |       {
584 |         name: 'block0',
585 |         className: 'content3-block',
586 |         md: 12,
587 |         xs: 24,
588 |         children: {
589 |           icon: {
590 |             className: 'content3-icon',
591 |             children:
592 |               'https://zos.alipayobjects.com/rmsportal/ScHBSdwpTkAHZkJ.png',
593 |           },
594 |           textWrapper: { className: 'content3-text' },
595 |           title: {
596 |             className: 'content3-title',
597 |             children: (
598 |               <span>
599 |                 <span>
600 |                   <span>
601 |                     <p>回收项目</p>
602 |                   </span>
603 |                 </span>
604 |               </span>
605 |             ),
606 |           },
607 |           content: {
608 |             className: 'content3-content',
609 |             children: (
610 |               <span>
611 |                 <p>
612 |                   电梯回收，中央空调回收，废旧物资回收，机械设备回收，厨房、宾馆设备等。
613 |                 </p>
614 |               </span>
615 |             ),
616 |           },
617 |         },
618 |       },
619 |       {
620 |         name: 'block1',
621 |         className: 'content3-block',
622 |         md: 12,
623 |         xs: 24,
624 |         children: {
625 |           icon: {
626 |             className: 'content3-icon',
627 |             children:
628 |               'https://zos.alipayobjects.com/rmsportal/NKBELAOuuKbofDD.png',
629 |           },
630 |           textWrapper: { className: 'content3-text' },
631 |           title: {
632 |             className: 'content3-title',
633 |             children: (
634 |               <span>
635 |                 <p>企业精神</p>
636 |               </span>
637 |             ),
638 |           },
639 |           content: {
640 |             className: 'content3-content',
641 |             children: (
642 |               <span>
643 |                 <p>开拓进取、锐意创新、刻意求真、崇尚完美。</p>
644 |               </span>
645 |             ),
646 |           },
647 |         },
648 |       },
649 |       {
650 |         name: 'block2',
651 |         className: 'content3-block',
652 |         md: 12,
653 |         xs: 24,
654 |         children: {
655 |           icon: {
656 |             className: 'content3-icon',
657 |             children:
658 |               'https://zos.alipayobjects.com/rmsportal/xMSBjgxBhKfyMWX.png',
659 |           },
660 |           textWrapper: { className: 'content3-text' },
661 |           title: {
662 |             className: 'content3-title',
663 |             children: (
664 |               <span>
665 |                 <p>服务宗旨</p>
666 |               </span>
667 |             ),
668 |           },
669 |           content: {
670 |             className: 'content3-content',
671 |             children: (
672 |               <span>
673 |                 <p>价格合理、信守承诺、安全快捷 、高效。</p>
674 |               </span>
675 |             ),
676 |           },
677 |         },
678 |       },
679 |       {
680 |         name: 'block3',
681 |         className: 'content3-block',
682 |         md: 12,
683 |         xs: 24,
684 |         children: {
685 |           icon: {
686 |             className: 'content3-icon',
687 |             children:
688 |               'https://zos.alipayobjects.com/rmsportal/MNdlBNhmDBLuzqp.png',
689 |           },
690 |           textWrapper: { className: 'content3-text' },
691 |           title: {
692 |             className: 'content3-title',
693 |             children: (
694 |               <span>
695 |                 <span>
696 |                   <p>企业原则</p>
697 |                 </span>
698 |               </span>
699 |             ),
700 |           },
701 |           content: {
702 |             className: 'content3-content',
703 |             children: (
704 |               <span>
705 |                 <p>
706 |                   讲诚信、以信誉求发展。
707 |                   议、指导。前进中的望月将会在不断变化的各种客观条件下，把握市场动向，熟悉市场环境，完善的饰后服务，让客户真正感受到望月，热情、真诚、诚信的全方位服务。
708 |                 </p>
709 |               </span>
710 |             ),
711 |           },
712 |         },
713 |       },
714 |     ],
715 |   },
716 | };
717 | export const Feature50DataSource = {
718 |   wrapper: { className: 'home-page-wrapper content7-wrapper' },
719 |   page: { className: 'home-page content7' },
720 |   OverPack: {},
721 |   titleWrapper: {
722 |     className: 'title-wrapper',
723 |     children: [
724 |       {
725 |         name: 'title',
726 |         children: (
727 |           <span>
728 |             <p>新闻资讯</p>
729 |           </span>
730 |         ),
731 |         className: 'title-h1',
732 |       },
733 |     ],
734 |   },
735 |   tabsWrapper: { className: 'content7-tabs-wrapper' },
736 |   block: {
737 |     children: [
738 |       {
739 |         name: 'block0',
740 |         tag: {
741 |           className: 'content7-tag',
742 |           text: {
743 |             children: (
744 |               <span>
745 |                 <p>公司新闻</p>
746 |               </span>
747 |             ),
748 |             className: 'content7-tag-name',
749 |           },
750 |           icon: { children: 'mobile' },
751 |         },
752 |         content: {
753 |           className: 'content7-content',
754 |           text: {
755 |             className: 'content7-text',
756 |             md: 14,
757 |             xs: 24,
758 |             children: (
759 |               <span>
760 |                 <h3>技术</h3>
761 |                 <p>
762 |                   丰富的技术组件，简单组装即可快速搭建金融级应用，丰富的技术组件，简单组装即可快速搭建金融级应用。
763 |                 </p>
764 |                 <br />
765 |                 <h3>融合</h3>
766 |                 <p>
767 |                   解放业务及技术生产力，推动金融服务底层创新，推动金融服务底层创新。解放业务及技术生产力，推动金融服务底层创新。
768 |                 </p>
769 |                 <br />
770 |                 <h3>
771 |                   开放
772 |                 </h3>符合金融及要求的安全可靠、高可用、高性能的服务能力，符合金融及要求的安全可靠、高可用、高性能的服务能力。
773 |               </span>
774 |             ),
775 |           },
776 |           img: {
777 |             className: 'content7-img',
778 |             children:
779 |               'https://zos.alipayobjects.com/rmsportal/xBrUaDROgtFBRRL.png',
780 |             md: 10,
781 |             xs: 24,
782 |           },
783 |         },
784 |       },
785 |       {
786 |         name: 'block1',
787 |         tag: {
788 |           className: 'content7-tag',
789 |           icon: { children: 'tablet' },
790 |           text: {
791 |             className: 'content7-tag-name',
792 |             children: (
793 |               <span>
794 |                 <p>行业新闻</p>
795 |               </span>
796 |             ),
797 |           },
798 |         },
799 |         content: {
800 |           className: 'content7-content',
801 |           text: {
802 |             className: 'content7-text',
803 |             md: 14,
804 |             xs: 24,
805 |             children: (
806 |               <span>
807 |                 <h3>技术</h3>
808 |                 <p>
809 |                   丰富的技术组件，简单组装即可快速搭建金融级应用，丰富的技术组件，简单组装即可快速搭建金融级应用。
810 |                 </p>
811 |                 <br />
812 |                 <h3>融合</h3>
813 |                 <p>
814 |                   解放业务及技术生产力，推动金融服务底层创新，推动金融服务底层创新。解放业务及技术生产力，推动金融服务底层创新。
815 |                 </p>
816 |                 <br />
817 |                 <h3>
818 |                   开放
819 |                 </h3>符合金融及要求的安全可靠、高可用、高性能的服务能力，符合金融及要求的安全可靠、高可用、高性能的服务能力。
820 |               </span>
821 |             ),
822 |           },
823 |           img: {
824 |             className: 'content7-img',
825 |             md: 10,
826 |             xs: 24,
827 |             children:
828 |               'https://zos.alipayobjects.com/rmsportal/xBrUaDROgtFBRRL.png',
829 |           },
830 |         },
831 |       },
832 |     ],
833 |   },
834 | };
835 | export const Footer10DataSource = {
836 |   wrapper: { className: 'home-page-wrapper footer1-wrapper' },
837 |   OverPack: { className: 'footer1', playScale: 0.2 },
838 |   block: {
839 |     className: 'home-page',
840 |     gutter: 0,
841 |     children: [
842 |       {
843 |         name: 'block0',
844 |         xs: 24,
845 |         md: 6,
846 |         className: 'block',
847 |         title: {
848 |           className: 'logo',
849 |           children:
850 |             'https://zos.alipayobjects.com/rmsportal/qqaimmXZVSwAhpL.svg',
851 |         },
852 |         childWrapper: {
853 |           className: 'slogan',
854 |           children: [
855 |             {
856 |               name: 'content0',
857 |               children: 'Animation specification and components of Ant Design.',
858 |             },
859 |           ],
860 |         },
861 |       },
862 |       {
863 |         name: 'block1',
864 |         xs: 24,
865 |         md: 6,
866 |         className: 'block',
867 |         title: {
868 |           children: (
869 |             <span>
870 |               <p>回收项目</p>
871 |             </span>
872 |           ),
873 |         },
874 |         childWrapper: {
875 |           children: [
876 |             {
877 |               name: 'link0',
878 |               href: '#',
879 |               children: (
880 |                 <span>
881 |                   <span>
882 |                     <span>
883 |                       <p>电梯回收</p>
884 |                     </span>
885 |                   </span>
886 |                 </span>
887 |               ),
888 |             },
889 |             {
890 |               name: 'link1',
891 |               href: '#',
892 |               children: (
893 |                 <span>
894 |                   <p>铁铝铜回收</p>
895 |                 </span>
896 |               ),
897 |             },
898 |             {
899 |               name: 'link2',
900 |               href: '#',
901 |               children: (
902 |                 <span>
903 |                   <p>不锈钢回收</p>
904 |                 </span>
905 |               ),
906 |             },
907 |             {
908 |               name: 'link3',
909 |               href: '#',
910 |               children: (
911 |                 <span>
912 |                   <p>工程拆除</p>
913 |                 </span>
914 |               ),
915 |             },
916 |             {
917 |               name: 'link4',
918 |               href: '#',
919 |               children: (
920 |                 <span>
921 |                   <p>中央空调回收</p>
922 |                 </span>
923 |               ),
924 |             },
925 |           ],
926 |         },
927 |       },
928 |       {
929 |         name: 'block2',
930 |         xs: 24,
931 |         md: 6,
932 |         className: 'block',
933 |         title: { children: '关于' },
934 |         childWrapper: {
935 |           children: [
936 |             { href: '#', name: 'link0', children: 'FAQ' },
937 |             { href: '#', name: 'link1', children: '联系我们' },
938 |           ],
939 |         },
940 |       },
941 |       {
942 |         name: 'block3',
943 |         xs: 24,
944 |         md: 6,
945 |         className: 'block',
946 |         title: {
947 |           children: (
948 |             <span>
949 |               <span>
950 |                 <p>关注我们</p>
951 |               </span>
952 |             </span>
953 |           ),
954 |           className: 'k9h7k134cu-editor_css',
955 |         },
956 |         childWrapper: {
957 |           children: [
958 |             {
959 |               name: 'image~k9h7il8htc6',
960 |               className: 'k9h7irl6jgj-editor_css',
961 |               children:
962 |                 'https://zos.alipayobjects.com/rmsportal/HzvPfCGNCtvGrdk.png',
963 |             },
964 |           ],
965 |         },
966 |       },
967 |     ],
968 |   },
969 |   copyrightWrapper: { className: 'copyright-wrapper' },
970 |   copyrightPage: { className: 'home-page' },
971 |   copyright: {
972 |     className: 'copyright',
973 |     children: (
974 |       <span>
975 |         ©2018 by <a href="https://motion.ant.design">Ant Motion</a> All Rights
976 |         Reserved
977 |       </span>
978 |     ),
979 |   },
980 | };
981 | 


--------------------------------------------------------------------------------